.skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.skill-card{border:1px solid var(--line);padding:14px;border-radius:12px}.skill-card:has(input:checked){border-color:var(--blue);background:#f2f6ff}.skill-card label{display:flex;gap:9px;font-weight:700;margin-bottom:10px}.skill-card select{width:100%;padding:8px;border:1px solid var(--line);border-radius:7px;background:white}.camera{aspect-ratio:4/3;min-height:0}.camera video,.camera canvas{position:absolute;width:100%;height:100%;inset:0;object-fit:contain;transform:scaleX(-1)}.camera canvas{pointer-events:none}.tracking{margin:12px 0;font-size:14px;line-height:1.5}.section-list{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.section-list .active{background:var(--blue);color:white}.answer-block{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}.answer-block pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:15px;line-height:1.6;background:var(--paper);padding:14px;border-radius:8px}.review-score{display:flex;gap:12px;align-items:center;margin:12px 0}.review-score select{padding:9px;border:1px solid var(--line);border-radius:8px}.skill-summary{padding:16px;background:var(--paper);border-radius:12px;margin:10px 0}.camera-msg{padding:20px;text-align:center;z-index:1}.optional{font-weight:400;color:var(--muted)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #75a2ff;outline-offset:3px}.camera canvas{z-index:2}.rec{z-index:3}details summary{cursor:pointer;padding:12px 0;font-weight:700}.lead{max-width:850px}.question{font-size:23px}@media(max-width:600px){.skill-grid{grid-template-columns:1fr}.metric{grid-template-columns:100px 1fr 42px}}
.scope-flag{border:1px solid #aac4e5;border-radius:14px;background:#edf5ff;padding:12px 16px;margin:18px 0}.recording-player{display:block;width:100%;max-width:600px;max-height:360px;background:#101827;border-radius:14px;margin:18px 0}.recording-handoff{padding:22px;margin-top:22px;border-radius:18px;background:rgba(222,240,255,.6);border:1px solid #a5c7de}.recording-handoff a{display:inline-block;text-decoration:none}.form-link{display:inline-block;color:#adf6ec;margin:12px 0;font-weight:700}
:root{--ink:#14283f;--muted:#4b6279;--paper:#edf4f9;--line:rgba(147,175,201,.38);--blue:#186e95;--amber:#87eddb;--navy:#102f47}
body{background:radial-gradient(ellipse at 5% 15%,rgba(95,214,209,.32),transparent 40%),radial-gradient(ellipse at 96% 36%,rgba(121,161,236,.3),transparent 43%),linear-gradient(140deg,#f2f8fd,#e8eff9 60%,#e6f6f2);background-attachment:fixed}
header{background:rgba(246,251,255,.78);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:var(--ink);border-bottom:1px solid rgba(255,255,255,.85);box-shadow:0 4px 24px #3761830b}.brand{font-size:21px}.mark{background:linear-gradient(145deg,#165c80,#12394f);color:#a1f1dd;border:1px solid #77bcc7;box-shadow:0 4px 16px #24628622}.view-switch{background:rgba(186,208,224,.33);border:1px solid #fff}.view-switch button{color:#425f76}.view-switch button.active{background:rgba(255,255,255,.96);box-shadow:0 3px 12px #2a50631a}
main{max-width:1240px;padding-top:38px}.eyebrow{color:#206b85;letter-spacing:.16em;font-size:12px}h1{font-size:clamp(32px,4.3vw,49px);line-height:1.12;max-width:790px;margin:12px 0 14px}.lead{font-size:17px;max-width:820px;margin-bottom:30px}.grid{grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr);gap:26px;align-items:start}
.card{background:rgba(255,255,255,.63);border:1px solid rgba(255,255,255,.94);box-shadow:0 18px 50px #254c7110,inset 0 1px 0 #fff;border-radius:23px;padding:28px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.card.dark{background:linear-gradient(145deg,rgba(20,58,82,.93),rgba(20,37,64,.94));border:1px solid #ffffff69;box-shadow:0 22px 55px #163c6a25}.dark .eyebrow{color:#95eadc}.dark h3{line-height:1.5}.feature{margin:24px 0}.number{border-color:#75abb6;color:#a0efdf}
.skill-grid{gap:12px}.skill-card{background:rgba(248,252,255,.55);border:1px solid #bed0df;border-radius:14px;padding:15px}.skill-card:has(input:checked){background:linear-gradient(135deg,rgba(215,245,241,.82),rgba(226,241,255,.8));border-color:#348da4;box-shadow:0 4px 14px #2b809115}.skill-card label{font-size:14px;line-height:1.45;min-height:40px;align-items:flex-start}.skill-card input{margin-top:4px;accent-color:#187c8d;width:16px;height:16px}.skill-card select,.field input,.field select{background:rgba(255,255,255,.8);border-color:#bacbda}.skill-card select:disabled{opacity:.45}.field textarea{min-height:190px;background:rgba(255,255,255,.82)}
.check{line-height:1.6;padding:4px 0}.check input{width:18px;height:18px;flex-shrink:0;accent-color:#176e82}.primary{background:linear-gradient(120deg,#124f72,#177a88);color:#fff;box-shadow:0 5px 18px #165b7b23}.primary:disabled{background:#a4b5c2;color:#f4f8fb;box-shadow:none;opacity:.68}.secondary{background:linear-gradient(130deg,#164d78,#2d769a)}.ghost{background:rgba(228,238,246,.85);border:1px solid #bdcfdd}.pill{background:#e0edf5;color:#385a72}.pill.active{background:#186e95;color:#fff}.note{background:rgba(255,245,218,.86)}.question{font-size:24px;line-height:1.55}.camera{border:1px solid #789fb2;box-shadow:inset 0 0 20px #0003}.recording-handoff h3{font-size:22px}.actions{gap:12px;flex-wrap:wrap}
@supports not (backdrop-filter:blur(10px)){.card{background:#f7fbfd}header{background:#f3f8fc}}
@media(max-width:850px){.grid{grid-template-columns:1fr}.card{padding:22px}.skill-card label{min-height:0}main{padding-top:28px}}
@media(prefers-reduced-transparency:reduce){.card{background:#f7fbfd}header{background:#f3f8fc}.card.dark{background:#17384e}}