:root{color-scheme:light;--bg:#fff;--panel:#f8fafd;--line:#e3e7ed;--text:#202124;--muted:#68717d;--accent:#1a73e8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif}header{height:80px;padding:0 40px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{font-size:27px;font-weight:700;letter-spacing:-1.2px}.brand span{color:var(--accent)}a{color:var(--accent);text-decoration:none}nav a{font-size:14px;padding:12px 16px;border-radius:8px}nav a:hover{background:#edf4ff}main{max-width:1440px;margin:0 auto;padding:40px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:36px}.screen{position:relative;aspect-ratio:16/9;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;place-items:center}canvas{display:block;width:100%;height:100%;object-fit:contain}.screen:not(.has-stream) canvas{visibility:hidden}.empty{position:absolute;text-align:center;color:#7a8594;pointer-events:none}.empty svg{width:48px;display:block;margin:0 auto 16px;color:#8ba5c7}.empty strong{font-size:14px;font-weight:500}.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:24px 0}.timer{margin-left:auto;font:21px ui-monospace,SFMono-Regular,monospace;color:#4b5563;font-variant-numeric:tabular-nums}button,.download{font:inherit;font-weight:600;font-size:14px;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#3c4043;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}button:hover:not(:disabled){background:#f1f5fa}button:disabled{background:#f2f4f7;color:#a1a8b1;border-color:#f2f4f7;cursor:not-allowed}.primary,.download{background:var(--accent);border-color:var(--accent);color:white}.primary:hover:not(:disabled),.download:hover{background:#1765cc}.secondary{color:var(--accent);border-color:#c4d7f2;background:#fff}.stop:not(:disabled){color:#b3261e;border-color:#f0c3bf;background:#fff5f4}.settings{border:1px solid var(--line);border-radius:16px;padding:24px;height:fit-content;background:#fff}h2{font-size:15px;font-weight:650;margin:0 0 24px}.field{margin-bottom:22px;position:relative}.field:last-child{margin-bottom:0}label{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#5f6368;margin-bottom:8px;gap:8px}select{width:100%;min-height:44px;border:1px solid #d9dfe7;border-radius:8px;background:white;color:var(--text);font:inherit;padding:9px 12px}.check{justify-content:flex-start;color:#3c4043;font-size:14px;min-height:34px;cursor:pointer}.check input{accent-color:var(--accent);width:17px;height:17px;margin:0 8px 0 0}input[type=range]{width:100%;accent-color:var(--accent);min-height:24px;margin:0}hr{border:0;border-top:1px solid var(--line);margin:24px 0}p{margin:0}.status{font-size:13px;color:#5f6368}.status:empty,.note:empty{display:none}.status.error{color:#b3261e;background:#fceeee;border-radius:8px;padding:12px 14px}.note{font-size:12px;color:#68717d;margin-top:8px}#result{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:16px}#result h2{margin:0}#result video{display:block;width:100%;max-height:460px;margin:20px 0;background:#101214;border-radius:8px}#fileInfo{margin-top:12px;color:var(--muted);font-size:12px}.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid #cbd2dd;border-radius:50%;font-size:12px;color:#697586;cursor:help;font-weight:500;flex-shrink:0}.field>.tip{position:absolute;right:0;top:7px}.tooltip{display:none;position:absolute;right:-8px;bottom:28px;width:210px;z-index:5;background:#303846;color:#fff;font-size:12px;line-height:1.6;padding:10px 12px;border-radius:7px;box-shadow:0 3px 12px #0002}.tip:hover .tooltip,.tip:focus .tooltip,.tip:focus-within .tooltip{display:block}:focus-visible{outline:3px solid #8ab4f8;outline-offset:3px}[hidden]{display:none!important}.help{max-width:800px;padding-top:48px}.help h1{font-size:28px;margin:0 0 32px}.help h2{font-size:18px;margin:32px 0 12px}.help p,.help li{color:#536071;line-height:1.9}.help ol,.help ul{padding-left:24px}.help li{margin-bottom:10px}.help section{padding-bottom:24px;border-bottom:1px solid var(--line)}@media(max-width:850px){header{height:68px;padding:0 20px}main{padding:24px 20px}.workspace{grid-template-columns:1fr;gap:24px}.settings{padding:22px}.controls{gap:8px;padding:18px 0}button,.download{padding:10px 13px}.timer{font-size:18px}.screen{border-radius:12px}.help{padding-top:28px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Recorder: the available viewport is the layout boundary. */
.recorder{height:100dvh;display:flex;flex-direction:column;background:#fff}
.recorder header{height:60px;min-height:60px;padding:0 28px;border:0}
.recorder main{flex:1;min-height:0;width:100%;max-width:none;padding:8px 24px 20px}
.recorder .workspace{height:100%;min-height:0;grid-template-columns:minmax(0,1fr) 272px;gap:20px}
.recording-area{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}
.stage{position:relative;flex:1;min-height:0;border-radius:14px;background:#f1f3f6}
.recorder .screen{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:14px;background:#f1f3f6}
.recorder .controls{padding:4px 0 0;flex-shrink:0;gap:8px}
.recorder button,.recorder .download{border:0;background:#edf0f4;min-height:42px;padding:9px 15px}
.recorder .primary,.recorder .download{background:var(--accent);color:#fff}
.recorder .secondary{background:#e8f0fe;color:#1967d2}
.recorder button:disabled{background:#f3f4f6;color:#a1a8b1}
.recorder .stop:not(:disabled){background:#fce8e6;color:#b3261e}
.recorder .settings{height:100%;min-height:0;border:0;border-radius:14px;background:#f7f8fa;padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.recorder .settings h2{margin:0 0 4px;font-size:14px;color:#3c4043}
.recorder .field{margin:0;flex-shrink:0}
.recorder .settings hr{display:none}
.recorder label{margin-bottom:6px}
.recorder select{border:0;background:#e9edf2;min-height:40px;padding:8px 10px}
.recorder .check{min-height:32px;margin-bottom:3px}
.recorder .tip{border:0;background:#e3e7ed;color:#637082}
.recorder .status{flex-shrink:0;line-height:1.4}
.recorder .status.error{padding:8px 12px}
.recorder #result{position:absolute;inset:0;z-index:2;margin:0;border:0;border-radius:14px;padding:16px;background:#f1f3f6;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;min-height:0}
.recorder #result h2{font-size:14px;grid-column:1/-1}
.recorder #result video{grid-column:1/-1;width:100%;height:100%;max-height:none;min-height:0;object-fit:contain;margin:0;border-radius:8px}
.recorder #result .download{grid-column:2;grid-row:3}
.recorder #fileInfo{grid-column:1;grid-row:3;align-self:center;margin:0}
@media(min-width:761px) and (max-height:650px){.recorder header{height:48px;min-height:48px}.recorder main{padding:4px 16px 12px}.recorder .workspace{grid-template-columns:minmax(0,1fr) 320px;gap:14px}.recorder .settings{display:grid;grid-template-columns:1fr 1fr;align-content:space-between;gap:10px 12px;padding:16px}.recorder .settings h2{grid-column:1/-1}.recorder .check{font-size:12px;gap:2px}.recorder .check input{margin-right:4px}.recorder .field>.tip{right:-8px;top:-10px}.recorder label{font-size:12px}.recorder select{font-size:12px}.recorder .controls{gap:6px}.recorder button{font-size:12px;padding:8px 10px;min-height:36px}.recorder .timer{font-size:17px}.recorder #result{padding:12px;gap:8px}}
@media(max-width:760px){.recorder header{height:48px;min-height:48px;padding:0 16px}.recorder .brand{font-size:23px}.recorder main{padding:4px 12px 12px}.recorder .workspace{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:12px}.recorder .settings{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:14px 16px;border-radius:12px}.recorder .settings h2{display:none}.recorder .check{font-size:12px;min-height:28px;gap:3px}.recorder .check input{margin-right:4px}.recorder label{font-size:12px;margin-bottom:4px}.recorder select{min-height:34px;font-size:12px;padding:6px 8px}.recorder .field>.tip{right:-6px;top:-8px}.recorder .controls{display:grid;grid-template-columns:auto auto auto auto;gap:6px;padding:0}.recorder button{font-size:12px;min-height:36px;padding:8px}.recorder .timer{grid-column:1/-1;justify-self:end;font-size:15px;line-height:1;margin-top:2px}.recording-area{gap:8px}.recorder .empty svg{width:32px;margin-bottom:6px}.recorder .empty strong{font-size:12px}.recorder #result{padding:10px;gap:6px}.recorder #result h2{font-size:12px}.recorder #result .download{min-height:32px;font-size:12px;padding:6px 10px}.recorder #fileInfo{font-size:11px}.recorder .status{font-size:12px}.recorder .note{font-size:11px;margin-top:4px}}
.recorder #viewToggle{position:absolute;top:10px;right:12px;z-index:3;min-height:28px;padding:4px 9px;font-size:11px;color:#1967d2;background:#e8f0fe}.recorder #result h2{padding-right:112px;min-height:24px}
.header-left{display:flex;align-items:center;gap:28px;min-width:0}.identity{display:flex;align-items:center;gap:16px;flex-shrink:0}.kawai-logo{display:block;width:86px;height:28px;object-fit:contain}.app-name{font-size:22px;font-weight:600;letter-spacing:-.7px;color:#202124}.social-links{display:flex;align-items:center;gap:22px}.social-links a{padding:9px 0;color:#737b86;font-size:13px;white-space:nowrap}.social-links a:hover{background:transparent;color:#3c4043;text-decoration:underline;text-underline-offset:4px}@media(max-width:760px){header,.recorder header{height:76px;min-height:76px;padding:8px 16px}.header-left{flex-wrap:wrap;gap:0 16px}.identity{gap:12px}.kawai-logo{width:72px;height:24px}.app-name{font-size:20px}.social-links{width:100%;gap:18px}.social-links a{font-size:12px;padding:3px 0}header>nav{align-self:flex-start;white-space:nowrap}header>nav a{display:block;padding:6px 0;font-size:12px}}
.field-label{display:block;font-size:13px;color:#5f6368;margin-bottom:6px}.size-options{display:flex;padding:3px;gap:3px;background:#e9edf2;border-radius:9px}.recorder .size-options button{flex:1;min-width:0;min-height:34px;padding:5px 8px;background:transparent;border-radius:6px;color:#68717d;font-size:13px;font-weight:500}.recorder .size-options button[aria-pressed="true"]{background:#fff;color:#1967d2;box-shadow:0 1px 3px #28354a16;font-weight:650}.recorder .size-options button:hover{background:#f6f8fb}@media(max-width:760px),(max-height:650px){.field-label{font-size:12px;margin-bottom:4px}.recorder .size-options button{min-height:28px;padding:4px 6px;font-size:12px}}