:root{color-scheme:light;--paper:#e9f0ed;--ink:#183c3c;--muted:#506b68;--line:#bacdc6;--button:#fffdf5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}main{max-width:1160px;margin:auto;padding:32px 40px 24px}nav{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;font-size:14px}a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}a:hover{color:#9b3d23}details{max-width:480px;text-align:right}summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}details p{font-size:14px;line-height:1.5;text-align:left}header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:32px 0 0}h1{font:normal clamp(40px,5vw,66px)/1.05 Georgia,serif;letter-spacing:-2.4px;margin:0}header p{font-size:16px;line-height:1.5;margin:0}.pond-wrap{width:min(100%,650px,65vh);margin:-4px auto 4px}canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation;border-radius:50%}canvas:focus-visible{outline:3px solid #9b3d23;outline-offset:-25px}.controls{display:flex;justify-content:center;align-items:end;gap:24px;flex-wrap:wrap}.setting{display:flex;flex-direction:column;gap:9px;min-width:130px}label{font-size:13px;font-weight:600;display:flex;justify-content:space-between;gap:20px}output{font-weight:normal}input[type=range]{accent-color:var(--ink);width:150px;margin:0;height:35px}select,button{font:14px Arial,sans-serif;color:var(--ink);background:var(--button);border:1px solid var(--line);border-radius:5px;padding:10px 12px;min-height:40px}button{cursor:pointer}button:hover{background:#d7e5da}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #b45932;outline-offset:3px}.actions{display:flex;gap:8px;flex-wrap:wrap}#ripple{background:var(--ink);color:#fffdf5;border-color:var(--ink)}.status{font-size:13px;line-height:1.5;color:var(--muted);text-align:center;margin:18px 0 0;min-height:20px}#recording{max-width:760px;margin:32px auto}.record-head{display:flex;align-items:center;justify-content:space-between;gap:20px}h2{font:normal 28px Georgia,serif}video{width:100%;max-height:65vh;display:block;background:#183c3c;border-radius:8px}#recordStatus{font-size:14px;line-height:1.5}#download{display:inline-block;font-size:14px}[hidden]{display:none!important}@media(min-width:1500px){.pond-wrap{width:min(700px,65vh)}}@media(max-width:620px){main{padding:22px 22px 28px}nav{font-size:12px;gap:16px}details{max-width:170px}details p{font-size:13px}header{display:block;margin-top:30px}h1{font-size:45px;letter-spacing:-1.6px}header p{margin-top:12px;font-size:15px}header p br{display:none}header p br:after{content:' '}.pond-wrap{width:calc(100% + 28px);max-width:none;margin:12px -14px 18px}.controls{justify-content:flex-start;gap:16px}.setting{flex:1}input[type=range]{width:100%}.actions{gap:8px}.actions button{flex:1 1 auto}.status{text-align:left}.record-head{align-items:start}h2{font-size:24px;margin-top:0}#return{min-width:110px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}