/* Lumina Design System — built bundle. Set data-theme on any element. */
*,*::before,*::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: 100%}body{-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility}img,picture,svg,canvas{display: block;max-width: 100%}input,button,textarea,select{font: inherit;color: inherit}button{cursor: pointer;background: none;border: none}a{color: inherit;text-decoration: none}ul,ol{list-style: none;padding: 0}:where(h1,h2,h3,h4,h5,h6){font-weight: inherit}:root,[data-theme="foundation"]{color-scheme: light;--bg: #f6f7f9;--bg-2: #ffffff;--bg-3: #eef0f3;--bg-inset: #f9fafb;--text: #11181c;--text-2: #5b6770;--text-3: #8c97a0;--border: #e3e7eb;--border-2: #cfd6dc;--bw: 1px;--primary: #2563eb;--primary-2: #1d4ed8;--on-primary: #ffffff;--accent: #7c3aed;--on-accent: #ffffff;--success: #16a34a;--warning: #d97706;--danger: #dc2626;--info: #0891b2;--ring: color-mix(in srgb,var(--primary) 45%,transparent);--font-body: "Inter",system-ui,-apple-system,sans-serif;--font-head: "Inter",system-ui,-apple-system,sans-serif;--font-mono: "JetBrains Mono",ui-monospace,"SF Mono",monospace;--fw-normal: 400;--fw-medium: 500;--fw-bold: 650;--fw-head: 700;--tracking-head: -0.02em;--tracking-body: 0em;--leading: 1.6;--fs-base: 15px;--case-head: none;--radius: 10px;--radius-sm: 7px;--radius-lg: 16px;--radius-pill: 999px;--shadow-color: 220 25% 20%;--shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .08);--shadow: 0 4px 12px -2px hsl(var(--shadow-color) / .12);--shadow-lg: 0 18px 40px -12px hsl(var(--shadow-color) / .22);--transition: 180ms cubic-bezier(.2,.7,.3,1);--density: 1;--btn-radius: var(--radius);--btn-weight: var(--fw-bold);--btn-shadow: var(--shadow-sm);--btn-border: transparent;--btn-transform: none;--card-bg: var(--bg-2);--card-radius: var(--radius-lg);--card-shadow: var(--shadow);--card-border: var(--bw) solid var(--border);--input-bg: var(--bg-2);--input-radius: var(--radius-sm);--input-border: var(--bw) solid var(--border-2);--nav-bg: color-mix(in srgb,var(--bg-2) 80%,transparent);--sidenav-bg: var(--bg-2);--topbar-bg: color-mix(in srgb,var(--bg-2) 85%,transparent);--menu-bg: var(--bg-2);--glow: none;--backdrop: none;--surface-grad: none}:root{--s-1: calc(4px * var(--density));--s-2: calc(8px * var(--density));--s-3: calc(12px * var(--density));--s-4: calc(16px * var(--density));--s-5: calc(24px * var(--density));--s-6: calc(32px * var(--density));--s-7: calc(48px * var(--density));--s-8: calc(64px * var(--density))}.demo,[data-theme]{background: var(--bg);color: var(--text);font-family: var(--font-body);font-size: var(--fs-base);font-weight: var(--fw-normal);line-height: var(--leading);letter-spacing: var(--tracking-body);transition: background var(--transition),color var(--transition)}.demo{min-height: 100vh}.wrap{max-width: 1180px;margin: 0 auto;padding: var(--s-6) var(--s-5) var(--s-8)}h1,h2,h3,h4,h5,h6{font-family: var(--font-head);font-weight: var(--fw-head);letter-spacing: var(--tracking-head);line-height: 1.15;color: var(--text);text-transform: var(--case-head)}[data-theme] h1{font-size: clamp(2rem,4vw,3rem)}[data-theme] h2{font-size: 1.7rem}[data-theme] h3{font-size: 1.25rem}[data-theme] p{color: var(--text-2);max-width: 64ch}[data-theme] a.link{color: var(--primary);font-weight: var(--fw-medium);border-bottom: 1px solid color-mix(in srgb,var(--primary) 35%,transparent)}[data-theme] a.link:hover{color: var(--primary-2)}[data-theme] code,[data-theme] .mono{font-family: var(--font-mono);font-size: .85em}[data-theme] .inline-code{background: var(--bg-3);border: var(--bw) solid var(--border);padding: .1em .4em;border-radius: var(--radius-sm)}[data-theme] blockquote{border-left: 3px solid var(--accent);padding: var(--s-2) var(--s-4);color: var(--text-2);font-style: italic;background: color-mix(in srgb,var(--accent) 5%,transparent);border-radius: 0 var(--radius-sm) var(--radius-sm) 0}.eyebrow{font-size: .72rem;font-weight: var(--fw-bold);letter-spacing: .14em;text-transform: uppercase;color: var(--text-3);font-family: var(--font-head)}.muted{color: var(--text-2)}.subtle{color: var(--text-3)}.appbar{position: sticky;top: 0;z-index: 5;display: flex;align-items: center;gap: var(--s-5);padding: var(--s-3) var(--s-5);background: var(--nav-bg);-webkit-backdrop-filter: var(--backdrop);backdrop-filter: var(--backdrop);border-bottom: var(--bw) solid var(--border)}.brand{display: flex;align-items: center;gap: var(--s-2);font-family: var(--font-head);font-weight: var(--fw-head);letter-spacing: var(--tracking-head);font-size: 1.15rem}.brand .logo{width: 30px;height: 30px;border-radius: var(--radius-sm);background: linear-gradient(135deg,var(--primary),var(--accent));box-shadow: var(--glow);display: grid;place-items: center;color: var(--on-primary);font-weight: 800}.appnav{display: flex;gap: var(--s-1);margin-left: var(--s-3)}.appnav a{padding: var(--s-1) var(--s-3);border-radius: var(--radius-sm);color: var(--text-2);font-weight: var(--fw-medium);font-size: .92rem}.appnav a:hover{background: var(--bg-3);color: var(--text)}.appnav a.active{color: var(--text);background: color-mix(in srgb,var(--primary) 12%,transparent)}.appbar .spacer{flex: 1}.btn{display: inline-flex;align-items: center;justify-content: center;gap: var(--s-2);padding: calc(var(--s-2) + 1px) var(--s-4);font-family: var(--font-head);font-weight: var(--btn-weight);font-size: .92rem;border-radius: var(--btn-radius);border: var(--bw) solid var(--btn-border);background: var(--bg-2);color: var(--text);box-shadow: var(--btn-shadow);transition: transform var(--transition),background var(--transition),box-shadow var(--transition),color var(--transition),border-color var(--transition)}.btn:hover{transform: var(--btn-transform)}.btn:active{transform: translateY(1px)}.btn:focus-visible{outline: none;box-shadow: 0 0 0 4px var(--ring)}.btn.primary{background: var(--primary);color: var(--on-primary);border-color: var(--primary)}.btn.primary:hover{background: var(--primary-2);border-color: var(--primary-2)}.btn.accent{background: var(--accent);color: var(--on-accent);border-color: var(--accent)}.btn.secondary{background: var(--bg-3);color: var(--text);border-color: var(--border)}.btn.ghost{background: transparent;color: var(--text);border-color: var(--border);box-shadow: none}.btn.ghost:hover{background: var(--bg-3)}.btn.danger{background: var(--danger);color: #fff;border-color: var(--danger)}.btn.sm{padding: var(--s-1) var(--s-3);font-size: .82rem}.btn.lg{padding: var(--s-3) var(--s-6);font-size: 1rem}.card{background: var(--card-bg);background-image: var(--surface-grad);border: var(--card-border);border-radius: var(--card-radius);box-shadow: var(--card-shadow);padding: var(--s-5);transition: transform var(--transition),box-shadow var(--transition)}.card.hoverable:hover{transform: translateY(-3px);box-shadow: var(--shadow-lg)}.card-head{display: flex;align-items: center;justify-content: space-between;margin-bottom: var(--s-4)}.card-title{font-family: var(--font-head);font-weight: var(--fw-head);font-size: 1.05rem;letter-spacing: var(--tracking-head)}.stat .label{font-size: .8rem;color: var(--text-3);font-weight: var(--fw-medium)}.stat .value{font-family: var(--font-head);font-size: 2.1rem;font-weight: var(--fw-head);letter-spacing: var(--tracking-head);margin: var(--s-1) 0}.badge{display: inline-flex;align-items: center;gap: 6px;padding: 2px 10px;border-radius: var(--radius-pill);font-size: .74rem;font-weight: var(--fw-bold);font-family: var(--font-head);letter-spacing: .02em;background: var(--bg-3);color: var(--text-2);border: var(--bw) solid var(--border)}.badge.up{color: var(--success);background: color-mix(in srgb,var(--success) 12%,transparent);border-color: color-mix(in srgb,var(--success) 30%,transparent)}.badge.down{color: var(--danger);background: color-mix(in srgb,var(--danger) 12%,transparent);border-color: color-mix(in srgb,var(--danger) 30%,transparent)}.badge.brand{color: var(--primary);background: color-mix(in srgb,var(--primary) 12%,transparent);border-color: color-mix(in srgb,var(--primary) 30%,transparent)}.dot{width: 7px;height: 7px;border-radius: 50%;background: currentColor}.alert{display: flex;gap: var(--s-3);align-items: flex-start;padding: var(--s-3) var(--s-4);border-radius: var(--radius);border: var(--bw) solid var(--border);background: var(--bg-2)}.alert .ico{width: 22px;height: 22px;border-radius: 50%;display: grid;place-items: center;color: #fff;font-weight: 700;font-size: .8rem;flex: none}.alert.success{border-color: color-mix(in srgb,var(--success) 40%,transparent);background: color-mix(in srgb,var(--success) 8%,var(--bg-2))}.alert.success .ico{background: var(--success)}.alert.warning{border-color: color-mix(in srgb,var(--warning) 40%,transparent);background: color-mix(in srgb,var(--warning) 8%,var(--bg-2))}.alert.warning .ico{background: var(--warning)}.alert.danger{border-color: color-mix(in srgb,var(--danger) 40%,transparent);background: color-mix(in srgb,var(--danger) 8%,var(--bg-2))}.alert.danger .ico{background: var(--danger)}.alert.info{border-color: color-mix(in srgb,var(--info) 40%,transparent);background: color-mix(in srgb,var(--info) 8%,var(--bg-2))}.alert.info .ico{background: var(--info)}.alert b{color: var(--text)}.field{display: flex;flex-direction: column;gap: var(--s-1)}.field > label{font-size: .82rem;font-weight: var(--fw-bold);color: var(--text-2);font-family: var(--font-head)}.input,.select,.textarea{width: 100%;padding: calc(var(--s-2) + 1px) var(--s-3);background: var(--input-bg);border: var(--input-border);border-radius: var(--input-radius);color: var(--text);transition: border-color var(--transition),box-shadow var(--transition)}.input::placeholder,.textarea::placeholder{color: var(--text-3)}.input:focus,.select:focus,.textarea:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 4px var(--ring)}.textarea{resize: vertical;min-height: 92px}.search{position: relative}.search .input{padding-left: 34px}.search::before{content: "⌕";position: absolute;left: 11px;top: 50%;transform: translateY(-50%);color: var(--text-3);font-size: 1.1rem}.lumina-switcher{padding: calc(var(--s-2) + 1px) var(--s-3);background: var(--input-bg);color: var(--text);border: var(--input-border);border-radius: var(--input-radius);font-family: var(--font-head);font-weight: var(--fw-medium)}.lumina-switcher:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 4px var(--ring)}.check{display: flex;align-items: center;gap: var(--s-2);color: var(--text-2);cursor: pointer}.check input{width: 18px;height: 18px;accent-color: var(--primary)}.switch{position: relative;width: 46px;height: 26px;flex: none}.switch input{opacity: 0;width: 0;height: 0}.switch .track{position: absolute;inset: 0;background: var(--bg-3);border: var(--bw) solid var(--border-2);border-radius: var(--radius-pill);transition: var(--transition)}.switch .track::before{content: "";position: absolute;top: 50%;left: 3px;transform: translateY(-50%);width: 18px;height: 18px;border-radius: 50%;background: var(--bg-2);box-shadow: var(--shadow-sm);transition: var(--transition)}.switch input:checked + .track{background: var(--primary);border-color: var(--primary)}.switch input:checked + .track::before{left: calc(100% - 21px);background: var(--on-primary)}.tabs{display: flex;gap: var(--s-1);border-bottom: var(--bw) solid var(--border)}.tab{padding: var(--s-2) var(--s-3);color: var(--text-2);font-weight: var(--fw-medium);border-bottom: 2px solid transparent;margin-bottom: -1px}.tab.active{color: var(--text);border-bottom-color: var(--primary)}.tab:hover{color: var(--text)}.table{width: 100%;border-collapse: collapse;font-size: .9rem}.table th{text-align: left;font-family: var(--font-head);font-weight: var(--fw-bold);color: var(--text-3);font-size: .74rem;text-transform: uppercase;letter-spacing: .06em;padding: var(--s-2) var(--s-3);border-bottom: var(--bw) solid var(--border)}.table td{padding: var(--s-3);border-bottom: var(--bw) solid var(--border);color: var(--text-2)}.table tr:last-child td{border-bottom: none}.table td b{color: var(--text);font-weight: var(--fw-bold)}.progress{height: 9px;background: var(--bg-3);border-radius: var(--radius-pill);overflow: hidden;border: var(--bw) solid var(--border)}.progress > span{display: block;height: 100%;background: linear-gradient(90deg,var(--primary),var(--accent));box-shadow: var(--glow);border-radius: inherit}.avatar{width: 38px;height: 38px;border-radius: var(--radius-pill);display: grid;place-items: center;font-weight: var(--fw-bold);font-family: var(--font-head);color: #fff;background: linear-gradient(135deg,var(--primary),var(--accent));box-shadow: var(--shadow-sm)}.avatars{display: flex}.avatars .avatar{margin-left: -10px;border: 2px solid var(--bg-2)}.avatars .avatar:first-child{margin-left: 0}.chart{display: flex;align-items: flex-end;gap: var(--s-2);height: 160px;padding-top: var(--s-3)}.chart .bar{flex: 1;border-radius: var(--radius-sm) var(--radius-sm) 0 0;background: linear-gradient(180deg,var(--primary),color-mix(in srgb,var(--accent) 60%,var(--primary)));box-shadow: var(--glow);transition: height var(--transition);min-height: 4px}.chart .bar.muted{background: var(--bg-3)}.grid{display: grid;gap: var(--s-4)}.cols-4{grid-template-columns: repeat(4,1fr)}.cols-3{grid-template-columns: repeat(3,1fr)}.cols-2{grid-template-columns: repeat(2,1fr)}.span-2{grid-column: span 2}.row{display: flex;gap: var(--s-3);align-items: center;flex-wrap: wrap}.between{justify-content: space-between}.stack{display: flex;flex-direction: column;gap: var(--s-4)}.section{margin-top: var(--s-7)}.section > .section-head{margin-bottom: var(--s-4)}.divider{height: var(--bw);background: var(--border);border: none;margin: var(--s-5) 0}.appshell{display: grid;grid-template-columns: var(--sidenav-w,250px) 1fr;align-items: start}.appmain{min-width: 0}.sidenav{position: sticky;top: var(--ctrl-h,0px);height: calc(100vh - var(--ctrl-h,0px));overflow: auto;background: var(--sidenav-bg);border-right: var(--bw) solid var(--border);padding: var(--s-4) var(--s-3);display: flex;flex-direction: column;gap: var(--s-4)}.sidenav .brand{padding: var(--s-1) var(--s-2) var(--s-2)}.nav-group{display: flex;flex-direction: column;gap: 2px}.nav-label{font-size: .68rem;text-transform: uppercase;letter-spacing: .11em;color: var(--text-3);font-weight: var(--fw-bold);font-family: var(--font-head);padding: var(--s-3) var(--s-2) var(--s-1)}.nav-link{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-2) var(--s-2);border-radius: var(--radius-sm);color: var(--text-2);font-weight: var(--fw-medium);font-size: .9rem;transition: background var(--transition),color var(--transition)}.nav-link svg{width: 18px;height: 18px;flex: none;opacity: .8}.nav-link .count{margin-left: auto;font-size: .7rem;font-weight: var(--fw-bold);background: var(--bg-3);color: var(--text-2);padding: 1px 8px;border-radius: var(--radius-pill);border: var(--bw) solid var(--border)}.nav-link:hover{background: var(--bg-3);color: var(--text)}.nav-link.active{background: color-mix(in srgb,var(--primary) 14%,transparent);color: var(--primary);font-weight: var(--fw-bold)}.nav-link.active svg{opacity: 1}.sidenav .grow{flex: 1}.upsell{background: linear-gradient(135deg,color-mix(in srgb,var(--primary) 14%,var(--bg-2)),color-mix(in srgb,var(--accent) 14%,var(--bg-2)));border: var(--bw) solid var(--border);border-radius: var(--radius);padding: var(--s-3);display: flex;flex-direction: column;gap: var(--s-2)}.upsell b{font-family: var(--font-head)}.profile{display: flex;align-items: center;gap: var(--s-2);padding: var(--s-2);border-radius: var(--radius);border: var(--bw) solid var(--border);background: var(--bg-2)}.profile .meta{line-height: 1.25;min-width: 0}.profile .meta b{font-size: .85rem;display: block}.profile .meta span{font-size: .72rem;color: var(--text-3);display: block;overflow: hidden;text-overflow: ellipsis}.topbar{position: sticky;top: var(--ctrl-h,0px);z-index: 4;display: flex;align-items: center;gap: var(--s-4);padding: var(--s-3) var(--s-5);background: var(--topbar-bg);-webkit-backdrop-filter: var(--backdrop);backdrop-filter: var(--backdrop);border-bottom: var(--bw) solid var(--border)}.page-title{font-family: var(--font-head);font-weight: var(--fw-head);font-size: 1.1rem;letter-spacing: var(--tracking-head)}.breadcrumb{display: flex;align-items: center;gap: var(--s-2);color: var(--text-3);font-size: .85rem}.breadcrumb a{color: var(--text-2)}.breadcrumb a:hover{color: var(--text)}.breadcrumb .sep{opacity: .45}.icon-btn{position: relative;width: 38px;height: 38px;display: grid;place-items: center;border-radius: var(--radius-sm);color: var(--text-2);border: var(--bw) solid transparent;transition: background var(--transition),color var(--transition)}.icon-btn:hover{background: var(--bg-3);color: var(--text)}.icon-btn svg{width: 19px;height: 19px}.icon-btn .pip{position: absolute;top: 7px;right: 8px;width: 7px;height: 7px;border-radius: 50%;background: var(--danger);border: 2px solid var(--topbar-bg)}.menu{background: var(--menu-bg);-webkit-backdrop-filter: var(--backdrop);backdrop-filter: var(--backdrop);border: var(--bw) solid var(--border);border-radius: var(--radius);box-shadow: var(--shadow-lg);padding: var(--s-1);min-width: 230px}.menu-label{font-size: .68rem;text-transform: uppercase;letter-spacing: .08em;color: var(--text-3);font-weight: var(--fw-bold);padding: var(--s-2) var(--s-2) var(--s-1);font-family: var(--font-head)}.menu-item{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-2) var(--s-2);border-radius: var(--radius-sm);color: var(--text-2);font-size: .9rem;font-weight: var(--fw-medium);cursor: pointer;transition: background var(--transition),color var(--transition)}.menu-item svg{width: 17px;height: 17px;opacity: .8;flex: none}.menu-item:hover{background: var(--bg-3);color: var(--text)}.menu-item.active{background: color-mix(in srgb,var(--primary) 14%,transparent);color: var(--primary)}.menu-item .kbd{margin-left: auto;font-size: .72rem;color: var(--text-3);font-family: var(--font-mono)}.menu-item.danger{color: var(--danger)}.menu-item.danger:hover{background: color-mix(in srgb,var(--danger) 12%,transparent)}.menu-sep{height: var(--bw);background: var(--border);margin: var(--s-1) calc(-1 * var(--s-1))}.menubar{display: flex;align-items: center;gap: 2px;padding: var(--s-1);background: var(--bg-2);border: var(--bw) solid var(--border);border-radius: var(--radius)}.menubar > button{padding: var(--s-1) var(--s-3);border-radius: var(--radius-sm);color: var(--text-2);font-size: .88rem;font-weight: var(--fw-medium)}.menubar > button:hover,.menubar > button.open{background: var(--bg-3);color: var(--text)}.segment{display: inline-flex;background: var(--bg-3);border: var(--bw) solid var(--border);border-radius: var(--radius);padding: 3px;gap: 2px}.segment button{padding: var(--s-1) var(--s-4);border-radius: calc(var(--radius) - 3px);font-size: .86rem;font-weight: var(--fw-medium);color: var(--text-2);font-family: var(--font-head);transition: all var(--transition)}.segment button.on{background: var(--bg-2);color: var(--text);box-shadow: var(--shadow-sm);font-weight: var(--fw-bold)}.card.outlined{box-shadow: none;background: transparent;background-image: none;border: var(--bw) solid var(--border-2)}.card.filled{background: var(--bg-3);background-image: none;box-shadow: none;border: var(--bw) solid transparent}.card.flush{box-shadow: none}.card.callout{border-left: 4px solid var(--accent);background: color-mix(in srgb,var(--accent) 7%,var(--card-bg))}.card.brand-callout{border-left: 4px solid var(--primary);background: color-mix(in srgb,var(--primary) 7%,var(--card-bg))}.card.pad-0{padding: 0;overflow: hidden}.card-foot{margin-top: var(--s-4);padding-top: var(--s-3);border-top: var(--bw) solid var(--border);display: flex;gap: var(--s-2);justify-content: flex-end;align-items: center}.card-body{padding: var(--s-5)}.card-strip{padding: var(--s-3) var(--s-5);border-bottom: var(--bw) solid var(--border)}.well{background: var(--bg-inset);border: var(--bw) solid var(--border);border-radius: var(--radius);padding: var(--s-4)}.tile{background: var(--card-bg);border: var(--card-border);border-radius: var(--radius);padding: var(--s-4);display: flex;align-items: center;gap: var(--s-3)}.tile .tile-ico{width: 40px;height: 40px;border-radius: var(--radius-sm);display: grid;place-items: center;background: color-mix(in srgb,var(--primary) 14%,transparent);color: var(--primary);flex: none}.tile .tile-ico svg{width: 20px;height: 20px}.table tbody tr{transition: background var(--transition)}.table.hover tbody tr:hover td{background: color-mix(in srgb,var(--text) 4%,transparent)}.table tr.sel td{background: color-mix(in srgb,var(--primary) 9%,transparent)}.table.striped tbody tr:nth-child(odd) td{background: color-mix(in srgb,var(--text) 3%,transparent)}.table.bordered,.table.bordered th,.table.bordered td{border: var(--bw) solid var(--border)}.table.bordered{border-collapse: collapse}.table.compact th,.table.compact td{padding: var(--s-1) var(--s-2)}.table .u{display: flex;align-items: center;gap: var(--s-2)}.table .u .avatar{width: 30px;height: 30px;font-size: .75rem}.table .u .meta b{color: var(--text);display: block;font-size: .88rem}.table .u .meta span{color: var(--text-3);font-size: .76rem}.status{display: inline-flex;align-items: center;gap: 6px;font-size: .8rem;font-weight: var(--fw-bold)}.status::before{content: "";width: 7px;height: 7px;border-radius: 50%;background: currentColor}.status.ok{color: var(--success)}.status.pending{color: var(--warning)}.status.off{color: var(--text-3)}.status.bad{color: var(--danger)}.hbar{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-3) var(--s-4);border: var(--bw) solid var(--border);border-radius: var(--radius);background: var(--bg-2)}.hbar.accent-top{border-top: 3px solid var(--primary)}@media (max-width: 1024px){.appshell{grid-template-columns: 1fr}.sidenav{display: none}}@media (max-width: 900px){.cols-4{grid-template-columns: repeat(2,1fr)}.cols-3,.cols-2{grid-template-columns: 1fr}.span-2{grid-column: span 1}.appnav{display: none}}.fill{height: calc(100vh - var(--ctrl-h,0px));min-height: 520px}.bento{display: grid;grid-template-columns: repeat(4,1fr);grid-auto-rows: 132px;gap: var(--s-4)}.bento > *{overflow: hidden}.b-c2{grid-column: span 2}.b-c3{grid-column: span 3}.b-c4{grid-column: span 4}.b-r2{grid-row: span 2}.b-r3{grid-row: span 3}.bento .big{font-family: var(--font-head);font-weight: var(--fw-head);letter-spacing: var(--tracking-head);font-size: clamp(2rem,4vw,3.4rem);line-height: 1}.feature-tile{background: linear-gradient(140deg,var(--primary),var(--accent));color: var(--on-primary)}.feature-tile .big,.feature-tile .card-title{color: var(--on-primary)}.ring{position: relative;width: 104px;height: 104px;border-radius: 50%;background: conic-gradient(var(--primary) calc(var(--p,72) * 1%),var(--bg-3) 0)}.ring .hole{position: absolute;inset: 13px;border-radius: 50%;background: var(--card-bg);display: grid;place-items: center;font-family: var(--font-head);font-weight: var(--fw-head);font-size: 1.3rem}.chat-shell{display: grid;grid-template-columns: 310px 1fr}.chat-list{background: var(--sidenav-bg);border-right: var(--bw) solid var(--border);overflow: auto}.chat-list .lh{padding: var(--s-4) var(--s-4) var(--s-2);display: flex;justify-content: space-between;align-items: center}.conv{display: flex;gap: var(--s-3);padding: var(--s-3) var(--s-4);border-bottom: var(--bw) solid var(--border);cursor: pointer}.conv:hover{background: var(--bg-3)}.conv.active{background: color-mix(in srgb,var(--primary) 12%,transparent)}.conv .meta{min-width: 0;flex: 1}.conv .meta .top{display: flex;justify-content: space-between;gap: var(--s-2)}.conv .meta b{font-size: .9rem}.conv .meta .prev{color: var(--text-3);font-size: .82rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.chat-main{display: flex;flex-direction: column;min-width: 0;background: var(--bg)}.chat-head{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-3) var(--s-5);border-bottom: var(--bw) solid var(--border);background: var(--topbar-bg);-webkit-backdrop-filter: var(--backdrop);backdrop-filter: var(--backdrop)}.chat-body{flex: 1;overflow: auto;padding: var(--s-5);display: flex;flex-direction: column;gap: var(--s-2)}.bubble{max-width: 64%;padding: var(--s-2) var(--s-3);border-radius: var(--radius-lg);font-size: .92rem;line-height: 1.45;box-shadow: var(--shadow-sm)}.bubble.them{align-self: flex-start;background: var(--bg-2);border: var(--bw) solid var(--border);border-bottom-left-radius: var(--radius-sm)}.bubble.me{align-self: flex-end;background: var(--primary);color: var(--on-primary);border-bottom-right-radius: var(--radius-sm)}.bubble .t{display: block;font-size: .68rem;opacity: .6;margin-top: 3px}.day-sep{align-self: center;font-size: .72rem;color: var(--text-3);background: var(--bg-3);padding: 2px 12px;border-radius: var(--radius-pill);margin: var(--s-2) 0}.composer{display: flex;gap: var(--s-2);padding: var(--s-3) var(--s-4);border-top: var(--bw) solid var(--border);background: var(--bg-2)}.mail-shell{display: grid;grid-template-columns: 210px 340px 1fr}.mail-folders{background: var(--sidenav-bg);border-right: var(--bw) solid var(--border);padding: var(--s-4) var(--s-3);overflow: auto}.mail-list{border-right: var(--bw) solid var(--border);overflow: auto;background: var(--bg-2)}.mail-list .mlh{padding: var(--s-3) var(--s-4);border-bottom: var(--bw) solid var(--border);position: sticky;top: 0;background: var(--bg-2);display: flex;justify-content: space-between;align-items: center}.mail-item{padding: var(--s-3) var(--s-4);border-bottom: var(--bw) solid var(--border);cursor: pointer;display: flex;flex-direction: column;gap: 3px}.mail-item:hover{background: var(--bg-3)}.mail-item.active{background: color-mix(in srgb,var(--primary) 10%,transparent);border-left: 3px solid var(--primary);padding-left: calc(var(--s-4) - 3px)}.mail-item .top{display: flex;justify-content: space-between;gap: var(--s-2)}.mail-item.unread .from{font-weight: var(--fw-bold);color: var(--text)}.mail-item .from{font-size: .9rem;color: var(--text-2)}.mail-item .subj{font-size: .86rem;color: var(--text)}.mail-item .snip{font-size: .8rem;color: var(--text-3);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.mail-read{overflow: auto;padding: var(--s-6) var(--s-7);background: var(--bg)}.board{display: flex;gap: var(--s-4);padding: var(--s-5);overflow-x: auto;align-items: flex-start}.column{background: var(--bg-3);border-radius: var(--radius-lg);padding: var(--s-3);width: 290px;flex: none}.column-head{display: flex;align-items: center;justify-content: space-between;padding: var(--s-1) var(--s-2) var(--s-3);font-family: var(--font-head);font-weight: var(--fw-bold)}.column-head .n{background: var(--bg-2);border: var(--bw) solid var(--border);border-radius: var(--radius-pill);font-size: .72rem;padding: 0 8px;color: var(--text-2)}.kcard{background: var(--card-bg);border: var(--card-border);border-radius: var(--radius);box-shadow: var(--shadow-sm);padding: var(--s-3);margin-bottom: var(--s-2);cursor: grab;transition: transform var(--transition),box-shadow var(--transition)}.kcard:hover{transform: translateY(-2px);box-shadow: var(--shadow)}.kcard .ktitle{font-weight: var(--fw-bold);font-size: .9rem;margin-bottom: var(--s-2)}.ktag{display: inline-block;font-size: .68rem;font-weight: var(--fw-bold);padding: 1px 8px;border-radius: var(--radius-pill)}.music{display: flex;flex-direction: column}.music-top{display: grid;grid-template-columns: 230px 1fr 290px;flex: 1;min-height: 0}.music-side{background: var(--sidenav-bg);border-right: var(--bw) solid var(--border);padding: var(--s-4) var(--s-3);overflow: auto}.music-center{overflow: auto;padding: var(--s-7);display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;gap: var(--s-4);background: radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 60%)}.albumart{width: min(280px,60%);aspect-ratio: 1;border-radius: var(--radius-lg);background: linear-gradient(135deg,var(--primary),var(--accent));box-shadow: var(--shadow-lg);display: grid;place-items: center;color: var(--on-primary)}.albumart svg{width: 42%;height: 42%;opacity: .85}.music-queue{border-left: var(--bw) solid var(--border);padding: var(--s-4);overflow: auto;background: var(--bg-2)}.track-row{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-2);border-radius: var(--radius-sm);cursor: pointer}.track-row:hover{background: var(--bg-3)}.track-row.playing{background: color-mix(in srgb,var(--primary) 12%,transparent);color: var(--primary)}.track-row .num{width: 18px;text-align: center;color: var(--text-3);font-size: .82rem}.scrubber{width: min(420px,80%)}.pcontrols{display: flex;align-items: center;gap: var(--s-4)}.pbtn{width: 44px;height: 44px;border-radius: 50%;display: grid;place-items: center;color: var(--text);border: var(--bw) solid var(--border)}.pbtn.main{width: 60px;height: 60px;background: var(--primary);color: var(--on-primary);border: none;box-shadow: var(--glow)}.pbtn svg{width: 20px;height: 20px}.playerbar{display: flex;align-items: center;gap: var(--s-4);padding: var(--s-3) var(--s-5);border-top: var(--bw) solid var(--border);background: var(--bg-2)}.settings-shell{display: grid;grid-template-columns: 230px 1fr;gap: var(--s-6);max-width: 1080px;margin: 0 auto;padding: var(--s-6) var(--s-5) var(--s-8)}.set-nav{position: sticky;top: calc(var(--ctrl-h) + var(--s-5));align-self: start;display: flex;flex-direction: column;gap: 2px}.auth{display: grid;grid-template-columns: 1.05fr .95fr;min-height: calc(100vh - var(--ctrl-h))}.auth-art{background: linear-gradient(150deg,var(--primary),var(--accent));color: var(--on-primary);padding: var(--s-8) var(--s-7);display: flex;flex-direction: column;justify-content: space-between;position: relative;overflow: hidden}.auth-art::after{content: "";position: absolute;inset: 0;background: radial-gradient(60% 60% at 100% 0%,rgba(255,255,255,.18),transparent 60%)}.auth-art h1{color: var(--on-primary);font-size: clamp(2rem,3.6vw,3.2rem);position: relative}.auth-art .q{font-size: 1.15rem;opacity: .92;position: relative;max-width: 34ch}.auth-form{display: grid;place-items: center;padding: var(--s-7) var(--s-5)}.auth-card{width: min(380px,100%)}.social-row{display: grid;grid-template-columns: 1fr 1fr;gap: var(--s-2)}.or{display: flex;align-items: center;gap: var(--s-3);color: var(--text-3);font-size: .8rem}.or::before,.or::after{content: "";flex: 1;height: var(--bw);background: var(--border)}.lp{}.lp-hero{text-align: center;padding: var(--s-8) var(--s-5) var(--s-7)}.lp-hero h1{font-size: clamp(2.4rem,6vw,4.2rem);max-width: 16ch;margin: 0 auto}.lp-hero p{margin: var(--s-4) auto 0;font-size: 1.15rem}.logos{display: flex;flex-wrap: wrap;gap: var(--s-6);justify-content: center;align-items: center;opacity: .55;font-family: var(--font-head);font-weight: var(--fw-head);font-size: 1.2rem}.feat-ico{width: 46px;height: 46px;border-radius: var(--radius);display: grid;place-items: center;background: color-mix(in srgb,var(--primary) 14%,transparent);color: var(--primary);margin-bottom: var(--s-3)}.feat-ico svg{width: 24px;height: 24px}.price-card{position: relative}.price-card .price{font-family: var(--font-head);font-weight: var(--fw-head);font-size: 2.6rem;letter-spacing: var(--tracking-head)}.price-card.popular{border: 2px solid var(--primary);box-shadow: var(--shadow-lg)}.price-card .pop-flag{position: absolute;top: -11px;left: 50%;transform: translateX(-50%);background: var(--primary);color: var(--on-primary);font-size: .68rem;font-weight: var(--fw-bold);padding: 3px 12px;border-radius: var(--radius-pill);letter-spacing: .04em}.feat-list li{display: flex;gap: var(--s-2);align-items: center;color: var(--text-2);padding: var(--s-1) 0;font-size: .92rem}.feat-list li svg{width: 17px;height: 17px;color: var(--success);flex: none}.cta-band{background: linear-gradient(135deg,var(--primary),var(--accent));color: var(--on-primary);border-radius: var(--radius-lg);padding: var(--s-7);text-align: center}.cta-band h2{color: var(--on-primary)}.topnav{position: sticky;top: var(--ctrl-h,0px);z-index: 5;display: flex;align-items: center;gap: var(--s-4);padding: var(--s-3) var(--s-5);background: var(--topbar-bg);-webkit-backdrop-filter: var(--backdrop);backdrop-filter: var(--backdrop);border-bottom: var(--bw) solid var(--border)}.topnav .appnav{display: flex;gap: var(--s-1)}.maxw{max-width: 1180px;margin-inline: auto}.lead{font-size: 1.15rem;color: var(--text-2)}.stat-band{display: grid;grid-template-columns: repeat(auto-fit,minmax(150px,1fr));gap: var(--s-5);text-align: center}.stat-band .n{font-family: var(--font-head);font-weight: var(--fw-head);letter-spacing: var(--tracking-head);font-size: clamp(2rem,4vw,3rem);line-height: 1;color: var(--text)}.stat-band .l{color: var(--text-3);font-size: .85rem;margin-top: 4px}.faq-item{border-bottom: var(--bw) solid var(--border);padding: var(--s-4) 0}.faq-q{display: flex;justify-content: space-between;gap: var(--s-3);font-family: var(--font-head);font-weight: var(--fw-bold);cursor: pointer}.faq-a{color: var(--text-2);margin-top: var(--s-2);font-size: .92rem;max-width: 70ch}.feature-row{display: flex;gap: var(--s-4);align-items: flex-start}.feature-row .feat-ico{margin: 0;flex: none}.split-detail{display: grid;grid-template-columns: 320px 1fr}.split-detail .master{border-right: var(--bw) solid var(--border);background: var(--bg-2);overflow: auto}.split-detail .master .mi{padding: var(--s-3) var(--s-4);border-bottom: var(--bw) solid var(--border);cursor: pointer}.split-detail .master .mi:hover{background: var(--bg-3)}.split-detail .master .mi.active{background: color-mix(in srgb,var(--primary) 10%,transparent);border-left: 3px solid var(--primary);padding-left: calc(var(--s-4) - 3px)}.set-tabs{border-bottom: var(--bw) solid var(--border);padding: 0 var(--s-5);display: flex;gap: var(--s-1)}.wizard-steps{display: flex;gap: var(--s-2);align-items: center}.wstep{display: flex;align-items: center;gap: var(--s-2);color: var(--text-3);font-size: .86rem}.wstep .wnum{width: 26px;height: 26px;border-radius: 50%;display: grid;place-items: center;border: var(--bw) solid var(--border-2);font-size: .8rem;font-weight: var(--fw-bold)}.wstep.on{color: var(--text)}.wstep.on .wnum{background: var(--primary);color: var(--on-primary);border-color: var(--primary)}.wstep.done .wnum{background: var(--success);color: #fff;border-color: var(--success)}.swatch-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(64px,1fr));gap: var(--s-3)}.swatch-grid .sw{aspect-ratio: 1;border-radius: var(--radius);border: 2px solid var(--border);cursor: pointer}.swatch-grid .sw.on{border-color: var(--primary);box-shadow: 0 0 0 2px var(--primary)}@media (max-width: 900px){.split-detail{grid-template-columns: 1fr}.split-detail .master{display: none}.set-tabs{overflow-x: auto}}@media (max-width: 1024px){.mail-shell{grid-template-columns: 300px 1fr}.mail-folders{display: none}.music-top{grid-template-columns: 1fr}.music-side,.music-queue{display: none}}@media (max-width: 860px){.bento{grid-template-columns: repeat(2,1fr)}.b-c3,.b-c4{grid-column: span 2}.chat-shell{grid-template-columns: 1fr}.chat-list{display: none}.mail-shell{grid-template-columns: 1fr}.mail-list{display: none}.settings-shell{grid-template-columns: 1fr}.set-nav{position: static;flex-direction: row;flex-wrap: wrap}.auth{grid-template-columns: 1fr}.auth-art{display: none}}.rail-shell{display: grid;grid-template-columns: 1fr 332px;align-items: start}.rrail{position: sticky;top: var(--ctrl-h,0px);height: calc(100vh - var(--ctrl-h,0px));overflow: auto;border-left: var(--bw) solid var(--border);background: var(--bg-2);padding: var(--s-5)}.iconrail{position: sticky;top: var(--ctrl-h,0px);height: calc(100vh - var(--ctrl-h,0px));display: flex;flex-direction: column;align-items: center;gap: var(--s-2);padding: var(--s-4) 0;background: var(--sidenav-bg);border-right: var(--bw) solid var(--border)}.iconrail .logo{margin-bottom: var(--s-3)}.ir-item{width: 44px;height: 44px;border-radius: var(--radius);display: grid;place-items: center;color: var(--text-2);cursor: pointer;transition: background var(--transition),color var(--transition)}.ir-item svg{width: 20px;height: 20px}.ir-item:hover{background: var(--bg-3);color: var(--text)}.ir-item.on{background: color-mix(in srgb,var(--primary) 16%,transparent);color: var(--primary)}.ir-grow{flex: 1}.dual{display: grid;grid-template-columns: 66px 234px 1fr;align-items: start}.rail-only{display: grid;grid-template-columns: 74px 1fr;align-items: start}.subnav{position: sticky;top: var(--ctrl-h,0px);height: calc(100vh - var(--ctrl-h,0px));overflow: auto;background: var(--bg-2);border-right: var(--bw) solid var(--border);padding: var(--s-4) var(--s-3)}.phone{width: 392px;max-width: 100%;margin: var(--s-6) auto;border: 10px solid color-mix(in srgb,var(--text) 80%,var(--bg));border-radius: 44px;overflow: hidden;box-shadow: var(--shadow-lg);background: var(--bg)}.phone .screen{height: 740px;display: flex;flex-direction: column}.phone .phead{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-4) var(--s-4) var(--s-3)}.phone .pbody{flex: 1;overflow: auto;padding: 0 var(--s-4) var(--s-4)}.bottomnav{display: flex;justify-content: space-around;padding: var(--s-2) var(--s-2) calc(var(--s-2) + 8px);border-top: var(--bw) solid var(--border);background: var(--bg-2)}.bn-item{display: flex;flex-direction: column;align-items: center;gap: 3px;font-size: .62rem;color: var(--text-3)}.bn-item svg{width: 22px;height: 22px}.bn-item.on{color: var(--primary)}.wall{padding: var(--s-5)}.ticker{display: flex;align-items: center;gap: var(--s-5);padding: var(--s-2) var(--s-4);background: var(--bg-2);border: var(--bw) solid var(--border);border-radius: var(--radius-pill);overflow: hidden;white-space: nowrap;margin-bottom: var(--s-4);font-family: var(--font-mono);font-size: .82rem;color: var(--text-2)}.wall-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: var(--s-3)}.metric-xl{font-family: var(--font-head);font-weight: var(--fw-head);font-size: clamp(2rem,3.4vw,3.2rem);line-height: 1;letter-spacing: var(--tracking-head)}.focus{min-height: calc(100vh - var(--ctrl-h,0px));display: flex;flex-direction: column;align-items: center;justify-content: center;gap: var(--s-5);text-align: center;padding: var(--s-6)}.focus .huge{font-family: var(--font-head);font-weight: var(--fw-head);font-size: clamp(4rem,12vw,9rem);line-height: .9;letter-spacing: var(--tracking-head)}.ribbon-bar{background: var(--bg-2);border-bottom: var(--bw) solid var(--border)}.ribbon{display: flex;flex-wrap: wrap;max-width: 1180px;margin: 0 auto}.ribbon > div{flex: 1;min-width: 150px;padding: var(--s-4) var(--s-5);border-right: var(--bw) solid var(--border)}.ribbon > div:last-child{border-right: none}.feed3{display: grid;grid-template-columns: 212px 1fr 300px;align-items: start}.feed3 .rail{position: sticky;top: var(--ctrl-h,0px);padding: var(--s-4) var(--s-3)}.feed3 .center{padding: var(--s-5);border-inline: var(--bw) solid var(--border);min-height: calc(100vh - var(--ctrl-h,0px))}.feed3 .right{padding: var(--s-4);position: sticky;top: var(--ctrl-h,0px)}.post{border-bottom: var(--bw) solid var(--border);padding: var(--s-4) 0}.canvas{position: relative;min-height: 660px;padding: var(--s-5);background-image: radial-gradient(color-mix(in srgb,var(--text) 12%,transparent) 1px,transparent 1px);background-size: 22px 22px}.window{position: absolute;background: var(--card-bg);border: var(--card-border);border-radius: var(--radius);box-shadow: var(--shadow-lg);overflow: hidden}.window .titlebar{display: flex;align-items: center;gap: 6px;padding: 8px 11px;border-bottom: var(--bw) solid var(--border);background: var(--bg-3);font-size: .8rem;font-weight: var(--fw-bold)}.window .tb-dot{width: 11px;height: 11px;border-radius: 50%}.window .wbody{padding: var(--s-4)}@media (max-width: 1024px){.rail-shell{grid-template-columns: 1fr}.rrail{display: none}.feed3{grid-template-columns: 1fr}.feed3 .right{display: none}.dual{grid-template-columns: 66px 1fr}.dual .subnav{display: none}}@media (max-width: 900px){.canvas{display: flex;flex-direction: column;gap: var(--s-3);min-height: 0;background-image: none}.canvas .window{position: static !important;width: auto !important}}.cal-grid{display: grid;grid-template-columns: repeat(7,1fr);border: var(--bw) solid var(--border);border-radius: var(--radius);overflow: hidden;background: var(--bg-2)}.cal-dow{padding: var(--s-2);text-align: center;font-size: .7rem;font-weight: var(--fw-bold);color: var(--text-3);text-transform: uppercase;letter-spacing: .06em;border-bottom: var(--bw) solid var(--border)}.cal-cell{min-height: 92px;padding: var(--s-2);border-right: var(--bw) solid var(--border);border-bottom: var(--bw) solid var(--border);font-size: .8rem}.cal-cell .d{color: var(--text-2);font-weight: var(--fw-bold);display: inline-block}.cal-cell.off{background: var(--bg-inset)}.cal-cell.today .d{color: var(--on-primary);background: var(--primary);width: 22px;height: 22px;border-radius: 50%;text-align: center;line-height: 22px}.cal-ev{margin-top: 5px;font-size: .7rem;padding: 2px 6px;border-radius: var(--radius-sm);background: color-mix(in srgb,var(--primary) 16%,transparent);color: var(--primary);overflow: hidden;white-space: nowrap;text-overflow: ellipsis}.cal-ev.accent{background: color-mix(in srgb,var(--accent) 16%,transparent);color: var(--accent)}.map-shell{position: relative;height: calc(100vh - var(--ctrl-h,0px));overflow: hidden}.map-canvas{position: absolute;inset: 0;background-color: var(--bg-3);background-image: linear-gradient(color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 1px);background-size: 40px 40px}.map-pin{position: absolute;width: 16px;height: 16px;border-radius: 50%;background: var(--primary);border: 3px solid var(--bg-2);box-shadow: var(--shadow);transform: translate(-50%,-50%)}.map-pin.accent{background: var(--accent)}.workbench{display: grid;grid-template-columns: 300px 1fr;align-items: start}.wb-side{position: sticky;top: var(--ctrl-h,0px);height: calc(100vh - var(--ctrl-h,0px));overflow: auto;border-right: var(--bw) solid var(--border);background: var(--bg-2);padding: var(--s-5)}.palette-wrap{display: grid;place-items: start center;padding-top: 12vh;min-height: calc(100vh - var(--ctrl-h,0px))}.palette{width: min(580px,92%);background: var(--menu-bg);border: var(--bw) solid var(--border);border-radius: var(--radius-lg);box-shadow: var(--shadow-lg);overflow: hidden}.palette .pq{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-4)}.palette .pq svg{width: 20px;height: 20px;color: var(--text-3)}.palette .pq input{background: none;border: none;outline: none;font-size: 1.05rem;width: 100%;color: var(--text)}.cmd-row{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-3) var(--s-4);cursor: pointer;border-top: var(--bw) solid var(--border)}.cmd-row svg{width: 18px;height: 18px;opacity: .8;flex: none}.cmd-row:hover,.cmd-row.on{background: var(--bg-3)}.cmd-row .kbd{margin-left: auto;font-family: var(--font-mono);font-size: .74rem;color: var(--text-3)}.preview-shell{display: grid;grid-template-columns: 380px 1fr;align-items: start}.preview-stage{position: sticky;top: var(--ctrl-h,0px);height: calc(100vh - var(--ctrl-h,0px));display: grid;place-items: center;padding: var(--s-6);background: var(--bg-3)}.toc-shell{display: grid;grid-template-columns: 1fr 190px;gap: var(--s-6);max-width: 1000px;margin: 0 auto;padding: var(--s-6) var(--s-5)}.toc{position: sticky;top: calc(var(--ctrl-h,0px) + var(--s-5));align-self: start;display: flex;flex-direction: column;gap: 2px}.toc a{padding: var(--s-1) var(--s-3);border-radius: var(--radius-sm);color: var(--text-3);font-size: .85rem;border-left: 2px solid transparent;cursor: pointer}.toc a.on{color: var(--text);border-left-color: var(--primary)}.split-scroll{display: grid;grid-template-columns: 1fr 1fr}.ss-sticky{position: sticky;top: var(--ctrl-h,0px);height: calc(100vh - var(--ctrl-h,0px));display: grid;place-items: center;padding: var(--s-7);background: linear-gradient(150deg,var(--primary),var(--accent))}.ss-flow{padding: var(--s-6) var(--s-7)}.ss-block{min-height: 68vh;display: flex;flex-direction: column;justify-content: center;gap: var(--s-3)}.media-hero{position: relative;min-height: 74vh;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: var(--s-4);text-align: center;padding: var(--s-7);background: linear-gradient(160deg,color-mix(in srgb,var(--primary) 22%,var(--bg)),var(--bg))}.play-fab{width: 74px;height: 74px;border-radius: 50%;background: var(--primary);color: var(--on-primary);display: grid;place-items: center;box-shadow: var(--shadow-lg)}.play-fab svg{width: 28px;height: 28px}.docs-shell{display: grid;grid-template-columns: 240px 1fr;align-items: start}.docs-article{max-width: 760px;padding: var(--s-7) var(--s-6)}@media (max-width: 1024px){.workbench{grid-template-columns: 1fr}.wb-side{display: none}.preview-shell{grid-template-columns: 1fr}.preview-stage{display: none}.toc-shell{grid-template-columns: 1fr}.toc{display: none}.split-scroll{grid-template-columns: 1fr}.ss-sticky{position: static;height: auto;min-height: 50vh}.docs-shell{grid-template-columns: 1fr}.docs-shell .sidenav{display: none}}@media (max-width: 760px){.cal-cell{min-height: 56px;font-size: .72rem}}