:root { color-scheme: light; --cream:#f5f1e8; --ink:#263f38; --muted:#6d7569; --felt:#284f47; --coral:#ec806c; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:14px; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#e6e3d8; overscroll-behavior:none; }
button,select,input,summary { font:inherit; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { opacity:.5; cursor:default; }
button,select,summary { min-height:44px; }
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid #aa553d; outline-offset:4px; }
[hidden] { display:none!important; }
.app { width:100%; max-width:560px; height:100svh; min-height:660px; padding:max(12px,env(safe-area-inset-top)) 20px max(12px,env(safe-area-inset-bottom)); margin:auto; display:grid; grid-template-rows:72px 68px minmax(0,1fr) 97px; background:var(--cream); box-shadow:0 0 80px #203d3510; }
.masthead { display:flex; align-items:center; border-bottom:1px solid #d8d9ca; gap:13px; }
.wordmark { font-family:Georgia,"Times New Roman",serif; font-size:59px; letter-spacing:-4px; font-weight:500; line-height:1; text-decoration:none; color:var(--ink); display:flex; align-items:baseline; padding:0 3px 7px 0; }
.brand-bead { display:inline-block; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 33% 27%,#ffd2b0 3%,#ec886d 34%,#b65542 100%); box-shadow:0 2px 2px #67302222; margin-left:5px; position:relative; }
.brand-bead:after { content:""; position:absolute; width:3px; height:3px; border-radius:50%; background:#65382d; top:4px; left:4px; }
.header-note { font-size:10px; line-height:1.45; color:#5c6b60; letter-spacing:.025em; margin-top:5px; }
nav { display:flex; margin-left:auto; gap:1px; }
.icon-button { background:transparent; border:0; padding:11px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; }
.icon-button:hover { background:#e7e8da; }
svg { display:block; width:21px; height:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }
.sound-on { display:none; }
#sound[aria-pressed="true"] .sound-on { display:block; }
#sound[aria-pressed="true"] .sound-off { display:none; }
.table-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.eyebrow { font-size:9px; letter-spacing:.16em; margin:0 0 5px; font-weight:650; color:#52675a; }
.eyebrow span { color:#af7951; font-size:12px; padding-left:5px; }
h1 { font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:18px; letter-spacing:-.4px; margin:0; }
.handful { display:flex; align-items:center; flex-direction:column; gap:2px; padding-top:2px; }
.handful span { font-size:7px; letter-spacing:.14em; color:#626d60; }
.handful strong { font-size:21px; font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.mat-wrap { position:relative; min-height:0; isolation:isolate; border-radius:16px; background:var(--felt); box-shadow:inset 0 2px 12px #061d2760,0 3px 0 #dddccd,0 6px 12px #20372d17; }
#table { width:100%; height:100%; display:block; border-radius:16px; touch-action:none; cursor:grab; }
#table:active { cursor:grabbing; }
#table:focus-visible { outline:3px solid #b87550; outline-offset:3px; }
.mat-stitch { position:absolute; inset:8px; border:1px dashed #bfd0a82c; border-radius:10px; pointer-events:none; }
#dish-labels { position:absolute; inset:0; pointer-events:none; }
.dish-label { position:absolute; transform:translate(-50%,-50%); color:#f4eee2; font-size:10px; white-space:nowrap; letter-spacing:.04em; text-shadow:0 1px 2px #071c15; display:flex; align-items:center; gap:6px; }
.dish-label i { width:5px; height:5px; border-radius:50%; background:var(--dot); }
.dish-label .dish-count { opacity:.67; font-size:9px; }
.dish-label.done { color:#f9deb0; }
.table-note { position:absolute; left:0; right:0; top:45%; text-align:center; pointer-events:none; color:#e8ebd343; font:italic 17px Georgia,"Times New Roman",serif; letter-spacing:.3px; transition:opacity .6s; }
.paper { position:absolute; left:50%; top:51%; width:calc(100% - 36px); max-width:300px; transform:translate(-50%,-50%) rotate(-1deg); background:#f8f3e8; color:var(--ink); border:1px solid #fffcf6; border-radius:3px 14px 5px 15px; padding:22px 19px 16px; text-align:center; box-shadow:0 7px 0 #112e3410,0 10px 25px #071b2140; }
.paper:before { content:""; position:absolute; inset:6px; border:1px solid #98a48a2d; pointer-events:none; border-radius:1px 10px 3px 10px; }
.paper-kicker { display:block; font-size:8px; font-weight:650; letter-spacing:.13em; color:#667361; }
h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:31px; letter-spacing:-1px; line-height:1.12; margin:12px 0; }
.paper p { line-height:1.7; font-size:12px; margin:0 0 17px; color:#626c5e; }
.primary,.secondary { border:0; border-radius:8px; padding:13px 20px; min-height:46px; font-size:13px; font-weight:600; }
.primary { background:var(--ink); color:#fcf7eb; box-shadow:0 2px 0 #132923; }
.primary:hover { background:#365c4f; }
.primary:active { transform:translateY(1px); box-shadow:none; }
.primary span { padding-left:30px; font-size:17px; font-weight:400; }
.paper .primary { width:100%; }
.paper-foot { display:block; font-size:9px; color:#747b6d; margin-top:13px; }
.finished { top:50%; transform:translate(-50%,-50%); }
.finish-mark { display:block; font-size:34px; color:#af7951; margin-bottom:7px; }
.finished h2 { font-size:29px; }
.text-button { border:0; background:none; font-size:11px; text-decoration:underline; text-underline-offset:4px; padding:10px 14px; }
.toast { position:absolute; left:50%; bottom:25%; transform:translate(-50%,10px); border-radius:30px; padding:9px 14px; background:#f8f3e8; color:#34493c; font-size:11px; box-shadow:0 3px 12px #122d2733; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.table-footer { padding-top:9px; }
.progress-row { display:flex; align-items:center; justify-content:space-between; height:42px; }
.progress-label { display:flex; gap:10px; align-items:center; font-size:12px; white-space:nowrap; }
.progress-label strong { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.count-total { color:#5f6b5e; font-size:11px; }
.sorted-word { font-size:10px; margin-left:4px; color:#5e6e61; }
.tiny-beads { display:flex; gap:3px; }
.tiny-beads i { width:6px; height:6px; border-radius:50%; background:#ec806c; }
.tiny-beads i:nth-child(2) { background:#dbaa3f; }.tiny-beads i:nth-child(3) { background:#6dabbf; }.tiny-beads i:nth-child(4) { background:#b7a1cf; }
.reset-button { display:flex; align-items:center; gap:6px; background:none; border:0; padding:10px 0 10px 10px; font-size:10px; color:#59685b; }
.reset-button svg { width:15px; height:15px; }
progress { appearance:none; display:block; width:100%; height:3px; border:0; border-radius:3px; background:#dbdfce; overflow:hidden; }
progress::-webkit-progress-bar { background:#dbdfce; border-radius:3px; } progress::-webkit-progress-value { background:#729883; border-radius:3px; transition:width .35s; } progress::-moz-progress-bar { background:#729883; }
#instructions { font-size:10px; color:#63705f; text-align:center; letter-spacing:.015em; margin:13px 0 0; }
#instructions span { margin:0 4px; }
.more { display:block; margin:2px auto 0; min-height:44px; }
dialog { background:var(--cream); border:1px solid #fff9ed; color:var(--ink); border-radius:14px; width:calc(100% - 36px); max-width:400px; max-height:calc(100svh - 40px); padding:30px 25px 24px; box-shadow:0 20px 80px #12281d44; }
dialog::backdrop { background:#0b2923aa; backdrop-filter:blur(3px); }
dialog h2 { margin-top:15px; padding-right:8px; }
dialog p { font-size:13px; line-height:1.65; color:#5c695a; }
.dialog-close { position:absolute; right:5px; top:5px; font-size:28px; font-weight:300; }
.steps { padding:0; margin:22px 0; list-style:none; counter-reset:steps; }
.steps li { position:relative; padding-left:34px; margin-bottom:19px; counter-increment:steps; }
.steps li:before { content:counter(steps,decimal-leading-zero); position:absolute; left:0; top:2px; font:italic 18px Georgia,serif; color:#a67d54; }
.steps b { display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
.steps span { font-size:12px; line-height:1.6; color:#5b6a59; display:block; }
.keyboard-note { font-size:11px!important; padding:13px 0; border-top:1px solid #d9dece; }
.full { width:100%; margin-top:17px; }
.secondary { background:#e2e5d7; color:#334a3a; }
.dialog-actions { display:flex; gap:9px; margin-top:22px; }
.dialog-actions form,.dialog-actions>button { flex:1; }.dialog-actions button { width:100%; padding-inline:12px; }
summary { cursor:pointer; display:list-item; padding:13px 0; font-size:12px; }
details { border-top:1px solid #d9dece; } details label { display:block; font-size:12px; margin:12px 0 6px; }
.check-label { display:flex; gap:10px; align-items:center; min-height:44px; } input[type=checkbox] { width:22px; height:22px; accent-color:#355e4d; }
select { width:100%; border:1px solid #aab4a1; border-radius:6px; background:#fffcf6; color:var(--ink); padding:10px; font-size:13px; }
#place { width:100%; margin-top:14px; } #picker-status { font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.noscript { position:fixed; inset:35% 20px auto; background:var(--cream); padding:24px; border:2px solid var(--ink); text-align:center; }
@media (max-width:374px) { .app { padding-inline:15px; grid-template-rows:65px 65px minmax(0,1fr) 93px; } .header-note { font-size:9px; } .masthead { gap:10px; } h1 { font-size:17px; } .sorted-word { font-size:9px; margin-left:2px; } .progress-label { gap:7px; } }
@media (min-height:850px) and (orientation:portrait) { .app { grid-template-rows:85px 78px minmax(0,1fr) 103px; padding-top:max(18px,env(safe-area-inset-top)); } .paper { padding-block:25px 20px; } }
@media (orientation:landscape) and (max-height:600px) { .app { max-width:1020px; min-height:350px; padding:16px max(18px,env(safe-area-inset-right)) 16px max(18px,env(safe-area-inset-left)); grid-template-columns:238px minmax(0,1fr); grid-template-rows:80px 1fr 98px; column-gap:22px; } .masthead { grid-column:1; grid-row:1; gap:10px; } .wordmark { font-size:54px; } .header-note { display:none; } .table-heading { grid-column:1; grid-row:2; align-self:start; margin-top:26px; } h1 { max-width:160px; font-size:24px; line-height:1.25; } .handful { align-self:flex-start; margin-top:4px; } .mat-wrap { grid-column:2; grid-row:1 / 4; } .table-footer { grid-column:1; grid-row:3; } .sorted-word { display:none; } .paper { max-width:270px; padding:15px 18px 12px; } .paper h2 { font-size:27px; margin:9px 0; } .paper p { font-size:11px; line-height:1.5; margin-bottom:12px; } .paper-kicker { font-size:7px; } .paper-foot { font-size:8px; margin-top:9px; } .finish-mark { font-size:20px; margin:0; } .paper .text-button { min-height:44px; padding:7px; } .finished { width:208px; padding:12px 13px; } .finished h2 { font-size:25px; margin:8px 0; } .finished .paper-kicker { font-size:6px; white-space:nowrap; letter-spacing:.08em; } .finished .finish-mark { display:none; } .toast { bottom:auto; top:12px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }