@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');*{box-sizing:border-box}body{margin:0;background:#f6f5f0;color:#294336;font:14px 'DM Sans',sans-serif}header{padding:26px 5%;border-bottom:1px solid #dddfd6;display:flex;justify-content:space-between;align-items:center}header b{font:600 23px 'Space Grotesk',sans-serif;letter-spacing:-1px}small,.eyebrow{font-size:10px;letter-spacing:1.6px;color:#83907c}main{max-width:1360px;margin:auto;padding:35px 5%}h1{font:500 clamp(36px,4vw,56px) 'Space Grotesk',sans-serif;letter-spacing:-2px;margin:14px 0}h1 em{font-family:Georgia;font-weight:400;color:#81956d}.intro{color:#7c8577;font-size:15px;margin-bottom:32px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.stage,aside{border:1px solid #dce0d4;border-radius:14px;background:#fffefa;overflow:hidden}.bar{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;font-size:10px;gap:12px}.bar i{font-style:normal;color:#9a9f90;margin-left:7px}#status{background:#edf2e7;border-radius:20px;padding:6px 10px;color:#6e825d}.picture{background:#e4e9dd;padding:20px}canvas{width:100%;display:block;border-radius:6px;aspect-ratio:3/2}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.stats>div{border:1px solid #dce0d4;border-radius:10px;padding:18px 20px}.stats strong{display:block;font:400 27px 'Space Grotesk',sans-serif;margin-top:8px}progress{width:100%;height:4px;accent-color:#7e9b60;display:block;margin-top:8px}.note{font-size:11px;line-height:1.8;color:#8b9381;max-width:620px;margin-top:24px}aside{padding:23px}h2{font:500 18px 'Space Grotesk',sans-serif;margin:0 0 25px}label{display:block;font-size:11px;margin:20px 0 9px}.upload{border:1px dashed #b9c6ae;border-radius:9px;background:#f5f7ef;text-align:center;padding:20px 8px;cursor:pointer;margin:12px 0 6px;font-size:22px}.upload b{display:block;font-size:12px;font-weight:500;margin:8px 0}.upload small{font-size:9px;letter-spacing:0}input[type=file]{display:none}#filename{font-size:10px;color:#89917e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:25px}select{width:100%;padding:11px;border:1px solid #d8decd;border-radius:7px;background:#fffefa;color:#294336}#explain{color:#84907a;font-size:11px;line-height:1.7;min-height:48px}input[type=range]{width:100%;accent-color:#587b4e}.ends{display:flex;justify-content:space-between;font-size:9px;color:#8c9681;margin:6px 0 20px}button{border:1px solid #d6decd;border-radius:7px;background:#f6f8f0;color:#36533c;padding:11px;cursor:pointer;font:500 11px 'DM Sans',sans-serif}button:hover{filter:brightness(.95)}button:focus-visible,select:focus-visible{outline:3px solid #a3bed0;outline-offset:3px}.actions{display:flex;gap:8px;margin-top:24px}#play{background:#294b38;color:#f9faef;flex:1}#reset{display:block;margin:10px auto;border:0;background:none;font-size:10px}.private{text-align:center;font-size:10px;color:#909780;margin-top:24px}#error{color:#aa5544;font-size:11px}button:disabled{opacity:.5;cursor:default}@media(max-width:850px){.workspace{grid-template-columns:1fr}header small{display:none}main{padding:25px 5%}.bar{flex-wrap:wrap;padding:12px}.picture{padding:10px}.stats{gap:8px}.stats>div{padding:14px 10px}.stats small{font-size:8px}}

header{gap:20px}header small{margin-left:auto}#theme{white-space:nowrap}html[data-theme="dark"]{color-scheme:dark;--drop-active:#304839}html[data-theme="light"]{color-scheme:light}html[data-theme="dark"] body{background:#111914;color:#e3ebde}html[data-theme="dark"] header{border-color:#2c392e}html[data-theme="dark"] .stage,html[data-theme="dark"] aside{background:#1b261e;border-color:#344233}html[data-theme="dark"] .picture{background:#101b14}html[data-theme="dark"] .stats>div{background:#19231c;border-color:#344233}html[data-theme="dark"] small,html[data-theme="dark"] .eyebrow{color:#a5b59b}html[data-theme="dark"] .intro,html[data-theme="dark"] .note,html[data-theme="dark"] #explain,html[data-theme="dark"] #filename,html[data-theme="dark"] .ends,html[data-theme="dark"] .private{color:#aab7a0}html[data-theme="dark"] h1 em{color:#b4d18b}html[data-theme="dark"] .bar i{color:#9aab92}html[data-theme="dark"] #status{background:#30412b;color:#c6dfa9}html[data-theme="dark"] .upload{background:#222f22;border-color:#607452}html[data-theme="dark"] select,html[data-theme="dark"] button{background:#29392a;border-color:#506246;color:#e4eedc}html[data-theme="dark"] #play{background:#b8d991;color:#15210f;border-color:#b8d991}html[data-theme="dark"] #reset{background:transparent}html[data-theme="dark"] #error{color:#ffb29a}html[data-theme="dark"] input[type="range"],html[data-theme="dark"] progress{accent-color:#b8d991}html[data-theme="dark"] button:hover{filter:brightness(1.13)}

.brand{display:flex;align-items:center;gap:13px;flex-shrink:0;color:#466739}.brand-mark{display:block;width:36px;height:45px;overflow:visible}.brand-wordmark{font:600 33px/1 'Space Grotesk',sans-serif;letter-spacing:-1.6px;color:#294336}.brand-period{color:#7b9e63}html[data-theme="dark"] .brand{color:#b8d991}html[data-theme="dark"] .brand-wordmark{color:#eff5e9}html[data-theme="dark"] .brand-period{color:#b8d991}@media(max-width:500px){.brand{gap:9px}.brand-mark{width:29px;height:37px}.brand-wordmark{font-size:29px}}

.detail-note{font-size:10px;line-height:1.6;color:#7c8874}html[data-theme="dark"] .detail-note{color:#aab7a0}