:root{--ink:#654d3f;--blue:#428cb4;--coral:#e9827b;--paper:#fff9ec;--line:#d5bb95;--wood:#e6c398}*{box-sizing:border-box}body{margin:0;background:#f6eee1;color:var(--ink);font-family:'Noto Sans JP','Yu Gothic',sans-serif}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;min-height:44px;border:2px solid #c4a78b;border-radius:16px;background:var(--paper);color:var(--ink);font-weight:800;padding:10px 18px}button:hover:not(:disabled){background:#fff0d4}button:disabled{cursor:default;opacity:.55}button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:4px solid #397ba9;outline-offset:3px}button.primary{background:var(--blue);border-color:#2d739d;color:#fffef4;box-shadow:0 3px 0 #356d8c}button.primary:hover:not(:disabled){background:#509cc4}button.accent{background:var(--coral);border-color:#c76762;color:#fffef4;box-shadow:0 3px 0 #b96560}button.accent:hover:not(:disabled){background:#f08d86}[hidden]{display:none!important}.stamp-page{max-width:1240px;margin:0 auto;padding:18px 22px 40px}.page-heading{text-align:center;margin:8px 0 20px}.page-heading h1{font-size:clamp(23px,3vw,33px);margin:0 0 8px}.page-heading p{margin:0;font-size:14px}#host{position:relative;background:var(--paper);border:1px solid #bc9d7e;border-radius:18px;overflow:hidden;box-shadow:0 14px 38px #68442620}.stamp-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;background:#fff6e6;border-bottom:2px dashed #d3b899}.stamp-top strong{font-size:16px;letter-spacing:.06em}.stamp-top nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.stamp-top button{font-size:12px;min-height:38px;padding:6px 10px;background:#fffaf1;border-color:#d6bea6}#base{background:#ead0af url('./assets/workbench.webp') center/cover}#cover{text-align:center;padding:24px 32px}#cover header{margin-bottom:20px}#cover small{font-size:12px}#cover h2{font-size:clamp(34px,5vw,52px);letter-spacing:.1em;color:#c86663;margin:8px 0;text-shadow:2px 3px #fffbf2}.cover-art{display:block;width:100%;max-height:460px;object-fit:cover;object-position:50% 57%;border:8px solid #fffaf0;border-radius:18px;box-shadow:0 6px 12px #6d513224}.cover-art+footer{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px}#start{font-size:22px;padding:13px 36px;min-width:320px;border-radius:32px}#cover-record{font-size:13px;margin:7px 0 0}#ready-note{font-size:11px}#play{position:relative}.work-area{display:grid;grid-template-columns:96px minmax(0,1fr) 220px;gap:21px;align-items:start;padding:26px 26px 14px}.page-rail{display:flex;flex-direction:column;gap:13px;align-items:stretch;margin-top:45px;text-align:center}.page-rail p{font-size:20px;line-height:1.5;margin:0 0 12px;padding:14px 6px;background:#fff6e6;border:2px dashed #c5ab8b;border-radius:5px;transform:rotate(-3deg)}.page-rail b{font-size:31px}.page-rail small{display:block;font-size:12px}.page-rail button{font-size:13px;padding:10px 6px;min-height:47px}.page-rail #album{background:#e5eef1;border-color:#91b3c3}.paper{position:relative;background:#edf7fa center/100% 100% no-repeat;border:4px solid #c7b39f;border-left:10px solid #e38883;border-radius:10px 5px 5px 10px;box-shadow:3px 4px 0 #c9ae87,7px 7px 9px #5b402830;padding:23px 24px 21px;min-width:0}.paper[data-page-type='0']{background-image:url('./assets/paper-sky.webp')}.paper[data-page-type='1']{background-image:url('./assets/paper-sunset.webp');border-left-color:#dda269}.paper[data-page-type='2']{background-image:url('./assets/paper-flowers.webp');border-left-color:#d88caa}.paper[data-page-type='3']{background-image:url('./assets/paper-forest.webp');border-left-color:#7aac88}.paper[data-page-type='4']{background-image:url('./assets/paper-violet.webp');border-left-color:#a694c4}.paper>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 19px;padding-bottom:9px;border-bottom:2px dashed #acaaa07a}.paper h2,.paper h3{font-size:21px;margin:0}.paper>header span{font-size:13px;white-space:nowrap}.stamp-board{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:13px 12px;isolation:isolate}.board-lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}.board-lines line{stroke:#bb918b;stroke-width:6;stroke-linecap:round;stroke-dasharray:2 10;opacity:.75}.stamp-cell{position:relative;aspect-ratio:1;min-width:0;min-height:0;border:2px solid #d7c5b2;border-radius:50%;background:#fffbf0e8;display:grid;place-items:center;padding:3px;color:#a08976;box-shadow:0 2px 0 #aa987328;transform:scale(calc(1 + var(--pop,0)));line-height:1.1;font-weight:800;font-size:17px}.stamp-cell:disabled{opacity:1}.stamp-cell img{width:100%;height:100%;object-fit:contain;pointer-events:none}.stamp-cell.filled{background:#fff9e482;border-color:#d4c1a7}.stamp-cell.milestone{border:3px dashed #d2a046;color:#926a35}.stamp-cell.next{border:3px solid #418eb3;background:#f9f5cb;cursor:pointer;animation:next-glow 1s ease-in-out infinite alternate;box-shadow:0 0 0 5px #5da4c733}.stamp-cell.next:hover:not(:disabled){background:#fff6ad}.stamp-cell.just-placed{z-index:2}#host[data-paused=true] .stamp-cell.next{animation-play-state:paused}.missing-sticker{font-size:9px;line-height:1.4;color:#6e624f;word-break:break-all}.paper>footer{display:flex;align-items:center;justify-content:space-between;gap:5px;padding-top:18px;font-size:10px}.paper>footer strong{color:#a25460;font-size:12px}.tool-tray{border:7px solid #d8b588;outline:2px solid #a9865e;border-radius:22px;background:#fff8e9ee;padding:15px 13px;text-align:center;box-shadow:4px 5px 12px #7c583827;margin-top:25px}.tool-tray h2{font-size:15px;margin:0 0 16px}#selected-img{width:130px;height:130px;max-width:100%;object-fit:contain;display:block;margin:0 auto}#selected-hint p,#empty-selection p{font-size:14px;line-height:1.8;margin:10px 0}#cancel{min-height:40px;padding:6px 23px;font-size:12px}#empty-selection>span{display:block;font-size:85px;color:#edb454;line-height:1.1;padding:17px 0}#choose{width:100%;font-size:15px;padding:10px 7px;min-height:55px;margin:15px 0 0}#page-note{font-size:11px;line-height:1.8;margin:11px 0}.guide{width:155px;max-width:100%;height:155px;object-fit:contain;mix-blend-mode:multiply;display:block;margin:3px auto 0}#feedback{font-size:14px;text-align:center;line-height:1.8;padding:0 15px 18px;margin:0;min-height:35px}#celebration{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%) rotate(-4deg);padding:20px 28px;border:5px solid #e89964;border-radius:50%;background:#fff0b4;color:#9d6c35;font-size:25px;font-weight:900;white-space:nowrap;box-shadow:0 10px 30px #895a3c33;pointer-events:none;z-index:4}#record-note{font-size:11px;text-align:center;line-height:1.7;padding:11px 18px;margin:0;background:#fff6e5;border-top:1px dashed #c5ac8e;min-height:36px}#record-note[data-warning=true]{background:#fff1ce;color:#8f532d}#result{padding:25px 30px 28px}#result>header{text-align:center;margin-bottom:22px}#result>header small{font-size:12px}#result>header h2{font-size:31px;letter-spacing:.1em;margin:8px 0}.album-spread{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:35px;max-width:950px;margin:0 auto;align-items:center}.album-message{text-align:center;padding:10px}.album-message img{width:220px;max-width:100%;height:230px;object-fit:contain;mix-blend-mode:multiply}.album-message h3{font-size:30px;color:#cc6b65;line-height:1.5;margin:12px 0}.album-message p{font-size:13px;margin:16px 0;line-height:1.8}.album-message b{font-size:35px;color:#4287ad;margin-right:9px}#album-paper .stamp-cell{font-size:14px}#page-shelf{display:flex;gap:12px;overflow-x:auto;overscroll-behavior:contain;padding:8px 4px 12px;margin:22px auto 15px;max-width:950px}#page-shelf button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:86px;background:#e3eef3;border:3px solid #b5bfae;padding:9px 10px;border-radius:10px;flex-shrink:0}#page-shelf button[data-page-type='1']{background:#f8e1bd}#page-shelf button[data-page-type='2']{background:#f4dbe7}#page-shelf button[data-page-type='3']{background:#dbeed7}#page-shelf button[data-page-type='4']{background:#e8def6}#page-shelf button[aria-pressed=true]{border-color:#d86d71;box-shadow:0 0 0 2px #dc8181}#page-shelf b{font-size:24px}#page-shelf span{font-size:11px}.album-actions{display:flex;justify-content:center;gap:18px}.album-actions button{min-width:190px;font-size:16px}.parent-note{font-size:14px;line-height:1.9;padding:24px 5px 0}.parent-note h2{font-size:20px}#modal{position:absolute;inset:0;background:#49351b8c;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}#modal>section{width:min(100%,580px);max-height:95%;overflow:auto;background:var(--paper);border:5px solid #dba7a0;border-radius:22px;padding:21px;color:var(--ink);box-shadow:0 15px 35px #49351b55}#modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:2px dashed #dac5a9;padding-bottom:12px;margin-bottom:16px}#modal h2{font-size:21px;margin:0}#modal p{line-height:1.9;font-size:16px}#dialog-content>button{display:block;width:100%;margin:10px 0}#dialog-content label{display:flex;align-items:center;gap:14px;padding:15px 0;font-weight:700}#dialog-content input[type=checkbox]{width:24px;height:24px;accent-color:#548db0}#dialog-content label:has(input[type=range]){display:flex;flex-wrap:wrap}#volume{width:100%;accent-color:#d88079}#storage-note{font-size:12px!important;color:#806c5b}#sticker-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}#sticker-grid button{min-width:44px;min-height:44px;aspect-ratio:1;border-radius:13px;border:2px solid #dbcec0;padding:6px;background:#fff}#sticker-grid img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.sticker-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:13px}.sticker-pager button{font-size:13px;min-height:44px;padding:8px 15px}#host:fullscreen,#host.faux-fullscreen{border:0;border-radius:0;width:100vw;height:100dvh;overflow:auto;background:var(--paper)}#host.faux-fullscreen{position:fixed;inset:0;z-index:10000}#host:fullscreen #base,#host.faux-fullscreen #base{min-height:calc(100dvh - 105px)}#host:fullscreen #modal,#host.faux-fullscreen #modal{position:fixed}@keyframes next-glow{to{box-shadow:0 0 0 8px #5da4c755}}
@media(max-width:900px){.stamp-page{padding:14px 12px 30px}.stamp-top{padding:11px 13px;gap:10px}.stamp-top strong{font-size:14px}.stamp-top button{font-size:11px;padding:5px 9px}#cover{padding:23px}.work-area{grid-template-columns:minmax(0,1fr) 190px;gap:18px;padding:18px}.page-rail{grid-column:1/-1;flex-direction:row;justify-content:center;align-items:center;gap:10px;margin-top:0}.page-rail p{font-size:15px;margin:0 8px 0 0;padding:6px 12px;white-space:nowrap}.page-rail b{font-size:23px}.page-rail small{font-size:10px}.page-rail button{font-size:12px;padding:9px;min-height:44px}.paper{padding:20px 17px 18px;border-left-width:8px}.paper>header{margin-bottom:16px}.paper h2,.paper h3{font-size:19px}.stamp-board{gap:10px 8px}.stamp-cell{font-size:15px}.tool-tray{margin-top:10px;padding:13px 10px;border-width:5px}.tool-tray h2{font-size:13px}#selected-img{width:120px;height:120px}#choose{font-size:13px}#selected-hint p,#empty-selection p{font-size:12px}.guide{height:130px;width:130px}.paper>footer{font-size:9px}.paper>footer strong{font-size:10px}.album-spread{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px}.album-message img{width:175px;height:185px}.album-message h3{font-size:25px}.album-message b{font-size:28px}#result{padding:23px}#result>header h2{font-size:27px}}
@media(max-width:560px){.stamp-page{padding:10px 7px 26px}.page-heading{margin:7px 0 12px}.page-heading p{font-size:11px}.stamp-top{justify-content:center;flex-wrap:wrap;gap:9px;padding:10px 5px}.stamp-top strong{width:100%;text-align:center}.stamp-top nav{justify-content:center;gap:6px}.stamp-top button{font-size:11px;min-height:38px;padding:5px 9px}#host{border-radius:12px}#cover{padding:23px 12px}#cover h2{font-size:34px;letter-spacing:.02em}.cover-art{height:310px;object-position:58% 50%;border-width:5px}.cover-art+footer{margin-top:20px}#start{min-width:0;width:100%;font-size:19px;padding:12px 15px}#cover-record{font-size:12px}#ready-note{font-size:10px}.work-area{display:flex;flex-direction:column;padding:13px 10px;gap:16px}.page-rail{width:100%;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;align-items:center}.page-rail p{grid-column:2;grid-row:1;margin:0;padding:5px;font-size:14px;transform:none}.page-rail #prev-page{grid-column:1;grid-row:1}.page-rail #next-page{grid-column:3;grid-row:1}.page-rail #album{grid-column:1/-1;grid-row:2;min-height:42px;font-size:12px}.paper{width:100%;padding:17px 11px 16px;border-width:3px;border-left-width:6px}.paper>header{margin-bottom:16px;gap:8px}.paper h2,.paper h3{font-size:18px}.paper>header span{font-size:11px}.stamp-board{gap:10px 6px}.stamp-cell{font-size:14px;border-width:1px;padding:2px;min-width:40px;min-height:40px}.stamp-cell.milestone{border-width:2px}.stamp-cell.next{border-width:2px;outline:2px solid #428cb4;outline-offset:1px}.paper>footer{padding-top:16px;font-size:9px}.paper>footer strong{font-size:9px}.tool-tray{width:100%;margin:0;padding:14px 12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;align-items:center}.tool-tray h2{grid-column:1/-1;margin-bottom:12px;font-size:14px}.tool-tray #selected-hint,.tool-tray #empty-selection{grid-column:1;grid-row:2/5}#selected-img{width:93px;height:93px}#selected-hint p,#empty-selection p{font-size:11px;margin:7px 0}#empty-selection>span{font-size:70px;padding:15px 0}#choose{grid-column:2;grid-row:2;margin:0;min-height:55px;font-size:13px;padding:8px 5px}#page-note{grid-column:2;grid-row:3;font-size:10px;margin:8px 0}.guide{grid-column:2;grid-row:4;width:92px;height:85px;margin:0 auto}#cancel{font-size:11px;min-height:40px;padding:7px 17px}#feedback{font-size:12px;padding:0 12px 15px;min-height:30px}#celebration{font-size:18px;white-space:normal;text-align:center;padding:15px 20px;width:230px;top:30%}#record-note{font-size:10px;padding:10px 13px}#result{padding:20px 10px}#result>header{margin-bottom:18px}#result>header h2{font-size:24px}#result>header small{font-size:10px}.album-spread{display:block}.album-message{display:grid;grid-template-columns:100px 1fr;gap:4px 12px;padding:20px 8px 0;align-items:center}.album-message img{width:100px;height:125px;grid-column:1;grid-row:1/4}.album-message h3{font-size:21px;margin:0;grid-column:2}.album-message p{font-size:11px;line-height:1.4;margin:7px 0;grid-column:2}.album-message p br{display:none}.album-message b{font-size:25px;margin-left:8px;margin-right:3px}#page-shelf{margin:16px 0 10px;gap:10px}#page-shelf button{min-width:72px;padding:8px 10px}#page-shelf b{font-size:21px}#page-shelf span{font-size:10px}.album-actions{gap:10px}.album-actions button{min-width:0;flex:1;font-size:13px;padding:10px 8px}#modal{padding:10px;align-items:flex-start;overflow:auto}#modal>section{margin:auto;max-height:calc(100% - 8px);padding:15px 10px;border-width:4px}#modal h2{font-size:16px}#modal p{font-size:14px}#modal header{gap:8px;margin-bottom:13px}#modal header button{font-size:12px;padding:8px 12px}#sticker-grid{gap:5px}#sticker-grid button{padding:3px;border-radius:9px;border-width:1px}.sticker-pager{font-size:12px;gap:8px;margin-top:13px}.sticker-pager button{font-size:12px;padding:8px 12px}.parent-note{padding:18px 7px 0;font-size:12px}.parent-note h2{font-size:17px}}
@media(max-height:500px) and (min-width:561px){.stamp-top{padding:7px 14px}.stamp-top button{min-height:34px}.work-area{max-width:950px;margin:0 auto;padding:15px 20px;grid-template-columns:minmax(0,1fr) 190px}.paper{max-width:530px;margin:auto}.page-rail{gap:12px}.page-rail p{padding:4px 10px}.tool-tray{margin-top:10px}#modal{position:fixed}#modal>section{max-height:92vh;padding:13px 18px}#modal header{margin-bottom:11px;padding-bottom:9px}#sticker-grid{gap:7px}#sticker-grid button{width:60px;height:60px;min-width:44px;justify-self:center}#cover{padding:20px 30px}.cover-art{max-height:320px}.album-spread{max-width:850px}.album-message img{width:145px;height:155px}}
@media(prefers-reduced-motion:reduce){.stamp-cell.next{animation:none;box-shadow:0 0 0 5px #5da4c755}.stamp-cell.just-placed{transform:none}}
.stamp-cell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.stamp-cell img{min-width:0;min-height:0;max-width:100%;max-height:100%}
@media(max-width:560px){.stamp-cell{min-width:44px;min-height:44px}}
@media(max-width:360px){.paper{padding-left:8px;padding-right:8px}}
.cover-art{max-width:690px;height:auto;max-height:none;margin:0 auto;object-fit:contain}
@media(min-width:901px) and (min-height:501px){.work-area{max-width:930px;margin:0 auto}}
@media(max-height:500px) and (min-width:561px){.cover-art{max-width:480px}}