:root{--cream:#f6efe4;--paper:#faf4ebeb;--glass:#faf4ebcc;--espresso:#3a281d;--mocha:#6b4a35;--caramel:#c3884f;--caramel-d:#a86d38;--line:#3a281d24;--serif:"Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;--sans:"Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;--hand:"Klee One", "Hiragino Maru Gothic ProN", cursive;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}[hidden]{display:none!important}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--espresso);font-family:var(--sans);background:#2a1d15;margin:0;overflow:hidden}body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}#gl{touch-action:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}input,textarea{font:inherit;color:inherit;-webkit-user-select:text;user-select:text}svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.screen{pointer-events:none;display:none;position:fixed;inset:0}.screen.show{display:block}.screen>*{pointer-events:auto}#loading{color:#f2e6d6;text-align:center;z-index:30;background:radial-gradient(circle at 50% 40%,#4a3122,#241810 70%);padding-top:36vh}#loading p{letter-spacing:.12em;opacity:.85;font-size:14px}#loading .bar{background:#ffffff26;border-radius:2px;width:160px;height:2px;margin:14px auto;overflow:hidden}#loading .bar b{background:var(--caramel);width:0;height:100%;transition:width .2s;display:block}.steam{justify-content:center;gap:10px;height:46px;display:flex}.steam i{background:linear-gradient(#0000,#ffffff80,#0000);border-radius:4px;width:4px;height:40px;animation:2.2s ease-in-out infinite steam}.steam i:nth-child(2){animation-delay:.4s}.steam i:nth-child(3){animation-delay:.8s}@keyframes steam{0%{opacity:0;transform:translateY(10px)scaleY(.6)}50%{opacity:1}to{opacity:0;transform:translateY(-14px)scaleY(1)}}#topbar{padding:calc(10px + var(--safe-t)) 12px 10px;z-index:20;pointer-events:none;align-items:center;gap:8px;display:flex;position:fixed;top:0;left:0;right:0}#topbar>*{pointer-events:auto}.spacer{flex:1}.icon-btn,.pill-btn,.chip{background:var(--glass);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 4px 14px #140a042e}.icon-btn{border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.pill-btn{border-radius:19px;align-items:center;gap:6px;height:38px;padding:0 14px;font-size:13px;display:flex}#btn-bgm .note{font-size:15px}#btn-bgm[aria-pressed=false]{opacity:.7}#btn-bgm[aria-pressed=false] .note{text-decoration:line-through}#title{display:none}#title.show{justify-content:center;display:flex}#title:before{content:"";pointer-events:none;background:linear-gradient(#1e120abf 0%,#1e120a00 30% 62%,#1e120ab3 100%);position:absolute;inset:0}.title-card{text-align:center;color:#fbf3e7;text-shadow:0 2px 18px #140a0499;width:100%;max-width:440px;padding:calc(64px + var(--safe-t)) 20px calc(4vh + var(--safe-b));pointer-events:none;flex-direction:column;justify-content:space-between;align-items:center;display:flex;position:relative}.title-card>*{pointer-events:auto}@media (aspect-ratio>=5/4){#title.show{justify-content:flex-start}#title:before{background:linear-gradient(90deg,#1e120ad1 0%,#1e120a73 32%,#1e120a00 55%)}.title-card{justify-content:center;gap:36px;margin-left:6vw}}.kicker{font-family:var(--serif);letter-spacing:.3em;text-transform:uppercase;opacity:.8;margin:0;font-size:12px}.logo{font-family:var(--serif);letter-spacing:.01em;margin:6px 0 0;font-size:clamp(52px,13vw,84px);font-weight:600;line-height:1}.logo em{color:#f0c897;font-style:italic}.sub{letter-spacing:.4em;opacity:.9;margin:6px 0 0;font-size:13px}.tagline{font-family:var(--hand);margin:14px 0 22px;font-size:18px}.menu{flex-direction:column;align-items:center;gap:10px;display:flex}.menu .btn{width:min(280px,80vw)}.lab-link{color:#e9d8c2;letter-spacing:.15em;opacity:.8;margin-top:16px;font-size:12px;text-decoration:none;display:inline-block}.btn{background:var(--paper);height:50px;color:var(--espresso);letter-spacing:.08em;border:1px solid var(--line);text-shadow:none;border-radius:25px;padding:0 24px;font-weight:500;transition:transform .12s;box-shadow:0 6px 18px #140a0438}.btn:active{transform:scale(.97)}.btn.primary{background:linear-gradient(180deg, #cf9561, var(--caramel-d));color:#fffaf3;border-color:#0000}.btn.small{height:42px;padding:0 20px}.btn.ghost{box-shadow:none;border-color:var(--line);background:0 0}.draw-top{top:calc(62px + var(--safe-t));gap:8px;display:flex;position:absolute;left:12px;right:12px}.chip{border-radius:19px;align-items:center;gap:5px;height:38px;padding:0 12px;font-size:13px;display:flex}.chip svg{width:18px;height:18px}.chip:disabled{opacity:.45}.hint{top:calc(108px + var(--safe-t));text-align:center;color:#fbf3e7;text-shadow:0 1px 8px #000000b3;width:min(560px,100vw - 32px);margin:0;font-size:12.5px;line-height:1.55;transition:opacity .6s;position:absolute;left:50%;transform:translate(-50%);pointer-events:none!important}.hint.fade{opacity:0}.dock{left:50%;bottom:calc(10px + var(--safe-b));background:var(--paper);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);border-radius:26px;width:min(560px,100vw - 20px);padding:10px 12px 8px;position:absolute;transform:translate(-50%);box-shadow:0 10px 30px #140a044d}.dock-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;padding:0 2px 8px;display:flex}.sizes{gap:4px;display:flex}.sizes button{min-width:50px;height:40px;color:var(--mocha);border-radius:20px;justify-content:center;align-items:center;gap:6px;font-size:12px;display:flex}.sizes button i{width:var(--d);height:var(--d);background:currentColor;border-radius:50%}.sizes button.on{background:var(--espresso);color:#fbf3e7}.tools{grid-template-columns:repeat(3,1fr);gap:4px;padding-top:8px;display:grid}.tools button{height:58px;color:var(--mocha);border-radius:16px;flex-direction:column;align-items:center;gap:2px;font-size:12px;display:flex}.tools button svg{stroke-width:1.6px;width:28px;height:28px}.tools button.on{color:var(--espresso);background:#c3884f2e;font-weight:700}.text-panel{align-items:center;gap:8px;padding:0 2px 10px;display:flex}.text-panel[hidden]{display:none}.text-panel input{border:1px solid var(--line);min-width:0;height:40px;font-family:var(--hand);background:#fffaf3;border-radius:12px;flex:1;padding:0 12px;font-size:17px}.seg{background:#3a281d14;border-radius:20px;padding:3px;display:inline-flex}.seg button{white-space:nowrap;border-radius:17px;height:34px;padding:0 12px;font-size:12px}.seg button.on{background:#fffaf3;font-weight:700;box-shadow:0 1px 4px #00000026}.sheet{left:50%;bottom:calc(14px + var(--safe-b));z-index:25;background:var(--paper);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);border-radius:24px;width:min(520px,100vw - 20px);padding:16px 16px 14px;position:fixed;transform:translate(-50%);box-shadow:0 14px 40px #140a0466}.sheet[hidden]{display:none}.sheet h3{font-family:var(--serif);margin:4px 4px 8px;font-size:18px;font-weight:600}.swatches{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.swatches button{border:1px solid var(--line);border-radius:19px;align-items:center;gap:6px;height:38px;padding:0 12px 0 6px;font-size:12.5px;display:flex}.swatches button i{border-radius:50%;width:24px;height:24px;box-shadow:inset 0 0 0 1px #00000026}.swatches button.on{border-color:var(--espresso);background:#fffaf3;font-weight:700}.sheet .btn{margin:6px auto 0;display:block}.finish-views{top:calc(64px + var(--safe-t));background:var(--glass);-webkit-backdrop-filter:blur(10px);position:absolute;left:50%;transform:translate(-50%)}.card-panel{left:50%;bottom:calc(10px + var(--safe-b));background:var(--paper);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);border-radius:26px;width:min(440px,100vw - 20px);padding:14px 16px 12px;position:absolute;transform:translate(-50%);box-shadow:0 10px 30px #140a0452}.card-panel h2{text-align:center;font-family:var(--serif);letter-spacing:.04em;margin:0 0 8px;font-size:22px;font-weight:600}.card-panel label{color:var(--mocha);grid-template-columns:64px 1fr;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;display:grid}.card-panel input,.card-panel textarea{border:1px solid var(--line);width:100%;font-family:var(--hand);resize:none;background:#fffaf3;border-radius:12px;padding:7px 10px;font-size:16px}.row{gap:8px;margin-top:8px;display:flex}.row .btn{flex:1;padding:0 10px}.card-panel .btn.ghost{width:100%;height:40px;margin-top:8px}#photo{background:radial-gradient(circle at 50% 40%,#3a261899,#180f09e6)}#photo.show{justify-content:center;align-items:center;display:flex}.photo-wrap{padding:calc(60px + var(--safe-t)) 16px calc(16px + var(--safe-b));flex-direction:column;align-items:center;gap:22px;display:flex}.photo-wrap img{aspect-ratio:1;border-radius:24px;width:min(88vw,64vh,560px);animation:.5s ease-out photo-in;box-shadow:0 20px 50px #00000080}.photo-wrap .row{gap:12px;width:min(88vw,560px)}@keyframes photo-in{0%{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}.page{-webkit-backdrop-filter:blur(6px);pointer-events:auto;background:#2418108c;overflow-y:auto}.page-inner{max-width:640px;padding:calc(72px + var(--safe-t)) 16px calc(30px + var(--safe-b));margin:0 auto}.page h2{color:#fbf3e7;font-family:var(--serif);text-align:center;margin:0 0 16px;font-size:32px;font-weight:600}.muted{color:#e9dccb;text-align:center;font-size:14px}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.grid button{aspect-ratio:4/5;background:var(--paper);border-radius:14px;padding:0;overflow:hidden;box-shadow:0 6px 16px #0000004d}.grid img{object-fit:cover;width:100%;height:100%;display:block}.page .btn.back,.page .btn.primary{width:min(280px,80vw);margin:18px auto 0;display:block}.steps{counter-reset:s;gap:10px;margin:0;padding:0;list-style:none;display:grid}.steps li{counter-increment:s;background:var(--paper);border-radius:18px;padding:14px 16px 12px 56px;position:relative}.steps li:before{content:counter(s);background:var(--caramel);color:#fff;width:28px;height:28px;font-family:var(--serif);border-radius:50%;place-items:center;font-weight:600;display:grid;position:absolute;top:13px;left:16px}.steps b{font-size:15px}.steps p{color:var(--mocha);margin:4px 0 0;font-size:13.5px;line-height:1.7}.viewer{z-index:40;padding:calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));background:#18100ae0;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:fixed;inset:0}.viewer[hidden]{display:none}.viewer img{border-radius:14px;max-width:min(440px,100%);max-height:64vh;box-shadow:0 10px 40px #00000080}.viewer .row{width:min(440px,100%)}.toast{left:50%;top:calc(66px + var(--safe-t));background:var(--espresso);color:#fbf3e7;opacity:0;pointer-events:none;z-index:50;white-space:nowrap;border-radius:20px;padding:10px 18px;font-size:13px;transition:opacity .3s,transform .3s;position:fixed;transform:translate(-50%,-10px)}.toast.show{opacity:1;transform:translate(-50%)}@media (aspect-ratio>=5/4) and (width>=820px){.card-panel{width:380px;inset:50% 28px auto auto;transform:translateY(-50%)}}@media (width>=900px){.dock{bottom:18px}.hint{font-size:13.5px}}.size-slider{min-width:0;color:var(--mocha);flex:1;align-items:center;gap:10px;padding:0 4px;display:flex}.size-slider .dot{background:currentColor;border-radius:50%;flex:none}.size-slider .dot.small{width:6px;height:6px}.size-slider .dot.big{width:18px;height:18px}#size-slider{appearance:none;touch-action:none;background:0 0;flex:1;min-width:0;height:40px}#size-slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--espresso) calc(var(--k,.45) * 100%), #3a281d26 0);border-radius:3px;height:6px}#size-slider::-moz-range-track{background:#3a281d26;border-radius:3px;height:6px}#size-slider::-moz-range-progress{background:var(--espresso);border-radius:3px;height:6px}#size-slider::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--espresso);background:#fffaf3;border-radius:50%;width:28px;height:28px;margin-top:-11px;box-shadow:0 2px 6px #00000040}#size-slider::-moz-range-thumb{border:2px solid var(--espresso);background:#fffaf3;border-radius:50%;width:26px;height:26px}.cross-link{text-align:center;color:var(--mocha);border-radius:10px;margin-top:10px;padding:6px;font-size:12.5px;text-decoration:none;display:block}.cross-link:hover{background:#3a281d0f}
