*{box-sizing:border-box}html{background:#f4f0e7;color:#2c3c35;font-family:ui-rounded,"Avenir Next",system-ui,-apple-system,sans-serif}body{margin:0}button,select,input{font:inherit}button,select{min-height:44px;border:1px solid #d2d6cb;border-radius:12px;padding:10px 15px;background:#fffdf6;color:inherit;cursor:pointer}button:hover{background:#eaeede}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #cf884d;outline-offset:2px}button:disabled{opacity:.45;cursor:default}.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:750}.primary:hover{filter:brightness(1.08);background:var(--accent)}[hidden]{display:none!important}#app{max-width:1000px;margin:auto;padding:12px 18px 22px}.top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0 18px;border-bottom:1px solid #d9ddd2}.brand{text-decoration:none;color:var(--accent);font-weight:850;letter-spacing:-.5px}.brand span{font-size:10px;letter-spacing:2px;color:#839081;display:block}.top nav{display:flex;gap:6px}.top button{width:44px;padding:4px;font-size:21px}.top select{max-width:95px;padding:5px}#entry{text-align:center;padding:34px 15px 26px;max-width:620px;margin:auto}h1{font-size:clamp(32px,6vw,54px);font-weight:800;letter-spacing:-2px;margin:6px 0 18px}#intro{font-size:17px;line-height:1.7;max-width:460px;margin:0 auto 24px}.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#7a8b79;margin:0 0 6px}#entry button{margin:5px;min-width:140px}#entry .primary{display:block;margin:10px auto;min-width:220px;padding:16px 30px}#progress{font-size:12px;margin-top:24px}.quiet{color:#7f8e7b}.heading{display:flex;gap:10px;align-items:center;margin:18px 0 12px}.heading>div{flex:1}.heading h2{font-size:19px;margin:0;letter-spacing:-.4px}.bare{border:0;background:transparent;min-width:44px;padding:6px;font-size:22px}.heading .eyebrow{letter-spacing:1px;font-size:10px}#canvas-wrap{position:relative;border-radius:22px;background:#e3e8d9;overflow:hidden;border:1px solid #d1d7c9}canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;touch-action:none}#coach{position:absolute;bottom:5px;left:10px;right:10px;margin:0;border-radius:10px;background:#fffdf2e8;padding:8px 10px;font-size:12px;text-align:center;pointer-events:none;box-shadow:0 2px 9px #24322a12}#status{padding:5px 2px;min-height:32px;margin:7px 0;font-size:13px;line-height:1.5}#controls{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:8px}.control-group{width:100%;display:flex;gap:6px;flex-wrap:wrap;align-items:center}.control-group>label{font-size:12px;font-weight:700;min-width:65px}.control-group button{padding:8px 11px;min-width:44px;font-size:13px}.control-group .selected{border-color:var(--accent);background:var(--accent);color:white}.range-control{display:flex;align-items:center;gap:8px;flex:1;min-width:185px}.range-control input{min-height:44px;flex:1;min-width:70px;accent-color:var(--accent)}.range-control output{min-width:25px;font-size:12px}.work-footer{display:flex;gap:8px;border-top:1px solid #d4dacb;padding-top:13px;margin:15px 0}.work-footer button{font-size:12px;flex:1}.bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:#899581;margin-top:30px}.bottom button{min-width:44px;border:0;background:transparent}#outcome{background:#fffdf4;border:1px solid #ced9c2;border-radius:16px;padding:17px;margin:10px 0;box-shadow:0 6px 20px #35442d0d}#outcome h3{margin:0 0 8px}#outcome p{font-size:13px;line-height:1.5}#outcome button{margin-right:7px}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{display:inline-flex;background:#e4e9d8;border-radius:20px;font-size:11px;padding:6px 10px}dialog{border:1px solid #cbd4c4;border-radius:20px;background:#fffdf6;color:#2c3c35;width:min(92vw,620px);max-height:85dvh;padding:22px}dialog::backdrop{background:#263a3066;backdrop-filter:blur(4px)}dialog h2{font-size:23px;margin-top:0}dialog p,dialog li{font-size:14px;line-height:1.7}dialog .level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}dialog .level-grid button{min-height:60px;padding:6px;font-size:12px}dialog #close{margin-top:18px;width:100%}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#263e31;color:white;border-radius:15px;padding:12px 20px;max-width:90vw;pointer-events:none;opacity:0;transition:opacity .2s;font-size:13px;z-index:1000}#toast.show{opacity:1}.credit-entry{font-size:12px;line-height:1.6}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gallery-grid canvas{background:#e4e8da;border-radius:12px}.save-link{display:block;text-align:center;min-height:44px;padding:10px;color:var(--accent)}@media(min-width:800px){#app{max-width:860px}#work{max-width:680px;margin:auto}canvas{max-height:430px}#entry{padding-top:52px}}@media(max-width:350px){#app{padding:8px 10px 16px}.top{gap:6px}.top nav{gap:3px}.top select{max-width:76px}.heading h2{font-size:16px}.work-footer{gap:4px}.work-footer button{padding:8px 6px}#entry{padding:24px 2px}#controls{gap:5px}.control-group button{padding:8px 9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}