@layer theme,base,components,utilities;:root{--purple-950:#0a013c;--purple-900:#281c6d;--purple-800:#4939a4;--purple-700:#6651be;--purple-600:#8166d6;--purple-500:#9983df;--purple-400:#b19fe8;--purple-300:#cabdf1;--purple-200:#ece6fe;--orange-500:#ff9f0a;--orange-700:#c56f00;--bg:#fff;--subtle:#fafafa;--surface:#fff;--ink:#181724;--muted:#6f6d7a;--faint:#a8a6b0;--border:#e8e7ec;--focus:#8166d6;--sidebar:264px;--toc:210px;--radius:10px;--mono:"DM Mono", monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:var(--bg);margin:0;font:14px/1.65 Inter,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration-line:none}:focus-visible{outline:3px solid var(--purple-400);outline-offset:2px}.topbar{border-bottom:1px solid var(--border);z-index:20;background:var(--bg);justify-content:space-between;align-items:center;height:64px;padding:0 28px;display:flex;position:sticky;top:0}@supports (color:color-mix(in lab, red, red)){.topbar{background:color-mix(in srgb, var(--bg) 92%, transparent)}}.topbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand-asset{object-fit:contain;display:block}.brand-asset-top{width:22px;height:22px}.brand-asset-side{width:34px;height:34px}.top-brand,.sidebar-head{align-items:center;gap:10px;font-size:13px;font-weight:600;display:flex}.top-brand em{color:var(--faint);margin:0 3px;font-style:normal}.top-actions{align-items:center;gap:12px;display:flex}.search-trigger,.icon-btn{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:7px;height:34px}.search-trigger{text-align:left;align-items:center;gap:8px;min-width:180px;padding:0 8px 0 11px;display:flex}.search-trigger kbd,.search-dialog kbd{border:1px solid var(--border);font:11px var(--mono);color:var(--faint);border-radius:4px;margin-left:auto;padding:0 5px}.icon-btn{width:34px;font-size:17px}.version{font:11px var(--mono);color:var(--muted);white-space:nowrap}.status-dot{vertical-align:middle;background:#48a868;border-radius:50%;width:6px;height:6px;margin-left:5px;display:inline-block}.orb-mark{border:2px solid var(--purple-700);border-radius:50%;width:30px;height:30px;display:inline-block;position:relative;transform:rotate(-28deg)}.orb-mark:before{content:"";border:2px solid var(--purple-600);border-radius:50%;position:absolute;inset:5px}.orb-mark:after{content:"";background:var(--orange-500);border-radius:50%;width:7px;height:7px;position:absolute;top:0;right:1px}.orb-mark i{background:var(--purple-800);border-radius:50%;width:8px;height:8px;position:absolute;top:9px;left:9px}.orb-mark.small{border-width:1.5px;width:21px;height:21px}.orb-mark.small:before{border-width:1.5px;inset:3px}.orb-mark.small i{width:5px;height:5px;top:6px;left:6px}.orb-mark.small:after{width:5px;height:5px}.sidebar-backdrop{display:none}.layout{grid-template-columns:var(--sidebar) minmax(0, 1fr) var(--toc);max-width:1440px;margin:0 auto;display:grid}.sidebar{border-right:1px solid var(--border);background:var(--subtle);flex-direction:column;height:calc(100vh - 64px);display:flex;position:sticky;top:64px}.sidebar-head{border-bottom:1px solid var(--border);padding:25px 24px 24px}.sidebar-head strong{font-size:14px;display:block}.sidebar-head div span{color:var(--muted);font-size:11px;font-weight:400;display:block}.nav-group{margin:0 0 23px}.nav-label,.toc-title{font:10px var(--mono);letter-spacing:.12em;color:var(--faint);padding:0 12px 7px}.nav-item{color:var(--muted);border-radius:6px;align-items:center;gap:8px;padding:7px 12px;font-size:12px;transition:all .15s;display:flex}.nav-item:hover{background:var(--border);color:var(--ink)}.nav-item.active{background:var(--purple-200);color:var(--purple-950);font-weight:600}.nav-item.active:before{content:"";background:var(--purple-700);border-radius:3px;width:3px;height:15px;margin-left:-8px}.nav-num{font:10px var(--mono);color:var(--faint);width:22px}.sidebar-foot{border-top:1px solid var(--border);color:var(--muted);margin-top:auto;padding:16px 24px;font-size:11px}.sidebar-foot strong{color:var(--ink);float:right;font-weight:500}.toc{border-left:1px solid var(--border);height:max-content;margin:36px 0;padding:2px 20px;position:sticky;top:100px}.toc a{color:var(--muted);padding:4px 0;font-size:11px;display:block}main{min-width:0;max-width:920px;padding:65px 72px 100px}.eyebrow{color:var(--purple-700);font:11px var(--mono);letter-spacing:.14em;margin-bottom:16px;font-weight:500}.hero h1{letter-spacing:-.055em;margin:0 0 22px;font-size:52px;font-weight:700;line-height:1.05}.hero .lede{color:var(--muted);max-width:640px;font-size:18px;line-height:1.6}.rule{background:var(--border);height:1px;margin:52px 0}.section{margin:0 0 58px;scroll-margin-top:88px}.section h2{letter-spacing:-.025em;margin:0 0 10px;font-size:25px}.section h3{margin:29px 0 10px;font-size:16px}.section p{color:var(--muted);max-width:680px}\.meta{color:var(--faint);font:11px var(--mono);margin:0 0 9px}.hero-visual{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(135deg,#faf9ff,#f4f0ff);height:220px;margin-top:38px;position:relative;overflow:hidden}.hero-visual:before,.hero-visual:after{content:"";border:1px solid #d9d0f7;border-radius:50%;width:370px;height:160px;position:absolute;top:32px;left:24%;transform:rotate(-18deg)}.hero-visual:after{border-color:#e8e1fd;width:600px;height:270px;top:-12px;left:6%}.hero-lockup{z-index:1;letter-spacing:-.04em;color:var(--purple-950);place-items:center;font-size:34px;font-weight:600;display:grid;position:absolute;inset:0}.hero-lockup .orb-mark{width:48px;height:48px;margin-right:12px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.card{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:20px}.card h3{margin:0 0 5px;font-size:14px}.card p{margin:0;font-size:12px}.card .num{font:11px var(--mono);color:var(--purple-700);margin-bottom:13px}.principle{border-top:1px solid var(--border);grid-template-columns:52px 1fr;gap:16px;padding:20px 0;display:grid}.principle:last-child{border-bottom:1px solid var(--border)}.principle .num{font:20px var(--mono);color:var(--purple-600)}.principle h3{margin:0;font-size:15px}.logo-preview{width:min(78%,620px);height:auto}.logo-stage{border:1px solid var(--border);border-radius:var(--radius);background:#f8f7fa;place-items:center;height:250px;display:grid}.logo-word{letter-spacing:-.06em;color:var(--purple-950);align-items:center;gap:15px;font-size:54px;font-weight:600;display:flex}.logo-word .orb-mark{width:64px;height:64px}.tabs{border-bottom:1px solid var(--border);gap:4px;margin-top:16px;display:flex}.tab{color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;padding:10px 13px;font-size:12px}.tab.active{color:var(--purple-700);border-bottom-color:var(--purple-700);font-weight:600}.button-row{gap:8px;margin-top:14px;display:flex}.btn{border:1px solid var(--border);background:var(--surface);border-radius:6px;padding:7px 11px;font-size:12px}.btn.primary{background:var(--purple-800);color:#fff;border-color:var(--purple-800)}.btn:hover{border-color:var(--purple-500)}.swatch-list{gap:8px;display:grid}.swatch{border:1px solid var(--border);border-radius:8px;grid-template-columns:100px 1fr 115px 180px;align-items:center;min-height:58px;display:grid;overflow:hidden}.swatch-color{height:100%;min-height:58px}.swatch-token{font:12px var(--mono);padding-left:14px}.swatch-hex{font:12px var(--mono);color:var(--muted);cursor:pointer}.swatch-role{color:var(--muted);padding-right:12px;font-size:11px}.label{font:10px var(--mono);letter-spacing:.08em;color:var(--faint);border:1px solid var(--border);border-radius:4px;margin-bottom:10px;padding:3px 6px;display:inline-block}.official{color:var(--purple-700);border-color:var(--purple-300);background:var(--purple-200)}.derived{color:var(--orange-700);background:#fff8eb;border-color:#ffe0a3}.code{font:12px var(--mono);color:#eeebff;background:#19172a;border-radius:8px;padding:16px;position:relative;overflow:auto}.copy-code{color:#d7d0fa;background:0 0;border:1px solid #45405d;border-radius:4px;padding:4px 7px;font-size:10px;position:absolute;top:9px;right:9px}.gradient{background:linear-gradient(90deg,#4939a4,#8166d6);border-radius:8px;height:105px;margin:14px 0}.contrast-box{border:1px solid var(--border);border-radius:var(--radius);padding:18px}.field-row{flex-wrap:wrap;gap:14px;display:flex}.field{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.field input[type=color]{border:1px solid var(--border);background:0 0;border-radius:5px;width:40px;height:34px;padding:2px}.contrast-result{align-items:center;gap:14px;margin-top:18px;display:flex}.ratio{letter-spacing:-.05em;font-size:30px;font-weight:600}.pass{color:#25804b}.fail{color:#bd4a42}.check-row{border-bottom:1px solid var(--border);color:var(--muted);align-items:center;gap:10px;padding:13px 0;font-size:13px;display:flex}.check-row input{accent-color:var(--purple-700);width:17px;height:17px}.check-count{font:12px var(--mono);color:var(--purple-700);margin-bottom:10px}.table-wrap{border:1px solid var(--border);border-radius:8px;overflow:auto}.spec-table{border-collapse:collapse;width:100%;min-width:560px;font-size:12px}.spec-table th,.spec-table td{text-align:left;border-bottom:1px solid var(--border);padding:11px 13px}.spec-table th{font:10px var(--mono);letter-spacing:.06em;color:var(--muted);background:var(--subtle)}.type-specimen{letter-spacing:-.04em;color:var(--purple-950);margin:20px 0;font-size:42px;line-height:1.1}.do-dont{border:1px solid var(--border);border-radius:8px;padding:16px}.do-dont strong{font:11px var(--mono);letter-spacing:.12em}.do{color:#25804b}.dont{color:#bd4a42}.mini-ui{background:var(--subtle);border-radius:8px;flex-wrap:wrap;align-items:center;gap:12px;padding:20px;display:flex}.pill{background:var(--purple-200);color:var(--purple-900);border-radius:20px;padding:4px 9px;font-size:11px}.footer{border-top:1px solid var(--border);margin-left:var(--sidebar);color:var(--muted);justify-content:space-between;padding:20px 28px;font-size:11px;display:flex}.search-dialog{border:1px solid var(--border);background:var(--surface);width:min(560px,100% - 32px);color:var(--ink);border-radius:10px;padding:0;box-shadow:0 20px 70px #16132c2a}.search-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#17132c40}.search-dialog-head{border-bottom:1px solid var(--border);align-items:center;gap:10px;height:55px;padding:0 16px;display:flex}.search-dialog-head input{color:var(--ink);background:0 0;border:0;outline:0;flex:1}.search-results{max-height:320px;padding:8px;overflow:auto}.result{border-radius:6px;padding:11px 12px;display:block}.result:hover{background:var(--purple-200)}.result small{color:var(--muted);font-size:11px;display:block}.toast{background:var(--purple-950);color:#fff;opacity:0;pointer-events:none;z-index:30;border-radius:6px;padding:10px 14px;font-size:12px;transition:all .2s;position:fixed;bottom:22px;right:22px;transform:translateY(10px)}.toast.show{opacity:1;transform:translateY(0)}body.dark .hero-visual{background:linear-gradient(135deg,#19162b,#252039)}body.dark .logo-preview{width:min(78%,620px);height:auto}body.dark .logo-word,body.dark .type-specimen{color:#fff}body.dark .nav-item.active{color:#eee9ff;background:#30265a}body.dark .search-trigger{background:var(--surface)}@media (max-width:1100px){:root{--toc:0px}.toc{display:none}main{padding-left:58px;padding-right:58px}}@media (max-width:760px){.topbar{padding:0 16px}.mobile-menu{margin-right:10px;display:block}.top-brand{margin-right:auto}.top-brand span:last-child{font-size:12px}.search-label,.search-trigger kbd,.version{display:none}.search-trigger{justify-content:center;width:34px;min-width:34px;padding:0}.layout{display:block}.sidebar{z-index:25;width:264px;height:auto;transition:all .2s;position:fixed;top:64px;bottom:0;left:-290px}.sidebar.open{left:0}.sidebar-backdrop{z-index:24;background:#100c1c66;display:none;position:fixed;inset:64px 0 0}.sidebar-backdrop.show{display:block}main{padding:42px 20px 70px}.hero h1{font-size:40px}.hero .lede{font-size:16px}.grid-2,.grid-3{grid-template-columns:1fr}.swatch{grid-template-columns:75px 1fr 110px}.swatch-role{display:none}.logo-word{font-size:35px}.logo-word .orb-mark{width:45px;height:45px}.footer{margin:0;padding:18px 20px;display:block}.footer span{display:block}.footer span+span{margin-top:5px}.section{margin-bottom:48px}}@media (prefers-reduced-motion:reduce){*,html{scroll-behavior:auto!important;transition:none!important}}.logo-preview{object-fit:contain;width:min(78%,620px);max-height:170px;display:block}.logo-stage-compact{height:170px}.clear-space-box{border:1px dashed var(--purple-500);place-items:center;width:min(84%,680px);padding:42px 54px;display:grid;position:relative}.clear-space-box .measure{font:11px var(--mono);color:var(--purple-700);position:absolute;top:8px;left:10px}.rule-list{color:var(--muted);margin:14px 0 0;padding-left:20px}.rule-list li{margin:7px 0}.note{border-left:3px solid var(--orange-500);background:#fff8eb;border-radius:0 7px 7px 0;padding:13px 15px;max-width:none!important}body.dark .note{background:#2b2419}.swatch-copy{appearance:none;text-align:left;color:var(--ink);cursor:pointer;background:0 0;border:0;flex-direction:column;gap:2px;padding:8px;display:flex}.swatch-copy strong,.swatch-copy span{font:11px var(--mono)}.swatch-copy span{color:var(--muted)}.role-strip{border-radius:4px;height:7px;margin-bottom:15px}.ratio-example{border:1px solid var(--border);border-radius:9px;min-height:110px;display:flex;overflow:hidden}.ratio-example span{font:11px var(--mono);place-items:center;display:grid}.misuse-example{min-height:145px;overflow:hidden}.misuse-example img{object-fit:contain;width:85%;height:72px;margin:20px auto 0;display:block}.partner-lockup{justify-content:center;align-items:center;gap:28px;width:80%;display:flex}.partner-lockup img{width:55%;max-height:90px}.partner-lockup span{background:var(--border);width:1px;height:54px}.partner-lockup strong{color:var(--muted);font-size:22px}#contrastLabels{flex-wrap:wrap;gap:6px 12px;display:flex}.btn[disabled]{opacity:.55;cursor:not-allowed}@media (max-width:760px){.swatch{grid-template-columns:70px 1fr 135px}.swatch-role{display:none}.clear-space-box{padding:32px 28px}.partner-lockup{gap:14px}.partner-lockup strong{font-size:16px}}.intro-brand-lockup{align-items:center;gap:20px;padding:8px 0 20px;display:flex}.intro-brand-lockup img{object-fit:contain;width:72px;height:72px}.intro-brand-lockup span{color:#2e2f49;letter-spacing:-.04em;font:46px/1 Audiowide,sans-serif}body.dark .intro-brand-lockup span{color:#fff}.logo-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.logo-mini-card{border:1px solid var(--border);background:var(--surface);border-radius:10px;overflow:hidden}.logo-mini-art{place-items:center;height:112px;padding:20px;display:grid}.logo-mini-art img{object-fit:contain;width:82%;height:72px}.logo-mini-card h3,.logo-mini-card p{margin:0}.logo-mini-card p{color:var(--muted);margin-top:4px;font-size:11px}.download-card{justify-content:space-between;align-items:center;gap:18px;min-height:116px;padding:18px 18px 18px 20px;display:flex}.download-copy{min-width:0}.download-copy h3,.download-copy p{margin:0}.download-copy p{margin-top:7px}.download-cta{white-space:nowrap;justify-content:center;align-items:center;gap:7px;min-width:108px;min-height:40px;margin-left:auto;display:inline-flex}.download-cta svg{flex:none;width:17px;height:17px}.color-toolbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;display:flex}.gradient-toolbar{margin-top:26px}.gradient-mode-panel[hidden]{display:none}.gradient-panel-intro{border:1px solid var(--border);background:var(--subtle);margin:0 0 18px;padding:14px 16px}.gradient-panel-intro p{max-width:720px;margin:0}.gradient-cmyk-values{font-family:var(--mono);line-height:1.5;font-size:11px!important}.gradient-mode-panel .table-wrap{margin-top:12px}.color-toolbar .tabs{border:0;margin:0}.view-toggle,.icon-filter{align-items:center;gap:4px;padding-bottom:7px;display:flex}.view-toggle button,.icon-filter button{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:6px;min-width:36px;height:34px}.view-toggle button.active,.icon-filter button.active{background:var(--purple-200);border-color:var(--purple-300);color:var(--purple-900)}body.dark .view-toggle button.active,body.dark .icon-filter button.active{color:#fff;background:#30265a}.color-palette.grid-view [data-color-panel]:not([hidden]) .swatch-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.color-palette.grid-view .swatch{flex-direction:column;align-items:stretch;min-height:180px;display:flex}.color-palette.grid-view .swatch-color{width:100%;height:78px}.color-palette.grid-view .swatch-token{padding:10px 12px 0}.color-palette.grid-view .swatch-copy{padding:5px 12px}.color-palette.grid-view .swatch-role{padding:0 12px 12px}.hex-inline{color:var(--purple-700);font:inherit;font-family:var(--mono);text-underline-offset:3px;background:0 0;border:0;padding:0 2px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.audiowide{letter-spacing:-.04em;font-family:Audiowide,sans-serif!important;font-weight:400!important}.font-downloads{align-items:stretch}.font-card{flex-direction:column;justify-content:space-between;min-height:190px;display:flex}.font-card .download-cta{width:100%;margin:22px 0 0}.font-sample{overflow-wrap:anywhere;margin:16px 0 12px;font-size:27px;line-height:1.15}.type-stack{border-top:1px solid var(--border);margin-top:10px}.type-stack-row{border-bottom:1px solid var(--border);padding:34px 0 38px}.type-stack-sample{color:var(--type-sample);font-size:clamp(16px, var(--type-size), 52px);letter-spacing:-.045em;overflow-wrap:anywhere;max-width:100%;line-height:1.08}.type-stack-meta{grid-template-columns:auto repeat(5,minmax(0,1fr));align-items:flex-start;gap:18px;margin-top:24px;display:grid}.type-stack-badge{background:var(--purple-700);color:#fff;min-height:30px;font:11px var(--mono);white-space:nowrap;border-radius:5px;align-items:center;padding:4px 9px;display:inline-flex}.type-stack-row:nth-child(3n) .type-stack-badge{background:var(--orange-500);color:#442400}.type-stack-row:nth-child(4n) .type-stack-badge{background:var(--purple-200);color:var(--purple-950)}.type-stack-field{min-width:0}.type-stack-field span{color:var(--muted);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;display:block}.type-stack-field strong{color:var(--ink);overflow-wrap:anywhere;font-size:13px;font-weight:600;line-height:1.3;display:block}.type-wall{background:var(--bg);width:calc(100% + 144px);color:var(--ink);border:1px solid var(--border);border-radius:0;margin:22px 0 28px -72px;padding:0;overflow:hidden}.type-wall-viewport{flex-direction:column;justify-content:center;gap:14px;height:430px;padding:34px 0;display:flex;overflow:hidden}.type-wall-line{letter-spacing:-.1em;white-space:nowrap;background:linear-gradient(100deg, var(--purple-800) 0%, var(--purple-600) 42%, var(--orange-500) 72%, var(--purple-700) 100%);color:#0000;transform:translate3d(var(--wall-shift,0px), 0, 0);will-change:transform;-webkit-background-clip:text;background-clip:text;font-family:SF Pro Display,SF Pro Text,system-ui,sans-serif;font-size:clamp(110px,17vw,220px);font-weight:300;line-height:.72}.type-wall-line-a{margin-left:0}.type-wall-line-b{background:linear-gradient(100deg, var(--orange-500) 0%, var(--orange-700) 30%, var(--purple-600) 66%, var(--purple-800) 100%);-webkit-background-clip:text;background-clip:text;margin-left:-12%}.type-wall-line-c{background:linear-gradient(100deg, var(--purple-700) 0%, var(--purple-500) 34%, var(--orange-500) 70%, var(--orange-700) 100%);-webkit-background-clip:text;background-clip:text;margin-left:0}.icon-library{margin-top:8px}.icon-library-toolbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.icon-library-toolbar input{border:1px solid var(--border);background:var(--surface);min-width:260px;height:42px;color:var(--ink);border-radius:7px;flex:1;padding:0 13px}.icon-filter{padding:0}.icon-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:820px;padding-right:4px;display:grid;overflow:auto}.icon-card{border:1px solid var(--border);background:var(--surface);border-radius:9px;min-width:0;padding:14px}.icon-card>img{object-fit:contain;width:38px;height:38px;margin:5px auto 16px;display:block}.icon-card>div:nth-child(2){min-height:48px}.icon-card strong,.icon-card span{text-overflow:ellipsis;display:block;overflow:hidden}.icon-card strong{white-space:nowrap;font-size:11px}.icon-card span{font:10px var(--mono);color:var(--muted);margin-top:3px}.icon-actions{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;display:flex}.icon-actions button,.icon-actions a{color:var(--purple-700);background:0 0;border:0;padding:3px;font-size:10px}.icon-actions svg{width:16px;height:16px}.orbyna-layout-demo,.social-demo,.presentation-demo{color:#fff;background:#0c0d1b;border:1px solid #292a43;border-radius:12px;position:relative;overflow:hidden}.orbyna-layout-demo{background-image:radial-gradient(circle at 75%,#4939a455,#0000 38%),radial-gradient(#ffffff12 1px,#0000 1px);background-size:auto,18px 18px;grid-template-columns:1.1fr .9fr;min-height:330px;padding:38px;display:grid}.demo-copy{z-index:1;flex-direction:column;justify-content:center;align-items:flex-start;display:flex}.demo-copy>span,.social-demo>span,.presentation-demo>span{font:10px var(--mono);letter-spacing:.12em;color:#cabdf1}.demo-copy strong{margin:22px 0 16px;font-size:42px;line-height:1.03}.demo-copy em,.social-demo em{color:#b19fe8;font-style:normal}.demo-copy p{color:#c5c3ce;max-width:330px}.demo-orbit{place-items:center;display:grid;position:relative}.demo-orbit>i{border:1px solid #8166d688;border-radius:50%;width:235px;height:150px;position:absolute;transform:rotate(-18deg)}.demo-orbit>b{background:radial-gradient(circle,#8166d6,#281c6d);border-radius:50%;place-items:center;width:82px;height:82px;display:grid;box-shadow:0 0 32px #8166d688}.demo-orbit .node{background:#151523;border:1px solid #34344b;border-radius:7px;padding:7px 10px;font-size:10px;position:absolute}.demo-orbit .n1{top:18%;left:0}.demo-orbit .n2{top:44%;right:0}.demo-orbit .n3{bottom:14%;left:15%}.orbyna-ui-demo{color:#fff;background:#0c0d1b;border:1px solid #292a43;border-radius:12px;padding:24px}.ui-demo-top,.ui-demo-row{justify-content:space-between;align-items:center;display:flex}.ui-demo-top{font:10px var(--mono);letter-spacing:.1em;color:#cabdf1}.live-status{color:#70d899}.ui-demo-stats{grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0;display:grid}.ui-demo-stats>div{background:#131420;border:1px solid #2f3048;border-radius:8px;padding:16px}.ui-demo-stats strong,.ui-demo-stats span{display:block}.ui-demo-stats strong{font-size:28px}.ui-demo-stats span{color:#aaa7b5;font-size:10px}.ui-demo-row{border-top:1px solid #292a43;padding:14px 0}.social-demo,.presentation-demo{background-image:radial-gradient(circle at 80% 45%,#4939a466,#0000 35%),radial-gradient(#ffffff12 1px,#0000 1px);background-size:auto,18px 18px;flex-direction:column;justify-content:center;min-height:240px;padding:32px;display:flex}.social-demo strong{margin:20px 0;font-size:38px;line-height:1.05}.social-demo small,.presentation-demo small{color:#aaa7b5}.presentation-demo strong{max-width:500px;margin:22px 0;font-size:34px;line-height:1.1}.gradient-rgb{background:linear-gradient(90deg,#4939a4,#8166d6)}.gradient-cmyk{background:linear-gradient(90deg,#443695,#6c5aa6)}@media (max-width:900px){.icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.orbyna-layout-demo{grid-template-columns:1fr;gap:28px}.demo-orbit{min-height:210px}}@media (max-width:760px){.logo-mini-grid,.color-palette.grid-view [data-color-panel]:not([hidden]) .swatch-list{grid-template-columns:1fr}.download-card{flex-direction:column;align-items:flex-start}.download-cta{width:100%;margin:0}.color-toolbar,.icon-library-toolbar{flex-direction:column;align-items:stretch}.view-toggle,.icon-filter{align-self:flex-start}.icon-library-toolbar input{width:100%;min-width:0}.icon-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:680px}.intro-brand-lockup img{width:56px;height:56px}.intro-brand-lockup span{font-size:36px}.demo-copy strong{font-size:34px}.ui-demo-stats,.font-downloads{grid-template-columns:1fr}}:root{--font-sf:"SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:var(--font-sf)}html,body,button,input,textarea,select{font-family:var(--font-sf)}body{font-family:var(--font-sf);font-weight:400}.icon-card>img{filter:brightness(0)saturate()}body.dark .icon-card>img{filter:brightness(0)invert()}.icon-actions{opacity:1!important;visibility:visible!important}.icon-actions button,.icon-actions a{align-items:center;min-height:30px;display:inline-flex}.logo-mini-info{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.logo-mini-card>div:last-child{border-top:0;padding:0}.logo-download{white-space:nowrap;align-items:center;gap:6px;padding:6px 9px;display:inline-flex}.logo-download svg{width:15px;height:15px}.logo-download span{color:inherit;font-size:10px}.color-palette [data-color-panel][hidden]{display:none}.color-palette.grid-view [data-color-panel]:not([hidden]) .swatch-list{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:760px){.logo-mini-info{flex-direction:column;align-items:flex-start}.logo-download{justify-content:center;width:100%}.color-palette.grid-view [data-color-panel]:not([hidden]) .swatch-list{grid-template-columns:1fr}}.logo-scale-frame{border:1px solid var(--border);background:#f6f4fb;border-radius:12px;width:100%;line-height:0;overflow:hidden}.logo-scale-art{object-fit:contain;width:100%;height:auto;max-height:none;display:block}body:not(.dark) .logo-scale-art{filter:invert()hue-rotate(180deg)saturate(.72)brightness(1.08)}body.dark .logo-scale-frame{background:#121119}.logo-scale-art{filter:none!important}.logo-scale-dark,body.dark .logo-scale-light{display:none}body.dark .logo-scale-dark{display:block}.logo-mini-card{flex-direction:column;min-height:210px;display:flex}.logo-mini-art{flex:0 0 132px;height:132px}.logo-mini-card>.logo-mini-info{border-top:1px solid var(--border);flex:1;justify-content:flex-end;align-items:flex-start;gap:24px;padding:24px 28px 32px!important}.logo-mini-card>.logo-mini-info>div:first-child{flex:1;min-width:0}.logo-download{background:var(--purple-800);border-color:var(--purple-800);color:#fff;font-weight:600;box-shadow:0 4px 12px #4939a433}.logo-download:hover{background:var(--purple-700);border-color:var(--purple-700);color:#fff;transform:translateY(-1px)}.logo-stage{background:#f8f7fa}.theme-logo-light{width:min(78%,620px);height:auto;display:block}.theme-logo-stage .logo-preview{width:min(78%,620px)}.theme-logo-dark{width:min(78%,620px);line-height:0;display:none;position:relative}.theme-logo-dark-base,.theme-logo-dark-wordmark{width:100%;height:auto;display:block}.theme-logo-dark-wordmark{filter:brightness(0)invert();clip-path:polygon(34% 0,100% 0,100% 100%,34% 100%);position:absolute;inset:0}body.dark .theme-logo-light{display:none}body.dark .theme-logo-dark{display:block}@media (max-width:760px){.logo-mini-card{min-height:0}.logo-mini-art{flex-basis:116px;height:116px}.logo-mini-card>.logo-mini-info{align-items:stretch;gap:18px;padding:22px 22px 26px!important}}.logo-download-library{gap:26px;display:grid}.logo-download-intro{border:1px solid var(--border);background:linear-gradient(135deg, var(--surface), var(--subtle));border-radius:12px;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px;display:flex}.logo-download-intro h3{margin:5px 0 7px;font-size:20px}.logo-download-intro p{color:var(--muted);max-width:600px;margin:0}.logo-download-badge,.logo-format-count{white-space:nowrap;border:1px solid var(--purple-300);background:var(--purple-200);color:var(--purple-900);font:10px var(--font-sf);border-radius:20px;padding:7px 11px;font-weight:600}body.dark .logo-download-badge,body.dark .logo-format-count{color:#fff;background:#30265a;border-color:#6651be}.logo-download-group{gap:11px;display:grid}.logo-download-group-label{letter-spacing:.12em;color:var(--purple-700);font-size:10px;font-weight:650}.logo-format-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.logo-format-card{border:1px solid var(--border);background:var(--surface);border-radius:11px;flex-direction:column;padding:20px;display:flex}.logo-format-head{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:20px;display:flex}.logo-format-head .meta{color:var(--ink);letter-spacing:0;margin:0;font-size:14px;font-weight:650}.logo-format-head p{color:var(--muted);margin:5px 0 0;font-size:12px}.logo-format-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:auto;display:grid}.logo-format-link{border:1px solid var(--border);background:var(--subtle);min-height:38px;color:var(--purple-800);border-radius:7px;justify-content:center;align-items:center;gap:5px;padding:7px 5px;font-size:11px;font-weight:650;transition:all .15s;display:flex}.logo-format-link:hover{background:var(--purple-200);border-color:var(--purple-400);transform:translateY(-1px)}.logo-format-link svg{flex:none;width:14px;height:14px}.symbol-download-group{padding-top:2px}.logo-symbol-note{border:1px dashed var(--border);color:var(--muted);border-radius:9px;flex-wrap:wrap;align-items:center;gap:10px;padding:13px 15px;font-size:12px;display:flex}.logo-symbol-note>span{margin-right:auto}@media (max-width:760px){.logo-download-intro{flex-direction:column;gap:14px;padding:20px}.logo-download-badge{align-self:flex-start}.logo-format-grid{grid-template-columns:1fr}.logo-format-card{padding:18px}.logo-format-head{flex-direction:column;gap:8px;margin-bottom:16px}.logo-format-links{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-symbol-note{flex-direction:column;align-items:stretch}.logo-symbol-note>span{margin:0}}.brand-idea p{max-width:700px;color:var(--ink);margin:0;font-size:21px;line-height:1.5}.photo-reference-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 8px;display:grid}.photo-reference-grid figure{border:1px solid var(--border);background:var(--surface);border-radius:11px;margin:0;overflow:hidden}.photo-reference-grid img{object-fit:cover;filter:saturate(.86);width:100%;height:170px;display:block}.photo-reference-grid figcaption{color:var(--muted);padding:11px 13px;font-size:11px;line-height:1.45}@media (max-width:760px){.brand-idea p{font-size:18px;line-height:1.55}.photo-reference-grid{grid-template-columns:1fr}.photo-reference-grid img{height:190px}}html,body,.sidebar-scroll,.icon-grid,.search-results,.table-wrap{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar{width:0;height:8px}body::-webkit-scrollbar{width:0;height:8px}.sidebar-scroll::-webkit-scrollbar{width:0;height:8px}.icon-grid::-webkit-scrollbar{width:0;height:8px}.search-results::-webkit-scrollbar{width:0;height:8px}.table-wrap::-webkit-scrollbar{width:0;height:8px}.brand-idea{border:1px solid var(--border);background:linear-gradient(135deg, var(--surface), var(--subtle));border-radius:14px;padding:34px;position:relative;overflow:hidden}.brand-idea:after{content:"";border:1px solid var(--purple-400);opacity:.55;border-radius:50%;width:250px;height:150px;position:absolute;top:20px;right:-55px;transform:rotate(-16deg)}.brand-idea span,.photo-direction span,.voice-example span,.before-after span,.app-example>small{letter-spacing:.12em;color:var(--purple-700);font-size:10px;font-weight:650;display:block}.brand-idea strong{letter-spacing:-.04em;z-index:1;margin:16px 0;font-size:38px;line-height:1.05;display:block;position:relative}.brand-idea p{z-index:1;position:relative}.comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.comparison-card{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:22px}.comparison-card h3{margin:0 0 12px}.comparison-card ul{color:var(--muted);margin:0;padding-left:18px}.comparison-card li{margin:7px 0}.comparison-card.positive{border-top:3px solid #25804b}.comparison-card.negative{border-top:3px solid #bd4a42}.token-table td:first-child{font-weight:600}.token-table td:nth-child(2){white-space:nowrap}.gradient-token-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.gradient-token{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:14px}.gradient-token h3{margin:13px 0 4px;font-size:12px}.gradient-token p,.gradient-token small{color:var(--muted);margin:0;display:block}.gradient-sample{border-radius:7px;height:100px}.gradient-sample-1{background:linear-gradient(90deg,#4939a4,#8166d6)}.gradient-sample-2{background:linear-gradient(135deg,#ece6fe,#fff)}.gradient-sample-3{background:linear-gradient(135deg,#281c6d,#121119)}.gradient-sample-4{background:linear-gradient(90deg,#4939a4,#8166d6,#b19fe8)}body.dark .gradient-sample-2{border:1px solid #d9d0f7}.metric-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.metric-row strong{border:1px solid var(--border);font-variant-numeric:tabular-nums;background:var(--surface);border-radius:8px;padding:16px;font-size:22px}.icon-state-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;display:grid}.icon-state{border:1px solid var(--border);background:var(--surface);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:9px;min-height:104px;display:flex}.icon-state img{filter:brightness(0);width:24px;height:24px}body.dark .icon-state img{filter:brightness(0)invert()}.icon-state span{color:var(--muted);font-size:10px}.icon-state.hover{background:var(--subtle)}.icon-state.active img,.icon-state.selected img{filter:brightness(0)saturate()invert(25%)sepia(54%)saturate(2072%)hue-rotate(238deg)}.icon-state.disabled{opacity:.45}.icon-state.destructive{color:#bd4a42}.icon-state.destructive img{filter:brightness(0)saturate()invert(35%)sepia(36%)saturate(1672%)hue-rotate(316deg)}.photo-direction{grid-template-columns:1fr 1fr;gap:12px;display:grid}.photo-direction>div{border:1px solid var(--border);background:linear-gradient(135deg,#fff,#f2effb);border-radius:12px;flex-direction:column;justify-content:flex-end;min-height:180px;padding:24px;display:flex}.photo-direction strong{color:#181724;margin-top:10px;font-size:20px;line-height:1.25}body.dark .photo-direction>div{background:linear-gradient(135deg,#1b1923,#281c6d)}body.dark .photo-direction strong{color:#fff}.orbit-demo{border:1px solid var(--border);background:radial-gradient(circle at center, #4939a422, transparent 32%), var(--subtle);border-radius:12px;height:320px;position:relative;overflow:hidden}.orbit-path{border:1px solid #8166d688;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-16deg)}.orbit-a{width:70%;height:44%}.orbit-b{width:45%;height:70%;transform:translate(-50%,-50%)rotate(34deg)}.orbit-centre,.orbit-node{background:#4939a4;border-radius:50%;position:absolute}.orbit-centre{width:54px;height:54px;top:calc(50% - 27px);left:calc(50% - 27px);box-shadow:0 0 0 14px #4939a418}.orbit-node{width:10px;height:10px}.orbit-node.node-a{top:41%;left:17%}.orbit-node.node-b{top:40%;right:19%}.orbit-node.node-c{bottom:17%;left:55%}.orbit-node.accent{background:#ff9f0a;width:12px;height:12px}.mini-orbit{background:radial-gradient(circle,#4939a4 0 10px,#0000 11px),radial-gradient(#0000 0 42%,#8166d666 43% 44%,#0000 45%);border-radius:8px;height:130px;position:relative}.mini-orbit.controlled:after{content:"";background:#ff9f0a;border-radius:50%;width:9px;height:9px;position:absolute;top:45%;left:72%}.mini-orbit.crowded{background:repeating-radial-gradient(circle,#0000 0 12px,#8166d655 13px 14px,#0000 15px 23px),radial-gradient(circle,#4939a4 0 8px,#0000 9px)}.mode-preview-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.mode-preview{border-radius:12px;flex-direction:column;gap:12px;min-height:220px;padding:24px;display:flex}.mode-preview>span{letter-spacing:.12em;font-size:10px}.mode-preview>strong{font-size:24px}.light-preview{color:#181724;background:#fff;border:1px solid #e8e7ec}.dark-preview{color:#f4f2f8;background:#121119;border:1px solid #302d39}.mode-card{border:1px solid #8166d633;border-radius:9px;margin-top:auto;padding:16px}.mode-card b,.mode-card small{display:block}.mode-card b{font-size:28px}.mode-card small{opacity:.7}.spacing-scale{gap:8px;display:grid}.spacing-scale>div{align-items:center;gap:12px;display:flex}.spacing-scale span{background:#4939a4;border-radius:3px;height:12px}.spacing-scale code{font-size:11px}.layout-wireframe{border:1px solid var(--border);text-align:center;color:var(--muted);border-radius:10px;grid-template-columns:70px 1fr 70px;align-items:center;gap:12px;padding:18px;display:grid}.layout-wireframe>div{border:1px solid var(--purple-400);background:var(--subtle);padding:26px}.layout-wireframe i{background:var(--border);height:8px;margin-top:10px;display:block}.product-demo{color:#fff;background:#0c0d1b;border:1px solid #292a43;border-radius:12px;grid-template-columns:180px 1fr;min-height:320px;display:grid;overflow:hidden}.product-nav{border-right:1px solid #292a43;flex-direction:column;gap:16px;padding:22px;display:flex}.product-nav strong{margin-bottom:10px}.product-nav span{color:#aaa7b5;font-size:12px}.product-main{padding:24px}.product-toolbar{justify-content:space-between;align-items:center;gap:18px;display:flex}.product-toolbar small{color:#cabdf1}.product-toolbar h3{margin:4px 0}.ui-kit{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.text-button{color:var(--purple-700);background:0 0;border:0;padding:8px}.field{flex-wrap:wrap}.field input,.field select{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:6px;min-height:38px;padding:8px}.status-badge{border-radius:20px;align-items:center;padding:5px 9px;font-size:11px;font-weight:600;display:inline-flex}.status-badge.success{color:#25804b;background:#25804b18}.status-badge.warning{color:#9b5600;background:#9b560018}body.dark .status-badge.success{color:#70d899}body.dark .status-badge.warning{color:#ffcb66}.modal-demo{background:#0c0d1b;border-radius:12px;place-items:center;padding:36px;display:grid}.modal-demo>div{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:min(360px,100%);padding:22px}.component-examples{grid-template-columns:1.4fr 1fr auto;align-items:flex-start;gap:14px;display:grid}.component-examples>.tabs,.component-examples>.card,.tooltip-example{border:1px solid var(--border);background:var(--surface);border-radius:10px}.component-examples>.tabs{gap:2px;margin:0;padding:7px;display:flex}.component-examples>.tabs .tab{flex:1}.component-examples>.card{min-height:132px;padding:20px}.component-examples>.card h3{margin:10px 0 6px}.component-examples>.card p{color:var(--muted);margin:0}.tooltip-example{place-items:center;min-width:82px;min-height:82px;padding:12px;display:grid;position:relative}.tooltip-example [role=tooltip]{z-index:2;color:#fff;white-space:nowrap;background:#181724;border-radius:6px;padding:7px 9px;font-size:10px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 24px #0003}.tooltip-example [role=tooltip]:before{content:"";border:5px solid #0000;border-bottom-color:#181724;position:absolute;bottom:100%;right:17px}.chart-demo{border:1px solid var(--border);background:var(--surface);border-radius:12px;grid-template-columns:1.5fr 1fr;gap:22px;padding:26px;display:grid}.bar-chart{border-bottom:1px solid var(--border);align-items:flex-end;gap:10px;height:220px;padding:0 10px;display:flex}.bar-chart span{border-radius:5px 5px 0 0;flex:1;position:relative}.bar-chart i{color:var(--muted);font-size:9px;font-style:normal;position:absolute;top:-22px;left:50%;transform:translate(-50%)}.donut-chart{background:conic-gradient(#4939a4 0 76%, #e8e7ec 76%);border-radius:50%;place-self:center;place-items:center;width:160px;height:160px;display:grid;position:relative}.donut-chart:after{content:"";background:var(--surface);border-radius:50%;position:absolute;inset:27px}.donut-chart strong{z-index:1;font-size:24px}.timeline-demo{border-top:2px solid var(--border);justify-content:space-between;gap:8px;padding-top:16px;display:flex}.timeline-demo span{font-size:11px}.timeline-demo .done{color:#25804b}.timeline-demo .current{color:#4939a4;font-weight:700}.motion-track{border:1px solid var(--border);background:var(--subtle);border-radius:12px;height:160px;position:relative;overflow:hidden}.motion-track span{background:#4939a4;border-radius:50%;width:28px;height:28px;animation:3s ease-in-out infinite orbyna-track;position:absolute;top:52px;left:12%}.motion-track i{color:var(--muted);font-size:11px;font-style:normal;position:absolute;bottom:16px;left:16px}@keyframes orbyna-track{0%,to{transform:translate(0)}50%{transform:translate(480px)}}.voice-example{border:1px solid var(--border);border-radius:12px;gap:10px;padding:26px;display:grid}.voice-example del{color:#bd4a42}.voice-example strong{font-size:22px}.before-after{grid-template-columns:1fr 1fr;gap:12px;display:grid}.before-after>div{border:1px solid var(--border);border-radius:9px;padding:18px}.status-example{grid-template-columns:1fr 1fr;gap:12px;display:grid}.status-example>div{border:1px solid var(--border);border-radius:9px;align-items:center;gap:10px;padding:18px;display:flex}.status-example i{border-radius:50%;width:10px;height:10px}.status-example span{color:var(--muted);font-size:11px}.application-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.app-example{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;justify-content:center;gap:13px;min-height:190px;padding:20px;display:flex;overflow:hidden}.app-example strong{font-size:22px;line-height:1.12}.app-example.web-hero,.app-example.social{color:#fff;background:#0c0d1b radial-gradient(circle at 80% 40%,#4939a466,#0000 37%)}.app-example.dashboard>div{align-items:baseline;gap:8px;display:flex}.app-example.dashboard b{font-size:30px}.app-example.dashboard span{color:var(--muted);font-size:11px}.app-example.mobile{border-radius:24px;min-height:230px;margin:0 22px}.app-example.slide{border-left:5px solid #4939a4}.app-example.banner{background:linear-gradient(90deg,#ece6fe,#fff);grid-column:span 2}body.dark .app-example.banner{background:linear-gradient(90deg,#281c6d,#1b1923)}@media (max-width:900px){.icon-state-row{grid-template-columns:repeat(3,1fr)}.application-grid{grid-template-columns:repeat(2,1fr)}.product-demo{grid-template-columns:150px 1fr}.metric-row{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){.comparison-grid,.gradient-token-grid,.photo-direction,.mode-preview-grid,.before-after,.status-example,.chart-demo,.application-grid,.component-examples{grid-template-columns:1fr}.brand-idea{padding:24px}.brand-idea strong{font-size:31px}.icon-state-row{grid-template-columns:repeat(2,1fr)}.metric-row{grid-template-columns:1fr 1fr}.layout-wireframe,.product-demo{grid-template-columns:1fr}.product-nav{border-bottom:1px solid #292a43;border-right:0;flex-direction:row;overflow-x:auto}.product-nav strong{margin:0}.product-toolbar{flex-direction:column;align-items:flex-start}.chart-demo{padding:18px}.donut-chart{width:130px;height:130px}.timeline-demo{border-top:0;border-left:2px solid var(--border);flex-direction:column;padding:0 0 0 14px}.motion-track span{animation:none;left:45%}.app-example.banner{grid-column:auto}.app-example.mobile{margin:0}.type-specimen{font-size:36px}.orbit-demo{height:250px}.tooltip-example{width:82px;margin-bottom:44px}.icon-btn,.search-trigger{width:44px;min-width:44px;height:44px}.nav-item{align-items:center;min-height:44px}.btn{min-height:40px}.icon-actions button,.icon-actions a{justify-content:center;min-width:40px;min-height:40px}}@media (prefers-reduced-motion:reduce){.motion-track span{animation:none;left:45%}}.header-logo,.intro-hero-logo{line-height:0;display:block;position:relative}.header-logo{width:220px}.header-logo img,.intro-hero-logo img{width:100%;height:auto;display:block}.header-logo .header-logo-wordmark,.intro-hero-logo .intro-logo-wordmark{filter:brightness(0)invert();display:none;position:absolute;inset:0}.header-logo-wordmark{clip-path:polygon(11% 0,100% 0,100% 100%,11% 100%)}.intro-logo-wordmark{clip-path:polygon(32% 0,100% 0,100% 100%,32% 100%)}body.dark .header-logo .header-logo-wordmark,body.dark .intro-hero-logo .intro-logo-wordmark{display:block}@media (max-width:760px){.header-logo{width:165px}.intro-hero-logo{width:min(190px,72%);margin-bottom:28px}}.comparison-card.positive,.comparison-card.negative{border-top:1px solid var(--border)!important}.before-after>div:last-child{border-color:var(--border)!important}.brand-idea{background:0 0!important;border:0!important;padding:0!important;overflow:visible!important}.brand-idea:after{display:none!important}:root{--topbar-height:74px;--sidebar:256px;--toc:224px;--radius:2px;--bg:#fff;--subtle:#f6f5f8;--surface:#fff;--ink:#0b0b10;--muted:#62616c;--faint:#96949f;--border:#dedde3}body{color:var(--ink);background:#090a0e;font-size:16px;line-height:1.62}body.dark{--bg:#111218;--subtle:#171820;--surface:#14151c;--ink:#f7f6fa;--muted:#b9b7c2;--faint:#85838f;--border:#31323b}.topbar{height:var(--topbar-height);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;background:#0a0b0f;border-bottom:1px solid #30313a;padding:0 28px}.top-brand{min-width:0;margin-right:auto}.header-logo{width:292px;max-width:31vw}.header-logo .header-logo-wordmark{display:block}.top-actions{gap:12px}.ui-icon{filter:brightness(0)invert();flex:none;width:17px;height:17px;display:block}.search-trigger,.topbar .icon-btn,.top-download{color:#f4f3f8;background:#12131a;border:1px solid #353741;border-radius:6px;min-height:42px}.search-trigger{color:#aaa8b3;gap:10px;width:264px;padding:0 12px}.search-trigger kbd{color:#aaa8b3;background:#1a1b24;border-color:#3b3d47}.topbar .icon-btn{width:auto;min-width:48px;padding:0 13px;font-size:12px}.topbar .theme-toggle{justify-content:center;align-items:center;width:44px;min-width:44px;height:42px;padding:0;display:inline-flex}.theme-toggle .theme-icon{object-fit:contain;flex:0 0 20px;width:20px;height:20px;margin:0;display:block}.mobile-menu{display:none}.version{color:#dedce5;font-size:12px}.status-dot{background:#54d58a}.top-download{color:#fff;white-space:nowrap;background:#5b3fd4;border-color:#6d50e8;justify-content:center;align-items:center;gap:9px;padding:0 18px;font-size:12px;font-weight:650;display:inline-flex}.top-download:hover{background:#6d50e8;border-color:#8166d6}.layout{grid-template-columns:var(--sidebar) minmax(0, 1fr);background:#090a0e;align-items:flex-start;max-width:none;margin:0;display:grid}.sidebar{top:var(--topbar-height);height:calc(100vh - var(--topbar-height));color:#f5f4f8;background:#0b0c11;border-right:1px solid #30313a;padding:18px 14px 0}.sidebar-scroll{padding:0;overflow:hidden auto}.nav-group{border-bottom:1px solid #2d2f37;margin:0 0 25px;padding-bottom:19px}.nav-group:last-child{margin-bottom:0}.nav-label{color:#9d9ba7;letter-spacing:.14em;padding:0 13px 9px;font-size:11px}.nav-item{color:#d2d0d8;border-radius:4px;gap:10px;min-height:44px;padding:9px 13px;font-size:14px}.nav-item:hover{color:#fff;background:#171820}.nav-item.active{color:#fff;background:#30265f;font-weight:650}.nav-item.active:before{background:#8b72ff;border-radius:2px;width:3px;height:22px;margin-left:-10px}.nav-num{color:#9d9ba7;width:25px;font-size:12px}.nav-item.active .nav-num{color:#d7d0fa}.sidebar-foot{color:#a9a7b1;background:#0b0c11;border-top:1px solid #2d2f37;margin:0 -14px;padding:19px 27px;font-size:12px}.sidebar-foot strong{color:#fff}.content-zone{background:var(--bg);min-width:0}.page-hero{color:#fff;background:#090a0e;border-bottom:1px solid #30313a;min-height:330px;position:relative;overflow:hidden}.page-hero-inner{min-height:inherit;isolation:isolate;align-items:center;padding:52px 64px 48px;display:flex;position:relative}.page-hero-copy{z-index:2;width:min(680px,66%);position:relative}.page-hero .eyebrow{color:#a892ff;letter-spacing:.24em;margin:0 0 20px;font-size:12px;font-weight:650}.page-hero h1{color:#fff;letter-spacing:-.06em;max-width:760px;margin:0 0 20px;font-size:clamp(52px,5.5vw,76px);font-weight:720;line-height:.98}.page-hero .lede{color:#d7d5de;max-width:680px;margin:0;font-size:19px;line-height:1.52}.page-hero-symbol{z-index:1;filter:saturate(1.12);opacity:.96;width:min(610px,53vw);height:auto;position:absolute;top:50%;right:-72px;transform:translateY(-50%)}.intro-hero-logo{width:174px;margin:0 0 34px}.page-hero .intro-logo-wordmark{display:block}.hero-cta{color:#fff;background:#583ccb;border:1px solid #6f54e6;border-radius:4px;justify-content:space-between;align-items:center;gap:24px;min-width:224px;margin-top:26px;padding:13px 18px;font-size:13px;font-weight:650;display:inline-flex}.hero-cta:hover{background:#6a4dde}body[data-route=introduction] .page-hero{min-height:420px}body[data-route=introduction] .page-hero-inner{padding-top:42px;padding-bottom:42px}body[data-route=introduction] .page-hero h1{max-width:720px;font-size:clamp(60px,6.6vw,92px)}.page-grid{grid-template-columns:minmax(0, 1fr) var(--toc);background:var(--bg);align-items:flex-start;display:grid}main{background:var(--bg);min-width:0;max-width:none;padding:56px 64px 112px}.toc{top:calc(var(--topbar-height) + 24px);border-left:1px solid var(--border);background:var(--bg);color:var(--ink);margin:0;padding:58px 30px 42px 27px}.toc-title{color:var(--faint);letter-spacing:.12em;padding:0 0 12px;font-size:11px}.toc a{color:var(--muted);padding:6px 0;font-size:13px;line-height:1.45;position:relative}.toc a.active{color:var(--purple-700);font-weight:650}.toc a.active:before{content:"";background:var(--purple-700);border-radius:2px;width:3px;height:17px;position:absolute;top:7px;left:-28px}.toc a:hover{color:var(--purple-700)}.type-spec-table td:first-child{min-width:190px}.type-style-sample{white-space:nowrap;color:var(--ink);display:inline-block}body:not(.dark){background:#fff}body:not(.dark) .topbar{color:var(--ink);background:#fff;border-bottom-color:#dedde3}body:not(.dark) .header-logo .header-logo-wordmark{filter:none}body:not(.dark) .ui-icon{filter:brightness(0)}body:not(.dark) .top-download .ui-icon{filter:brightness(0)invert()}body:not(.dark) .search-trigger,body:not(.dark) .topbar .icon-btn{color:var(--ink);background:#fff;border-color:#dedde3}body:not(.dark) .search-trigger{color:var(--muted)}body:not(.dark) .search-trigger kbd{color:var(--muted);background:#f5f5f7;border-color:#dedde3}body:not(.dark) .version{color:var(--muted)}body:not(.dark) .layout{background:#fff}body:not(.dark) .sidebar{color:var(--ink);background:#fff;border-right-color:#dedde3}body:not(.dark) .nav-group{border-bottom-color:#e6e5ea}body:not(.dark) .nav-label{color:var(--faint)}body:not(.dark) .nav-item{color:var(--muted)}body:not(.dark) .nav-item:hover{color:var(--ink);background:#f5f4f8}body:not(.dark) .nav-item.active{background:var(--purple-200);color:var(--purple-950)}body:not(.dark) .nav-num{color:var(--faint)}body:not(.dark) .nav-item.active .nav-num{color:var(--purple-700)}body:not(.dark) .sidebar-foot{color:var(--muted);background:#fff;border-top-color:#e6e5ea}body:not(.dark) .sidebar-foot strong{color:var(--ink)}body:not(.dark) .page-hero{color:var(--ink);background:#fff;border-bottom-color:#dedde3}body:not(.dark) .page-hero h1{color:var(--ink)}body:not(.dark) .page-hero .lede{color:var(--muted)}body:not(.dark) .page-hero .eyebrow{color:var(--purple-700)}body:not(.dark) .page-hero .intro-logo-wordmark{display:none}.section{border-top:1px solid var(--border);scroll-margin-top:calc(var(--topbar-height) + 20px);margin:0;padding:50px 0 58px}.section:first-child{border-top:0;padding-top:0}.section>.meta{color:var(--purple-700);letter-spacing:.08em;margin:0 0 12px;font-size:13px;font-weight:650}.section h2{color:var(--ink);letter-spacing:-.055em;margin:0 0 18px;font-size:clamp(36px,3.4vw,52px);font-weight:720;line-height:1.02}.section h3{color:var(--ink);letter-spacing:-.025em;margin:34px 0 12px;font-size:21px;font-weight:680;line-height:1.15}.section p{max-width:760px;color:var(--muted);margin-top:0;font-size:16px;line-height:1.65}.section>p:first-of-type{font-size:18px;line-height:1.62}.rule{display:none}.grid-2,.grid-3{border-top:1px solid var(--border);border-left:1px solid var(--border);gap:0}.grid-2>.card,.grid-3>.card{border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.card,.do-dont,.comparison-card,.gradient-token,.icon-card,.logo-format-card{background:var(--surface);box-shadow:none;border-radius:0}.card{padding:24px}.card h3{margin:0 0 9px;font-size:18px;line-height:1.25}.card p{font-size:15px;line-height:1.55}.do-dont{border-color:var(--border);padding:22px}.do-dont strong{font-size:12px}.comparison-grid{border-top:1px solid var(--border);border-left:1px solid var(--border);gap:0}.comparison-card{padding:26px;border:0!important;border-right:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important}.brand-idea{border-top:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important;padding:30px 0!important}.brand-idea p{font-size:24px;line-height:1.45}.principle{grid-template-columns:64px 1fr;padding:28px 0}.principle .num{color:var(--purple-700);font-size:18px}.principle h3{margin-bottom:7px;font-size:20px}.logo-stage,.logo-scale-frame,.photo-reference-grid figure,.photo-direction>div,.mode-preview,.chart-demo,.voice-example,.before-after>div,.status-example>div,.table-wrap,.contrast-box,.search-dialog{border-radius:2px}.logo-stage{border-color:var(--border);background:#f5f4f7;height:340px}body.dark .logo-stage{background:#191a22}.logo-preview{width:min(72%,660px)}.theme-logo-stage{padding:34px}.theme-logo-light,.theme-logo-stage .logo-preview,.theme-logo-dark{width:min(72%,660px)}.logo-mini-grid{border-top:1px solid var(--border);border-left:1px solid var(--border);gap:0}.logo-mini-card{border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);border-radius:0;min-height:250px}.logo-mini-art{border-radius:0;flex-basis:162px;height:162px}.logo-mini-card>.logo-mini-info{padding:24px 26px 28px!important}.logo-scale-frame{border-color:var(--border);background:#f5f4f7}.logo-download-intro{background:var(--subtle);border-radius:2px;padding:28px}.logo-format-grid{border-top:1px solid var(--border);border-left:1px solid var(--border);gap:0}.logo-format-card{border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px}.logo-format-link{background:var(--subtle);border-radius:3px;min-height:42px}.logo-symbol-note{border-radius:2px;padding:17px 18px}.logo-mini-card p,.logo-format-head p,.logo-symbol-note,.gradient-token p,.gradient-token small,.comparison-card li,.do-dont p,.photo-reference-grid figcaption,.status-example span{font-size:14px;line-height:1.55}.logo-mini-card h3,.gradient-token h3,.icon-card strong{font-size:15px;line-height:1.35}.logo-format-link,.icon-actions button,.icon-actions a,.logo-download-badge,.logo-format-count,.logo-download-group-label{font-size:12px}.icon-card span{font-size:12px;line-height:1.4}.field,.check-row{font-size:15px}.pill{font-size:13px}.meta{font-size:12px;line-height:1.4}.gradient-example{color:#fff;place-items:center;height:150px;display:grid}.tabs{border-color:var(--border);gap:0;margin:22px 0 0}.tab{padding:12px 17px;font-size:14px}.btn{border-radius:3px;min-height:42px;padding:9px 14px;font-size:14px}.swatch{border-radius:0;min-height:72px}.swatch-color{min-height:72px}.swatch-token,.swatch-copy strong,.swatch-copy span,.swatch-role{font-size:13px;line-height:1.45}.table-wrap{border-color:var(--border)}.spec-table th,.spec-table td{padding:15px 16px}.spec-table{font-size:14px;line-height:1.5}.spec-table th{font-size:12px}.type-specimen{letter-spacing:-.055em;margin:28px 0;font-size:64px;line-height:1}.font-downloads{border:0;gap:12px}.font-downloads>.card{border:1px solid var(--border)}.icon-card{border-color:var(--border)}.photo-reference-grid{border-top:1px solid var(--border);border-left:1px solid var(--border);gap:0}.photo-reference-grid figure{border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.footer{margin-left:var(--sidebar);color:#aaa8b3;background:#0a0b0f;border-top:1px solid #30313a;padding:24px 30px}@media (max-width:1180px){:root{--toc:0px}.page-grid{grid-template-columns:1fr}.toc{display:none}main,.page-hero-inner{padding-left:52px;padding-right:52px}}@media (max-width:920px) and (min-width:761px){:root{--sidebar:224px}.header-logo{width:250px}.search-trigger{width:210px}.top-download span{display:none}.top-download{width:44px;padding:0}.page-hero-copy{width:72%}}@media (max-width:760px){:root{--topbar-height:66px}.topbar{height:var(--topbar-height);gap:8px;padding:0 14px}.mobile-menu{justify-content:center;align-items:center;margin:0;color:#fff!important;min-width:52px!important;padding:0 10px!important;display:inline-flex!important}.header-logo{width:164px;max-width:none}.top-actions{gap:7px}.search-trigger{justify-content:center;width:44px;min-width:44px;padding:0}.search-label,.search-trigger kbd,.version,.top-download{display:none}.topbar .theme-toggle{width:44px;min-width:44px;padding:0}.layout{display:block}.sidebar{top:var(--topbar-height);z-index:60;width:min(300px,88vw);height:auto;padding-top:18px;bottom:0;left:-310px;box-shadow:24px 0 60px #0008}.sidebar.open{left:0}.sidebar-backdrop{inset:var(--topbar-height) 0 0;z-index:59;background:#05060acc}.content-zone{width:100%}.page-hero{min-height:390px}body[data-route=introduction] .page-hero{min-height:500px}.page-hero-inner{align-items:flex-start;padding:38px 22px 42px}.page-hero-copy{width:100%;padding-top:12px}.page-hero .eyebrow{letter-spacing:.2em;margin-bottom:16px;font-size:11px}.page-hero h1,body[data-route=introduction] .page-hero h1{max-width:92%;font-size:clamp(46px,14vw,64px);line-height:.96}.page-hero .lede{max-width:92%;font-size:17px}.page-hero-symbol{opacity:.56;width:390px;top:auto;bottom:-128px;right:-168px;transform:none}.intro-hero-logo{width:156px;margin-bottom:32px}.hero-cta{min-width:210px;margin-top:24px}.page-grid{display:block}main{padding:40px 22px 80px}.section{padding:40px 0 48px}.section h2{font-size:36px}.section h3{font-size:19px}.section>p:first-of-type{font-size:16px}.grid-2,.grid-3,.comparison-grid,.logo-mini-grid,.logo-format-grid,.photo-reference-grid{grid-template-columns:1fr}.logo-stage{height:230px}.logo-mini-card{min-height:0}.logo-mini-art{flex-basis:136px;height:136px}.logo-mini-card>.logo-mini-info{padding:22px!important}.type-specimen{font-size:44px}.footer{margin:0;padding:22px}}@media (max-width:430px){.header-logo{width:145px}.topbar .theme-toggle{width:42px;min-width:42px}.mobile-menu{font-size:11px;min-width:48px!important}}@media (max-width:760px){body:not(.dark) .mobile-menu{color:var(--ink)!important}.type-stack-row{padding:28px 0 30px}.type-stack-sample{font-size:clamp(16px, var(--type-size), 38px)}.type-stack-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-top:18px}.type-stack-badge{grid-column:1/-1;justify-self:start}.type-wall-viewport{gap:10px;height:300px;padding:24px 0}.type-wall-line{font-size:clamp(86px,22vw,150px)}.type-wall-footer{flex-direction:column;align-items:flex-start;gap:4px}}@media (prefers-reduced-motion:reduce){.type-wall-line{transform:none!important}}@media (max-width:1100px){.type-wall{width:calc(100% + 116px);margin-left:-58px}}@media (max-width:760px){.type-wall{width:calc(100% + 40px);margin-left:-20px}}main,.layout{overflow-x:clip}.topbar{z-index:100;position:sticky;top:0}.sidebar{z-index:25}.type-wall{z-index:0;position:relative}.type-stack-sample{color:var(--purple-800)}body.dark .type-stack-sample{color:var(--purple-300)}.icon-motion-wall{border:1px solid var(--border);background:var(--bg);z-index:0;flex-direction:column;justify-content:center;gap:28px;width:calc(100% + 144px);min-height:370px;margin:22px 0 30px -72px;padding:38px 0;display:flex;position:relative;overflow:hidden}.icon-motion-row{width:max-content;transform:translate3d(var(--icon-shift,0px), 0, 0);will-change:transform;gap:30px;display:flex}.icon-motion-row:first-child{margin-left:-5%}.icon-motion-row:nth-child(2){margin-left:-13%}.icon-motion-row:nth-child(3){margin-left:-2%}.lucide-mask{width:82px;height:82px;-webkit-mask:var(--lucide-icon) center/contain no-repeat;-webkit-mask:var(--lucide-icon) center/contain no-repeat;-webkit-mask:var(--lucide-icon) center/contain no-repeat;-webkit-mask:var(--lucide-icon) center/contain no-repeat;mask:var(--lucide-icon) center/contain no-repeat;flex:0 0 82px;display:block}.icon-tone-purple{background:var(--purple-800)}.icon-tone-yellow{background:var(--orange-700)}.icon-tone-mix{background:linear-gradient(135deg, var(--purple-700), var(--orange-500))}body.dark .icon-tone-purple{background:var(--purple-300)}body.dark .icon-tone-yellow{background:var(--orange-500)}body.dark .icon-tone-mix{background:linear-gradient(135deg, var(--purple-300), var(--orange-500))}.icon-state .lucide-mask{flex-basis:28px;width:28px;height:28px}.icon-state.disabled .lucide-mask{opacity:.5}.icon-state.destructive .lucide-mask{background:#bd4a42}body.dark .icon-state.destructive .lucide-mask{background:#ff9f7f}.lucide-source-link{white-space:nowrap;justify-content:center;align-items:center;min-height:42px;display:inline-flex}.icon-grid{max-height:none;padding-right:0;overflow:visible}.icon-pagination{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:18px;padding-top:16px;display:flex}.icon-pagination .btn{min-height:40px;color:var(--purple-800);font-weight:650}.icon-pagination .btn:disabled{opacity:.4;cursor:not-allowed}.icon-page-numbers{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;display:flex}.icon-page{border:1px solid var(--border);background:var(--surface);min-width:36px;height:40px;color:var(--muted);font:12px var(--font-sf);cursor:pointer;border-radius:6px}.icon-page:hover{border-color:var(--purple-400);color:var(--purple-800)}.icon-page.active{background:var(--purple-800);border-color:var(--purple-800);color:#fff;font-weight:700}body.dark .icon-page.active{background:var(--purple-600);border-color:var(--purple-600)}@media (max-width:1100px){.icon-motion-wall{width:calc(100% + 116px);margin-left:-58px}}@media (max-width:760px){.icon-motion-wall{gap:20px;width:calc(100% + 40px);min-height:280px;margin-left:-20px;padding:30px 0}.icon-motion-row{gap:20px}.lucide-mask{flex-basis:58px;width:58px;height:58px}.icon-grid{max-height:none}.icon-pagination .btn{flex:1}.icon-page{min-width:34px}}@media (prefers-reduced-motion:reduce){.icon-motion-row{transform:none!important}}.contrast-tool{border:1px solid var(--border);background:var(--subtle);border-radius:10px;margin-top:24px;padding:24px}.contrast-tool-head{border-bottom:1px solid var(--border);padding-bottom:18px}.contrast-tool-head h3{margin:0 0 7px;font-size:20px}.contrast-tool-head p{max-width:600px;margin:0}.contrast-tool-grid{grid-template-columns:minmax(220px,.8fr) minmax(260px,1.2fr);align-items:stretch;gap:20px;margin-top:20px;display:grid}.contrast-controls{gap:10px;display:grid}.contrast-picker{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:8px;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:13px 14px;font-weight:600;display:grid}.contrast-picker input[type=color]{border:1px solid var(--border);background:0 0;border-radius:5px;grid-area:1/2;width:40px;height:32px;padding:2px}.contrast-picker code{color:var(--muted);font:12px var(--mono);grid-area:1/1;font-weight:400}.contrast-picker span{grid-area:1/1;align-self:start;margin-top:-1px}.contrast-picker span+input+code{align-self:end}.contrast-result{border:1px solid var(--border);background:var(--surface);border-radius:8px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;min-height:120px;margin-top:0;padding:18px 20px;display:flex}.contrast-result-label{color:var(--muted);font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase}.contrast-result .ratio{color:var(--purple-700);font-size:42px;line-height:1}.contrast-status-list{flex-wrap:wrap;gap:6px 12px;font-size:12px;display:flex}.contrast-tool-note{color:var(--muted);margin:18px 0 0;font-size:12px}@media (max-width:760px){.contrast-tool{padding:18px}.contrast-tool-grid{grid-template-columns:1fr}.contrast-result{min-height:110px}}.contrast-picker{grid-template-rows:auto auto}.contrast-picker span{grid-area:1/1;margin:0}.contrast-picker input[type=color]{grid-area:1/2/span 2}.contrast-picker code{grid-area:2/1;align-self:start}.contrast-picker .hex-color-input{border:0;border-bottom:1px solid var(--border);width:100%;min-width:0;color:var(--muted);font:12px var(--mono);background:0 0;border-radius:0;outline:none;grid-area:2/1;padding:3px 0 1px}.contrast-picker .hex-color-input:focus{border-bottom-color:var(--focus)}.contrast-picker .hex-color-input.invalid{color:#bd4a42;border-bottom-color:#bd4a42}.contrast-preview{border:1px solid var(--border);border-radius:8px;grid-template-columns:minmax(0,1fr) 210px;min-height:230px;margin:22px 0;display:grid;overflow:hidden}.contrast-preview-copy{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:30px;display:flex}.contrast-preview-copy .meta{color:currentColor;opacity:.72;margin:0}.contrast-preview-copy strong{letter-spacing:-.08em;font-size:clamp(90px,15vw,150px);font-weight:600;line-height:.78}.contrast-preview-copy>span:last-child{font-size:14px;font-weight:600}.contrast-preview-result{background:var(--surface);color:var(--ink);border-left:1px solid var(--border);flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:22px;display:flex}.contrast-preview-result .ratio{color:var(--purple-700);font-size:42px;line-height:1}.contrast-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:0;display:grid}.contrast-control{border:1px solid var(--border);background:var(--surface);border-radius:8px;flex-direction:column;gap:14px;padding:16px;display:flex}.contrast-control .meta{margin:0 0 3px}.contrast-control label{color:var(--ink);font-size:15px;font-weight:600;display:block}.contrast-picker-fields{align-items:center;gap:10px;display:flex}.contrast-picker-fields input[type=color]{border:1px solid var(--border);background:0 0;border-radius:5px;flex:0 0 42px;width:42px;height:38px;padding:2px}.contrast-picker-fields .hex-color-input{border:1px solid var(--border);background:var(--subtle);width:100%;min-width:0;color:var(--ink);font:13px var(--mono);border-radius:5px;outline:none;padding:9px 10px}.contrast-picker-fields .hex-color-input:focus{border-color:var(--focus);box-shadow:0 0 0 2px var(--focus)}@supports (color:color-mix(in lab, red, red)){.contrast-picker-fields .hex-color-input:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--focus) 20%, transparent)}}.contrast-picker-fields .hex-color-input.invalid{color:#bd4a42;border-color:#bd4a42}.contrast-tool-note{margin:18px 0 0}.contrast-preview-result .contrast-status-list{color:var(--muted)}@media (max-width:760px){.contrast-preview{grid-template-columns:1fr;min-height:0}.contrast-preview-copy{min-height:220px}.contrast-preview-result{border-left:0;border-top:1px solid var(--border);padding:18px 20px}.contrast-controls{grid-template-columns:1fr}}.contrast-tool,.contrast-preview,.contrast-control,.contrast-preview-result{border-radius:2px}.contrast-table{min-width:720px}.contrast-sample{border:1px solid var(--border);border-radius:6px;justify-content:center;align-items:center;gap:8px;min-width:122px;min-height:54px;padding:8px 10px;display:flex}.contrast-sample strong{font-size:24px;line-height:1}.contrast-sample span{font-size:11px;line-height:1.2}.contrast-color-code{white-space:nowrap;align-items:center;gap:7px;display:inline-flex}.contrast-color-code i{border:1px solid var(--border);border-radius:4px;width:22px;height:22px;display:inline-block}.contrast-table td{vertical-align:middle}.contrast-table td:last-child{color:var(--muted);font-weight:600}