:root{--canvas: #090a0b;--surface: rgb(9 10 11 / 88%);--surface-strong: rgb(15 16 16 / 97%);--surface-raised: rgb(255 255 255 / 4%);--surface-hover: rgb(255 255 255 / 7%);--selected: #f2f2ef;--text: #f2f2ef;--secondary: #b7b7b3;--muted: #747570;--inverse: #111211;--line: rgb(255 255 255 / 9%);--line-strong: rgb(255 255 255 / 16%);--accent: #eea53f;--accent-soft: rgb(238 165 63 / 17%);--danger: #df7b4e;--font: Inter, "Noto Sans SC", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;--mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;--ease: cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;color:var(--text);background:#050606;font:14px/1.45 var(--font);letter-spacing:0}button,input{font:inherit;letter-spacing:0}button{color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.lightfall{position:fixed;inset:0;width:100%;height:100%;background:#050606}.scene-shade{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 32%,transparent 0 18%,rgb(3 4 4 / 9%) 48%,rgb(3 4 4 / 38%) 100%);transition:background .22s var(--ease)}.click-spark{position:fixed;inset:0;z-index:100;width:100%;height:100%;pointer-events:none}.lab{position:fixed;inset:4vh 4vw;min-width:840px;min-height:560px;display:grid;grid-template-columns:220px minmax(0,1fr);overflow:hidden;isolation:isolate;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);box-shadow:0 28px 90px #00000073;animation:shell-in .22s var(--ease) both;transition:background .22s var(--ease);--glow-x: 50%;--glow-y: 0%;--glow-alpha: .34}.lab:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(255 255 255 / .012) 0 1px,transparent 1px 4px)}.lab:after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(260px circle at var(--glow-x) var(--glow-y),rgb(255 255 255 / var(--glow-alpha)),rgb(238 165 63 / 18%) 30%,transparent 68%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.88;transition:opacity .18s var(--ease)}.lab.is-solid{background:#0c0d0d}.lab.is-solid+.toast-region{--surface-strong: #151616}@keyframes shell-in{0%{opacity:0;transform:translateY(6px)}}.rail{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:20px 13px 13px;border-right:1px solid var(--line);background:#0304047a}.identity{height:58px;display:flex;align-items:center;gap:12px;padding:0 7px 16px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.identity-mark{position:relative;width:27px;height:30px;flex:0 0 auto;transform:skewY(-12deg)}.identity-mark i{position:absolute;width:9px;height:23px;background:#f2f2ef}.identity-mark i:first-child{top:0;left:2px}.identity-mark i:last-child{right:2px;bottom:0;background:#8d8f8b}.identity>span:last-child{display:grid;gap:3px}.identity strong{font-size:13px}.identity small{color:var(--muted);font:8px/1 var(--mono)}.lab-nav{padding-top:0}.option-wheel{position:relative;min-height:0;overflow:hidden;outline:none;touch-action:none;cursor:grab}.option-wheel:active{cursor:grabbing}.option-wheel__guide{position:absolute;inset:50% 6px auto;height:42px;transform:translateY(-50%);border:1px solid var(--line);border-radius:6px;background:#ffffff0a;pointer-events:none}.option-wheel__guide:before{content:"";position:absolute;left:-1px;top:12px;width:2px;height:17px;border-radius:2px;background:var(--accent);box-shadow:0 0 16px #eea53f52}.option-wheel__guide i{position:absolute;right:8px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--muted);transform:translateY(-50%)}.lab-nav__item{position:absolute;top:50%;left:6px;width:calc(100% - 12px);height:42px;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:0 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--secondary);text-align:left;cursor:pointer;transform-origin:left center;transition:color .16s var(--ease),opacity .2s var(--ease),filter .2s var(--ease),transform .2s var(--ease);will-change:transform,opacity,filter}.lab-nav__item:hover{color:#fff}.lab-nav__item:active{transition-duration:80ms}.lab-nav__item.is-active{color:#fff}.lab-nav__item.is-active:before{content:none}@keyframes indicator-in{0%{opacity:0;transform:translateY(5px)}}.lab-nav__item svg{width:16px;color:var(--muted)}.lab-nav__item.is-active svg{color:#fff}.lab-nav__item small{color:#5e5f5b;font:9px/1 var(--mono)}.rail-note{min-height:48px;display:flex;align-items:center;gap:12px;padding:9px;border-top:1px solid var(--line)}.live-dot{width:7px;height:7px;border-radius:50%;background:#b9dab8;box-shadow:0 0 0 4px #b9dab814}.rail-note>span:last-child{display:grid;gap:4px}.rail-note strong{font:9px/1 var(--mono)}.rail-note small{color:var(--muted);font-size:10px}.workspace{min-width:0;min-height:0;display:grid;grid-template-rows:58px minmax(0,1fr)}.lab-header{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 18px 0 28px;border-bottom:1px solid var(--line)}.header-path{display:flex;align-items:center;gap:7px;color:var(--muted);font:9px/1 var(--mono)}.header-path svg{width:12px}.header-path strong{color:var(--secondary);font-weight:500}.header-tools{display:flex;align-items:center;gap:8px}.mode-toggle{height:34px;display:flex;padding:3px;border:1px solid var(--line-strong);border-radius:999px}.mode-toggle button{min-width:48px;padding:0 11px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}.mode-toggle button.is-selected{background:var(--selected);color:var(--inverse);font-weight:600}.tool-button{height:34px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line-strong);border-radius:6px;background:transparent;color:var(--secondary);font-size:10px;cursor:pointer}.tool-button:hover{background:var(--surface-hover);color:#fff}.tool-button svg{width:14px}.tool-button.is-spinning svg{animation:spin .5s var(--ease)}.content{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;scroll-behavior:smooth}.style-section{display:none;min-height:100%;padding:32px 30px 42px}.style-section.is-visible{display:block}.section-heading{max-width:720px;margin-bottom:28px}.kicker{display:block;margin-bottom:8px;color:var(--muted);font:9px/1 var(--mono)}.section-heading h1{margin:0;font-size:34px;line-height:1.15;font-weight:500}.section-heading p{max-width:660px;margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.7}.reveal-item{animation:reveal .2s var(--ease) both}.reveal-item:nth-child(2){animation-delay:35ms}.reveal-item:nth-child(3){animation-delay:70ms}.reveal-item:nth-child(4){animation-delay:105ms}.reveal-item:nth-child(5){animation-delay:.14s}@keyframes reveal{0%{opacity:0;transform:translateY(6px)}}.foundation-grid,.component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.specimen--wide{grid-column:1 / -1}.specimen{position:relative;min-width:0;overflow:visible;border:1px solid var(--line-strong);border-radius:8px;background:#00000026;transition:border-color .18s var(--ease),background .18s var(--ease);--glow-x:50%;--glow-y:0%}.specimen:hover{border-color:#ffffff38;background:#ffffff05}.specimen:after{content:"";position:absolute;inset:-1px;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(150px circle at var(--glow-x) var(--glow-y),rgb(255 255 255 / 70%),rgb(238 165 63 / 26%) 28%,transparent 68%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .18s var(--ease)}.specimen:hover:after{opacity:1}.blur-title{display:flex;flex-wrap:wrap;column-gap:0}.blur-word{display:inline-block;animation:blur-word-in .52s var(--ease) both;animation-delay:calc(var(--word-index) * 75ms)}.blur-word--space{width:.25em}@keyframes blur-word-in{0%{opacity:0;filter:blur(10px);transform:translateY(6px)}55%{filter:blur(3px)}to{opacity:1;filter:blur(0);transform:none}}.specimen-head{height:42px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 15px;border-bottom:1px solid var(--line)}.specimen-head span{font:9px/1 var(--mono)}.specimen-head small{color:#5e5f5b;font:8px/1 var(--mono)}.swatch-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:15px}.swatch{min-width:0;display:grid;gap:10px;padding:8px;border:0;border-right:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer}.swatch:last-child{border-right:0}.swatch>i{height:58px;border:1px solid rgb(255 255 255 / 9%);border-radius:6px;background:var(--swatch);transition:transform .18s var(--ease),border .18s var(--ease)}.swatch:hover>i{transform:translateY(-3px);border-color:#ffffff47}.swatch>span{display:grid;gap:3px}.swatch strong{font-size:11px}.swatch small{color:var(--muted);font:8px/1 var(--mono)}.swatch--light strong{color:inherit}.type-ramp{display:grid;gap:16px;padding:18px}.type-ramp>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}.type-ramp small{color:var(--muted);font:8px/1 var(--mono)}.type-display{font-size:28px;font-weight:500}.type-title{font-size:18px}.type-body{color:var(--secondary);font-size:14px;font-weight:400}.type-ramp code{color:#a9aaa5;font:11px/1 var(--mono)}.surface-stack{position:relative;height:194px;padding:18px}.surface-level{position:absolute;width:72%;height:64px;display:grid;grid-template-columns:25px 1fr auto;align-items:center;padding:0 14px;border:1px solid var(--line-strong);border-radius:7px;color:var(--secondary);text-align:left;cursor:pointer;transition:transform .2s var(--ease),border .18s var(--ease)}.surface-level:hover{transform:translate(4px,-3px);border-color:#ffffff47}.surface-level span,.surface-level small{color:var(--muted);font:8px/1 var(--mono)}.surface-level strong{font-size:11px}.surface-level--1{top:22px;left:18px;background:#0c0d0d}.surface-level--2{top:64px;left:50px;background:#171817}.surface-level--3{top:106px;left:82px;background:var(--selected);color:var(--inverse);border-color:var(--selected)}.geometry-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px}.spacing-scale,.radius-scale{min-height:80px;display:flex;align-items:end;justify-content:space-around;gap:10px}.spacing-scale span{width:max(20px,var(--size));height:var(--size);display:grid;place-items:center;border-top:1px solid var(--accent);color:var(--muted);font:8px/1 var(--mono)}.radius-scale span{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--muted);font:8px/1 var(--mono)}.radius-4{border-radius:4px}.radius-6{border-radius:6px}.radius-8{border-radius:8px}.radius-pill{border-radius:999px}.component-row{min-height:90px;display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:18px}.button{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border:1px solid var(--line-strong);border-radius:6px;background:transparent;color:var(--secondary);font-size:11px;font-weight:500;cursor:pointer;transition:color .16s var(--ease),background .16s var(--ease),border .16s var(--ease),transform 90ms var(--ease)}.button:hover{color:#fff;border-color:#ffffff45;background:var(--surface-hover)}.button:active{transform:translateY(1px)}.button svg{width:14px}.button--primary{border-color:var(--selected);background:var(--selected);color:var(--inverse);font-weight:600}.button--primary:hover{background:#fff;color:#000}.button--danger{color:#efa278;border-color:#df7b4e5c;background:#df7b4e1a}.button--loading svg{animation:none}.button--loading.is-loading svg{animation:spin .7s linear infinite}.button--loading.is-loading{pointer-events:none;color:var(--muted)}.icon-button{position:relative;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid var(--line-strong);border-radius:6px;background:transparent;color:var(--secondary);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),transform .1s var(--ease)}.icon-button:hover{background:var(--surface-hover);color:#fff}.icon-button:active{transform:translateY(1px)}.icon-button.is-active{color:var(--accent);border-color:#eea53f59;background:var(--accent-soft)}.icon-button svg{width:15px}.field-stack,.selection-stack,.toggle-list,.range-wrap{min-height:154px;display:grid;align-content:center;gap:14px;padding:18px}.field{display:grid;gap:7px;color:var(--muted);font-size:10px}.field input,.search-field{height:38px;border:1px solid var(--line-strong);border-radius:6px;background:#0000002e;color:var(--text);transition:border .16s var(--ease),background .16s var(--ease)}.field input{width:100%;padding:0 12px;outline:none}.field input:focus,.search-field:focus-within{border-color:var(--accent);background:#eea53f08;box-shadow:0 0 0 3px var(--accent-soft)}.search-field{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:7px;padding:0 9px 0 11px}.search-field svg{width:14px;color:var(--muted)}.search-field input{min-width:0;border:0;outline:0;background:transparent;color:#fff}.search-field kbd{color:var(--muted);font:8px/1 var(--mono)}.segmented{height:36px;display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border:1px solid var(--line-strong);border-radius:999px}.segmented button{border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;transition:color .18s var(--ease),background .18s var(--ease)}.segmented button.is-selected{background:var(--selected);color:var(--inverse);font-weight:600}.chip-row{display:flex;gap:7px}.chip{height:31px;padding:0 13px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}.chip.is-selected{background:var(--selected);border-color:var(--selected);color:var(--inverse);font-weight:600}.toggle-list label{min-height:54px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.toggle-list label:last-child{border-bottom:0}.toggle-list label>span{display:grid;gap:4px}.toggle-list strong{font-size:11px}.toggle-list small{color:var(--muted);font-size:9px}.switch{position:relative;width:38px;height:21px;padding:0;border:1px solid var(--line-strong);border-radius:999px;background:#292a27;cursor:pointer;transition:background .18s var(--ease),border .18s var(--ease)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#898a85;transition:transform .19s var(--ease),background .18s var(--ease)}.switch[aria-checked=true]{background:var(--selected);border-color:var(--selected)}.switch[aria-checked=true]:after{transform:translate(17px);background:var(--inverse)}.range-value{display:flex;justify-content:space-between;color:var(--secondary);font-size:11px}.range-value strong{font:10px/1 var(--mono)}.range-wrap input{width:100%;accent-color:var(--selected)}.mini-nav{display:grid;gap:3px;padding:16px}.mini-nav button{position:relative;height:39px;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:9px;padding:0 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--secondary);text-align:left;cursor:pointer;transition:background .17s var(--ease),color .17s var(--ease)}.mini-nav button:hover{background:var(--surface-hover)}.mini-nav button.is-active{background:#ffffff0f;color:#fff}.mini-nav button.is-active:before{content:"";position:absolute;left:0;width:2px;height:15px;background:var(--accent)}.mini-nav svg{width:15px;color:var(--muted)}.mini-nav small{color:var(--muted);font:8px/1 var(--mono)}.tabs{padding:18px}.tab-list{position:relative;height:38px;display:flex;gap:18px;border-bottom:1px solid var(--line)}.tab-list button{width:64px;padding:0;border:0;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}.tab-list button.is-active{color:#fff}.tab-indicator{position:absolute;left:0;bottom:-1px;width:64px;height:2px;background:var(--accent);transition:transform .2s var(--ease)}.tab-panel{min-height:105px;display:flex;align-items:center;gap:14px;padding:18px 4px 4px}.tab-panel.is-changing{animation:tab-content .18s var(--ease)}@keyframes tab-content{0%{opacity:0;transform:translateY(5px)}}.panel-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%}.panel-icon svg{width:15px}.tab-panel strong{font-size:12px}.tab-panel p{margin:5px 0 0;color:var(--muted);font-size:10px}.selection-list{display:grid;gap:2px;padding:15px}.selection-list button{min-height:54px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:11px;padding:0 11px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--secondary);text-align:left;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}.selection-list button:hover{background:var(--surface-hover)}.selection-list button.is-selected{background:var(--selected);color:var(--inverse)}.list-avatar{width:28px;height:28px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font:9px/1 var(--mono)}.selection-list button>span:nth-child(2){display:grid;gap:3px}.selection-list strong{font-size:11px}.selection-list small{color:var(--muted);font-size:9px}.selection-list .is-selected small{color:#5c5d59}.selection-list code{font:9px/1 var(--mono);color:var(--muted)}.pagination{min-height:156px;display:flex;align-items:center;justify-content:center;gap:5px;padding:18px}.pagination button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease)}.pagination button:hover{background:var(--surface-hover);color:#fff}.pagination button.is-current{background:var(--selected);color:var(--inverse)}.pagination svg{width:13px}.pagination span{color:var(--muted)}.popover-demo,.tooltip-row{min-height:145px;display:flex;align-items:center;justify-content:center;padding:18px}.popover-demo{position:relative}.popover{position:absolute;top:94px;left:50%;width:160px;display:grid;padding:5px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface-strong);box-shadow:0 18px 50px #00000059;opacity:0;visibility:hidden;transform:translate(-50%,-5px);transition:opacity .16s var(--ease),transform .18s var(--ease),visibility .16s;z-index:5}.popover.is-open{opacity:1;visibility:visible;transform:translate(-50%)}.popover button{height:34px;display:flex;align-items:center;gap:9px;padding:0 9px;border:0;border-radius:5px;background:transparent;color:var(--secondary);font-size:10px;cursor:pointer}.popover button:hover{background:var(--surface-hover);color:#fff}.popover svg{width:13px}.tooltip-row{gap:8px}.has-tooltip{position:relative}.tooltip{position:absolute;bottom:44px;left:50%;width:max-content;padding:6px 8px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface-strong);color:var(--secondary);font:9px/1 var(--font);opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity .14s var(--ease) 80ms,transform .16s var(--ease) 80ms,visibility .14s 80ms;pointer-events:none}.has-tooltip:hover .tooltip,.has-tooltip:focus-visible .tooltip{opacity:1;visibility:visible;transform:translate(-50%)}.loading-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:20px}.skeleton-list{display:grid;gap:10px}.skeleton-list i{height:22px;border-radius:5px;background:#ffffff0f;animation:pulse 1.1s ease-in-out infinite alternate}.skeleton-list i:nth-child(2){width:82%;animation-delay:.12s}.skeleton-list i:nth-child(3){width:64%;animation-delay:.24s}@keyframes pulse{to{background:#ffffff1c}}.progress-demo{display:grid;align-content:center;gap:12px}.progress-demo>div:first-child{display:flex;justify-content:space-between;color:var(--secondary);font-size:10px}.progress-demo strong{font:9px/1 var(--mono)}.progress-track{height:4px;overflow:hidden;border-radius:999px;background:#ffffff12}.progress-track i{display:block;width:68%;height:100%;background:var(--selected);transition:width .6s var(--ease)}.motion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.motion-card{min-width:0;padding:14px;border:1px solid var(--line-strong);border-radius:8px;background:#00000024}.motion-card>span{color:var(--muted);font:8px/1 var(--mono)}.motion-stage{height:104px;display:grid;place-items:center}.motion-object{width:44px;height:44px;display:block;border:1px solid var(--line-strong);border-radius:6px;background:#ffffff12}.motion-card strong{display:block;font-size:11px}.motion-card small{display:block;margin-top:5px;color:var(--muted);font:8px/1 var(--mono)}.motion-object--fade{animation:motion-fade 1.8s var(--ease) infinite}.motion-object--slide{position:relative;width:80px;height:4px;border:0;border-radius:999px}.motion-object--slide:after{content:"";position:absolute;top:-5px;width:14px;height:14px;border-radius:50%;background:var(--selected);animation:motion-slide 1.8s var(--ease) infinite}.motion-object--toggle{position:relative;width:48px;height:24px;border-radius:999px;animation:motion-toggle-bg 1.8s var(--ease) infinite}.motion-object--toggle:after{content:"";position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:50%;background:var(--muted);animation:motion-toggle 1.8s var(--ease) infinite}.motion-object--exit{animation:motion-exit 1.8s var(--ease) infinite}@keyframes motion-fade{0%,18%{opacity:0;transform:translateY(6px)}32%,75%{opacity:1;transform:none}88%,to{opacity:0}}@keyframes motion-slide{0%,20%{transform:translate(0)}45%,75%{transform:translate(66px)}to{transform:translate(0)}}@keyframes motion-toggle{0%,20%{transform:translate(0);background:var(--muted)}45%,75%{transform:translate(24px);background:var(--inverse)}to{transform:translate(0)}}@keyframes motion-toggle-bg{0%,20%,to{background:#252623}45%,75%{background:var(--selected)}}@keyframes motion-exit{0%,55%{opacity:1;transform:none}70%,82%{opacity:0;transform:translateY(-5px)}to{opacity:1}}.motion-timeline{margin-top:14px}.timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:30px 22px 26px}.timeline>span{position:relative;z-index:1;display:grid;justify-items:center;gap:6px}.timeline i{width:9px;height:9px;border:2px solid var(--accent);border-radius:50%;background:#111}.timeline strong{font:10px/1 var(--mono)}.timeline small{color:var(--muted);font-size:9px}.timeline b{position:absolute;top:34px;left:17%;right:17%;height:1px;background:linear-gradient(90deg,var(--accent),var(--selected));transform-origin:left;animation:timeline 1.6s var(--ease) infinite}@keyframes timeline{0%{transform:scaleX(0)}60%,to{transform:scaleX(1)}}.toast-region{position:fixed;right:24px;bottom:24px;z-index:20;display:grid;gap:8px}.toast{min-width:260px;min-height:48px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface-strong);box-shadow:0 16px 50px #00000061;animation:toast-in .18s var(--ease) both}.toast.is-leaving{animation:toast-out .14s var(--ease) both}.toast>i{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent)}.toast svg{width:14px}.toast span{display:grid;gap:3px}.toast strong{font-size:10px}.toast small{color:var(--muted);font-size:9px}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}}@keyframes toast-out{to{opacity:0;transform:translateY(4px)}}.demo-dialog{width:min(420px,calc(100vw - 32px));padding:0;border:1px solid var(--line-strong);border-radius:8px;background:#111212;color:var(--text);box-shadow:0 30px 100px #0009}.demo-dialog[open]{animation:dialog-in .19s var(--ease)}.demo-dialog::backdrop{background:#00000094;animation:backdrop-in .16s ease}.demo-dialog form{position:relative;display:grid;justify-items:start;padding:24px}.dialog-close:hover{background:var(--surface-hover);color:#fff}.dialog-close svg{width:13px}.dialog-symbol svg{width:17px}.demo-dialog form>div{justify-self:end;display:flex;gap:8px}@keyframes dialog-in{0%{opacity:0;transform:translateY(6px)}}@keyframes backdrop-in{0%{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1050px),(max-height:720px){.lab{inset:18px;grid-template-columns:68px minmax(0,1fr);min-width:0;min-height:0}.rail{padding:14px 8px 9px}.identity{justify-content:center;padding-inline:0}.identity>span:last-child,.lab-nav__item span,.lab-nav__item small,.rail-note>span:last-child{display:none}.lab-nav__item{grid-template-columns:1fr;justify-items:center;padding:0}.option-wheel__guide{inset-inline:3px}.rail-note{justify-content:center}.style-section{padding:26px 22px 34px}.section-heading h1{font-size:30px}.motion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:900px){.lab{inset:0;border-radius:0;grid-template-columns:56px minmax(0,1fr)}.lab-header{padding:0 10px 0 14px}.header-path span,.tool-button span{display:none}.mode-toggle button{min-width:40px}.foundation-grid,.component-grid{grid-template-columns:1fr}.specimen--wide{grid-column:auto}.swatch-row{grid-template-columns:repeat(2,1fr)}.swatch{border-bottom:1px solid var(--line)}.geometry-row,.loading-grid{grid-template-columns:1fr}.motion-grid{grid-template-columns:1fr 1fr}.section-heading h1{font-size:27px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}.lightfall{z-index:-2;overflow:hidden}.lightfall canvas{display:block;width:100%;height:100%}.lightfall__ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 32%,rgb(205 214 205 / 5%),transparent 42%)}.lab{background:rgb(9 10 11 / var(--surface-opacity, 88%))}.option-wheel__item{position:absolute;top:50%;left:6px;width:calc(100% - 12px);height:42px;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:0 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--secondary);text-align:left;cursor:pointer;transform-origin:left center;transition:color .16s var(--ease),opacity .2s var(--ease),filter .2s var(--ease),transform .2s var(--ease);will-change:transform,opacity,filter}.option-wheel__item:hover,.option-wheel__item.is-active{color:#fff}.option-wheel__item svg{width:16px;color:var(--muted)}.option-wheel__item.is-active svg{color:#fff}.option-wheel__item small{color:#5e5f5b;font:9px/1 var(--mono)}.blur-text{display:inline-flex;flex-wrap:wrap}.blur-text__unit{display:inline-block;animation:blur-word-in .48s var(--ease) both;animation-delay:calc(var(--unit-index) * 36ms)}.blur-text__space{width:.25em}.click-spark{z-index:100}.dialog-layer{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#00000094;animation:backdrop-in .16s ease}.demo-dialog{position:relative;width:min(420px,calc(100vw - 32px));padding:24px;border:1px solid var(--line-strong);border-radius:8px;background:#111212;color:var(--text);box-shadow:0 30px 100px #0009;animation:dialog-in .19s var(--ease)}.demo-dialog h2{margin:0;font-size:20px;font-weight:600}.demo-dialog p{margin:9px 0 22px;color:var(--muted);font-size:11px;line-height:1.65}.demo-dialog>div{display:flex;justify-content:end;gap:8px}.dialog-close{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}.dialog-symbol{width:42px;height:42px;display:grid;place-items:center;margin-bottom:18px;border:1px solid var(--line-strong);border-radius:50%}.spin{animation:spin .7s linear infinite}.form-stack{min-height:154px;display:grid;align-content:center;gap:14px;padding:18px}.form-stack>label:not(.search-field){display:grid;gap:7px;color:var(--muted);font-size:10px}.form-stack>label:not(.search-field) input{width:100%;height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:6px;outline:none;background:#0000002e;color:var(--text);transition:border .16s var(--ease),background .16s var(--ease)}.form-stack>label:not(.search-field) input:focus{border-color:var(--accent);background:#eea53f08;box-shadow:0 0 0 3px var(--accent-soft)}html,body{background:transparent}body{background:#050606}.lab{isolation:isolate}.lab>.lightfall{position:absolute;inset:0;z-index:-2;border-radius:inherit;background:#080909}.lab>.scene-shade{position:absolute;inset:0;z-index:-1}.rail,.workspace{position:relative;z-index:1}.option-wheel__guide{transition:border-color .18s var(--ease),background .18s var(--ease)}.option-wheel.is-scrolling .option-wheel__guide{border-color:#eea53f61;background:#eea53f0f}.option-wheel.is-scrolling .option-wheel__guide:before{box-shadow:0 0 18px #eea53f85}.option-wheel.is-scrolling .option-wheel__item.is-active{color:var(--accent)}@media(prefers-reduced-motion:reduce){.option-wheel__item{transition:color 1ms,opacity 1ms,filter 1ms,transform 1ms}}