:root{--cream: #f7f2ea;--taupe: #6f6256;--ink: #2e2a25;--sand: #e8dccb;--accent: #c2633a;--ok: #4f7a4a;--warn: #8a5513;--bad: #a33b2b;--radius: 12px;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--preview-h, 0px) + 8px);scroll-padding-bottom:calc(var(--dock-h, 0px) + 8px)}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}main{max-width:760px;margin:0 auto;padding:12px 16px calc(var(--dock-pad, 96px) + 24px)}main.loading{padding-top:30vh;text-align:center}main.error-page{text-align:center}main.error-page h1{margin-top:12vh}.brand-header{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 -16px 12px;padding:10px 16px 12px;border-bottom:1px solid var(--sand)}.brand-lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none}.brand-mono{width:40px;height:40px}.brand-word{width:auto;height:30px}.brand-tagline{margin:0;color:var(--taupe);font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;text-align:center}h1.design-title{text-align:center;margin:0 0 10px}.welcome{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:10px 14px;background:#fbf7f0;border:1px solid var(--sand);border-radius:var(--radius)}.welcome-faces{display:flex;flex:none}.welcome-faces img{width:44px;height:44px;border-radius:50%;border:2px solid var(--cream);object-fit:cover}.welcome-faces img+img{margin-left:-12px}.welcome p{margin:0;font-size:.9rem;line-height:1.4}.welcome strong{color:var(--taupe)}.site-footer{margin-top:36px;padding:20px 0 8px;border-top:1px solid var(--sand);text-align:center;color:var(--taupe);font-size:.85rem}.site-footer p{margin:6px 0 0}.site-footer a{color:var(--taupe)}.footer-mono{width:36px;height:36px;opacity:.85}@media(min-width:640px){.brand-word{height:36px}.brand-mono{width:48px;height:48px}.brand-tagline{font-size:.7rem}}h1{font-size:1.15rem;margin:2px 0 0}h2{font-size:.95rem;margin:20px 0 8px;color:var(--taupe);text-transform:uppercase;letter-spacing:.06em}h3{font-size:1rem;margin:0 0 6px}.frame{background:#fff;border-radius:4px;box-shadow:0 8px 24px #2e2a252e;line-height:0;position:sticky;top:0;bottom:calc(var(--dock-h, 0px) + 8px);z-index:1}.frame-natural,.frame-black,.frame-white{--wood: linear-gradient(135deg, #c9a476, #a97c4f 50%, #c39a6b);border:var(--frame-out, 0) solid transparent;border-image:var(--wood) 1;border-radius:0}.frame-black{--wood: linear-gradient(135deg, #3a3836, #141414 50%, #2b2a28)}.frame-white{--wood: linear-gradient(135deg, #fcfcfa, #e6e3dc 50%, #f6f5f1)}@media(max-width:480px){.frame{margin-left:-8px;margin-right:-8px}}.product-line{margin:10px 0 0}.steps{display:flex;gap:6px;margin:10px 0 0}.steps button{flex:1 1 0;min-width:0;padding:8px 6px;font-size:.85rem;white-space:nowrap}.steps button[aria-current=step]{background:var(--taupe);border-color:var(--taupe);color:#fff;font-weight:600}main.view-only .steps{display:none}h2[tabindex="-1"]:focus{outline:none}h2[tabindex="-1"]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.frame.examples:after{content:"Example";position:absolute;top:8px;left:8px;padding:2px 10px;border-radius:999px;background:#2e2a25b8;color:#fff;font:600 12px/20px system-ui,sans-serif;letter-spacing:.04em;line-height:20px}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chip{min-height:44px;padding:4px 12px;font-size:.9rem;background:var(--sand);border-color:var(--sand)}.poster{display:block;width:100%;touch-action:none;cursor:grab}.hint{color:var(--taupe);font-size:.9rem;margin:8px 0 0}.tools{display:flex;flex-wrap:wrap;gap:8px}button{font:inherit;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--sand);background:#fff;color:var(--ink);cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button[disabled]{opacity:.55;cursor:default}button.primary{background:var(--taupe);border-color:var(--taupe);color:#fff;font-weight:600;width:100%}.tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}.thumb{position:relative;aspect-ratio:1;padding:0;border-radius:10px;overflow:hidden}.thumb-wrap{position:relative}.thumb-wrap .thumb{width:100%}.remove{position:absolute;left:-10px;top:-10px;width:44px;height:44px;min-height:0;padding:0;border:0;background:none;color:#fff;font-size:1.1rem;line-height:1;isolation:isolate}.remove:before{content:"";position:absolute;inset:8px;border-radius:999px;background:#2e2a25cc;z-index:-1}.notice{padding-left:1.2em}.notice li{margin:.35em 0}.links a,.sheet a{color:var(--taupe)}.links a,.site-footer nav a{display:inline-block;padding:12px 4px}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.used{border:2px solid var(--accent)}.thumb.add{border:2px dashed var(--taupe);color:var(--taupe);font-size:.85rem;padding:4px}.badge{position:absolute;right:4px;top:4px;background:var(--taupe);color:#fff;border-radius:999px;min-width:22px;height:22px;padding:0 5px;line-height:22px;font-size:.75rem;font-variant-numeric:tabular-nums}.badge.bad{background:var(--bad)}.thumb.pending img{opacity:.55}.thumb-wrap .progress{position:absolute;left:8px;right:8px;bottom:6px;height:5px;border-radius:999px;background:#ffffffbf;overflow:hidden;pointer-events:none}.thumb-wrap .progress:after{content:"";display:block;width:var(--pct, 0%);height:100%;background:var(--accent)}@media(prefers-reduced-motion:no-preference){.thumb-wrap .progress:after{transition:width .2s ease-out}}.thumb.lost{border:2px dashed var(--bad);color:var(--bad);font-size:.85rem;font-weight:600}.thumb.lost .missing{color:var(--bad)}.styles{display:flex;flex-wrap:wrap;gap:8px}.styles.fonts{align-items:center;margin-top:10px}.styles.fonts[hidden]{display:none}.fonts-label{margin-right:2px}.styles .on,.chip.on{background:var(--taupe);color:#fff;border-color:var(--taupe)}.row{display:block;margin:8px 0}input.word,input.caption{display:block;width:100%;margin-top:4px;font:inherit;font-size:1.05rem;padding:10px 12px;border-radius:10px;border:1px solid var(--sand);background:#fff}input.word{text-transform:uppercase;letter-spacing:.08em}.counter{color:var(--taupe)}.counter[data-bad=true]{color:var(--bad)}.dock{position:fixed;left:0;right:0;bottom:0;padding:8px 16px calc(10px + env(safe-area-inset-bottom));background:#f7f2eaf5;border-top:1px solid var(--sand);box-shadow:0 -6px 18px #2e2a2514;z-index:2}.dock>*{max-width:728px;margin-left:auto;margin-right:auto}.dock-tools:empty{display:none}.dock-tools{margin-bottom:6px}.letter-row{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}.letter-btn{flex:none;min-width:44px;padding:0 10px;font-weight:700;font-size:1.05rem;border-radius:10px;position:relative}.letter-btn.on{background:var(--taupe);border-color:var(--taupe);color:#fff}.letter-btn.warn:after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--warn)}.tool-note{margin:4px 0;font-size:.9rem}.pick-row{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;margin-bottom:4px;scrollbar-width:none}.pick-thumb{flex:none;width:56px;height:56px;min-height:0;padding:0;border-radius:10px;border:2px solid transparent;overflow:hidden;background:#fff}.pick-thumb img{display:block;width:100%;height:100%;object-fit:cover}.pick-thumb.on{border-color:var(--accent)}.pick-thumb.pending img{opacity:.55}.tool-line{display:flex;align-items:center;gap:10px}.tool-line .tool-note{flex:1}.dock-tools .dpi:empty{display:none}.dock-tools .dpi{margin:0 0 6px}.dock .tools{flex-wrap:nowrap;gap:6px}.dock .tools button{flex:1 1 auto;min-width:0;padding:8px 6px;font-size:.92rem;white-space:nowrap}.save-state{margin:0 auto 6px;font-size:.8rem;line-height:1.2;color:var(--taupe);text-align:center}.save-state[data-kind=offline],.save-state[data-kind=error],.save-state[data-kind=conflict]{color:var(--warn);font-weight:600}.approve-bar button{display:block;margin:0 auto}.approve-bar .dpi{margin:6px 0 0}.toast-card{position:fixed;left:12px;right:12px;bottom:calc(var(--dock-h, 0px) + 10px);max-width:560px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:8px 46px 8px 14px;border-radius:var(--radius);background:var(--ink);color:#fff;box-shadow:0 8px 24px #2e2a254d;z-index:5}.toast-card[data-kind=warn],.toast-card[data-kind=error]{background:#fff;color:var(--ink);border-left:5px solid var(--warn)}.toast-card[data-kind=error]{border-left-color:var(--bad)}body:has(.sheet) .toast-card{bottom:auto;top:calc(10px + env(safe-area-inset-top))}.toast-msg{flex:1 1 200px;margin:0;font-size:.92rem}.toast-card button{background:none;border:0;color:inherit;padding:8px 10px}.toast-action{font-weight:700;text-decoration:underline}.toast-close{position:absolute;top:0;right:0;height:44px;width:44px;padding:0;font-size:1.3rem;line-height:1}.banner:not(:empty){background:#fff;border-left:4px solid var(--ok);padding:10px 12px;border-radius:8px;margin-bottom:12px}.banner button{margin-top:8px;display:block}.dpi{font-size:.9rem;margin:4px 0 8px}.dpi-soft{color:var(--taupe)}.dpi-amber{color:var(--warn)}.dpi-red{color:var(--bad);font-weight:600}.faces{font-size:.9rem;margin:4px 0 8px;color:var(--warn)}.faces .face-line{display:block}.faces .face-line+.face-line{margin-top:4px}.sheet .faces-ack{margin:6px 0 10px}.small{font-size:.85rem;color:var(--taupe)}.sheet{position:fixed;inset:auto 0 0;max-height:92vh;overflow:auto;background:var(--cream);padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;box-shadow:0 -10px 40px #2e2a254d;z-index:4}.sheet>*{max-width:728px;margin-left:auto;margin-right:auto}.sheet:focus{outline:none}.sheet-backdrop{position:fixed;inset:0;background:#2e2a2573;z-index:3}.proof-wall{padding:16px 12px;background:#ebe3d6;border-radius:8px;line-height:0}.sheet-preview{width:100%;border-radius:4px;box-shadow:0 10px 30px #2e2a2547}.sheet .tools{margin:10px 0}.sheet-done{margin-top:4px}input.link-field{display:block;width:100%;font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--sand)}.crop-wrap{display:flex;justify-content:center;line-height:0}.crop-canvas{display:block;max-width:100%;background:#fff;border-radius:6px;box-shadow:0 4px 16px #2e2a252e;touch-action:none;cursor:grab}.retry{max-width:320px;margin:8px auto 0}.missing{color:var(--taupe)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}button.linklike{min-height:44px;padding:6px 0;border:0;background:none;color:var(--taupe);text-decoration:underline;font-size:.85rem}.link-row{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}main.view-only section,main.view-only .hint,main.view-only .link-row{display:none}main.start-page .start-form{margin-top:8px}main.start-page .start-form button.primary{margin-top:14px}main.start-page .start-form .small{margin:-2px 0 10px}.start-note{margin:14px 0 0;padding:10px 12px;border-radius:8px;background:#fff;border-left:4px solid var(--taupe)}.start-note.start-warn{border-left-color:var(--warn)}.start-designs{list-style:none;padding:0;margin:8px 0}.start-design{display:block;margin:8px 0;padding:12px 14px;border-radius:var(--radius);background:#fff;border:1px solid var(--sand);color:var(--ink);text-decoration:none}main.welcome-page{padding-bottom:24px}.welcome-title{margin:20px 0 8px;font-size:1.15rem;color:var(--ink)}.welcome-steps{margin:0 0 20px;padding-left:1.4em}.welcome-steps li{margin:0 0 12px}.welcome-steps strong,.welcome-steps span{display:block}.welcome-steps span{color:var(--taupe)}a.welcome-cta{display:block;padding:14px 16px;border-radius:var(--radius);background:var(--taupe);color:#fff;font-weight:600;text-align:center;text-decoration:none}a.welcome-cta:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.welcome-note{margin:14px 0 0;color:var(--taupe);font-size:.95rem}.welcome-note a{color:var(--ink)}