/* Thirtyfold Design System — v1. All visual primitives live here. */
:root {
  color-scheme: dark;
  --bg-base: #101413; --bg-elevated: #181e1b; --bg-glass: rgb(35 45 38 / .58); --bg-glass-strong: rgb(37 46 40 / .88);
  --surface-primary: #202823; --surface-secondary: #171e1a; --surface-hover: #2e3a31;
  --text-primary: #f0f2ec; --text-secondary: #b9c1b8; --text-muted: #9ba69d; --text-inverse: #172014;
  --border-subtle: rgb(211 228 208 / .13); --border-glass: rgb(220 238 204 / .23); --border-strong: #667565;
  --accent-primary: #d8e8ba; --accent-secondary: #a9c3bd; --accent-ambient: rgb(168 193 141 / .14);
  --optical-sage: #637b65; --optical-edge: #eff4de; --optical-spine: #617960; --optical-ground: #b9d099; --optical-engraving: #e4efce; --optical-highlight: #eef6da;
  --success: #a9d7ae; --warning: #e6cc8e; --error: #f1aba8; --info: #b1cbdc;
  --clear: transparent; --shadow-ink: rgb(4 10 7 / .32); --highlight: rgb(248 255 232 / .12);
  --font-sans: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: Consolas, 'Liberation Mono', monospace;
  --display-xl: clamp(3.5rem, 7.3vw, 7.5rem); --display-l: clamp(3rem, 6vw, 6rem); --h1: clamp(3rem, 5.5vw, 5.5rem); --h2: clamp(2.2rem, 4vw, 4rem); --h3: clamp(1.55rem, 2.4vw, 2.5rem); --h4: 1.25rem;
  --body-l: 1.25rem; --body-m: 1rem; --body-s: .875rem; --label: .75rem; --caption: .75rem; --technical: .75rem;
  --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px; --space-11: 128px;
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px;
  --container: 1440px; --reading: 660px; --gutter: clamp(24px, 5vw, 80px); --columns: 12; --grid-gap: 24px;
  --shadow-0: none; --shadow-1: 0 2px 8px var(--shadow-ink); --shadow-2: 0 12px 32px var(--shadow-ink); --shadow-3: 0 24px 56px var(--shadow-ink); --shadow-4: 0 32px 80px var(--shadow-ink); --shadow-5: 0 48px 120px var(--shadow-ink);
  --motion-fast: 140ms; --motion-standard: 280ms; --motion-slow: 600ms; --motion-ambient: 12s;
  --ease-standard: cubic-bezier(.2,.7,.2,1); --ease-enter: cubic-bezier(.16,1,.3,1); --ease-exit: cubic-bezier(.4,0,1,1);
  --glass-subtle-fill: rgb(38 49 40 / .26); --glass-subtle-blur: 4px; --glass-subtle-border: rgb(220 238 204 / .1);
  --glass-standard-fill: rgb(35 45 38 / .58); --glass-standard-blur: 12px; --glass-standard-border: rgb(220 238 204 / .2);
  --glass-elevated-fill: rgb(43 55 46 / .72); --glass-elevated-blur: 16px; --glass-elevated-border: rgb(220 238 204 / .26);
  --glass-interactive-fill: rgb(44 55 46 / .5); --glass-interactive-blur: 8px; --glass-interactive-border: rgb(220 238 204 / .23);
  --glass-navigation-fill: rgb(25 33 28 / .82); --glass-navigation-blur: 16px; --glass-navigation-border: rgb(220 238 204 / .18);
  --glass-overlay-fill: rgb(17 24 19 / .9); --glass-overlay-blur: 8px; --glass-overlay-border: rgb(220 238 204 / .16);
  --glass-modal-fill: rgb(37 46 40 / .96); --glass-modal-blur: 20px; --glass-modal-border: rgb(220 238 204 / .28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg-base); color: var(--text-primary); font: var(--body-m)/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
button,input,textarea,select { font: inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color: var(--clear); }
button,a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; flex-shrink: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 5px; }
::selection { background: var(--accent-primary); color: var(--text-inverse); }
h1,h2,h3,h4,p { margin: 0; }
h1,h2,h3,h4 { font-weight: 400; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } h4 { font-size: var(--h4); letter-spacing: -.02em; }
p { color: var(--text-secondary); } p+p { margin-top: var(--space-5); }
.container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); }
.reading { max-width: var(--reading); }
.mono,.eyebrow,.caption { font-family: var(--font-mono); font-size: var(--technical); font-weight: 400; }
.caption { color: var(--text-muted); }
.eyebrow { display: flex; gap: var(--space-5); text-transform: uppercase; letter-spacing: .12em; color: var(--text-secondary); align-items: center; }
.eyebrow>span { color: var(--accent-primary); }
.section-heading { max-width: 760px; margin-bottom: var(--space-8); }
.section-heading h2 { margin-top: var(--space-6); }
.section-heading>p:last-child:not(.eyebrow) { margin-top: var(--space-6); max-width: var(--reading); font-size: var(--body-l); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-6); min-height: 48px; padding: var(--space-4) var(--space-6); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); background: var(--clear); color: var(--text-primary); font-size: var(--body-s); transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.button:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--accent-primary); color: var(--text-inverse); border-color: var(--accent-primary); }
.button.primary:hover { background: var(--text-primary); }
.button.ghost,.button.text,.button.icon { border-color: var(--clear); }
.button.text { padding-inline: 0; }
.button.icon { width: 48px; padding: var(--space-4); font-size: 1.5rem; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--body-s); }
.text-link:hover { color: var(--accent-primary); }
.text-link:hover svg { transform: translate(2px,-2px); }
.text-link svg { transition: transform var(--motion-fast); }
.actions { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }
[class*="material-"] { --mat-fill: var(--glass-standard-fill); --mat-blur: var(--glass-standard-blur); --mat-border: var(--glass-standard-border); --mat-shadow: var(--shadow-2); --mat-saturation: 110%; background: var(--mat-fill); backdrop-filter: blur(var(--mat-blur)) saturate(var(--mat-saturation)); -webkit-backdrop-filter: blur(var(--mat-blur)) saturate(var(--mat-saturation)); border: 1px solid var(--mat-border); box-shadow: inset 0 1px 0 var(--highlight),var(--mat-shadow); }
.material-subtle { --mat-fill: var(--glass-subtle-fill); --mat-blur: var(--glass-subtle-blur); --mat-border: var(--glass-subtle-border); --mat-shadow: var(--shadow-1); --mat-saturation: 100%; }
.material-elevated { --mat-fill: var(--glass-elevated-fill); --mat-blur: var(--glass-elevated-blur); --mat-border: var(--glass-elevated-border); --mat-shadow: var(--shadow-3); --mat-saturation: 115%; }
.material-interactive { --mat-fill: var(--glass-interactive-fill); --mat-blur: var(--glass-interactive-blur); --mat-border: var(--glass-interactive-border); transition: background var(--motion-standard), transform var(--motion-standard); }
.material-interactive:hover { background: var(--glass-elevated-fill); transform: translateY(-2px); }
.material-navigation { --mat-fill: var(--glass-navigation-fill); --mat-blur: var(--glass-navigation-blur); --mat-border: var(--glass-navigation-border); --mat-shadow: var(--shadow-2); }
.material-overlay { --mat-fill: var(--glass-overlay-fill); --mat-blur: var(--glass-overlay-blur); --mat-border: var(--glass-overlay-border); --mat-shadow: var(--shadow-4); --mat-saturation: 100%; }
.material-modal { --mat-fill: var(--glass-modal-fill); --mat-blur: var(--glass-modal-blur); --mat-border: var(--glass-modal-border); --mat-shadow: var(--shadow-5); }
.brand { display: inline-flex; align-items: center; gap: var(--space-4); font-size: 1.5rem; font-weight: 600; letter-spacing: -.05em; min-height: 48px; }
.brand-mark { width: 27px; height: 34px; }
.brand-period { color: var(--accent-primary); }
.nav-wrap { position: fixed; inset: var(--space-6) 0 auto; z-index: 30; padding-inline: var(--gutter); transition: top var(--motion-standard); }
.navigation { max-width: 1376px; margin: auto; min-height: 76px; border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); transition: min-height var(--motion-standard),background var(--motion-standard); }
.scrolled .nav-wrap { top: var(--space-4); }
.scrolled .navigation { min-height: 64px; background: var(--bg-glass-strong); }
.desktop-nav { display: flex; gap: var(--space-6); }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--body-s); color: var(--text-secondary); white-space: nowrap; }
.desktop-nav a:hover,.desktop-nav [aria-current] { color: var(--accent-primary); }
.portana-link { font-size: var(--body-s); display: flex; gap: var(--space-4); align-items: center; border-left: 1px solid var(--border-glass); padding-left: var(--space-6); min-height: 44px; white-space: nowrap; }
.menu-toggle { display: none; flex-direction: column; gap: 6px; }
.menu-toggle span { display: block; width: 20px; height: 1px; background: var(--text-primary); }
.mobile-navigation { width: min(480px,100%); max-width: 100%; max-height: 100dvh; height: 100dvh; margin: 0 0 0 auto; border-radius: 0; padding: var(--space-6); }
.mobile-menu-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-7); }
.mobile-navigation nav { display: grid; margin-bottom: var(--space-7); }
.mobile-navigation nav a { display: flex; gap: var(--space-6); align-items: center; font-size: 1.5rem; padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.mobile-navigation nav svg { margin-left: auto; }.mobile-navigation .caption { margin-top: var(--space-6); }
.skip-link { position: fixed; top: -100px; left: 24px; z-index: 100; padding: 12px 24px; background: var(--accent-primary); color: var(--text-inverse); }.skip-link:focus { top: 12px; }
.field { display: grid; gap: var(--space-3); font-size: var(--body-s); }
input:not(:disabled):hover,textarea:not(:disabled):hover,select:not(:disabled):hover { border-color:var(--accent-secondary); }
input:not([type=checkbox]):not([type=radio]),textarea,select { width: 100%; min-height: 48px; padding: var(--space-4) var(--space-5); background: var(--surface-secondary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); }
textarea { min-height: 120px; resize: vertical; } input::placeholder,textarea::placeholder { color: var(--text-muted); }
input:disabled,select:disabled,textarea:disabled { opacity: .5; cursor: not-allowed; }
input[aria-invalid=true] { border-color: var(--error) !important; }.field-error { color: var(--error); font-size: var(--body-s); }
input[type=checkbox],input[type=radio] { accent-color: var(--accent-primary); width: 18px; height: 18px; }
.choice { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-4); }
.switch { display: flex; gap: var(--space-4); align-items: center; min-height: 44px; background: var(--clear); color: var(--text-primary); border: 0; padding: 0; }.switch-track { width: 40px; height: 24px; padding: 3px; border-radius: var(--radius-full); background: var(--surface-hover); }.switch-track:before { content: ''; display: block; height: 18px; width: 18px; border-radius: var(--radius-full); background: var(--text-secondary); transition: transform var(--motion-fast); }[aria-checked=true] .switch-track { background: var(--accent-primary); }[aria-checked=true] .switch-track:before { background: var(--text-inverse); transform: translateX(16px); }
.badge,.tag,.chip { display: inline-flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); font: var(--technical)/1.6 var(--font-mono); border: 1px solid var(--border-glass); border-radius: var(--radius-full); color: var(--text-secondary); background: var(--surface-secondary); }.tag { border-radius: var(--radius-xs); }.chip { min-height:44px; cursor:pointer; }.chip[aria-pressed=true] { border-color:var(--accent-primary); color:var(--accent-primary); }.status-dot { height: 6px; width: 6px; border-radius: var(--radius-full); background: var(--success); }.status-dot.pending { background: var(--text-muted); }
.divider { border: 0; border-top: 1px solid var(--border-subtle); margin-block: var(--space-7); }
.avatar { display: inline-grid; width: 48px; height: 48px; place-items: center; border-radius: var(--radius-full); background: var(--surface-hover); color: var(--accent-primary); font-family:var(--font-mono); }
.progress { width:100%; accent-color:var(--accent-primary); height:8px; }
.skeleton { background: var(--surface-hover); border-radius:var(--radius-xs); height:16px; margin-block:var(--space-4); }.skeleton.short { width:60%; }
.spinner { display:inline-block; width:16px; height:16px; border:1px solid currentColor; border-right-color:var(--clear); border-radius:var(--radius-full); animation:spin 1s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }
.tabs { display:flex; border-bottom:1px solid var(--border-glass); gap:var(--space-6); }.tabs button { padding:var(--space-4) 0; min-height:48px; background:var(--clear); border:0; border-bottom:2px solid var(--clear); color:var(--text-secondary); }.tabs [aria-selected=true] { color:var(--accent-primary); border-bottom-color:var(--accent-primary); }[role=tabpanel] { padding:var(--space-6) 0; }
details { border-bottom:1px solid var(--border-subtle); }summary { cursor:pointer; min-height:56px; padding-block:var(--space-5); }details p { padding-bottom:var(--space-6); }
dialog { color:var(--text-primary); border-radius:var(--radius-lg); width:min(520px,calc(100% - 32px)); padding:var(--space-7); }dialog::backdrop { background:var(--glass-overlay-fill); }dialog h3 { margin-bottom:var(--space-5); }dialog .actions { margin-top:var(--space-7); }
dialog[open] { animation:layer-enter var(--motion-standard) var(--ease-enter); }dialog[open]::backdrop { animation:layer-fade var(--motion-standard) var(--ease-standard); }
@keyframes layer-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes layer-fade { from { opacity:0; } to { opacity:1; } }
.drawer { height:100dvh; max-height:100dvh; margin:0 0 0 auto; border-radius:0; }
.toast { position:fixed; bottom:var(--space-6); right:var(--space-6); z-index:100; padding:var(--space-5) var(--space-6); border-radius:var(--radius-md); max-width:calc(100% - 48px); }
.tooltip-wrap { position:relative; display:inline-flex; }.tooltip { position:absolute; width:max-content; max-width:220px; bottom:calc(100% + 8px); padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); background:var(--surface-hover); font-size:var(--body-s); opacity:0; pointer-events:none; }.tooltip-wrap:hover .tooltip,.tooltip-wrap:focus-within .tooltip { opacity:1; }
.popover { position:absolute; top:calc(100% + 8px); right:0; min-width:220px; padding:var(--space-5); z-index:10; border-radius:var(--radius-md); }.popover a { display:block; padding:var(--space-4); }.relative { position:relative; }
.empty-panel { border-block:1px solid var(--border-subtle); padding:var(--space-9) 0; }.empty-panel h3 { margin-block:var(--space-5); }.empty-symbol { display:grid; place-items:center; height:64px; width:64px; border:1px solid var(--border-glass); border-radius:var(--radius-full); color:var(--accent-primary); font-size:2rem; }.error-panel { border-left:2px solid var(--error); background:var(--surface-secondary); padding:var(--space-6); }.error-panel h4 { margin-bottom:var(--space-4); }
.footer { padding-top:var(--space-9); padding-bottom:var(--space-7); }.footer-top { display:flex; align-items:flex-start; gap:var(--space-8); padding-bottom:var(--space-8); }.footer-top p { margin-right:auto; font-size:var(--body-s); }.footer-top p span { color:var(--text-muted); }.footer-bottom { border-top:1px solid var(--border-subtle); padding-top:var(--space-6); display:flex; justify-content:space-between; gap:var(--space-6); color:var(--text-muted); }.footer-bottom nav { display:flex; gap:var(--space-6); flex-wrap:wrap; font-size:var(--body-s); }.footer-bottom a { min-height:44px; display:inline-flex; align-items:center; }.footer-bottom .mono { padding-top:var(--space-4); }
/* The dedicated, inspectable phase-one canvas. */
.ds-header { padding:var(--space-7) var(--gutter); border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
.responsive-frames>div { max-width:100%; min-width:0; }
.ds-layout { display:grid; grid-template-columns:240px minmax(0,1fr); max-width:1600px; margin:auto; }.ds-sidebar { position:sticky; top:0; height:100vh; overflow:auto; padding:var(--space-7); border-right:1px solid var(--border-subtle); }.ds-sidebar a { display:block; padding:var(--space-4) 0; color:var(--text-secondary); font-size:var(--body-s); }.ds-sidebar a:hover { color:var(--accent-primary); }.ds-main { padding:var(--space-9) var(--gutter); min-width:0; }.ds-intro h1 { font-size:var(--display-l); margin-block:var(--space-6); }.ds-intro p { max-width:var(--reading); }.ds-section { padding-block:var(--space-9); border-bottom:1px solid var(--border-subtle); }.ds-section h2 { font-size:2rem; margin-bottom:var(--space-7); }.ds-section h3 { font-size:1.4rem; margin-block:var(--space-6); }.ds-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }.ds-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.ds-sample { padding:var(--space-6); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); min-width:0; }.ds-sample h4 { margin-bottom:var(--space-4); }.swatch { height:64px; border:1px solid var(--border-glass); margin-bottom:var(--space-4); border-radius:var(--radius-sm); }.token-label { display:block; font:var(--technical)/1.7 var(--font-mono); color:var(--text-secondary); overflow-wrap:anywhere; }.type-row { padding-block:var(--space-6); border-bottom:1px solid var(--border-subtle); overflow-wrap:anywhere; }.type-row .caption { display:block; margin-bottom:var(--space-4); }.scale-row { display:flex; align-items:center; gap:var(--space-6); margin-block:var(--space-4); }.scale-bar { height:12px; background:var(--accent-primary); }.material-stage { background:radial-gradient(ellipse at 40% 20%,var(--accent-ambient),var(--clear) 65%), repeating-linear-gradient(110deg,var(--clear) 0 70px,var(--border-glass) 71px 72px); padding:var(--space-7); }.material-stage .ds-sample { min-height:200px; }.ds-table { width:100%; border-collapse:collapse; font-size:var(--body-s); }.ds-table th,.ds-table td { padding:var(--space-4); text-align:left; border-bottom:1px solid var(--border-subtle); }.ds-table th { color:var(--text-secondary); font-weight:400; }.table-scroll { overflow-x:auto; }.grid-demo { display:grid; grid-template-columns:repeat(var(--columns),1fr); gap:var(--space-3); }.grid-demo span { background:var(--accent-ambient); height:80px; border:1px solid var(--border-glass); }.state-focus { outline:2px solid var(--accent-primary); outline-offset:4px; }.state-hover { background:var(--surface-hover); }.state-pressed { transform:translateY(1px); background:var(--surface-primary); }.responsive-frames { display:flex; gap:var(--space-6); align-items:flex-start; flex-wrap:wrap; }.responsive-frame { border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:var(--space-5); background:var(--surface-secondary); }.responsive-frame .mini-nav { height:24px; margin-bottom:var(--space-6); border:1px solid var(--border-glass); border-radius:var(--radius-sm); background:var(--bg-glass); }.responsive-frame .mini-title { height:12px; width:70%; background:var(--text-secondary); margin-bottom:var(--space-3); }.responsive-frame .mini-object { width:56px; height:70px; margin:var(--space-6) auto; border:1px solid var(--accent-primary); background:var(--accent-ambient); transform:skewY(-15deg); }.responsive-frame .mini-row { height:24px; border-top:1px solid var(--border-subtle); }.ds-note { font-size:var(--body-s); margin-block:var(--space-6); }.preview-website { margin-top:var(--space-7); }
@supports not (backdrop-filter:blur(1px)) { [class*="material-"] { background:var(--bg-glass-strong); } }
@media(min-width:1600px) { .desktop-nav { gap:var(--space-7); } }
@media(max-width:1200px) { .desktop-nav { gap:var(--space-5); }.navigation { gap:var(--space-5); padding-inline:var(--space-5); }.desktop-nav a { font-size:.8rem; }.brand { font-size:1.3rem; }.portana-link { padding-left:var(--space-5); } }
@media(max-width:1023px) { :root { --columns:8; --grid-gap:16px; }.desktop-nav { display:none; }.menu-toggle { display:flex; }.portana-link { margin-left:auto; border:0; }.ds-layout { grid-template-columns:180px minmax(0,1fr); }.ds-sidebar { padding:var(--space-5); }.ds-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.footer-top { flex-wrap:wrap; } }
@media(max-width:639px) { :root { --columns:4; --grid-gap:16px; --gutter:24px; }.nav-wrap { top:var(--space-4); padding-inline:var(--space-5); }.navigation { min-height:64px; padding:var(--space-3) var(--space-4); gap:var(--space-3); }.portana-link { font-size:var(--caption); padding:0; gap:var(--space-2); }.portana-link svg { width:16px; }.brand { font-size:1.25rem; gap:var(--space-3); }.brand-mark { width:24px; }.footer-top { gap:var(--space-6); }.footer-top .brand { width:100%; }.footer-top p { width:100%; }.footer-bottom { flex-direction:column; }.footer-bottom nav { gap:var(--space-3) var(--space-6); }.ds-header { flex-wrap:wrap; }.ds-layout { display:block; }.ds-sidebar { position:static; height:auto; border-right:0; display:flex; gap:var(--space-6); overflow:auto; }.ds-sidebar a { white-space:nowrap; }.ds-main { padding-top:var(--space-7); }.ds-grid,.ds-grid.two { grid-template-columns:1fr; }.ds-section { padding-block:var(--space-8); }.material-stage { padding:var(--space-5); }.ds-intro h1 { font-size:3rem; }.button { gap:var(--space-4); }.section-heading { margin-bottom:var(--space-7); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none !important; transition:none !important; }.spinner { border-right-style:dashed; } }