:root {
  --canvas:#fbfcfd; --surface:#fff; --subtle:#f4f7fb; --execution:#0e1116;
  --ink:#11151a; --muted:#5b6573; --faint:#667180; --disabled:#8b95a3;
  --border:#e6eaef; --border-soft:#eef1f5; --border-strong:#c3cad5;
  --action:#3358d4; --action-hover:#2949b8; --action-active:#203a93; --action-soft:#eaeefc; --action-row:#f5f8ff;
  --success:#11845b; --success-soft:#e5f4ec; --warning:#9a6817; --warning-soft:#fef3d8; --danger:#c52238; --danger-soft:#fdecef;
  --ui:'Space Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a{transition:background .18s,color .18s,border-color .18s,transform .18s}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.site-header{height:68px;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;gap:36px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:18px;font-weight:700;text-decoration:none;letter-spacing:-.02em}
.brand-mark{width:30px;height:30px;padding:6px;display:grid;gap:3px;background:var(--action);border-radius:8px;box-shadow:0 3px 8px rgba(51,88,212,.22)}
.brand-mark i{display:block;background:#fff;border-radius:1.5px}.brand-mark i:nth-child(2){opacity:.75}.brand-mark i:nth-child(3){opacity:.9}
.site-header nav{display:flex;gap:26px}.site-header nav a{color:var(--muted);font-size:12px;font-weight:600;text-decoration:none}.site-header nav a:hover{color:var(--action)}
.version{margin-left:auto;color:var(--faint);font:600 10px/1 var(--mono);letter-spacing:.08em}
main{overflow:hidden}.hero{max-width:1180px;margin:0 auto;padding:104px 0 96px;display:grid;grid-template-columns:.86fr 1.14fr;gap:76px;align-items:center}
.eyebrow{margin:0 0 18px;color:var(--action);font:700 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
h1{margin:0;font-size:clamp(48px,6vw,76px);line-height:.98;letter-spacing:-.055em}.lede{max-width:490px;margin:28px 0 0;color:var(--muted);font-size:17px;line-height:1.55}
.hero-actions{margin-top:34px;display:flex;align-items:center;gap:24px}.button{min-height:40px;padding:0 17px;border:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}
.button.primary{background:var(--action);color:#fff;box-shadow:0 4px 14px rgba(51,88,212,.25)}.button.primary:hover{background:var(--action-hover);transform:translateY(-1px)}.button.primary:active{background:var(--action-active);transform:none}.button:disabled{opacity:.48;cursor:not-allowed;box-shadow:none;transform:none}
.text-link{color:var(--action);font-size:12px;font-weight:700;text-decoration:none}.text-link:hover{color:var(--action-hover)}
.hero-object{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 22px 60px rgba(17,21,26,.11);overflow:hidden;transform:rotate(1deg)}
.object-bar{padding:19px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.object-bar>div{display:grid;gap:5px}.object-bar strong{font-size:15px}.object-bar>div span{color:var(--faint);font:500 10px var(--mono)}
.mini-grid{font-size:11px}.mini-row{min-height:44px;padding:0 18px;display:grid;grid-template-columns:1.6fr .85fr .5fr;align-items:center;border-bottom:1px solid var(--border-soft)}.mini-row span:last-child{text-align:right;font-family:var(--mono)}.mini-head{min-height:48px;color:var(--ink);font-weight:700;background:#fff}.mini-head span:last-child{font-family:var(--ui)}.mini-row.flagged{background:var(--action-row);color:var(--action)}.mini-row b{margin-left:4px;color:var(--warning);font:600 8px var(--mono)}
.execution-strip{min-height:56px;padding:0 16px 0 20px;display:flex;align-items:center;justify-content:space-between;background:var(--execution);color:#6fcf97;font:500 10px var(--mono)}.execution-strip button{padding:9px 13px;border:0;border-radius:8px;background:var(--action);color:#fff;font:700 10px var(--ui)}
.principles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}.principles article{min-height:176px;padding:32px max(24px,calc((100vw - 1180px)/8));border-right:1px solid var(--border)}.principles article:last-child{border:0}.principles span{color:var(--action);font:600 10px var(--mono)}.principles h2{margin:22px 0 8px;font-size:16px;line-height:1.25}.principles p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.section{max-width:1180px;margin:0 auto;padding:112px 0}.section-heading{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:44px;align-items:end;margin-bottom:48px}.section-heading .eyebrow{align-self:start}.section-heading h2{margin:0;font-size:38px;line-height:1.05;letter-spacing:-.04em}.section-heading>p:last-child{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.foundation-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:16px}.specimen,.component-card{background:var(--surface);border:1px solid var(--border);border-radius:12px}.specimen{padding:26px}.specimen-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.specimen-title h3{margin:0;font-size:15px}.specimen-title>span{color:var(--faint);font:600 9px var(--mono);letter-spacing:.07em}
.color-specimen{grid-column:1/-1}.swatches{display:grid}.core-swatches{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:8px}.swatch{height:146px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;border-radius:8px;color:#fff}.swatch span{font-size:13px;font-weight:700}.swatch code{font:500 10px var(--mono);opacity:.78}.swatch.ink{background:var(--ink)}.swatch.action{background:var(--action)}.swatch.canvas{background:var(--canvas);color:var(--ink);border:1px solid var(--border)}.swatch.surface{background:#fff;color:var(--ink);border:1px solid var(--border)}
.status-swatches{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}.status-swatches>div{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center}.status-swatches i{width:30px;height:30px;border-radius:50%}.status-swatches span{font-size:11px;font-weight:600}.status-swatches code{color:var(--faint);font:500 9px var(--mono)}.success-bg{background:var(--success)}.warning-bg{background:var(--warning)}.danger-bg{background:var(--danger)}.muted-bg{background:var(--muted)}
.type-display{padding:22px 0 30px;border-bottom:1px solid var(--border);font-size:43px;line-height:1.08;font-weight:700;letter-spacing:-.045em}.type-display>span{display:block;margin-bottom:13px;color:var(--faint);font:600 9px var(--mono);letter-spacing:.06em}.type-row{padding:23px 0;display:grid;grid-template-columns:160px 1fr;gap:20px;border-bottom:1px solid var(--border-soft)}.type-row:last-child{border:0;padding-bottom:0}.type-row div{display:grid;gap:7px}.type-row span{color:var(--faint);font:600 9px var(--mono)}.type-row strong{font-size:13px}.type-row p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.type-row.mono strong,.type-row.mono p{font-family:var(--mono)}
.space-scale{display:grid;gap:13px;padding-bottom:26px;border-bottom:1px solid var(--border)}.space-scale div{height:12px;display:flex;align-items:center;gap:12px}.space-scale i{height:8px;background:var(--action);border-radius:2px}.space-scale span{color:var(--faint);font:500 9px var(--mono)}.radius-scale{margin-top:25px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.radius-scale div{display:flex;align-items:center;gap:12px;color:var(--muted);font:500 9px var(--mono)}.radius-scale i{width:42px;height:42px;background:var(--action-soft);border:1px solid rgba(51,88,212,.3)}.r4{border-radius:4px}.r8{border-radius:8px}.r12{border-radius:12px}.r16{border-radius:16px}
.components-section{padding-top:32px}.compact-heading{grid-template-columns:1fr 1.5fr 1fr}.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.component-card{padding:24px}.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:13px 0}.button.secondary{background:#fff;color:var(--ink);border:1px solid var(--border-strong)}.button.secondary:hover{background:var(--subtle)}.button.quiet{background:var(--subtle);color:var(--muted)}.button.danger-button{background:var(--danger-soft);color:var(--danger)}
.field{display:grid;gap:8px;margin-top:16px}.field>span{font-size:11px;font-weight:600}.field>span b{margin-left:5px;color:var(--faint);font:500 8px var(--mono)}.field input{width:100%;height:38px;padding:0 12px;border:1px solid var(--border-strong);border-radius:8px;color:var(--ink);font:500 11px var(--mono)}.field-error input{border-color:var(--danger)}.field small{color:var(--danger);font-size:9px}.check{margin-top:18px;display:flex;align-items:center;gap:9px;color:var(--muted);font-size:10px}.check input{accent-color:var(--action)}
.status-list{display:flex;flex-wrap:wrap;gap:10px}.status{width:max-content;padding:6px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700}.status b{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font:700 9px var(--mono)}.status.success{color:var(--success);background:var(--success-soft)}.status.warning{color:var(--warning);background:var(--warning-soft)}.status.danger{color:var(--danger);background:var(--danger-soft)}.status.info{color:var(--action);background:var(--action-soft)}.status.neutral{color:var(--muted);background:var(--subtle)}
.nav-demo{display:grid;gap:3px}.nav-demo button{height:38px;padding:0 12px;display:flex;align-items:center;gap:10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:11px;font-weight:600;text-align:left}.nav-demo i{width:7px;height:7px;border-radius:2px;background:var(--border-strong)}.nav-demo button.active{background:var(--action-soft);color:var(--action)}.nav-demo button.active i{background:var(--action)}.nav-demo button span{margin-left:auto;font:500 9px var(--mono)}
.notice{position:relative;margin-top:10px;padding:15px 118px 15px 16px;display:grid;gap:5px;border-radius:8px}.notice b{font-size:11px}.notice span{font-size:9px;line-height:1.45}.notice button{position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:7px 10px;border:1px solid currentColor;border-radius:7px;background:transparent;color:inherit;font-size:9px;font-weight:700}.warning-notice{background:var(--warning-soft);color:var(--warning)}.success-notice{background:var(--success-soft);color:var(--success)}
.terminal-card{background:var(--execution);border-color:var(--execution);color:#fff}.dark-title>span{color:#a7b0bc}.terminal-card pre{margin:42px 0 8px;font:500 10px/2 var(--mono);white-space:pre-wrap;color:#fff}.terminal-card pre em{color:#5b8cff;font-style:normal}.terminal-card pre span{display:block;color:#a7b0bc}.terminal-card pre strong{display:block;color:#6fcf97;font-weight:500}
.composition-section{max-width:none;padding:112px max(24px,calc((100vw - 1380px)/2));background:#f0f3f8}.composition-heading{max-width:1180px;margin-left:auto;margin-right:auto}.app-frame{height:660px;display:grid;grid-template-columns:210px minmax(500px,1fr) 250px;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 22px 60px rgba(17,21,26,.1)}.app-frame aside{padding:17px 12px;display:flex;flex-direction:column;border-right:1px solid var(--border)}.frame-brand{padding:0 7px 18px}.frame-brand .brand-mark{width:27px;height:27px}.new-import{height:36px;border:0;border-radius:8px;background:var(--action);color:#fff;font-size:10px;font-weight:700}.app-frame aside small{margin:25px 9px 7px;color:var(--disabled);font:600 8px var(--mono);letter-spacing:.07em}.frame-nav,.recent{display:grid;gap:2px}.frame-nav span,.recent span{padding:9px 10px;border-radius:7px;color:var(--muted);font-size:10px;font-weight:600}.frame-nav span.active{background:var(--action-soft);color:var(--action)}.recent span{font:500 9px var(--mono)}.recent span.active{background:var(--subtle);color:var(--ink);font-weight:700}
.workspace{min-width:0;display:flex;flex-direction:column}.workspace>header{height:62px;padding:0 18px;display:flex;align-items:center;border-bottom:1px solid var(--border)}.workspace>header>div:first-child{display:grid;gap:5px}.workspace>header strong{font-size:13px}.workspace>header div>span{color:var(--faint);font:500 8px var(--mono)}.steps{margin-left:auto;display:flex;align-items:center;gap:7px}.steps span{font-size:9px;font-weight:600}.steps span.done{color:var(--ink)}.steps span.active{padding:7px 10px;border-radius:999px;background:var(--action-soft);color:var(--action)}.steps i{width:18px;height:1px;background:var(--border)}
.table-wrap{flex:1;overflow:auto;background:var(--canvas)}table{width:100%;min-width:650px;border-collapse:collapse;font-size:9px}th,td{height:45px;padding:0 12px;text-align:left;border-bottom:1px solid var(--border-soft);white-space:nowrap}th{height:54px;position:sticky;top:0;background:#fff;font-size:10px}th small{display:block;margin-top:5px;color:var(--faint);font:500 7px var(--mono)}th small.warn-text{color:var(--warning)}td:last-child{font-family:var(--mono);text-align:right}.flagged{background:var(--action-row);color:var(--action)}.flagged b{color:var(--warning)}.workspace>footer{height:58px;padding:0 14px 0 18px;display:flex;align-items:center;justify-content:space-between;background:var(--execution);color:#6fcf97;font:500 8px var(--mono)}.workspace>footer div{display:flex;align-items:center;gap:7px}.workspace>footer small{color:#a7b0bc;font:500 7px var(--mono)}.workspace>footer button{padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.07);color:#a7b0bc;font-size:8px}.workspace>footer button.run{border-color:var(--action);background:var(--action);color:#fff;font-weight:700}
.inspector{border-left:1px solid var(--border);background:#fff}.inspector>header{height:62px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--border)}.inspector>header strong{font-size:11px}.inspector>header span{margin-left:auto;padding:4px 7px;border-radius:999px;background:var(--warning-soft);color:var(--warning);font-size:8px;font-weight:700}.fix{margin:12px;padding:13px;border:1px solid var(--border);border-radius:9px;display:grid;gap:7px}.fix strong{font-size:10px}.fix small{color:var(--faint);font:500 8px var(--mono)}.fix div{display:flex;gap:6px;margin-top:4px}.fix button{padding:7px 9px;border:0;border-radius:7px;background:var(--action);color:#fff;font-size:8px;font-weight:700}.fix button+button{border:1px solid var(--border);background:#fff;color:var(--muted)}
.page-footer{max-width:1180px;margin:0 auto;padding:34px 0;display:flex;align-items:center;gap:30px;color:var(--faint);font:500 9px var(--mono);letter-spacing:.04em}.page-footer span:nth-child(2){margin:auto}.page-footer a{color:var(--action);text-decoration:none}
@media(max-width:1220px){.hero,.section,.page-footer{margin-left:24px;margin-right:24px}.site-header{padding-left:24px;padding-right:24px}.app-frame{grid-template-columns:190px minmax(500px,1fr)}.inspector{display:none}}
@media(max-width:820px){.site-header nav,.version{display:none}.hero{padding:72px 0;grid-template-columns:1fr;gap:50px}.hero-object{transform:none}.principles{grid-template-columns:1fr 1fr}.principles article:nth-child(2){border-right:0}.principles article:nth-child(-n+2){border-bottom:1px solid var(--border)}.section{padding:78px 0}.section-heading,.compact-heading{grid-template-columns:1fr;gap:14px;align-items:start}.section-heading .eyebrow{margin:0}.foundation-grid,.component-grid{grid-template-columns:1fr}.color-specimen{grid-column:auto}.core-swatches{grid-template-columns:1fr 1fr}.status-swatches{grid-template-columns:1fr 1fr}.app-frame{height:580px;grid-template-columns:1fr}.app-frame aside{display:none}.page-footer span:nth-child(2){display:none}}
@media(max-width:520px){.hero,.section,.page-footer{margin-left:16px;margin-right:16px}.site-header{height:60px;padding:0 16px}.hero{padding:56px 0}.hero-actions{align-items:flex-start;flex-direction:column}.mini-row{grid-template-columns:1.5fr .9fr .5fr;padding:0 12px;font-size:9px}.principles{grid-template-columns:1fr}.principles article{min-height:130px;border-right:0;border-bottom:1px solid var(--border)}.principles article:nth-child(3){border-bottom:1px solid var(--border)}.core-swatches{grid-template-columns:1fr}.swatch{height:104px}.status-swatches{grid-template-columns:1fr}.type-display{font-size:34px}.type-row{grid-template-columns:1fr}.component-card,.specimen{padding:19px}.button-row{align-items:stretch;flex-direction:column}.notice{padding-right:16px}.notice button{position:static;margin-top:6px;transform:none;width:max-content}.app-frame{height:520px}.composition-section{padding-left:16px;padding-right:16px}.page-footer{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}