:root{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#242733;background:#fff;font-synthesis:none;--blue:#3454dc;--line:#e8e9ee;--muted:#737887}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);background:white;color:inherit;border-radius:7px;min-height:40px;padding:8px 13px;font-size:14px}button:hover{background:#f4f5f9}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #7b96ff;outline-offset:4px}header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;gap:34px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;font-weight:650;font-size:19px;letter-spacing:-.5px}.mark{background:var(--blue);color:white;width:31px;height:33px;display:grid;place-items:center;border-radius:8px;font-size:25px}.version{font:10px ui-monospace,monospace;letter-spacing:0;background:#f3f4f7;padding:4px 6px;border-radius:4px;color:#747988}.header-note{font-size:13px;color:var(--muted)}.mode-label{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted)}select{min-height:36px;border:1px solid var(--line);background:white;padding:6px 26px 6px 10px;border-radius:6px;color:#373c4a;font-size:13px}.workspace{display:grid;grid-template-columns:212px minmax(480px,1fr) 290px;min-height:calc(100vh - 78px)}.navigation{padding:30px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column}.eyebrow{font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:1.4px;color:#7b808d}.navigation>.eyebrow{padding:0 10px;display:flex;justify-content:space-between}.nav-group{font-size:11px;color:#9396a0;margin:30px 10px 10px}.nav-button{display:flex;align-items:center;width:100%;gap:11px;border:0;text-align:left;margin:4px 0;height:43px;color:#69707d;background:transparent}.nav-button .nav-icon{font-size:18px;width:22px;text-align:center;color:#9297a5}.nav-button.selected{background:#edf1ff;color:#3150ce;font-weight:600}.nav-button.selected .nav-icon{color:var(--blue)}.nav-button .num{margin-left:auto;font:10px ui-monospace,monospace;opacity:.65}.nav-foot{margin-top:auto;padding:48px 11px 8px}.mini-mark{display:block;font-size:26px;color:#a9b1c5;margin-bottom:18px}.nav-foot strong{font-size:13px;font-weight:500}.nav-foot p{color:#9498a3;font-size:12px;line-height:1.7}.small{font-size:11px;color:var(--muted);line-height:1.6}main{padding:35px 34px 0;min-width:0}.title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}h1{font-size:32px;font-weight:560;letter-spacing:-1.2px;margin:10px 0 7px}.title-row p{font-size:13px;color:var(--muted);margin:0}.specimen{font:9px ui-monospace,monospace;letter-spacing:1px;color:#959ba7;border:1px solid var(--line);padding:6px 9px;border-radius:4px}.stage{min-height:376px;height:41vh;max-height:510px;border:1px solid #e3e6ec;border-radius:12px;display:flex;position:relative;background-color:#fafbfe;background-image:radial-gradient(#d6dbe6 .7px,transparent .7px);background-size:18px 18px;overflow:hidden}.stage:before{content:'LIVE PREVIEW';position:absolute;top:20px;left:20px;font:9px ui-monospace,monospace;letter-spacing:1.5px;color:#9bA2b1;z-index:1}.lane{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:44px 22px 52px}.lane+.lane{border-left:1px solid #dfe3ed}.lane-label{position:absolute;top:19px;right:18px;font:11px ui-monospace,monospace;color:#747e94}.lane-hint{position:absolute;bottom:21px;left:10px;right:10px;text-align:center;color:#959baa;font-size:11px}.demo{max-width:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{background:#2946c6}.spec-button{min-width:154px;height:52px;font-size:15px;border-radius:10px;box-shadow:0 4px 9px #3454dc28}.transport{display:flex;align-items:center;justify-content:space-between;padding:15px 0 23px;border-bottom:1px solid var(--line)}.transport>div{display:flex;align-items:center;gap:8px}.transport button{min-height:34px;font-size:12px;padding:6px 10px}.quiet{border-color:transparent;color:#818694}.speed-label{display:flex;gap:8px;align-items:center;font-size:11px;color:#8b91a0}.speed-label select{border:0;min-height:30px}.divider{height:18px;width:1px;background:var(--line);margin:0 5px}button[aria-pressed=true]{background:#edf1ff;color:var(--blue);border-color:#c9d3fa}.profiles{padding:25px 0}.section-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.profile-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}.profile-card{padding:12px 8px 11px;text-align:left;min-width:0;border-radius:8px;background:#fff}.profile-card svg{display:block;width:100%;height:30px;margin-bottom:10px}.profile-card strong{display:block;font-size:12px;font-weight:550}.profile-card span{font-size:10px;color:#9298a5;display:block;margin-top:5px}.profile-card.active{border-color:#536fe4;background:#f5f7ff;box-shadow:0 0 0 1px #536fe418}.profile-card.active strong{color:var(--blue)}.insight{display:flex;gap:13px;background:#f8f9fc;border:1px solid #edf0f5;border-radius:8px;padding:16px 18px;margin:2px 0 24px}.insight-icon{color:#7786b8;font-size:21px}.insight h2{font-size:12px;line-height:1.6;margin:0 0 5px;font-weight:550}.insight p{font-size:11px;line-height:1.75;color:#858c9d;margin:0}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:17px 0;font:9px ui-monospace,monospace;color:#a1a6b1;letter-spacing:.7px}.inspector{border-left:1px solid var(--line);padding:28px 23px}.inspector-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}h2{font-size:13px;font-weight:600;margin:0}.inspector-head span{font-size:10px;color:#727b94;background:#f2f4f8;padding:5px 7px;border-radius:4px}.control-group{border-top:1px solid var(--line);padding:21px 0 7px}.control-group h2{margin-bottom:19px;display:flex;justify-content:space-between}.control-group h2 span{color:#a1a8b7;font-weight:400}.control{margin-bottom:17px}.control-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#6a7283}.control output{font:10px ui-monospace,monospace;color:#6f788b;border:1px solid #e9ecf2;border-radius:4px;min-width:43px;text-align:center;padding:4px}input[type=range]{width:100%;height:3px;accent-color:var(--blue);display:block;margin-top:13px;cursor:pointer}.access{border-top:1px solid var(--line);padding-top:21px;margin-top:5px}.access>.small{font-size:10px}.a11y-row{font-size:11px;display:flex;justify-content:space-between;margin:12px 0;color:#778092}.pass{color:#54897c}.warn{color:#a16c20}.check{display:flex;gap:7px;align-items:center;font-size:11px;color:#6c7587;padding-top:9px;line-height:1.6}.check input{accent-color:var(--blue)}#edit-sides{display:flex;gap:8px;margin-bottom:18px}#edit-sides[hidden]{display:none}.keyboard-info{font:11px/1.8 ui-monospace,monospace;background:#f2f5ff;padding:10px}.targets .demo :is(button,textarea,input,select){outline:1px dashed #ce862f;outline-offset:4px}.keyboard .demo :focus{outline:3px solid #7b96ff;outline-offset:4px}.switch{width:86px;height:46px;border-radius:30px;border:0;background:#c8cedb;padding:5px;position:relative}.switch[aria-checked=true]{background:var(--blue)}.thumb{display:block;width:36px;height:36px;border-radius:50%;background:white;box-shadow:0 2px 5px #0002}.tabs-box{width:340px;max-width:100%}.tabbar{display:flex;background:#e9edf5;border-radius:9px;padding:4px;position:relative}.tabbar button{flex:1;position:relative;border:0;background:transparent;font-size:12px;z-index:1;padding:8px 5px}.tab-indicator{position:absolute;left:4px;top:4px;height:40px;width:calc((100% - 8px)/3);background:white;border-radius:6px;box-shadow:0 2px 4px #0001}.tab-content{text-align:center;padding:25px 10px;font-size:12px;color:#8a93a5}.surface{background:white;border:1px solid #e1e5ee;border-radius:12px;padding:20px;box-shadow:0 12px 30px #2c385411;width:340px;max-width:100%;font-size:13px}.surface h3{margin:0 0 8px;font-size:15px;font-weight:600}.surface p{color:#788297;font-size:12px;line-height:1.7}.surface button{font-size:12px}.popover-wrap{position:relative}.pop{position:absolute;top:58px;left:50%;width:220px;transform:translateX(-50%);z-index:3}.pop button{width:100%;margin-top:6px;text-align:left}.backdrop{position:absolute;inset:0;background:#34436633;z-index:4}.drawer{position:absolute;right:0;top:0;bottom:0;border-radius:12px 0 0 12px;width:85%;max-width:290px;z-index:5;display:flex;flex-direction:column}.drawer button:last-child{margin-top:auto}.composer textarea{width:100%;min-height:85px;border:0;resize:vertical;outline-offset:2px;font-size:14px;background:transparent;line-height:1.6}.composer:focus-within{border-color:#8b9de4;box-shadow:0 7px 24px #3454dc18}.toolbar{display:flex;gap:5px;align-items:center}.toolbar .send{margin-left:auto}.attachment{display:flex;gap:8px;align-items:center;font-size:11px;background:#f0f3fa;border-radius:6px;padding:5px 9px;margin-bottom:10px}.attachment button{margin-left:auto;min-height:30px;padding:3px 8px}.status-head{display:flex;gap:12px;align-items:center}.status-icon{width:36px;height:36px;background:#edf1ff;border-radius:9px;display:grid;place-items:center;color:var(--blue)}.status-head h3{font-size:14px;margin-bottom:4px}.status-text{font-size:11px;color:#7b8598}.action-controls{display:flex;gap:7px;margin-top:18px;flex-wrap:wrap}.result{margin-top:15px;padding:12px;background:#f4f7fc;border-radius:6px;font-size:12px;line-height:1.8}.severity{color:#b46943;background:#fcf0e7;padding:5px 8px;display:inline-block;font-size:10px;border-radius:4px;margin-bottom:13px}.refinement-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:18px}.danger{background:#a84932;border-color:#a84932;color:white}.danger:hover{background:#913c28}.refinement select{width:100%;font-size:11px;margin-bottom:16px}.edit-count{width:75px;padding:8px;border:1px solid #ccd3e1;border-radius:5px}.compare .surface{padding:15px}.compare .refinement-actions{flex-wrap:wrap}.live-feedback{font-size:12px;color:#7b87a0;min-height:16px}.focus-tag{font-size:10px;color:#3454dc}.hidden{display:none!important}@media(min-width:1600px){main{padding:42px 52px 0}.workspace{grid-template-columns:240px 1fr 320px}.stage{height:44vh}}@media(max-width:1120px){.workspace{grid-template-columns:170px minmax(380px,1fr) 245px}main{padding:28px 22px 0}.inspector{padding:27px 17px}.header-note,.specimen,#profile-caption{display:none}.navigation{padding:28px 10px}.lane{padding-left:14px;padding-right:14px}}@media(max-width:850px){header{padding:0 18px;height:68px}.workspace{grid-template-columns:140px minmax(0,1fr)}.inspector{grid-column:2;border-top:1px solid var(--line);border-left:0}.navigation{grid-row:1/3}.control-group{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}.control-group h2{grid-column:1/-1;margin-bottom:0}.stage{min-height:380px}.mode-label{font-size:0}.brand{font-size:17px}.version{display:none}}@media(max-width:560px){.workspace{display:block}.navigation{padding:12px 14px;border-right:0;border-bottom:1px solid var(--line)}.navigation>.eyebrow,.nav-foot,.nav-group{display:none}nav{display:flex;overflow:auto;gap:3px}.nav-button{width:auto;flex:none;padding:8px 10px;margin:0;font-size:12px}.nav-button .nav-icon,.num{display:none}main{padding:23px 16px 0}.inspector{padding:24px 18px}.profile-grid{gap:5px}.profile-card{padding:10px 6px}.profile-card span{font-size:9px}.profile-card strong{font-size:11px}.stage.compare{height:690px;max-height:none;flex-direction:column}.lane+.lane{border-left:0;border-top:1px solid var(--line)}.stage.compare .lane{min-height:340px}.brand{font-size:15px}.mark{width:27px;height:29px}.mode-label select{max-width:135px;font-size:11px}}
/* Readable controls and compact, secondary metadata. */
.control-top,.check,.a11y-row,.profile-card strong,.transport button,.surface button,.tabbar button{font-size:14px}.control output,.small,.profile-card span,.lane-hint,.status-text,.surface p,.insight p,.insight h2,.nav-group,.nav-foot p,.speed-label,.live-feedback{font-size:12px}.eyebrow,.stage:before,.lane-label,footer,.specimen,.version,.severity{font-size:12px}.title-row p{font-size:14px}.inspector{overflow:auto}.control-group{padding-top:18px}.a11y-row{gap:10px;align-items:start}.a11y-row>span:last-child{font-size:12px;text-align:right}.pop{translate:-50% 0}.keyboard .demo button{position:relative}.keyboard .demo button:before{content:attr(data-order);position:absolute;left:-6px;top:-11px;background:#e5ebff;color:#3454dc;border:1px solid #b6c4f6;font:10px ui-monospace,monospace;border-radius:3px;padding:1px 3px;z-index:8}.surface{max-height:100%;overflow:auto}.demo{max-height:100%}.surface input{max-width:100%}.compare .spec-button{min-width:120px}.compare .surface h3{font-size:14px}@media(max-width:560px){.profile-card strong{font-size:12px}.profile-card span{font-size:10px}.eyebrow,footer{font-size:10px}.stage:before{font-size:10px}}
/* Effects are decorative: native controls remain the only interactive surface. */
.fx-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none!important;z-index:2;display:block;overflow:visible}
.fx-layer[hidden]{display:none}
.fx-layer *{pointer-events:none!important}
.fx-layer .metal-fx-root{position:absolute!important;inset:0;background:transparent!important}
.fx-static{position:absolute;inset:0;border:2px solid #a7b6ed;border-radius:inherit;box-shadow:0 0 9px #7494d42b}
.fx-static-metal{border-color:#b7bdc7;box-shadow:inset 0 1px 0 white,0 1px 3px #2633522b}
.fx-static-beam.fx-static-metal{border-color:#a8b5d2;box-shadow:0 0 8px #779be42b,inset 0 1px 0 white}
.surface-controls{border-top:1px solid var(--line);padding:20px 0}
.surface-controls h2{font-size:14px}
.effect-toggle{display:flex;align-items:center;gap:9px;font-size:14px;margin:16px 0;cursor:pointer}
.effect-toggle input{accent-color:var(--blue);width:16px;height:16px;margin:0}
.effect-swatch{height:18px;width:25px;border-radius:5px;border:1px solid #c3ccdf}
.effect-swatch.beam{background:linear-gradient(120deg,#6e92ee,#b2a2eb,#71cbdc);box-shadow:0 0 5px #869bd63b}
.effect-swatch.metal{background:linear-gradient(135deg,#a3aab7,#fff 35%,#b2b9c4 54%,#e8eaf0 68%,#7f8795)}
.effect-palette,.effect-strength{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;margin:17px 0 12px;color:#677084}
.effect-strength output{font:12px ui-monospace,monospace}
.effect-sources{display:flex;gap:14px;font-size:12px;margin-top:12px}.effect-sources a{color:#6576a6;text-decoration:none}.effect-sources a:hover{text-decoration:underline}