:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#f3efe6;--ink:#1f2430;--muted:#4a5060;--field:#fff;--accent:#f2c14e;--accent-ink:#1f2430;--line:#1f2430;--skel-a:#e7e1d2;--skel-b:#f6f2e8}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#181a20;--ink:#ece8dc;--muted:#a9aebb;--field:#242732;--line:#ece8dc;--skel-a:#2a2d38;--skel-b:#383c4a}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:Patrick Hand,system-ui,sans-serif;font-size:20px;line-height:1.25}main{flex-direction:column;gap:24px;max-width:760px;margin:0 auto;padding:28px 20px 48px;display:flex}h1{margin:0;font-family:Caveat Brush,cursive;font-size:clamp(34px,6vw,52px);font-weight:400}.sub{color:var(--muted);margin:4px 0 0}.panel{flex-direction:column;gap:14px;display:flex}label{font-size:20px}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}input[type=text]{font:inherit;color:var(--ink);background:var(--field);border:3px solid var(--line);border-radius:10px;flex:1;min-width:0;min-height:44px;padding:8px 12px;font-size:20px}button{font:inherit;border:3px solid var(--line);background:var(--accent);min-height:44px;color:var(--accent-ink);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:10px;padding:0 20px;font-size:20px;display:inline-flex}button.ghost{color:var(--ink);background:0 0}button:disabled{opacity:.55;cursor:progress}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #2f6fb5}.status{color:var(--muted);min-height:24px;font-size:18px}.check{align-items:center;gap:10px;min-height:44px;display:flex}.check input{width:26px;height:26px;accent-color:var(--ink);margin:0}.stage{flex-direction:column;align-items:center;gap:10px;display:flex}.frame{aspect-ratio:5/7;width:100%;max-width:500px;position:relative}.card{color:#1f2430;background:#fffdf6;border:6px solid #1f2430;border-radius:26px;flex-direction:column;gap:2.4cqw;padding:3.6cqw;display:flex;position:absolute;inset:0;overflow:hidden;container-type:inline-size}.card.filtered{filter:grayscale()contrast(1.15)}.title{background:#fff;border:4px solid #1f2430;border-radius:14px;justify-content:space-between;align-items:center;gap:8px;min-height:11cqw;padding:1cqw 2.8cqw;display:flex}.name{overflow-wrap:anywhere;font-family:Caveat Brush,cursive;font-size:7.2cqw}.cost{flex:none;align-items:center;gap:.6cqw;display:flex}.sym{vertical-align:middle;border:2.5px solid #1f2430;border-radius:1em;justify-content:center;align-items:center;min-width:1.5em;height:1.5em;margin:0 .05em;padding:0 .2em;font-family:Caveat Brush,cursive;font-size:.8em;line-height:1;display:inline-flex}.cost .sym{font-size:4.6cqw}.art{background:#e9e4d2;border:4px solid #1f2430;border-radius:12px;flex:1;min-height:0;overflow:hidden}.art svg{width:100%;height:100%;display:block}.type{overflow-wrap:anywhere;background:#fff;border:4px solid #1f2430;border-radius:12px;padding:.8cqw 2.8cqw;font-size:5.2cqw}.rules{white-space:pre-line;background:#fff;border:4px solid #1f2430;border-radius:12px;min-height:22cqw;padding:2.4cqw 2.8cqw;font-size:4.8cqw;line-height:1.2;overflow:hidden}.ptrow{justify-content:flex-end;display:flex}.pt{background:#fff;border:4px solid #1f2430;border-radius:12px;padding:0 3.2cqw;font-family:Caveat Brush,cursive;font-size:6.4cqw}.spinner{border:3px solid;border-right-color:#0000;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin;display:none}button.busy .spinner{display:inline-block}.skel{background:var(--bg);border:6px solid var(--skel-a);border-radius:26px;flex-direction:column;gap:3%;padding:6%;display:flex;position:absolute;inset:0}.skel[hidden]{display:none}.skel i{background:linear-gradient(90deg,var(--skel-a) 25%,var(--skel-b) 50%,var(--skel-a) 75%);background-size:300% 100%;border-radius:12px;animation:1.4s ease-in-out infinite shimmer;display:block}.s1{height:9%}.s2{flex:1}.s3{height:7%}.s4{height:20%}.progress{left:0;right:0;top:env(safe-area-inset-top,0px);z-index:40;height:4px;display:none;position:fixed;overflow:hidden}.progress.on{display:block}.progress:before{content:"";background:var(--accent);width:35%;box-shadow:0 0 0 1px var(--line);animation:1.1s ease-in-out infinite slide;position:absolute;inset:0 auto 0 0}textarea{color:var(--ink);background:var(--field);border:3px solid var(--line);resize:vertical;border-radius:10px;width:100%;padding:8px 12px;font:14px ui-monospace,Menlo,monospace}.steps{margin:0;padding-left:24px}.fallback[hidden]{display:none}a{color:#2f6fb5}.foot{color:var(--muted);font-size:16px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media (prefers-reduced-motion:reduce){.spinner,.skel i,.progress:before{animation:none}.progress:before{opacity:.6;width:100%}}
