.lab-body{--paper:#f8f8f4;--ink:#292d27;--muted:#62685e;--line:#d8dcd1;--accent:#415b37;background:var(--paper)}.lab-header{min-height:96px;padding:20px 36px;display:flex;align-items:center;gap:40px;border-bottom:1px solid var(--line)}.lab-header .brand{font-size:29px}.lab-header-note{font-size:13px;display:flex;align-items:center;gap:25px}.lab-header-note>span{font-size:12px;color:var(--muted)}.lab-draft{margin-left:auto;font-size:12px;letter-spacing:.1em;border:1px solid var(--line);padding:7px 10px;border-radius:3px}.lab-layout{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:860px}.lab-sidebar{padding:37px 28px 25px;border-right:1px solid var(--line);min-width:0}.lab-sidebar .eyebrow{font-size:12px;letter-spacing:.08em}.lab-sidebar h1{font-size:31px;line-height:1.13;letter-spacing:-.035em;margin-top:18px}.lab-intro{font-size:12px;color:var(--muted);margin-top:20px}.concept-options{display:grid;gap:10px;margin-top:30px}.concept-option{display:flex;align-items:center;gap:16px;text-align:left;min-height:86px;padding:18px 13px;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:5px;transition:background-color .18s ease,border-color .18s ease}.concept-option:hover{background:#eff1e8}.concept-option[aria-pressed=true]{background:#e8eedf;border-color:#6f8063}.concept-index{font-size:12px;color:var(--muted)}.concept-option strong{display:block;font-weight:500;font-size:13px}.concept-option small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.concept-context{margin-top:30px;padding-top:25px;border-top:1px solid var(--line)}.concept-context h2{font-size:17px;line-height:1.3;letter-spacing:-.025em;margin-top:10px}.concept-context>p:last-child{font-size:12px;color:var(--muted);margin-top:12px}.lab-boundary{font-size:12px;color:var(--muted);margin-top:36px}.lab-preview-area{min-width:0;padding:22px 25px;background:#e9ece4}.preview-toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:18px}.device-options{display:flex;border:1px solid #cbd2c1;border-radius:4px;padding:3px;gap:2px;background:#f8f8f4}.device-options button{min-height:38px;padding:8px 15px;border:0;border-radius:2px;background:transparent;color:var(--muted);font-size:12px}.device-options button[aria-pressed=true]{background:#dde5d3;color:var(--ink)}.open-page{display:flex;align-items:center;gap:12px;font-size:12px;min-height:44px}.open-page:hover{text-decoration:underline;text-underline-offset:4px}.frame-stage{display:flex;justify-content:center;min-width:0}.frame-shell{width:100%;max-width:1450px;background:#fff;border:1px solid #cbd2c1;border-radius:6px;overflow:hidden;box-shadow:0 8px 28px rgb(23 44 19 / 5%);transition:none}.frame-shell[data-active-device=phone]{width:min(390px,100%)}.frame-shell iframe{width:100%;height:840px;border:0;display:block;background:#f6f4ef}.frame-shell[data-active-device=phone] iframe{height:780px}.preview-caption{display:flex;justify-content:space-between;gap:24px;margin:16px 0 0;font-size:12px;color:var(--muted)}.preview-caption p:last-child{text-align:right}.lab-footer{display:flex;justify-content:space-between;gap:24px;padding:18px 36px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}@media(max-width:1100px){.lab-header-note>span{display:none}.lab-layout{grid-template-columns:260px minmax(0,1fr)}.lab-sidebar{padding:30px 20px}.lab-preview-area{padding:20px 18px}.preview-caption{flex-direction:column;gap:5px}.preview-caption p:last-child{text-align:left}}@media(max-width:760px){.lab-header{min-height:78px;padding:15px 20px;gap:22px}.lab-header-note{font-size:12px}.lab-draft{display:none}.lab-layout{grid-template-columns:1fr}.lab-sidebar{padding:28px 20px 23px;border-right:0;border-bottom:1px solid var(--line)}.lab-sidebar h1{font-size:28px;margin-top:13px}.lab-sidebar h1 br{display:none}.lab-intro{margin-top:13px;max-width:470px}.concept-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:21px}.concept-option{min-height:101px;padding:11px 9px;display:block}.concept-index{display:block;margin-bottom:7px}.concept-option strong{font-size:12px;line-height:1.3}.concept-option small{display:none}.concept-context{margin-top:20px;padding-top:17px}.concept-context h2{font-size:15px}.concept-context>p:last-child{margin-top:8px}.lab-boundary{margin-top:17px}.lab-preview-area{padding:20px 14px}.device-options button{min-height:40px;padding-inline:11px}.open-page{font-size:12px;gap:6px}.frame-shell iframe{height:800px}.lab-footer{padding:18px 20px;flex-direction:column;gap:5px}}@media(prefers-reduced-motion:reduce){.frame-shell{transition:none}}