:root{--bg:#fdf5e4;--surface:#fffaf0;--ink:#3a2418;--muted:#7a5c48;--red:#b3242b;--red-dark:#8f1a20;--line:#e6d3ad;--gold:#c9972b}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#2a1c16;--surface:#36251d;--ink:#f7ead2;--muted:#cdb594;--red:#d8454b;--red-dark:#b3242b;--line:#5a4030}}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;font:16px/1.45 Georgia,Times New Roman,serif}.app{gap:16px;max-width:1000px;margin:0 auto;padding:16px;display:grid}.head{text-align:center}.head h1{color:var(--red);margin:0 0 4px;font-size:clamp(22px,5vw,34px)}.head p{max-width:56ch;color:var(--muted);margin:0 auto}.stage{justify-items:center;gap:8px;display:grid}.egg{filter:drop-shadow(0 8px 14px #5a321440);width:min(100%,340px)}.egg svg{touch-action:manipulation;width:100%;height:auto;display:block}.egg path[data-zone]{cursor:pointer;outline:none}.egg path[data-zone]:hover{stroke-width:2.4px}.egg path[data-zone]:focus-visible{stroke:var(--red);stroke-width:3px}.hint{text-align:center;min-height:3em;color:var(--muted);max-width:34ch;margin:0}.hint b{color:var(--ink)}.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;gap:16px;padding:16px;display:grid}.patterns{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;display:grid}.pattern{background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;border:2px solid #0000;border-radius:12px;justify-items:center;gap:2px;padding:6px 2px 4px;font-size:12px;display:grid}.pattern svg{width:100%;max-width:54px;height:auto}.pattern[aria-checked=true]{border-color:var(--red)}.palette{grid-template-columns:repeat(auto-fill,44px);justify-content:space-between;gap:8px;display:grid}.swatch{aspect-ratio:1;border:3px solid var(--surface);width:44px;height:44px;box-shadow:0 0 0 1px var(--line);cursor:pointer;color:var(--muted);border-radius:50%;padding:0;font-size:18px}.swatch[aria-checked=true]{box-shadow:0 0 0 3px var(--red)}.tools{flex-wrap:wrap;gap:8px;display:flex}.btn{border:1px solid var(--line);background:var(--bg);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;border-radius:12px;padding:8px 16px}.btn:hover:not(:disabled){border-color:var(--red)}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.swatch:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.pattern:focus-visible{outline:3px solid var(--gold);outline-offset:2px}input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.btn-primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}.btn-primary:hover:not(:disabled){background:var(--red-dark)}.btn-icon{min-width:44px;padding:8px}dialog{border:2px solid var(--gold);background:var(--surface);width:min(94vw,520px);max-height:96vh;color:var(--ink);border-radius:16px;padding:16px;overflow:auto}dialog::backdrop{background:#1e0f0899}.card-head{justify-content:space-between;align-items:center;margin:0 0 8px;display:flex}.card-head h2{margin:0;font-size:20px}.card-canvas{border-radius:8px;width:100%;max-width:360px;height:auto;margin:0 auto 12px;display:block;box-shadow:0 4px 16px #3c1e0a4d}.sign{color:var(--muted);gap:4px;margin-bottom:12px;font-size:14px;display:grid}.sign input{border:1px solid var(--line);min-height:44px;font:inherit;background:var(--bg);color:var(--ink);border-radius:10px;padding:8px 12px;font-size:16px}.card-actions,.social{flex-wrap:wrap;gap:8px;display:flex}.note{min-height:1.5em;color:var(--muted);margin:8px 0;font-size:14px}.social a{color:var(--red);min-height:44px;padding:10px 4px}.tabs{background:var(--surface);border:1px solid var(--line);border-radius:14px;gap:4px;padding:4px;display:flex}.tab{min-height:44px;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:1;font-weight:700}.tab[aria-selected=true]{background:var(--red);color:#fff}.tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}[hidden]{display:none!important}.tools-group{gap:16px;display:grid}.sub{color:var(--muted);margin:0 0 8px;font-size:14px;font-weight:700}.egg-build{touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.egg-build:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:12px}.egg-build [data-item],.egg-build [data-rotate]{cursor:grab}.sel-dyn{gap:10px;display:grid}.rot{align-items:center;gap:8px;font-size:14px;display:flex}.rot label{color:var(--muted)}.rot input[type=range]{min-height:44px;accent-color:var(--red);flex:1}.rot input[type=number]{border:1px solid var(--line);background:var(--bg);width:64px;min-height:44px;color:var(--ink);font:inherit;border-radius:10px;padding:4px 8px;font-size:16px}.chips{flex-wrap:wrap;gap:6px;margin-bottom:8px;display:flex}.chip{border:1px solid var(--line);background:var(--bg);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;border-radius:22px;padding:6px 12px;font-size:14px}.chip[aria-selected=true]{background:var(--red);border-color:var(--red);color:#fff}.chip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.stamp:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.stamps{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;display:grid}.stamp{border:1px solid var(--line);background:var(--bg);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;border-radius:12px;justify-items:center;gap:2px;padding:6px 4px;font-size:12px;display:grid}.stamp:hover{border-color:var(--red)}.stamp svg{width:100%;height:64px}.sel{border:2px dashed #1f6feb;border-radius:12px;gap:10px;padding:12px;display:grid}.sel h3{margin:0;font-size:16px}.sel-actions{flex-wrap:wrap;gap:6px;display:flex}.sel-actions .btn{padding:6px 12px;font-size:14px}.layer{gap:4px;display:grid}.layer-name{color:var(--muted);font-size:13px}@media (min-width:760px){.tabs{grid-column:1/-1}.app{grid-template-columns:minmax(280px,1fr) 1fr;align-items:start}.head{grid-column:1/-1}.egg{width:min(100%,400px)}}@media (max-width:759px){.mode-build .stage{z-index:5;background:var(--bg);margin:0 -16px;padding:8px 0;position:sticky;top:0;box-shadow:0 6px 10px -8px #3c1e0a66}.mode-build .egg-build{width:200px}.mode-build .hint{min-height:2.8em;padding:0 16px;font-size:14px}}
