:root{font-family:Arial,Helvetica,sans-serif;color:#233522;background:#6e985b;color-scheme:light}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}#art{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}button,a,input,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid #364b2522;background:#eff2e44d;border-radius:12px;min-height:44px;padding:10px 14px;font-size:11px}button:hover{background:#f3f6e5aa}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #2d472b;outline-offset:4px}button:disabled{opacity:.45;cursor:wait}[hidden]{display:none!important}.back,.controls{position:absolute;top:24px;z-index:3;background:#eef2e3cf;backdrop-filter:blur(18px);border:1px solid #fff5;border-radius:24px;box-shadow:0 5px 30px #19300d13}.back{left:24px;padding:13px 18px;text-decoration:none;font-family:Georgia,serif;font-size:18px}.back span{font-family:Arial,sans-serif;font-size:8px;letter-spacing:1px;margin-left:10px;text-transform:uppercase}.controls{right:24px}#panel{position:absolute;top:88px;left:24px;width:318px;max-height:calc(100dvh - 116px);overflow:auto;padding:24px;border-radius:20px;background:#edf2e5ed;backdrop-filter:blur(22px);border:1px solid #fff6;box-shadow:0 12px 40px #18340e23;scrollbar-width:thin}.eyebrow{font-size:8px;letter-spacing:2.1px;font-weight:600}h1{font-family:Georgia,serif;font-size:30px;font-weight:400;letter-spacing:-.8px;margin:9px 0 12px}.intro{font-size:11px;line-height:1.7;margin:0 0 18px;opacity:.8}.switch{display:flex;gap:5px}.switch button{flex:1;font-size:10px;padding:10px 7px}.switch button[aria-pressed=true]{background:#3f5a38;color:#f3f5e8}.section-title{font-size:10px;margin:22px 0 10px}.file-button{position:relative;display:block;text-align:center;min-height:44px;padding:14px;border-radius:12px;background:#3f5a38;color:#f3f5e8;font-size:11px;cursor:pointer;overflow:hidden}.file-button:focus-within{outline:2px solid #2d472b;outline-offset:4px}.file-button input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}audio{display:block;width:100%;height:38px;margin-top:12px}.audio-actions{display:flex;gap:7px;margin-top:9px}.audio-actions button{flex:1;font-size:10px;padding:10px 6px}.fine{font-size:9px;line-height:1.7;opacity:.73;margin:12px 0 0}.status{font-size:10px;line-height:1.6;margin:12px 0 6px;overflow-wrap:anywhere}.meter{height:3px;background:#3f5a381c;border-radius:4px;overflow:hidden}.meter span{height:100%;display:block;width:0;background:#3f5a38;transition:width .08s}.quiet-button{font-size:9px;min-height:32px;padding:7px 0;background:none;border:0;text-decoration:underline}.range-label{display:block;font-size:10px;margin-top:16px}.range-label output{float:right;font-size:9px;opacity:.65}.range-label input{display:block;width:100%;accent-color:#3f5a38;margin:12px 0;height:4px}.colour-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;margin-top:18px}.colour-label select{font-size:10px;background:transparent;border:1px solid #364b2522;border-radius:8px;min-height:36px;padding:6px 10px}.bottom-actions{display:flex;gap:6px;margin-top:18px}.bottom-actions button{flex:1;padding:10px 7px;font-size:10px}.bottom-actions button:last-child{flex:0;min-width:44px;font-size:18px}#hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:1px;pointer-events:none;text-align:center;background:#eef2e387;border-radius:20px;padding:12px 18px;transition:opacity 1s}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Georgia,serif;font-size:20px;pointer-events:none}@media(max-width:600px){.back{top:16px;left:16px}.controls{top:16px;right:16px}#panel{top:78px;left:16px;width:min(318px,calc(100% - 32px));max-height:calc(100dvh - 100px);padding:20px}#hint{bottom:16px;width:max-content;max-width:calc(100% - 32px);font-size:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}