.pattern-studio-lab{--sidebar:var(--surface);--panel:var(--surface2);--panel-2:var(--surface2);--border-bright:var(--border2);--text-dim:#e8eaf261;background:var(--bg);min-height:calc(100vh - 72px);color:var(--text);grid-template-columns:278px minmax(0,1fr);display:grid}.pattern-studio-lab .ps-sidebar{border-right:1px solid var(--border);background:var(--sidebar);min-width:0}.pattern-studio-lab .ps-sidebar-body{align-content:start;gap:24px;max-height:calc(100vh - 72px);display:grid;position:sticky;top:72px;overflow:auto}.pattern-studio-lab .pattern-studio-dot{background:linear-gradient(135deg,#7c3aed,#22d3ee);box-shadow:0 0 0 4px #7c3aed1f}.pattern-studio-lab .ps-action-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.pattern-studio-lab .ps-action-grid .btn:last-child{grid-column:1/-1}.pattern-studio-lab .ps-pattern-list{gap:6px;display:grid}.pattern-studio-lab .ps-pattern-btn{border:1px solid var(--border);width:100%;color:var(--text-muted);text-align:left;cursor:pointer;background:#ffffff05;border-radius:10px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 11px;transition:all .16s;display:grid}.pattern-studio-lab .ps-pattern-btn:hover{border-color:var(--border-bright);color:var(--text);background:#6c63ff0f}.pattern-studio-lab .ps-pattern-btn.active{color:var(--text);background:#6c63ff1c;border-color:#6c63ff8c}.pattern-studio-lab .ps-pattern-copy{gap:2px;display:grid}.pattern-studio-lab .ps-pattern-copy strong{font-size:.76rem}.pattern-studio-lab .ps-pattern-copy small{color:var(--text-dim);text-transform:capitalize;font-size:.63rem}.pattern-studio-lab .ps-chevron{color:var(--text-dim);font-size:1rem}.pattern-studio-lab .ps-pattern-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.pattern-studio-lab .ps-pattern-dot.mode-dark,.pattern-studio-lab .ps-mode-badge.mode-dark{background:#22d3ee}.pattern-studio-lab .ps-pattern-dot.mode-light,.pattern-studio-lab .ps-mode-badge.mode-light{background:#f59e0b}.pattern-studio-lab .ps-mode-legend{border-top:1px solid var(--border);color:var(--text-muted);grid-auto-flow:column;justify-content:start;gap:16px;padding-top:14px;font-size:.66rem;display:grid}.pattern-studio-lab .ps-mode-legend span{grid-auto-flow:column;align-items:center;gap:6px;display:grid}.pattern-studio-lab .ps-main{align-content:start;gap:18px;min-width:0;padding:24px;display:grid}.pattern-studio-lab .ps-intro{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;display:grid}.pattern-studio-lab .ps-summary{grid-auto-flow:column;gap:8px;display:grid}.pattern-studio-lab .ps-summary>span{border:1px solid var(--border);background:#ffffff05;border-radius:10px;gap:3px;min-width:102px;padding:10px 12px;display:grid}.pattern-studio-lab .ps-summary small{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-size:.6rem}.pattern-studio-lab .ps-summary strong{text-transform:capitalize;font-size:.73rem}.pattern-studio-lab .ps-workbench{grid-template-columns:minmax(0,1fr) 340px;align-items:stretch;gap:16px;margin-top:18px;display:grid}.pattern-studio-lab .ps-preview-panel,.pattern-studio-lab .ps-control-panel{border:1px solid var(--border);background:var(--panel);border-radius:12px;min-width:0;overflow:hidden}.pattern-studio-lab .ps-preview-panel{grid-template-rows:auto minmax(520px,1fr);display:grid}.pattern-studio-lab .ps-preview-head{border-bottom:1px solid var(--border);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 15px;display:grid}.pattern-studio-lab .ps-preview-head>div{gap:2px;display:grid}.pattern-studio-lab .ps-preview-head strong{font-size:.78rem}.pattern-studio-lab .ps-preview-head span{color:var(--text-dim);font-size:.65rem}.pattern-studio-lab .ps-mode-badge{text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:4px 8px;font-weight:800;color:#07111d!important;font-size:.6rem!important}.pattern-studio-lab .ps-preview-stage{background:linear-gradient(135deg,#ffffff05,#6c63ff06);min-height:520px;padding:16px}.pattern-studio-lab #preview-box{isolation:isolate;border:1px solid #ffffff1f;border-radius:16px;width:100%;height:100%;min-height:488px;position:relative;overflow:hidden;box-shadow:0 22px 70px #00000057}.pattern-studio-lab #preview-box-inner{pointer-events:none;position:absolute;inset:0}.pattern-studio-lab #box-preview-el{z-index:10;place-items:center;min-height:78px;font-size:.72rem;font-weight:700;transition:all .2s;display:grid;position:absolute;bottom:22px;left:22px;right:22px}.pattern-studio-lab .preview-orb,.pattern-studio-lab .ring,.pattern-studio-lab .beam-strip,.pattern-studio-lab .soft-light-shape,.pattern-studio-lab .wave-shape,.pattern-studio-lab .aurora-beam,.pattern-studio-lab .diagonal-shape,.pattern-studio-lab .light-blob{position:absolute}.pattern-studio-lab .preview-orb{border-radius:50%}.pattern-studio-lab .ring{border:1px solid;border-radius:50%}.pattern-studio-lab .ring-one{width:440px;height:440px;top:-140px;left:-120px}.pattern-studio-lab .ring-two{width:360px;height:360px;bottom:-100px;right:-110px}.pattern-studio-lab .grid-overlay,.pattern-studio-lab .dots-overlay,.pattern-studio-lab .diagonal-shape{position:absolute;inset:0}.pattern-studio-lab .diamond-shape{clip-path:polygon(50% 0%,100% 50%,50% 100%,0 50%);border:1px solid;width:180px;height:180px;position:absolute;top:32px;right:12%;transform:rotate(20deg)}.pattern-studio-lab .beam-strip{filter:blur(14px)}.pattern-studio-lab .beam-strip-one{width:90%;height:30%;inset:14% auto auto -15%}.pattern-studio-lab .beam-strip-two{width:68%;height:22%;bottom:8%;right:-8%}.pattern-studio-lab .soft-light-shape{border:1px solid;border-radius:36px;width:220px;height:220px;inset:auto 8% 10% auto;transform:rotate(18deg)}.pattern-studio-lab .wave-shape{border-top:1px solid;border-radius:60% 40% 0 0/100% 100% 0 0;width:72%;height:52%;inset:auto -5% -16% -8%}.pattern-studio-lab .aurora-beam{filter:blur(18px);width:70%;height:180%;top:-40%}.pattern-studio-lab .diagonal-a{clip-path:polygon(0 0,72% 0,42% 100%,0 100%)}.pattern-studio-lab .diagonal-b{clip-path:polygon(62% 0,100% 0,100% 100%,28% 100%)}.pattern-studio-lab .dots-overlay{background-size:18px 18px}.pattern-studio-lab .light-blob{filter:blur(10px)}.pattern-studio-lab .blob-a{border-radius:44% 56% 63% 37%/41% 47% 53% 59%;width:220px;height:220px;inset:10% auto auto 5%}.pattern-studio-lab .blob-b{border-radius:58% 42% 36% 64%/44% 51% 49% 56%;width:260px;height:220px;inset:auto 2% 0 auto}.pattern-studio-lab .noise-overlay{opacity:.16;mix-blend-mode:screen;z-index:4;background-image:radial-gradient(#ffffff0e .7px,#0000 .7px);background-size:14px 14px;position:absolute;inset:0}.pattern-studio-lab .ps-control-panel{grid-template-rows:auto minmax(0,1fr);max-height:590px;display:grid}.pattern-studio-lab .ps-tabs{border-bottom:1px solid var(--border);grid-template-columns:repeat(3,1fr);display:grid}.pattern-studio-lab .ps-tabs button{color:var(--text-dim);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:12px 8px;font-size:.69rem;font-weight:700}.pattern-studio-lab .ps-tabs button.active{color:var(--text);border-bottom-color:var(--accent)}.pattern-studio-lab .ps-controls-area{padding:15px;overflow:auto}.pattern-studio-lab .control-group{margin-bottom:12px}.pattern-studio-lab .ctrl-label{color:var(--text-muted);grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:5px;font-size:.66rem;display:grid}.pattern-studio-lab .ctrl-value{color:var(--text);font-variant-numeric:tabular-nums}.pattern-studio-lab input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.pattern-studio-lab .color-row{grid-template-columns:minmax(0,1fr) 34px 62px;align-items:center;gap:8px;margin-bottom:10px;display:grid}.pattern-studio-lab .color-row label{color:var(--text-muted);font-size:.67rem}.pattern-studio-lab input[type=color]{border:1px solid var(--border);background:var(--panel);cursor:pointer;border-radius:6px;width:34px;height:28px;padding:2px}.pattern-studio-lab .color-hex{color:var(--text-dim);font-family:DM Mono,monospace;font-size:.62rem}.pattern-studio-lab .toggle-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:10px;display:grid}.pattern-studio-lab .toggle-row>span{color:var(--text-muted);font-size:.67rem}.pattern-studio-lab .toggle{cursor:pointer;border:0;border-radius:999px;width:38px;height:21px;position:relative}.pattern-studio-lab .toggle-knob{background:#fff;border-radius:50%;width:17px;height:17px;transition:left .2s;position:absolute;top:2px}.pattern-studio-lab .ps-section-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;border-top:1px solid var(--border);margin:16px 0 10px;padding-top:13px;font-size:.61rem;font-weight:800}.pattern-studio-lab .ps-section-first{margin-top:0}.pattern-studio-lab .ps-shape-item{border:1px solid var(--border);background:#ffffff05;border-radius:9px;margin-bottom:8px;padding:10px}.pattern-studio-lab .ps-shape-head{grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-bottom:8px;font-size:.67rem;font-weight:700;display:grid}.pattern-studio-lab .ps-shape-head button{color:var(--text-dim);cursor:pointer;background:0 0;border:0}.pattern-studio-lab .ps-add-shape{border:1px dashed var(--border-bright);width:100%;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:8px;padding:8px;font-size:.66rem}.pattern-studio-lab .ps-add-shape:hover{border-color:var(--accent);color:var(--text)}.pattern-studio-lab .ps-add-shape:disabled{opacity:.4;cursor:not-allowed}.pattern-studio-lab .css-block{margin-bottom:14px}.pattern-studio-lab .css-block-header{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:6px;display:grid}.pattern-studio-lab .css-block-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.61rem;font-weight:800}.pattern-studio-lab .copy-btn{border:1px solid var(--border);background:var(--panel-2);color:var(--text-muted);cursor:pointer;border-radius:6px;padding:4px 8px;font-size:.61rem}.pattern-studio-lab .copy-btn.copied{color:#22c55e}.pattern-studio-lab pre{border:1px solid var(--border);color:#7dd3fc;white-space:pre-wrap;word-break:break-word;background:#090f1a;border-radius:8px;max-height:180px;margin:0;padding:10px 11px;font-size:.62rem;line-height:1.55;overflow:auto}.pattern-studio-lab .ps-copy-own{width:100%;margin-top:3px}.pattern-studio-lab .ps-library-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:16px;display:grid}.pattern-studio-lab .ps-library-card{border:1px solid var(--border);background:var(--panel);color:var(--text);text-align:left;cursor:pointer;border-radius:10px;gap:9px;padding:8px;display:grid}.pattern-studio-lab .ps-library-card:hover,.pattern-studio-lab .ps-library-card.active{background:#6c63ff0e;border-color:#6c63ff8c}.pattern-studio-lab .ps-library-card>span:last-child{gap:2px;display:grid}.pattern-studio-lab .ps-library-card strong{font-size:.67rem}.pattern-studio-lab .ps-library-card small{color:var(--text-dim);text-transform:capitalize;font-size:.58rem}.pattern-studio-lab .ps-library-mini{background:linear-gradient(135deg,#101827,#111c2e);border-radius:7px;height:54px;position:relative;overflow:hidden}.pattern-studio-lab .ps-library-mini i{position:absolute;inset:0}.pattern-studio-lab .mini-mesh-glow{background:radial-gradient(circle at 20% 20%,#22d3ee66,#0000 35%),radial-gradient(circle at 80% 80%,#8b5cf666,#0000 36%),#07111d}.pattern-studio-lab .mini-rings{background:radial-gradient(circle at 30% 25%,#0000 0 22%,#22d3ee55 23% 24%,#0000 25%),#081321}.pattern-studio-lab .mini-grid-shape{background-image:linear-gradient(#ffffff12 1px,#0000 1px),linear-gradient(90deg,#ffffff12 1px,#0000 1px);background-size:10px 10px}.pattern-studio-lab .mini-beams{background:linear-gradient(145deg,#0000 20%,#22d3ee55 42%,#0000 58%),#081321}.pattern-studio-lab .mini-soft-light{background:radial-gradient(circle at 30% 30%,#8b5cf666,#0000 35%),radial-gradient(circle at 75% 70%,#22d3ee55,#0000 35%),#101827}.pattern-studio-lab .mini-wave{background:radial-gradient(at 0 100%,#22d3ee44,#0000 45%),#081321}.pattern-studio-lab .mini-aurora{background:linear-gradient(110deg,#0000,#22d3ee66,#0000 45%,#a855f766,#0000),#07111d}.pattern-studio-lab .mini-diagonal{background:linear-gradient(135deg,#22d3ee44 0 42%,#0000 42% 58%,#f9731644 58%),#081321}.pattern-studio-lab .mini-dots-glow{background-image:radial-gradient(#fff5 1px,#0000 1px);background-size:9px 9px}.pattern-studio-lab .mini-light-orbs{background:radial-gradient(circle at 20% 30%,#fb7185aa,#0000 35%),radial-gradient(circle at 80% 70%,#22d3ee99,#0000 35%),#ffe4e6}.pattern-studio-lab .mini-light-gradient{background:radial-gradient(circle at 0 0,#fb7185aa,#0000 48%),linear-gradient(135deg,#fff1f2,#fce7f3)}.pattern-studio-lab .mini-light-blobs{background:radial-gradient(circle at 25% 30%,#fb718599,#0000 30%),radial-gradient(circle at 80% 70%,#3b82f699,#0000 30%),#eff6ff}.pattern-studio-lab .ps-export-actions{grid-auto-flow:column;align-self:start;gap:6px;display:grid}@media (width<=1250px){.pattern-studio-lab .ps-workbench{grid-template-columns:1fr}.pattern-studio-lab .ps-control-panel{max-height:none}.pattern-studio-lab .ps-library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=980px){.pattern-studio-lab{grid-template-columns:1fr}.pattern-studio-lab .ps-sidebar{border-right:0;border-bottom:1px solid var(--border)}.pattern-studio-lab .ps-sidebar-body{max-height:none;position:static}.pattern-studio-lab .ps-pattern-list{grid-template-columns:repeat(2,minmax(0,1fr))}.pattern-studio-lab .ps-intro{grid-template-columns:1fr}.pattern-studio-lab .ps-summary{grid-template-columns:repeat(3,1fr);grid-auto-flow:row}.pattern-studio-lab .ps-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=700px){.pattern-studio-lab .ps-main{padding:14px}.pattern-studio-lab .ps-pattern-list,.pattern-studio-lab .ps-library-grid,.pattern-studio-lab .ps-summary{grid-template-columns:1fr}.pattern-studio-lab .ps-workbench{margin-top:12px}.pattern-studio-lab .ps-preview-panel{grid-template-rows:auto minmax(380px,1fr)}.pattern-studio-lab .ps-preview-stage{min-height:380px}.pattern-studio-lab #preview-box{min-height:350px}.pattern-studio-lab .ps-export-actions{grid-template-columns:1fr;grid-auto-flow:row}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#08090d;--surface:#0f1117;--surface2:#161921;--border:#ffffff12;--border2:#ffffff21;--text:#e8eaf2;--text-muted:#e8eaf28c;--accent:#6c63ff;--r-xl:20px;--r-lg:14px;--r-md:10px;--r-sm:7px}html{font-size:15px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Inter,system-ui,sans-serif;line-height:1.5}#app{min-height:100vh}.app-layout{grid-template-columns:390px 1fr;min-height:100vh;display:grid}.sidebar{background:var(--surface);border-right:1px solid var(--border);height:100vh;position:sticky;top:0;overflow-y:auto}.main-content{flex-direction:column;gap:32px;padding:28px;display:flex;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--border);padding:22px 22px 18px}.sidebar-logo{letter-spacing:-.02em;align-items:center;gap:8px;font-size:1.05rem;font-weight:800;display:flex}.logo-dot{background:linear-gradient(135deg,#6c63ff,#22d3ee);border-radius:50%;width:8px;height:8px}.sidebar-subtitle{color:var(--text-muted);letter-spacing:.05em;margin-top:4px;font-family:DM Mono,monospace;font-size:.7rem}.sidebar-body{flex-direction:column;gap:22px;padding:18px 20px;display:flex}.section-title{letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);align-items:center;gap:8px;margin-bottom:11px;font-size:.67rem;font-weight:700;display:flex}.section-title:after{content:"";background:var(--border);flex:1;height:1px}.color-list{flex-direction:column;gap:7px;display:flex}.color-row{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);grid-template-columns:44px 1fr 32px 32px;align-items:center;gap:6px;padding:7px 9px;transition:border-color .15s;display:grid}.color-row:hover{border-color:var(--border2)}.color-swatch-wrapper{border-radius:var(--r-md);border:1px solid var(--border2);cursor:pointer;flex-shrink:0;width:44px;height:44px;position:relative;overflow:hidden}.color-swatch-wrapper input[type=color]{cursor:pointer;opacity:0;border:none;width:200%;height:200%;padding:0;position:absolute;inset:-50% 0 0 -50%}.swatch-bg{border-radius:inherit;pointer-events:none;position:absolute;inset:0}.color-fields{grid-template-columns:1fr 88px;gap:5px;min-width:0;display:grid}.field-input{border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);background:#ffffff0a;width:100%;padding:5px 8px;font-family:DM Mono,monospace;font-size:.76rem;transition:border-color .15s}.field-input:focus{border-color:#6c63ff99;outline:none}.field-input.hex-invalid{border-color:#ef444499}select.field-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;padding-right:24px}.icon-btn{border:1px solid var(--border);border-radius:var(--r-sm);width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:#ffffff0a;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;transition:all .15s;display:flex}.icon-btn:hover{color:var(--text);background:#ffffff17}.icon-btn.del:hover{color:#f87171;background:#ef44441f;border-color:#ef44444d}.icon-btn:disabled{opacity:.27;cursor:not-allowed}.action-bar{flex-wrap:wrap;gap:6px;display:flex}.btn{border-radius:var(--r-md);cursor:pointer;border:1px solid var(--border2);color:var(--text);background:#ffffff0f;align-items:center;gap:5px;padding:7px 13px;font-family:inherit;font-size:.78rem;font-weight:600;transition:all .15s;display:inline-flex}.btn:hover{background:#ffffff1c;transform:translateY(-1px)}.btn-primary{color:#fff;background:linear-gradient(135deg,#6c63ff,#22d3ee);border:none}.btn-primary:hover{opacity:.88;transform:translateY(-1px)}.btn-sm{padding:5px 10px;font-size:.72rem}.css-output{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);color:#9dd0ff;resize:vertical;width:100%;min-height:180px;padding:12px;font-family:DM Mono,monospace;font-size:.7rem;line-height:1.55}.content-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px}.cs-title{letter-spacing:-.02em;margin-bottom:5px;font-size:1.05rem;font-weight:800}.cs-sub{color:var(--text-muted);margin-bottom:20px;font-family:DM Mono,monospace;font-size:.76rem}.base-palette-strip{border-radius:var(--r-xl);border:1px solid var(--border);height:110px;display:flex;overflow:hidden}.bp-chip{flex:1;align-items:flex-end;padding:10px;transition:flex .3s;display:flex}.bp-chip:hover{flex:1.5}.bp-label{opacity:0;background:#00000073;border-radius:5px;padding:4px 7px;font-family:DM Mono,monospace;font-size:.63rem;line-height:1.35;transition:opacity .2s}.bp-chip:hover .bp-label{opacity:1}.shade-palette-wrap{border-radius:var(--r-xl);border:1px solid var(--border);overflow:hidden}.shade-col-headers{border-bottom:2px solid #ffffff14;display:flex}.shade-col-header-step{background:var(--surface2);border-right:1px solid #ffffff0f;flex-shrink:0;width:54px}.shade-col-header-color{background:var(--surface2);border-right:1px solid #ffffff0f;flex-direction:column;flex:1;gap:2px;padding:9px 10px;display:flex}.shade-col-header-color:last-child{border-right:none}.shade-col-header-name{font-size:.75rem;font-weight:700}.shade-col-header-hex{opacity:.7;font-family:DM Mono,monospace;font-size:.64rem}.shade-row{border-bottom:1px solid #0000001f;display:flex}.shade-row:last-child{border-bottom:none}.shade-step-label{width:54px;color:var(--text-muted);background:var(--surface2);border-right:1px solid #ffffff0f;flex-shrink:0;justify-content:center;align-items:center;font-family:DM Mono,monospace;font-size:.67rem;font-weight:700;display:flex}.shade-cell{border-right:1px solid #00000014;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;min-height:52px;display:flex}.shade-cell:last-child{border-right:none}.shade-cell-name{opacity:.7;font-family:DM Mono,monospace;font-size:.6rem;line-height:1}.shade-cell-hex{font-family:DM Mono,monospace;font-size:.62rem;font-weight:500;line-height:1}.gradient-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;display:grid}.gradient-card{border-radius:var(--r-xl);border:1px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.grad-preview{flex-shrink:0;height:150px}.grad-body{background:var(--surface2);flex-direction:column;gap:9px;padding:13px;display:flex}.grad-type-tabs{border-radius:var(--r-md);border:1px solid var(--border);background:#00000040;gap:3px;padding:3px;display:flex}.grad-tab{border-radius:calc(var(--r-md) - 3px);cursor:pointer;color:var(--text-muted);background:0 0;border:none;flex:1;padding:5px 8px;font-family:inherit;font-size:.7rem;font-weight:600;transition:all .15s}.grad-tab.active{color:var(--text);background:#ffffff1a}.grad-selects{grid-template-columns:1fr 1fr 1fr;gap:6px;display:grid}.form-label{color:var(--text-muted);letter-spacing:.03em;margin-bottom:3px;font-family:DM Mono,monospace;font-size:.68rem;display:block}.angle-row{align-items:center;gap:8px;display:flex}.angle-row input[type=range]{accent-color:#6c63ff;flex:1}.angle-lbl{color:var(--text-muted);text-align:right;min-width:34px;font-family:DM Mono,monospace;font-size:.7rem}.code-badge{color:#7dd3fc;border-radius:var(--r-sm);word-break:break-all;background:#7dd3fc12;padding:6px 9px;font-family:DM Mono,monospace;font-size:.62rem;line-height:1.5}.grad-remove-btn{align-self:flex-end}.overlay-builder-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-xl);flex-direction:column;gap:10px;padding:16px;display:flex}.overlay-pair-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.overlay-pair-card{flex-direction:column;gap:0;display:flex}.overlay-pair-card .ov-card{border-bottom-right-radius:0;border-bottom-left-radius:0}.settings-under-preview{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.overlay-builder-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.subsection-label{letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin:6px 0 12px;font-size:.72rem;font-weight:700}.ov-card{border-radius:var(--r-xl);border:1px solid var(--border);aspect-ratio:4/3;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}.ov-card:hover{transform:translateY(-3px);box-shadow:0 14px 44px #0000008c}.ov-bg{background-position:50%;background-size:cover;position:absolute;inset:0}.ov-layer{position:absolute;inset:0}.ov-info{color:#fff;background:linear-gradient(#0000 0%,#000000b8 100%);padding:9px 12px;font-family:DM Mono,monospace;line-height:1.3;position:absolute;bottom:0;left:0;right:0}.ov-info strong{margin-bottom:2px;font-size:.72rem;display:block}.ov-info small{opacity:.8;font-size:.6rem}.ov-code{word-break:break-all;background:#00000080;border-radius:4px;margin-top:3px;padding:2px 5px;font-size:.55rem;display:none}.ov-card:hover .ov-code{display:block}.ui-lab-root{background:var(--bg);min-height:100vh}.ui-topbar{z-index:50;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);background:#08090df0;grid-template-columns:390px 1fr auto;align-items:center;height:72px;padding-right:24px;display:grid;position:sticky;top:0}.ui-brand{border-right:1px solid var(--border);align-items:center;gap:12px;height:100%;padding:0 22px;display:flex}.ui-brand-mark{border:1px solid var(--border2);background:linear-gradient(145deg,#6c63ff2e,#22d3ee14);border-radius:11px;grid-template-columns:repeat(3,1fr);align-items:end;gap:3px;width:34px;height:34px;padding:8px;display:grid}.ui-brand-mark span{background:linear-gradient(#22d3ee,#6c63ff);border-radius:4px;display:block}.ui-brand-mark span:first-child{height:45%}.ui-brand-mark span:nth-child(2){height:90%}.ui-brand-mark span:nth-child(3){height:65%}.ui-brand-name{letter-spacing:-.02em;font-size:.95rem;font-weight:800}.ui-brand-subtitle{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:3px;font:500 .58rem/1.2 DM Mono,monospace}.ui-nav{align-items:stretch;gap:3px;height:100%;padding-left:18px;display:flex}.ui-nav-link{color:var(--text-muted);cursor:pointer;background:0 0;border:0;align-items:center;gap:9px;padding:0 18px;font:700 .77rem/1 inherit;transition:color .18s,background .18s;display:flex;position:relative}.ui-nav-link:hover{color:var(--text);background:#ffffff06}.ui-nav-link.active{color:var(--text)}.ui-nav-link.active:after{content:"";background:linear-gradient(90deg,#6c63ff,#22d3ee);border-radius:2px 2px 0 0;height:2px;position:absolute;bottom:0;left:14px;right:14px}.ui-nav-index{color:#7dd3fcb3;font:500 .57rem/1 DM Mono,monospace}.ui-topbar-status{color:var(--text-muted);border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:7px 10px;font:600 .62rem/1 DM Mono,monospace}.lab-view,.app-layout.lab-view{min-height:calc(100vh - 72px)}.app-layout.lab-view .sidebar{height:calc(100vh - 72px);top:72px}.font-studio-layout{grid-template-columns:390px 1fr;display:grid}.font-sidebar{background:var(--surface);border-right:1px solid var(--border);height:calc(100vh - 72px);position:sticky;top:72px;overflow-y:auto}.font-dot{background:linear-gradient(135deg,#f59e0b,#fb7185)}.font-main{flex-direction:column;gap:32px;min-width:0;padding:28px;display:flex}.font-controls{gap:24px}.font-family-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.font-control-field{flex-direction:column;gap:4px;min-width:0;display:flex}.type-token-list{flex-direction:column;gap:8px;display:flex}.type-token-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}.type-token-card[open]{border-color:var(--border2)}.type-token-card summary{cursor:pointer;justify-content:space-between;align-items:center;gap:10px;padding:10px 11px;font-size:.73rem;font-weight:700;list-style:none;display:flex}.type-token-card summary::-webkit-details-marker{display:none}.type-token-card summary:before{content:"›";color:var(--text-muted);font:600 1rem/1 DM Mono,monospace;transition:transform .15s}.type-token-card[open] summary:before{transform:rotate(90deg)}.type-token-card summary>span:first-of-type{flex:1}.token-summary-value{color:var(--text-muted);font:500 .61rem/1 DM Mono,monospace}.type-token-controls{border-top:1px solid var(--border);grid-template-columns:1fr 1fr;gap:10px;padding:11px;display:grid}.control-wide{grid-column:1/-1}.type-token-controls input[type=range]{accent-color:#6c63ff;width:100%}.form-label b{color:var(--text);font-weight:600}.input-with-unit{position:relative}.input-with-unit .field-input{padding-right:27px}.input-with-unit span{color:var(--text-muted);font:500 .59rem DM Mono,monospace;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.font-color-row{grid-template-columns:38px 1fr;gap:6px;display:grid}.font-color-picker{border-radius:var(--r-sm);border:1px solid var(--border);cursor:pointer;background:#ffffff0a;width:38px;height:31px;padding:2px}.font-intro-section{justify-content:space-between;align-items:center;gap:22px;display:flex}.font-intro-section .cs-sub{max-width:760px;margin-bottom:0}.font-pair-badge{border:1px solid var(--border);background:var(--surface2);border-radius:var(--r-lg);flex-shrink:0;align-items:center;gap:12px;padding:10px 13px;display:flex}.font-pair-badge>span{color:#f8fafc;font-size:1.75rem;font-weight:700;line-height:1}.font-pair-badge div{flex-direction:column;gap:1px;display:flex}.font-pair-badge strong{font-size:.72rem}.font-pair-badge small{color:var(--text-muted);font:500 .6rem DM Mono,monospace}.font-preview-sheet{border:1px solid var(--border);border-radius:var(--r-xl);background:linear-gradient(#ffffff06,#ffffff02);max-width:980px;margin:0 auto;padding:clamp(28px,5vw,72px);overflow:hidden}.preview-eyebrow{letter-spacing:.18em;color:#7dd3fc;margin-bottom:28px;font:600 .62rem/1.2 DM Mono,monospace}.font-preview-sheet h1{max-width:900px;margin:0 0 26px}.font-preview-sheet h2{margin:48px 0 18px}.font-preview-sheet h3{margin:42px 0 14px}.font-preview-sheet h4{margin:36px 0 12px}.font-preview-sheet p{max-width:820px;margin:0 0 18px}.preview-lead{max-width:860px!important;margin-bottom:34px!important}.preview-rule{background:var(--border);height:1px;margin:36px 0 8px}.preview-quote{border-left:3px solid #6c63ff;max-width:820px;margin:38px 0;padding:4px 0 4px 22px}.preview-small{border-top:1px solid var(--border);margin-top:32px;padding-top:18px;display:block}.micro-ui-board{flex-direction:column;gap:14px;max-width:980px;margin:0 auto;display:flex}.micro-section,.micro-demo-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface2);padding:18px}.micro-section-title{margin-bottom:14px}.micro-section-space{margin-top:22px}.micro-badge-row,.micro-button-row,.micro-meta-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.micro-badge{white-space:nowrap;background:#94a3b814;border:1px solid #94a3b838;border-radius:999px;justify-content:center;align-items:center;min-height:24px;padding:5px 9px;display:inline-flex}.micro-badge-solid{background:#6c63ff2e;border-color:#6c63ff6b}.micro-badge-success{background:#22c55e1a;border-color:#22c55e47}.micro-badge-warning{background:#f59e0b1a;border-color:#f59e0b4d}.micro-badge-danger{background:#ef44441a;border-color:#ef44444d}.micro-badge-round{border-radius:50%;min-width:32px;min-height:32px;padding:5px}.micro-grid{gap:14px;display:grid}.micro-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}.micro-demo-card{min-width:0}.micro-demo-card-wide{width:100%}.micro-field-label{margin-bottom:7px;display:block}.micro-field-label-gap{margin-top:18px}.micro-input{border:1px solid var(--border2);border-radius:var(--r-md);background:#04081461;align-items:center;min-height:42px;padding:9px 11px;display:flex}.micro-input-error{border-color:#ef44445c}.micro-helper{margin-top:6px}.micro-helper-error{color:#f87171!important}.micro-button{border:1px solid var(--border2);border-radius:var(--r-md);cursor:pointer;background:#ffffff09;min-height:36px;padding:8px 12px}.micro-button-primary{background:linear-gradient(135deg,#6c63fff2,#5b52e1eb);border-color:#818cf88c}.micro-button-ghost{background:0 0;border-color:#0000}.micro-tabs{border-bottom:1px solid var(--border);gap:4px;display:flex;overflow-x:auto}.micro-tab{white-space:nowrap;padding:8px 10px 11px;display:inline-flex;position:relative}.micro-tab.active:after{content:"";background:#818cf8;border-radius:2px;height:2px;position:absolute;bottom:-1px;left:8px;right:8px}.micro-breadcrumbs{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.micro-breadcrumbs b{opacity:.35;font-weight:400}.micro-breadcrumbs strong{color:inherit;font-weight:700}.micro-meta-row{border-top:1px solid var(--border);margin-top:15px;padding-top:13px}.micro-meta-row>span{align-items:center;display:inline-flex}.micro-meta-row>span:not(:last-child):after{content:"•";opacity:.35;margin-left:8px}.micro-card-kicker{margin-bottom:7px}.micro-card-title{margin-bottom:8px}.micro-card-copy{max-width:520px}.micro-card-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:13px;display:flex}.micro-notification{border:1px solid var(--border);border-radius:var(--r-md);background:#04081447;grid-template-columns:auto 1fr auto;align-items:start;gap:10px;padding:12px;display:grid}.micro-notification-dot{background:#22c55e;border-radius:50%;width:8px;height:8px;margin-top:5px;box-shadow:0 0 0 4px #22c55e17}.micro-notification-title{margin-bottom:3px}.micro-notification-time{white-space:nowrap}.micro-table{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}.micro-table-row{border-top:1px solid var(--border);grid-template-columns:minmax(150px,1.6fr) repeat(3,minmax(80px,1fr));align-items:center;gap:10px;padding:10px 12px;display:grid}.micro-table-row:first-child{border-top:0}.micro-table-head{background:#ffffff06}.micro-pagination{justify-content:flex-end;align-items:center;gap:4px;margin-top:14px;display:flex}.micro-pagination button,.micro-pagination span{border:1px solid var(--border);border-radius:var(--r-sm);background:#ffffff05;justify-content:center;align-items:center;min-width:30px;min-height:30px;padding:6px 8px;display:inline-flex}.micro-pagination button{cursor:pointer}.micro-pagination span.active{background:#6c63ff29;border-color:#6c63ff61}.font-sample-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.font-sample-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface2);min-width:0;padding:15px}.font-sample-meta{justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;display:flex}.font-sample-meta strong{font-size:.68rem}.font-sample-meta span{color:var(--text-muted);font:500 .58rem DM Mono,monospace}.font-sample-text{white-space:nowrap;text-overflow:ellipsis;color:#eef2ff;font-size:1.38rem;overflow:hidden}.css-export-heading{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.css-export-heading .cs-sub{margin-bottom:16px}.combined-css-output{min-height:390px}.layout-lobby{grid-template-columns:390px minmax(0,1fr);display:grid}.layout-sidebar{background:var(--surface);border-right:1px solid var(--border);height:calc(100vh - 72px);position:sticky;top:72px;overflow-y:auto}.layout-sidebar .sidebar-logo,.layout-sidebar .section-title{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;display:grid}.layout-sidebar .section-title:after{width:100%}.layout-dot{background:linear-gradient(135deg,#22c55e,#14b8a6)}.layout-controls{gap:24px;display:grid}.layout-controls .font-control-field{gap:4px;display:grid}.layout-lobby .btn{grid-auto-flow:column;justify-content:center;align-items:center;gap:5px;display:grid}.layout-action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.layout-action-grid .btn:last-child{grid-column:1/-1}.layout-preset-grid{gap:8px;display:grid}.layout-preset{text-align:left;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface2);width:100%;color:var(--text);cursor:pointer;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:10px;padding:9px;transition:border-color .15s,background .15s;display:grid}.layout-preset:hover{border-color:var(--border2);background:#ffffff0b}.layout-preset.active{background:#14b8a60f;border-color:#14b8a680}.layout-preset>span:last-child{gap:2px;min-width:0;display:grid}.layout-preset strong{font-size:.72rem}.layout-preset small{color:var(--text-muted);font:500 .59rem/1.35 DM Mono,monospace}.layout-preset-icon{border:1px solid var(--border);background:#03071273;border-radius:7px;gap:3px;height:38px;padding:5px;display:grid}.layout-preset-icon i{background:#7dd3fc3d;border-radius:2px;display:block}.preset-dashboard{grid-template-rows:7px 1fr;grid-template-columns:11px 1fr}.preset-dashboard i:first-child{grid-row:1/-1}.preset-dashboard i:nth-child(2),.preset-dashboard i:nth-child(3){grid-column:2}.preset-marketing{grid-template-rows:7px 1fr;grid-template-columns:repeat(3,1fr)}.preset-marketing i:first-child{grid-column:1/-1}.preset-marketing i:nth-child(2){grid-column:1/3}.preset-marketing i:nth-child(3){grid-column:3}.preset-docs{grid-template-rows:7px 1fr;grid-template-columns:9px 1fr 9px}.preset-docs i:first-child{grid-column:1/-1}.preset-docs i:nth-child(2){grid-column:1}.preset-docs i:nth-child(3){grid-column:2/4}.preset-app{grid-template-rows:repeat(2,1fr);grid-template-columns:12px 1fr}.preset-app i:first-child{grid-row:1/-1}.preset-app i:nth-child(2),.preset-app i:nth-child(3){grid-column:2}.preset-storefront{grid-template-rows:7px 1fr;grid-template-columns:10px repeat(2,1fr)}.preset-storefront i:first-child{grid-column:1/-1}.preset-storefront i:nth-child(2){grid-column:1}.preset-storefront i:nth-child(3){grid-column:2/4}.layout-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}.layout-check{color:var(--text-muted);cursor:pointer;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;font-size:.7rem;display:grid}.layout-check input{accent-color:#14b8a6}.layout-main-panel{align-content:start;gap:32px;min-width:0;padding:28px;display:grid}.layout-intro{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;display:grid}.layout-intro .cs-sub{max-width:820px;margin-bottom:0}.grid-only-badge{border-radius:var(--r-lg);background:#14b8a60f;border:1px solid #14b8a647;grid-template-rows:auto auto;grid-template-columns:auto auto;align-items:center;column-gap:8px;padding:9px 12px;display:grid}.grid-only-badge>span{color:#2dd4bf;grid-row:1/-1;font-size:1.6rem}.grid-only-badge strong{letter-spacing:.08em;color:#99f6e4;font:800 .64rem/1 DM Mono,monospace}.grid-only-badge small{color:var(--text-muted);margin-top:3px;font:500 .57rem/1.3 DM Mono,monospace}.layout-preview-stage{border:1px solid var(--border);border-radius:var(--r-xl);background:#070a10;padding:16px;overflow:auto}.site-preview{background:#0b0f17;border:1px solid #ffffff17;border-radius:14px;min-width:760px;min-height:650px;overflow:hidden;box-shadow:0 22px 70px #0000004d}.site-preview.nav-top{grid-template-rows:var(--lp-nav-height) minmax(0,1fr);display:grid}.site-preview.nav-left{grid-template-columns:var(--lp-nav-width) minmax(0,1fr);display:grid}.preview-navbar{background:#101620;border-bottom:1px solid #ffffff12;align-items:center;gap:18px;padding:0 20px;display:grid}.nav-top.navvariant-standard .preview-navbar{grid-template-columns:auto minmax(0,1fr) auto}.nav-top.navvariant-centered .preview-navbar{grid-template-columns:1fr auto 1fr}.nav-top.navvariant-centered .preview-brand{justify-self:start}.nav-top.navvariant-centered .preview-navlinks{justify-self:center}.nav-top.navvariant-centered .preview-actions{justify-self:end}.nav-top.navvariant-compact .preview-navbar{grid-template-columns:auto auto minmax(0,1fr)}.nav-top.navvariant-compact .preview-actions{justify-self:end}.nav-left .preview-navbar{border-bottom:0;border-right:1px solid #ffffff12;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);align-items:start;padding:22px 16px}.preview-brand{color:#fff;background:linear-gradient(135deg,#14b8a6,#6366f1);border-radius:9px;place-items:center;width:34px;height:34px;font-size:.68rem;font-weight:900;display:grid}.preview-navlinks{color:#9aa7ba;white-space:nowrap;grid-auto-flow:column;justify-content:start;align-items:center;gap:16px;font-size:.58rem;display:grid}.nav-left .preview-navlinks{grid-auto-flow:row;align-content:start;gap:6px;margin-top:20px}.nav-left .preview-navlinks span{background:#ffffff06;border-radius:6px;padding:9px}.preview-actions{grid-auto-flow:column;justify-content:end;align-items:center;gap:6px;display:grid}.preview-actions i,.preview-actions b{background:#ffffff0a;border:1px solid #ffffff17;border-radius:7px;width:24px;height:24px;display:block}.preview-actions b{background:linear-gradient(135deg,#334155,#64748b);border-radius:50%}.nav-left .preview-actions{grid-template-columns:repeat(3,24px);grid-auto-flow:row;justify-content:start}.preview-workspace{background:#090d14;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;display:grid}.preview-page-head{padding:18px var(--lp-padding);border-bottom:1px solid #ffffff0d;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;display:grid}.preview-page-head>div{gap:6px;display:grid}.preview-page-head span{background:#334155;border-radius:4px;width:130px;height:7px;display:block}.preview-page-head strong{background:#1e293b;border-radius:4px;width:210px;height:5px;display:block}.preview-page-head button{background:linear-gradient(135deg,#14b8a6,#0f766e);border:0;border-radius:7px;width:78px;height:29px}.preview-layout-grid{width:100%;max-width:var(--lp-max);padding:var(--lp-padding);grid-template-columns:var(--lp-columns);gap:var(--lp-gap);align-items:start;margin:0 auto;display:grid}.preview-side{background:#0f141e;border:1px solid #ffffff0f;border-radius:9px;align-content:start;gap:7px;min-width:0;padding:11px;display:grid}.preview-side i{background:#182131;border-radius:6px;height:26px;display:block}.preview-side i:first-child{background:#14b8a626}.preview-side-right{gap:10px}.preview-side-right div{background:#141d2b;border:1px solid #ffffff0a;border-radius:7px;height:92px}.preview-content-zone{align-content:start;gap:var(--lp-gap);min-width:0;display:grid}.preview-hero{background:linear-gradient(135deg,#6366f124,#14b8a612);border:1px solid #ffffff0f;border-radius:10px;align-content:center;gap:8px;height:130px;padding:20px;display:grid}.preview-hero span{background:#475569;border-radius:5px;width:42%;height:9px}.preview-hero strong{background:#263244;border-radius:5px;width:70%;height:6px}.preview-hero i{background:#14b8a640;border-radius:6px;width:90px;height:25px;margin-top:6px}.preview-card-grid{grid-template-columns:repeat(var(--lp-card-columns),minmax(0,1fr));gap:var(--lp-gap);display:grid}.preview-card-grid article{background:#101620;border:1px solid #ffffff0f;border-radius:9px;align-content:end;gap:6px;min-height:126px;padding:14px;display:grid}.preview-card-grid span{background:#1e293b;border-radius:8px;width:32px;height:32px;display:block}.preview-card-grid strong{background:#334155;border-radius:4px;width:70%;height:7px;display:block}.preview-card-grid i{background:#1e293b;border-radius:4px;width:90%;height:5px;display:block}.preview-footer{padding:14px var(--lp-padding);border-top:1px solid #ffffff0d;grid-template-columns:minmax(0,1fr) repeat(3,18px);align-items:center;gap:7px;display:grid}.preview-footer span{background:#263244;border-radius:3px;width:120px;height:5px}.preview-footer i{background:#182131;border-radius:5px;height:18px}.blueprint-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.blueprint-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface2);gap:5px;padding:14px;display:grid}.blueprint-card small{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font:600 .59rem DM Mono,monospace}.blueprint-card strong{color:#d7e2f1;overflow-wrap:anywhere;font:700 .72rem/1.4 DM Mono,monospace}.layout-export-actions{grid-auto-flow:column;align-self:start;gap:6px;display:grid}.layout-lobby .css-export-heading{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px;display:grid}.font-system-toolbar{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin-bottom:9px;display:grid}.font-role-count{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface2);grid-template-columns:auto auto;align-items:center;gap:7px;min-height:52px;padding:7px 10px;display:grid}.font-role-count strong{color:#f8fafc;font:800 1.15rem/1 DM Mono,monospace}.font-role-count span{color:var(--text-muted);font:500 .55rem/1.25 DM Mono,monospace}.font-role-grid{margin-top:2px}.font-role-strip{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:5px;margin-top:8px;display:grid}.font-role-strip span{border:1px solid var(--border);border-radius:var(--r-sm);min-width:0;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;background:#ffffff05;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;padding:6px 7px;font:500 .56rem/1.2 DM Mono,monospace;display:grid;overflow:hidden}.font-role-strip b{color:#c7d2fe;background:#6c63ff24;border-radius:5px;place-items:center;min-width:22px;height:20px;font-size:.52rem;display:grid}.tracking-control input[type=range]{width:100%;margin:2px 0 5px}.tracking-inputs{grid-template-columns:minmax(0,1fr) 58px;gap:5px;display:grid}.unit-select{text-align:center;padding-left:7px!important;padding-right:5px!important}.preview-code-block{border:1px solid var(--border);border-radius:var(--r-md);background:#070b12;gap:8px;margin-top:18px;padding:16px;display:grid;overflow:auto}.preview-code-block code{white-space:nowrap}.content-layout-presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px;display:grid}.content-layout-preset{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface2);min-width:0;color:var(--text);text-align:left;cursor:pointer;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:9px;padding:8px;transition:border-color .15s,background .15s;display:grid}.content-layout-preset:hover{border-color:var(--border2)}.content-layout-preset.active{background:#14b8a60f;border-color:#14b8a680}.content-layout-preset>span:last-child{gap:2px;min-width:0;display:grid}.content-layout-preset strong{font-size:.67rem}.content-layout-preset small{color:var(--text-muted);font:500 .54rem/1.25 DM Mono,monospace}.content-layout-icon{border:1px solid var(--border);background:#090d14;border-radius:6px;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:2px;height:38px;padding:4px;display:grid}.content-layout-icon i{background:#2dd4bf33;border-radius:2px;display:block}.content-icon-cards i{grid-column:span 2}.content-icon-autofit{grid-template-columns:repeat(3,1fr)}.content-icon-autofit i{grid-column:span 1}.content-icon-bento i:first-child{grid-area:span 2/span 3}.content-icon-bento i:nth-child(2),.content-icon-bento i:nth-child(3){grid-column:span 1}.content-icon-bento i:nth-child(4),.content-icon-bento i:nth-child(5){grid-column:span 2}.content-icon-bento i:nth-child(6){display:none}.content-icon-masonry i:nth-child(3n+1){grid-row:span 2}.content-icon-magazine i:first-child{grid-area:span 2/span 3}.content-icon-magazine i:nth-child(2){grid-area:span 2/span 1}.content-icon-magazine i:nth-child(n+3){grid-column:span 2}.content-icon-dashboard i:first-child{grid-area:span 2/span 2}.content-icon-dashboard i:nth-child(4),.content-icon-dashboard i:nth-child(5){grid-column:span 2}.content-grid-controls{padding-top:2px}.preview-card-grid{grid-auto-flow:dense}.preview-content-cards{grid-template-columns:repeat(var(--lp-card-columns),minmax(0,1fr));grid-template-rows:repeat(var(--lp-card-rows),minmax(var(--lp-row-unit),auto));grid-auto-rows:minmax(var(--lp-row-unit),auto)}.preview-content-autofit{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--lp-card-min)),1fr));grid-template-rows:repeat(var(--lp-card-rows),minmax(var(--lp-row-unit),auto));grid-auto-rows:minmax(var(--lp-row-unit),auto)}.preview-content-bento,.preview-content-magazine,.preview-content-dashboard{grid-template-columns:repeat(var(--lp-card-columns),minmax(0,1fr));grid-template-rows:repeat(var(--lp-card-rows),var(--lp-row-unit));grid-auto-rows:var(--lp-row-unit);grid-auto-flow:dense}.preview-content-bento article{grid-column:span var(--lp-span-third);grid-row:span 2}.preview-content-bento article:first-child{grid-column:span var(--lp-span-two-third);grid-row:span 4}.preview-content-bento article:nth-child(2),.preview-content-bento article:nth-child(3){grid-column:span var(--lp-span-third);grid-row:span 2}.preview-content-bento article:nth-child(4),.preview-content-bento article:nth-child(5){grid-column:span var(--lp-span-half);grid-row:span 3}.preview-content-bento article:nth-child(8n+6){grid-column:span var(--lp-span-half)}.preview-content-bento article:nth-child(8n+7),.preview-content-bento article:nth-child(8n+8){grid-column:span var(--lp-span-quarter)}.preview-content-masonry{grid-template-columns:repeat(var(--lp-card-columns),minmax(0,1fr));grid-template-rows:repeat(var(--lp-card-rows),var(--lp-row-unit));grid-auto-rows:var(--lp-row-unit);grid-auto-flow:dense}.preview-content-masonry article{grid-row:span 7}.preview-content-masonry article:nth-child(3n+1){grid-row:span 11}.preview-content-masonry article:nth-child(4n+2){grid-row:span 9}.preview-content-masonry article:nth-child(5n){grid-row:span 13}.preview-content-magazine article{grid-column:span var(--lp-span-third);grid-row:span 3}.preview-content-magazine article:first-child{grid-column:span var(--lp-span-two-third);grid-row:span 5}.preview-content-magazine article:nth-child(2){grid-column:span var(--lp-span-third);grid-row:span 5}.preview-content-magazine article:nth-child(3),.preview-content-magazine article:nth-child(4){grid-column:span var(--lp-span-half)}.preview-content-magazine article:nth-child(7n){grid-area:span 2/1/auto/-1}.preview-content-dashboard article{grid-column:span var(--lp-span-quarter);grid-row:span 2}.preview-content-dashboard article:first-child{grid-column:span var(--lp-span-half);grid-row:span 4}.preview-content-dashboard article:nth-child(4),.preview-content-dashboard article:nth-child(5){grid-column:span var(--lp-span-half);grid-row:span 3}.size-live-row{grid-template-columns:minmax(0,1fr) 104px;align-items:center;gap:10px;display:grid}.size-live-row input[type=range]{width:100%}.size-live-input{grid-template-columns:minmax(0,1fr) auto}.control-hint{color:var(--text-muted);font:500 .54rem/1.35 DM Mono,monospace}@media (width<=1100px){.ui-topbar{grid-template-columns:auto 1fr auto}.ui-brand{border-right:0}.ui-brand-subtitle{display:none}.app-layout,.font-studio-layout,.layout-lobby{grid-template-columns:1fr}.sidebar,.font-sidebar,.layout-sidebar,.app-layout.lab-view .sidebar{height:auto;position:relative;top:auto}.font-family-grid{grid-template-columns:1fr 1fr}}@media (width<=700px){.ui-topbar{grid-template-columns:1fr auto;height:auto;min-height:64px;padding-right:10px}.ui-brand{padding:10px 14px}.ui-topbar-status{display:none}.ui-nav{border-top:1px solid var(--border);order:3;grid-column:1/-1;height:44px;padding:0 8px}.ui-nav-link{flex:1;justify-content:center;padding:0 10px}.lab-view,.app-layout.lab-view{min-height:calc(100vh - 109px)}.main-content,.font-main,.layout-main-panel{gap:18px;padding:16px}.content-section{padding:18px}.gradient-cards,.overlay-builder-grid,.overlay-pair-grid,.font-sample-grid,.micro-grid-two,.blueprint-grid,.grad-selects,.font-family-grid{grid-template-columns:1fr}.font-intro-section,.css-export-heading{flex-direction:column;align-items:flex-start}.font-pair-badge{width:100%}.type-token-controls{grid-template-columns:1fr}.control-wide{grid-column:auto}.font-preview-sheet{padding:26px 20px}.font-preview-sheet h1{overflow-wrap:anywhere}.micro-section,.micro-demo-card{padding:14px}.micro-table{overflow-x:auto}.micro-table-row{min-width:560px}.micro-meta-row>span:not(:last-child):after{display:none}.layout-form-grid,.layout-action-grid,.layout-intro,.layout-lobby .css-export-heading,.content-layout-presets{grid-template-columns:1fr}.layout-action-grid .btn:last-child{grid-column:auto}.layout-export-actions{grid-template-columns:1fr;grid-auto-flow:row}.site-preview{min-width:680px}}.export-scope{position:relative}.export-scope>summary{cursor:pointer;border:1px solid var(--border2);color:var(--text);background:#ffffff0d;border-radius:9px;padding:7px 10px;font-size:.7rem;font-weight:700;list-style:none}.export-scope>summary::-webkit-details-marker{display:none}.export-scope-popover{z-index:200;border:1px solid var(--border2);background:#111722;border-radius:12px;gap:9px;width:260px;padding:12px;display:grid;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 18px 50px #00000061}.export-scope-popover strong{font-size:.7rem}.export-scope-popover label{color:var(--text-muted);cursor:pointer;grid-template-columns:auto 1fr;align-items:center;gap:8px;font-size:.7rem;display:grid}.export-scope-popover input,.token-export-toggle input{accent-color:#6c63ff}.export-scope-popover small{color:var(--text-muted);border-top:1px solid var(--border);padding-top:5px;font:500 .58rem/1.45 DM Mono,monospace}.font-live-size-panel{border-radius:var(--r-lg);background:#6c63ff0f;border:1px solid #6c63ff4d;gap:9px;padding:12px;display:grid}.font-live-size-panel .section-title{color:#c7d2fe;margin-bottom:0}.font-live-specimen{white-space:nowrap;background:#00000038;border-radius:9px;min-width:0;padding:12px;overflow:auto}.token-summary-actions{grid-auto-flow:column;align-items:center;gap:8px;display:grid}.token-export-toggle{border:1px solid var(--border);color:#aab5c6;cursor:pointer;border-radius:7px;grid-template-columns:auto auto;align-items:center;gap:5px;padding:3px 6px;font:600 .56rem DM Mono,monospace;display:grid}.type-token-card summary.disabled{opacity:.55}.export-summary-line{border:1px solid var(--border);color:var(--text-muted);background:#ffffff06;border-radius:9px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;margin:0 0 10px;padding:8px 10px;font:600 .62rem DM Mono,monospace;display:grid}@media (width<=900px){.export-scope-popover{left:0;right:auto}.export-summary-line{grid-template-columns:1fr 1fr}.export-summary-line>span{grid-column:1/-1}}