*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,-apple-system,sans-serif;background:#101b29;color:#f7eee2}button,select{font:inherit;min-height:44px;border:1px solid #ffffff22;border-radius:12px;padding:9px 14px;cursor:pointer;background:#263546;color:#f7eee2}button:hover{filter:brightness(1.15)}button:focus-visible,select:focus-visible{outline:3px solid var(--accent)}button:disabled{opacity:.4}button.primary{background:var(--accent);color:#17212d;font-weight:800}button.active{border:2px solid var(--accent);background:#344a53}button.icon{min-width:44px;padding:8px}a{color:#ecdfc9}#app{max-width:1080px;margin:auto;height:100svh;display:flex;flex-direction:column;padding:8px 52px 8px 10px;gap:7px}header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-shrink:0}header strong{font-size:13px;letter-spacing:.14em}header nav{display:flex;gap:5px}select{max-width:106px;padding:7px}#stage{position:relative;flex:1;min-height:140px;border:1px solid #ffffff12;overflow:hidden;border-radius:20px;background:#182b39}canvas{width:100%;height:100%;display:block;touch-action:none}#side{flex-shrink:0;display:flex;flex-direction:column;gap:6px}#headline{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;min-height:24px}#status{color:var(--accent);font-weight:700}#hint{margin:0;font-size:13px;line-height:1.5;color:#d4dfdd;min-height:20px}#controls{display:flex;flex-wrap:wrap;gap:5px;max-height:136px;overflow:auto}#controls button{flex:1 1 80px;font-size:12px;padding:7px 9px}#tools{display:flex;gap:5px}#tools button{flex:1;font-size:12px;padding:8px 6px}.veil{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(0deg,#101b29fa,#101b29a8 65%,#101b2960);padding:20px;gap:13px;text-align:center;overflow:auto}.veil[hidden], [hidden]{display:none!important}.veil h1{font-family:Georgia,serif;font-size:clamp(27px,7vw,44px);line-height:1.05;margin:0;letter-spacing:-.03em}.veil h1 small{display:block;font-family:system-ui;font-size:16px;letter-spacing:0;margin-top:10px}.veil p{font-size:14px;line-height:1.6;max-width:350px;margin:0;color:#e9e5db}.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.veil .primary{min-width:160px}#help-body{white-space:pre-line;text-align:left}#overlay{background:#101b29dd;backdrop-filter:blur(6px)}#result-icon{font-size:42px}footer{font-size:10px;color:#9ba9af;text-align:center}#mobile-tap{font-size:11px;color:#92a6aa}@media(min-width:760px),(max-height:450px){#app{display:grid;grid-template-columns:minmax(250px,1fr) minmax(210px,300px);grid-template-rows:48px 1fr 15px;gap:8px}header{grid-column:1/3}#stage{grid-column:1;grid-row:2}#side{grid-column:2;grid-row:2;overflow:auto;padding:12px 4px}footer{grid-column:1/3}#controls{max-height:none}#headline{align-items:flex-start;flex-direction:column}.veil{padding:12px;gap:8px}.veil h1{font-size:30px}.veil p{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
header strong{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}header nav{flex-shrink:0}header select{max-width:70px;font-size:11px;padding:5px}header button.icon{width:44px}#controls button{min-width:0}@media(min-width:760px){header strong{font-size:13px}}

#headline{flex-wrap:wrap;gap:4px}#status{white-space:normal;line-height:1.5;overflow-wrap:anywhere}#controls button{white-space:normal;line-height:1.4;overflow-wrap:anywhere}