:root{font-family:var(--font-body,"Inter", "Segoe UI", sans-serif);color:var(--ink);background:var(--paper-muted);--ink:#101828;--ink-soft:#344054;--muted:#667085;--disabled-text:#98a2b3;--line:#d0d5dd;--line-subtle:#eaecf0;--line-strong:#98a2b3;--blue:#1570ef;--blue-deep:#175cd3;--blue-soft:#eff8ff;--focus:#2e90fa;--green:#059669;--green-soft:#ecfdf5;--amber:#dc6803;--amber-soft:#fffaeb;--red:#d92d20;--red-soft:#fef3f2;--paper:#fff;--paper-warm:#fcfcfd;--paper-muted:#f2f4f7;--inverse:#101828;--inverse-text:#fff;--card-surface:#fff;--card-radius:18px;--card-padding:26px;--rail:#101828;--rail-2:#182230;--shadow:0 1px 2px #1018280d, 0 12px 30px #1018280f}*{box-sizing:border-box}body{margin:0}button,a,input,textarea{font:inherit}h1,h2,h3,p{margin-top:0}h1{font-size:var(--heading-lg-size,36px);line-height:var(--heading-lg-line,44px);font-weight:var(--heading-lg-weight,600)}h2{font-size:var(--heading-md-size,30px);line-height:var(--heading-md-line,38px);font-weight:var(--heading-md-weight,600)}p{font-size:var(--text-md-size,16px);line-height:var(--text-md-line,24px)}small{font-size:var(--text-xs-size,12px);line-height:var(--text-xs-line,18px)}button,a.download{border:1px solid var(--line);background:var(--paper);min-height:40px;color:var(--ink);border-radius:var(--component-radius,12px);cursor:pointer;font-size:var(--text-sm-size,14px);line-height:var(--text-sm-line,20px);font-weight:var(--text-sm-weight,500);justify-content:center;align-items:center;gap:8px;padding:11px 16px;text-decoration:none;transition:background .14s,border-color .14s,color .14s,transform .14s,box-shadow .14s;display:inline-flex;box-shadow:0 1px 2px #1018280d}button:hover,a.download:hover{border-color:var(--line-strong);background:var(--paper-warm)}button:focus-visible,a.download:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid color-mix(in srgb, var(--focus) 24%, transparent);outline-offset:2px}.dsButton{border-radius:var(--component-radius,8px)}.dsButton-primary,.primary{background:var(--button-primary,var(--blue));border-color:var(--button-primary,var(--blue));color:var(--button-primary-text,var(--paper))}.dsButton-primary:hover,.primary:hover{background:var(--button-primary-hover,var(--blue-deep));border-color:var(--button-primary-hover,var(--blue-deep));color:var(--button-primary-text,var(--paper))}.dsButton-secondary{background:var(--paper);color:var(--ink);border-color:var(--line)}.dsButton-tertiary,.dsButton-ghost{box-shadow:none;background:0 0;border-color:#0000}.dsButton-tertiary:hover,.dsButton-ghost:hover{background:var(--paper-warm);border-color:#0000}.dsStatusBadge{color:var(--blue-deep);background:var(--blue-soft);border:1px solid color-mix(in srgb, var(--blue) 34%, var(--paper));font-size:var(--text-xs-size,12px);line-height:var(--text-xs-line,18px);border-radius:999px;padding:4px 8px}.app{min-height:100vh;font-family:var(--font-body,"Inter", "Segoe UI", sans-serif);font-size:var(--text-md-size,16px);line-height:var(--text-md-line,24px);grid-template-columns:286px minmax(0,1fr);display:grid}.app.navCollapsed{grid-template-columns:76px minmax(0,1fr)}aside{background:var(--paper);color:var(--ink);border-right:1px solid var(--line-subtle);height:100vh;padding:18px 14px;position:sticky;top:0}.brand{border-bottom:1px solid var(--line-subtle);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:18px;padding:4px 4px 16px;display:grid}.brand strong{line-height:1.15;display:block}.brand span{color:var(--muted);margin-top:3px;font-size:12px;display:block}.navCollapse{width:36px;min-width:36px;min-height:36px;color:var(--ink-soft)}nav{align-content:start;gap:3px;display:grid}nav button{color:color-mix(in srgb, var(--paper) 86%, var(--rail));background:0 0;border-color:#0000;justify-content:flex-start;width:100%;padding:10px}aside nav .dsNavItem{color:var(--ink-soft);background:0 0;border-color:#0000}nav button.active{background:var(--brand-50,var(--blue-soft));border-color:var(--brand-50,var(--blue-soft));color:var(--brand-600,var(--blue))}aside nav .dsNavItem:hover{background:var(--paper-warm);color:var(--ink);border-color:#0000}aside nav .dsNavItem.active,aside nav .dsNavItem.active:hover{background:var(--brand-50,var(--blue-soft));border-color:var(--brand-50,var(--blue-soft));color:var(--brand-600,var(--blue))}.app.navCollapsed aside{padding-left:10px;padding-right:10px}.app.navCollapsed .brand{grid-template-columns:1fr;justify-items:center;gap:10px;padding-left:0;padding-right:0}.app.navCollapsed .brandText,.app.navCollapsed .navLabel{display:none}.app.navCollapsed nav .dsNavItem{justify-content:center;padding-left:0;padding-right:0}.app.navCollapsed .navCollapse{grid-row:2}main{min-width:0;padding:18px 24px 42px}.topbar{--topbar-control-height:48px;grid-template-columns:minmax(240px,1fr) auto auto auto;align-items:center;gap:10px;margin-bottom:16px;display:grid}.topbar>.dsButton,.topbar>.dsSearchField{height:var(--topbar-control-height);min-height:var(--topbar-control-height)}.topbar>.dsButton{padding-top:0;padding-bottom:0}.dsSearchField{background:var(--paper);border:1px solid var(--line);border-radius:12px;align-items:center;gap:10px;padding:0 14px;display:flex}.dsSearchField input{width:100%;min-width:80px;height:100%;color:var(--ink);background:0 0;border:0;outline:0}.results{z-index:5;background:var(--paper);border-radius:var(--card-radius);border:0;gap:4px;padding:14px;display:grid;position:absolute;top:66px;left:330px;right:260px;box-shadow:0 16px 40px #1018282e}.results button{justify-content:flex-start}.results small{color:var(--muted);width:88px}.notice{background:var(--blue-soft);color:var(--blue-deep);border:0;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:10px 12px;display:flex}.notice .dsButton{flex:none}.stack{gap:16px;display:grid}.hero{background:var(--card-surface);border-radius:var(--card-radius);box-shadow:none;border:0;grid-template-columns:minmax(0,1fr) 190px;gap:26px;padding:40px;display:grid}.eyebrow{width:fit-content;color:var(--blue-deep);background:var(--blue-soft);border:1px solid color-mix(in srgb, var(--blue) 18%, var(--paper));border-radius:999px;margin-bottom:13px;padding:5px 9px;font-size:12px;font-weight:700;display:inline-flex}.hero h1{letter-spacing:0;margin:0 0 10px;font-size:38px;line-height:1.08}.hero p{max-width:74ch;color:var(--ink-soft);margin:0;font-size:16px;line-height:1.55}.flowline{border:1px solid var(--line);background:var(--line);border-radius:12px;grid-template-columns:repeat(4,minmax(120px,1fr));gap:1px;margin-top:22px;display:grid;overflow:hidden}.flowline span{background:var(--paper-warm);color:var(--ink-soft);padding:11px 12px;font-size:13px;font-weight:700}.versionPlate{background:var(--paper-warm);border:0;border-radius:16px;align-content:center;gap:4px;padding:24px;display:grid}.versionPlate span,.versionPlate small{color:var(--muted);font-size:12px}.versionPlate strong{font-size:30px}.metrics{background:var(--card-surface);border-radius:var(--card-radius);grid-template-columns:repeat(6,minmax(120px,1fr));gap:0;padding:48px 36px;display:grid}.metricCounter{text-align:center;box-shadow:none;background:0 0;border:0;border-radius:0;align-content:center;justify-items:center;gap:16px;padding:10px 18px;display:grid}.metricLabel,.row span{color:var(--ink);font-size:14px;font-weight:700;line-height:20px}.metricCounter .metricLabel,.metricCounter strong{text-align:center;display:block}.metricCounter strong{color:var(--brand-600,var(--blue));letter-spacing:0;font-size:clamp(36px,4.4vw,72px);font-weight:700;line-height:1}.quick{flex-wrap:wrap;gap:9px;display:flex}.exportActions{gap:var(--space-sm,12px);margin:var(--space-md,16px) 0;flex-wrap:wrap;align-items:center;display:flex}.panel{background:var(--card-surface);border-radius:var(--card-radius);padding:var(--card-padding);box-shadow:none;border:0;margin-bottom:16px;overflow:hidden}.panelHead{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.panel h2{margin:0;font-size:18px}.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;display:grid}.colorsGrid{align-items:start}.primaryFamilies{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;display:grid}.primaryFamily{text-align:left;white-space:normal;min-height:140px;box-shadow:none;border:0;border-radius:16px;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:18px}.primaryFamily.active{background:var(--blue-soft);box-shadow:none;border-color:#0000}.familySwatches{grid-template-columns:repeat(5,1fr);gap:4px;display:grid}.familySwatches i{border:1px solid #10182814;border-radius:6px;height:34px}.primaryFamily strong{color:var(--ink);margin-top:4px}.primaryFamily small{color:var(--muted);line-height:1.35}.helpText{color:var(--muted);margin:14px 0 0}.field{gap:6px;min-width:0;margin-bottom:10px;display:grid}.field span{color:var(--ink-soft);font-size:var(--text-sm-size,14px);line-height:var(--text-sm-line,20px);font-weight:var(--text-xs-weight,500)}.field input,.field textarea,.importBox{border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%;min-width:0;font-size:var(--text-sm-size,14px);line-height:var(--text-sm-line,20px);font-weight:var(--text-sm-weight,400);border-radius:8px;box-shadow:0 1px 2px #1018280d}.field input[type=number]{appearance:textfield}.field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.field input{min-height:40px;padding:8px 12px}.field textarea,.importBox{padding:10px 12px}.field textarea{resize:vertical;min-height:86px}.field input::placeholder,.field textarea::placeholder{color:var(--muted)}.dsSelectField{position:relative}.dsSelectField.compact{min-width:168px;margin:0}.dsSelectTrigger{border-color:var(--line);background:var(--paper);width:100%;min-height:40px;color:var(--ink);box-shadow:none;border-radius:12px;justify-content:space-between;padding:8px 12px}.dsSelectTrigger span{color:inherit;text-transform:none;font-size:14px;font-weight:500}.dsSelectTrigger.open{border-color:var(--focus);outline:4px solid color-mix(in srgb, var(--focus) 24%, transparent)}.dsSelectTrigger svg{flex:none}.dsSelectMenu{z-index:70;background:var(--paper);border-radius:14px;min-width:max(100%,180px);max-height:280px;padding:6px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:auto;box-shadow:0 16px 40px #1018282e}.panelHead .dsSelectMenu{left:auto;right:0}.dsSelectMenu button{width:100%;min-height:38px;color:var(--ink);box-shadow:none;text-align:left;background:0 0;border:0;border-radius:10px;grid-template-columns:18px minmax(0,1fr);justify-content:start;gap:8px;padding:8px 10px;display:grid}.dsSelectMenu button svg{opacity:0;margin-top:1px}.dsSelectMenu button span{color:inherit;text-transform:none;font-size:14px;font-weight:500}.dsSelectMenu button.active{background:var(--blue-soft);color:var(--blue-deep)}.dsSelectMenu button.active svg{opacity:1}.dsSelectMenu button:hover{background:var(--paper-warm)}.field input:hover,.field textarea:hover,.importBox:hover{border-color:var(--line-strong)}.field input:focus,.field textarea:focus,.importBox:focus{border-color:var(--focus);outline:4px solid color-mix(in srgb, var(--focus) 24%, transparent);outline-offset:0}.dsColorInput{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);cursor:pointer;place-items:center;width:40px;height:40px;padding:4px;display:inline-grid;position:relative}.dsColorInput span{border-radius:var(--radius-md);width:100%;height:100%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent)}.dsColorInput input[type=color]{opacity:0;cursor:pointer;border:0;width:100%;height:100%;position:absolute;inset:0}.dsColorInput:focus-within{border-color:var(--focus);outline:4px solid color-mix(in srgb, var(--focus) 24%, transparent)}.tokenRow,.mapRow,.assetRow{border-top:1px solid var(--line-subtle);grid-template-columns:44px minmax(126px,1fr) minmax(104px,.76fr) minmax(150px,1.28fr) 40px;align-items:end;gap:12px;margin-top:12px;padding-top:12px;display:grid}.tokenRow .field,.mapRow .field,.assetRow .field{margin-bottom:0}.mapRow{grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(170px,1.35fr)}.assetRow{grid-template-columns:104px minmax(140px,.75fr) minmax(112px,.5fr) minmax(240px,1fr) minmax(280px,1.25fr) 44px;align-items:end}.assetMedia{align-content:end;align-self:stretch;justify-items:center;gap:8px;display:grid}.assetPreview{background:var(--paper-warm);width:56px;height:56px;color:var(--muted);border-radius:14px;place-items:center;display:grid;overflow:hidden}.assetPreview img{object-fit:contain;max-width:100%;max-height:100%;padding:6px}.assetReplace{border-radius:var(--button-radius,12px);background:var(--paper);min-height:36px;color:var(--ink);font-size:var(--text-sm-size,14px);font-weight:var(--text-sm-weight,500);cursor:pointer;justify-content:center;align-items:center;gap:6px;padding:0 12px;line-height:1;display:inline-flex;position:relative}.assetReplace:hover{background:var(--brand-50);color:var(--brand-600)}.assetReplace:focus-within{outline:4px solid color-mix(in srgb, var(--focus) 24%, transparent)}.assetReplace input{opacity:0;cursor:pointer;position:absolute;inset:0}.assetReplace input:disabled{cursor:wait}.assetUploadGrid{grid-template-columns:minmax(320px,1.1fr) minmax(240px,.7fr);align-items:stretch;gap:20px;display:grid}.uploadDrop{background:var(--paper-warm);text-align:center;min-height:164px;color:var(--ink-soft);cursor:pointer;border-radius:20px;align-content:center;place-items:center;gap:8px;padding:28px;display:grid;position:relative}.uploadDrop strong{color:var(--ink);font-size:18px}.uploadDrop span{max-width:420px;font-size:14px}.uploadDrop input{opacity:0;cursor:pointer;position:absolute;inset:0}.assetUploadControls{align-self:center}.tokenRow input[type=color]{background:var(--paper);cursor:pointer;border-radius:8px;width:40px;height:40px;min-height:40px;padding:3px}.tokenRow input[type=color]::-webkit-color-swatch-wrapper{padding:0}.tokenRow input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}.iconOnly{width:40px;min-width:40px;min-height:40px;padding:0}.iconOnly.danger{color:var(--red)}.iconOnly.danger:hover{background:var(--red-soft);border-color:color-mix(in srgb, var(--red) 24%, var(--paper))}.typeRow{border-top:1px solid var(--line-subtle);gap:14px;margin-top:20px;padding-top:20px;display:grid}.typePreview{background:var(--paper-warm);border:0;border-radius:16px;align-items:center;min-height:156px;padding:20px;display:flex;overflow:hidden}.typeFields{grid-template-columns:minmax(180px,1.1fr) minmax(220px,1.6fr) repeat(3,minmax(92px,.7fr));align-items:end;gap:10px;display:grid}.spaceRow{border-top:1px solid var(--line-subtle);grid-template-columns:minmax(280px,1fr) minmax(220px,.7fr) 180px;align-items:center;gap:18px;padding:16px 0;display:grid}.spaceRow i{background:var(--blue);border-radius:var(--radius-full);min-width:3px;max-width:100%;height:18px;display:block}.spaceUsage{color:var(--muted);font-size:14px;line-height:20px}.dsSliderField{gap:10px;min-width:0;display:grid}.dsSliderTop{justify-content:space-between;align-items:baseline;gap:14px;display:flex}.dsSliderTop strong{color:var(--ink);font-size:14px;line-height:20px}.dsSliderTop output{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.dsSliderField input[type=range],.specSlider input[type=range]{--slider-progress:50%;appearance:none;cursor:pointer;background:0 0;width:100%;height:28px;margin:0}.dsSliderField input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-full);background:linear-gradient(to right, var(--blue) 0 var(--slider-progress), var(--line-subtle) var(--slider-progress) 100%);height:8px}.specSlider input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-full);background:linear-gradient(to right, var(--blue) 0 var(--slider-progress), var(--line-subtle) var(--slider-progress) 100%);height:8px}.dsSliderField input[type=range]::-webkit-slider-thumb{appearance:none;border:4px solid var(--paper);border-radius:var(--radius-full);background:var(--blue);width:22px;height:22px;box-shadow:var(--shadow-xs);margin-top:-7px}.specSlider input[type=range]::-webkit-slider-thumb{appearance:none;border:4px solid var(--paper);border-radius:var(--radius-full);background:var(--blue);width:22px;height:22px;box-shadow:var(--shadow-xs);margin-top:-7px}.dsSliderField input[type=range]::-moz-range-track{border-radius:var(--radius-full);background:var(--line-subtle);height:8px}.specSlider input[type=range]::-moz-range-track{border-radius:var(--radius-full);background:var(--line-subtle);height:8px}.dsSliderField input[type=range]::-moz-range-progress{border-radius:var(--radius-full);background:var(--blue);height:8px}.specSlider input[type=range]::-moz-range-progress{border-radius:var(--radius-full);background:var(--blue);height:8px}.dsSliderField input[type=range]::-moz-range-thumb{border:4px solid var(--paper);border-radius:var(--radius-full);background:var(--blue);width:14px;height:14px;box-shadow:var(--shadow-xs)}.specSlider input[type=range]::-moz-range-thumb{border:4px solid var(--paper);border-radius:var(--radius-full);background:var(--blue);width:14px;height:14px;box-shadow:var(--shadow-xs)}.dsSliderField input[type=range]:focus-visible,.specSlider input[type=range]:focus-visible{outline:none}.dsSliderField input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent), var(--shadow-xs)}.specSlider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent), var(--shadow-xs)}.dsSliderField input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent), var(--shadow-xs)}.specSlider input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent), var(--shadow-xs)}.specSlider input[type=range]::-webkit-slider-thumb{width:20px;height:20px;box-shadow:var(--shadow-xs);border:0;margin-top:-6px}.specSlider input[type=range]::-moz-range-thumb{width:20px;height:20px;box-shadow:var(--shadow-xs);border:0}.settingsStack{gap:24px;display:grid}.buttonShapeGrid{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);align-items:stretch;gap:24px;display:grid}.buttonShapeControls{gap:18px;display:grid}.buttonStyleMode{gap:10px;display:grid}.buttonStyleMode strong{color:var(--ink);font-size:var(--text-sm-size,14px);line-height:var(--text-sm-line,20px)}.radiusPresets{flex-wrap:wrap;gap:10px;display:flex}.radiusPresets .dsButton.active{background:var(--blue-soft);border-color:color-mix(in srgb, var(--blue) 40%, var(--line));color:var(--blue-deep)}.buttonShapePreview{background:var(--paper-warm);border-radius:var(--card-radius);align-content:center;gap:14px;min-height:160px;padding:24px;display:grid}.buttonShapePreview small{color:var(--muted);text-transform:uppercase;font-weight:700}.buttonShapePreview>div{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.workspace{grid-template-columns:268px minmax(0,1fr);gap:16px;display:grid}.list{background:var(--paper);border-radius:var(--card-radius);border:0;height:calc(100vh - 112px);padding:18px;position:sticky;top:18px;overflow:auto}.list button{justify-content:space-between;width:100%;margin-bottom:5px}.list .dsListItem{background:var(--paper-warm);box-shadow:none;text-align:left;border:0;border-radius:14px;grid-template-columns:minmax(0,1fr) auto;justify-content:stretch;align-items:center;gap:12px;padding:14px 16px;display:grid}.list .dsListItem>span{text-align:left;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;min-width:0}.list .dsListItem>small{white-space:nowrap;text-align:right;justify-self:end}.list button.active{background:var(--blue-soft);border-color:#0000}.list small{color:var(--muted)}.componentGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.editor.wide{max-width:920px}.tagbox{border:1px solid var(--line);background:var(--paper);border-radius:6px;flex-wrap:wrap;gap:6px;margin-bottom:10px;padding:7px;display:flex}.tagbox input{border:0;outline:0;flex:1;min-width:180px}.tag{background:var(--paper-muted);min-height:30px;padding:5px 8px}.sectionLabel{color:var(--ink-soft);font-size:var(--text-sm-size,14px);line-height:var(--text-sm-line,20px);font-weight:600}.sizeSpecsEditor{gap:10px;margin:0 0 14px;display:grid}.sizeSpecRow{border-radius:var(--component-radius,12px);background:var(--paper-warm);grid-template-columns:44px repeat(5,minmax(72px,1fr));align-items:start;gap:8px;padding:12px;display:grid}.sizeSpecRow>strong{border-radius:var(--component-radius,12px);background:var(--paper);min-height:44px;color:var(--brand-600,var(--blue));font-size:var(--text-sm-size,14px);line-height:var(--text-sm-line,20px);place-items:center;margin-top:26px;display:grid}.sizeSpecRow .field span{font-size:12px;line-height:18px}.sizeSpecRow .field input{min-height:40px;padding-inline:10px}.preview{border-radius:var(--card-radius);background:var(--paper-warm);border:0;padding:22px}.preview h3{margin:0 0 10px;font-size:14px}.previewHeader{justify-content:space-between;align-items:start;gap:12px;margin-bottom:12px;display:flex}.previewHeader span{color:var(--muted);text-transform:uppercase;font-size:11px;font-weight:800}.previewHeader h3{margin:3px 0 0;font-size:17px}.previewHeader strong{color:var(--blue-deep);background:var(--blue-soft);border:1px solid color-mix(in srgb, var(--blue) 18%, var(--paper));border-radius:999px;padding:4px 8px;font-size:12px}.previewControls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px;display:grid}.previewControls .dsSelectField{gap:5px;display:grid}.previewControls .dsSelectField>span{color:var(--ink-soft);text-transform:none;font-size:13px;font-weight:600;line-height:18px}.previewCanvas{--spec-control-height:40px;--spec-pad-x:16px;--spec-font-size:14px;--spec-line-height:20px;--spec-icon-size:18px;--spec-avatar-size:40px;--spec-gap:12px;background:var(--paper);border:0;border-radius:16px;min-height:260px;margin-bottom:16px;overflow:hidden}.previewCanvas.darkCanvas{background:color-mix(in srgb, var(--rail) 92%, var(--blue));border-color:color-mix(in srgb, var(--rail) 70%, var(--paper));color:var(--paper)}.previewCanvas.mobileCanvas{max-width:260px;margin-inline:auto}.previewCanvas.state-disabled .specimenStage{opacity:.68}.previewCanvas.state-focused .demoBtn,.previewCanvas.state-focused .utilityBtn,.previewCanvas.state-focused .specDropdown button,.previewCanvas.state-focused .specField input,.previewCanvas.state-focused .specField textarea,.previewCanvas.state-focused .specToggle,.previewCanvas.state-focused .specTag,.previewCanvas.state-focused .specCodeInput input,.previewCanvas.state-focused .specEditor{outline:4px solid color-mix(in srgb, var(--focus) 22%, transparent);outline-offset:2px}.previewCanvas.state-hover .demoBtn,.previewCanvas.state-hover .utilityBtn,.previewCanvas.state-hover .specDropdown button,.previewCanvas.state-hover .specButtonGroup button,.previewCanvas.state-hover .specPagination button,.previewCanvas.state-hover .specTag{border-color:var(--line-strong);box-shadow:var(--shadow-xs);transform:translateY(-1px)}.previewCanvas.state-loading .specimenStage,.previewCanvas.state-uploading .specimenStage,.previewCanvas.state-sending .specimenStage{cursor:progress}.canvasChrome{border-bottom:1px solid var(--line);background:var(--paper-warm);justify-content:space-between;align-items:center;gap:10px;min-height:34px;padding:8px 10px;display:flex}.darkCanvas .canvasChrome{background:var(--rail-2);border-color:color-mix(in srgb, var(--rail) 70%, var(--paper))}.canvasChrome span,.canvasChrome strong{color:var(--muted);font-size:12px}.darkCanvas .canvasChrome span,.darkCanvas .canvasChrome strong{color:color-mix(in srgb, var(--paper) 78%, var(--rail))}.specimenStage{place-items:center;min-height:224px;padding:22px;display:grid}.specFoundation,.specGeneric,.specAsset,.specEmpty,.specUpload,.specTemplate{text-align:center;justify-items:center;gap:10px;width:min(100%,360px);display:grid}.specFoundation small,.specGeneric span,.specAsset span,.specEmpty span,.specUpload span,.specTemplate p{color:var(--muted);margin:0;font-size:13px;line-height:18px}.specSwatches{gap:8px;display:flex}.specSwatches span{border:1px solid var(--line);border-radius:999px;width:40px;height:40px}.specSwatches span:first-child{background:var(--blue)}.specSwatches span:nth-child(2){background:var(--green)}.specSwatches span:nth-child(3){background:var(--amber)}.specSwatches span:nth-child(4){background:var(--paper-muted)}.specScale{justify-items:start;gap:6px;display:grid}.specScale i{background:color-mix(in srgb, var(--blue) 34%, var(--paper));border-radius:999px;height:8px}.demoBtn{min-height:var(--spec-control-height);background:var(--blue);color:#fff;border-color:var(--blue);padding:0 var(--spec-pad-x);font-size:var(--spec-font-size);line-height:var(--spec-line-height);border-radius:8px;font-weight:600;box-shadow:0 1px 2px #1018280d,inset 0 0 0 1px #ffffff1f,inset 0 -2px #1018280d}.demoBtn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}.demoBtn.secondary{background:var(--paper);color:var(--ink-soft);border-color:var(--line);box-shadow:0 1px 2px #1018280d}.demoBtn.secondary:hover{background:var(--paper-warm);border-color:var(--line);color:var(--rail-2)}.demoBtn.tertiary{color:var(--blue-deep);box-shadow:none;background:0 0;border-color:#0000}.demoBtn.tertiary:hover{background:var(--blue-soft);border-color:var(--blue-soft)}.demoLinkBtn{min-height:var(--spec-control-height);box-shadow:none;color:var(--blue-deep);font-size:var(--spec-font-size);line-height:var(--spec-line-height);background:0 0;border:0;padding:0 2px;font-weight:600}.specButtonSet{justify-content:center;align-items:center;gap:var(--spec-gap);flex-wrap:wrap;display:flex}.utilityBtn{width:var(--spec-control-height);min-height:var(--spec-control-height);color:var(--ink-soft);padding:0}.utilityBtn.tertiary{box-shadow:none;background:0 0;border-color:#0000}.spinner{border:2px solid #ffffff73;border-top-color:var(--paper);border-radius:999px;width:16px;height:16px;animation:.8s linear infinite spin;display:inline-block}.spinner.brand{border-color:color-mix(in srgb, var(--blue) 28%, var(--paper));border-top-color:var(--blue)}.spinner.subtle{border-color:color-mix(in srgb, var(--ink-soft) 22%, var(--paper));border-top-color:var(--ink-soft)}@keyframes spin{to{transform:rotate(360deg)}}.demoBtn:disabled{background:var(--paper-muted);border-color:var(--line-subtle);color:var(--line-strong);cursor:not-allowed}.specLogoWall{justify-items:center;gap:12px;display:grid}.specLogo,.specLogomark{border:1px solid var(--line);background:var(--paper);min-height:48px;color:var(--ink);place-items:center;font-weight:700;display:grid;box-shadow:0 1px 2px #1018280d}.specLogo{border-radius:8px;min-width:220px;padding:0 18px}.specLogomark{background:var(--blue);border-color:var(--blue);width:48px;color:var(--paper);border-radius:12px}.specLogoWall span{color:var(--muted);font-size:13px}.specIconGrid{grid-template-columns:repeat(3,44px);gap:10px;display:grid}.specIconGrid svg,.specIconGrid span{border:1px solid var(--line-subtle);background:var(--paper);width:44px;height:44px;color:var(--ink-soft);border-radius:10px;padding:10px}.specIconGrid span{place-items:center;padding:0;font-size:12px;font-weight:700;display:grid}.specSocialIcons{grid-template-columns:repeat(3,52px);gap:12px;display:grid}.specSocialIcons span{border:1px solid var(--line-subtle);border-radius:var(--component-radius,12px);background:var(--paper);width:52px;height:52px;color:var(--ink);letter-spacing:0;text-transform:none;box-shadow:var(--shadow-xs);place-items:center;font-size:15px;font-weight:800;display:grid}.specFeaturedIcon{border-radius:var(--radius-full);background:var(--brand-50,var(--blue-soft));width:88px;height:88px;color:var(--brand-600,var(--blue));place-items:center;display:grid}.specFeaturedIcon svg{stroke-width:2.4px;width:42px;height:42px}.specFeaturedIcon.outline{border:2px solid color-mix(in srgb, var(--brand-600,var(--blue)) 18%, transparent);background:var(--paper)}.specAvatars{align-items:center;display:flex}.specAvatars span{width:var(--spec-avatar-size);height:var(--spec-avatar-size);border:2px solid var(--paper);background:var(--paper-muted);color:var(--ink-soft);font-size:max(12px, calc(var(--spec-font-size) - 1px));border-radius:999px;place-items:center;margin-left:-8px;font-weight:700;display:grid;position:relative}.specAvatars span:first-child{margin-left:0}.specAvatars .online:after{content:"";border:2px solid var(--paper);background:var(--green);border-radius:999px;width:10px;height:10px;position:absolute;bottom:1px;right:1px}.specAvatars .avatarStack{background:var(--blue-soft);color:var(--blue-deep)}.specStepper{grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin:0;padding:0;list-style:none;display:grid}.specStepper li{text-align:center;color:var(--muted);justify-items:center;gap:8px;font-size:12px;display:grid}.specStepper b{border:1px solid var(--line);background:var(--paper);border-radius:999px;place-items:center;width:34px;height:34px;display:grid}.specStepper .done b,.specStepper .current b{background:var(--blue);border-color:var(--blue);color:var(--paper)}.specStepper.wide{min-width:min(100%,480px)}.specStepper .error b{background:var(--red);border-color:var(--red)}.specStepper .current span{color:var(--ink);font-weight:800}.darkCanvas .specStepper .current span{color:var(--paper)}.specField{gap:6px;width:min(100%,340px);display:grid}.specField label{color:var(--ink-soft);font-size:var(--spec-font-size);line-height:var(--spec-line-height);font-weight:500}.specField input,.specField textarea{width:100%;min-height:var(--spec-control-height);border:1px solid var(--line);padding:0 var(--spec-pad-x);background:var(--paper);color:var(--ink);font-size:var(--spec-font-size);line-height:var(--spec-line-height);border-radius:8px;box-shadow:0 1px 2px #1018280d}.specField textarea{min-height:calc(var(--spec-control-height) * 2.2);padding-top:10px;padding-bottom:10px}.specField input[aria-invalid=true]{border-color:color-mix(in srgb, var(--red) 34%, var(--paper));outline:4px solid color-mix(in srgb, var(--red) 18%, transparent)}.specField small{color:var(--muted);font-size:var(--spec-font-size);line-height:var(--spec-line-height)}.specChoices,.specToggleRow,.specSlider,.specDropdown,.specEditor,.specButtonGroup,.specFilters,.specPagination{width:min(100%,340px)}.specAlert{border-radius:8px;gap:4px;width:min(100%,360px);padding:14px;display:grid}.specAlert.info{border:1px solid color-mix(in srgb, var(--blue) 26%, var(--paper));background:var(--blue-soft);color:var(--blue-deep)}.specAlert.success{border:1px solid color-mix(in srgb, var(--green) 28%, var(--paper));background:var(--green-soft);color:color-mix(in srgb, var(--green) 76%, var(--ink))}.specAlert.warning{border:1px solid color-mix(in srgb, var(--amber) 28%, var(--paper));background:var(--amber-soft);color:color-mix(in srgb, var(--amber) 72%, var(--ink))}.specAlert.error{border:1px solid color-mix(in srgb, var(--red) 28%, var(--paper));border-color:color-mix(in srgb, var(--red) 28%, var(--paper));background:var(--red-soft);color:var(--red)}.specTable{border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:8px;width:100%;overflow:hidden}.specTable th,.specTable td{text-align:left;border-bottom:1px solid var(--line);padding:10px;font-size:13px}.specTable th{background:var(--paper-warm);color:var(--muted)}.specTable tr.selected td{background:var(--blue-soft)}.specChoices{gap:10px;display:grid}.specChoices label{border:1px solid var(--line-subtle);background:var(--paper);border-radius:8px;align-items:center;gap:8px;min-height:42px;padding:8px 12px;display:flex}.specChoices input[type=checkbox],.specChoices input[type=radio]{appearance:none;border:1.5px solid var(--line-strong);background:var(--paper);cursor:pointer;flex:0 0 18px;place-items:center;width:18px;height:18px;margin:0;display:grid}.specChoices input[type=checkbox]{border-radius:var(--radius-sm)}.specChoices input[type=radio]{border-radius:var(--radius-full)}.specChoices input[type=checkbox]:checked,.specChoices input[type=radio]:checked{border-color:var(--blue);background:var(--blue)}.specChoices input[type=checkbox]:checked:after{content:"";border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);width:9px;height:5px;transform:rotate(-45deg)translateY(-1px)}.specChoices input[type=radio]:checked:after{content:"";border-radius:var(--radius-full);background:var(--paper);width:6px;height:6px}.specChoices input[type=checkbox]:focus-visible,.specChoices input[type=radio]:focus-visible{outline:4px solid color-mix(in srgb, var(--focus) 24%, transparent);outline-offset:2px}.specToggleRow{justify-content:center;align-items:center;gap:12px;display:flex}.specToggle{background:var(--line-strong);border-color:var(--line-strong);border-radius:999px;justify-content:flex-start;width:44px;min-height:24px;padding:2px}.specToggle.on{background:var(--blue);border-color:var(--blue)}.specToggle span{background:var(--paper);border-radius:999px;width:20px;height:20px;box-shadow:0 1px 3px #10182833}.specToggle.on span{transform:translate(18px)}.specDropdown{gap:6px;display:grid;position:relative}.specDropdown button,.specFilters button,.specPagination button,.specButtonGroup button{width:100%;min-height:var(--spec-control-height);padding-left:var(--spec-pad-x);padding-right:var(--spec-pad-x);font-size:var(--spec-font-size);line-height:var(--spec-line-height);justify-content:space-between}.specDropdown div{border:1px solid var(--line-subtle);background:var(--paper);border-radius:8px;display:grid;overflow:hidden;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.specDropdown span{padding:calc(var(--spec-pad-x) * .55) var(--spec-pad-x);color:var(--ink-soft);font-size:var(--spec-font-size)}.specSlider{gap:8px;display:grid}.specTag{border:1px solid var(--line);background:var(--paper);min-height:26px;color:var(--ink-soft);border-radius:6px;align-items:center;gap:4px;padding:0 8px;font-size:13px;font-weight:500;display:inline-flex}.specTag.active{border-color:color-mix(in srgb, var(--blue) 34%, var(--paper));background:var(--blue-soft);color:var(--blue-deep)}.specEditor{border:1px solid var(--line);background:var(--paper);border-radius:8px;overflow:hidden}.specEditor div{border-bottom:1px solid var(--line-subtle);gap:4px;padding:6px;display:flex}.specEditor button{min-height:28px;padding:0 8px}.specEditor p{min-height:74px;color:var(--ink-soft);margin:0;padding:10px}.specButtonGroup{border:1px solid var(--line);border-radius:8px;width:auto;display:inline-flex;overflow:hidden}.specButtonGroup button{width:auto;box-shadow:none;border:0;border-radius:0}.specButtonGroup button+button{border-left:1px solid var(--line)}.specButtonGroup .active{background:var(--blue-soft);color:var(--blue-deep)}.specTabs{border-bottom:1px solid var(--line);gap:4px;width:100%;display:flex}.specTabs button{border:0;border-bottom:3px solid #0000;border-radius:0}.specTabs button.active{border-bottom-color:var(--blue);color:var(--blue-deep)}.specOverlay{border:1px solid var(--line);background:var(--paper);border-radius:8px;width:min(100%,360px);padding:14px}.specAccordion{border:1px solid var(--line);border-radius:var(--card-radius);background:var(--paper);width:min(100%,420px);box-shadow:var(--shadow-xs);display:grid;overflow:hidden}.specAccordion button{width:100%;min-height:calc(var(--spec-control-height) + 16px);background:var(--paper);box-shadow:none;padding:calc(var(--spec-pad-x) * .75) var(--spec-pad-x);color:var(--ink);font-size:var(--spec-font-size);line-height:var(--spec-line-height);text-align:left;border:0;border-radius:0;justify-content:space-between}.specAccordion button+button,.specAccordion p+button{border-top:1px solid var(--line-subtle)}.specAccordion button span{min-width:0;font-weight:var(--text-md-weight,400)}.specAccordion button svg{width:var(--spec-icon-size);height:var(--spec-icon-size);color:var(--brand-600,var(--blue));stroke-width:2.4px;flex:none}.specAccordion p{padding:0 var(--spec-pad-x) var(--spec-pad-x);color:var(--muted);font-size:var(--spec-font-size);line-height:var(--spec-line-height);margin:0}.specOverlay p{color:var(--muted)}.specProgress{gap:14px;width:min(100%,340px);display:grid}.progressBar{background:var(--paper-muted);border-radius:999px;width:100%;height:8px;overflow:hidden}.progressBar span{border-radius:inherit;background:var(--blue);height:100%;display:block}.specVideo{aspect-ratio:16/9;background:var(--ink);width:min(100%,380px);color:var(--paper);border-radius:12px;place-items:center;display:grid;position:relative;overflow:hidden}.specVideo button{width:54px;min-height:54px;color:var(--paper);background:#ffffff24;border-color:#fff3;border-radius:999px}.specVideo div{background:#ffffff40;border-radius:999px;height:6px;position:absolute;bottom:14px;left:16px;right:16px}.specVideo div span{border-radius:inherit;background:var(--paper);height:100%;display:block}.specBadge{border:1px solid color-mix(in srgb, var(--blue) 28%, var(--paper));background:var(--blue-soft);width:fit-content;min-height:26px;color:var(--blue-deep);border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:12px;font-weight:500;line-height:18px;display:inline-flex}.specBadgeRow{flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px;width:min(100%,460px);padding:2px;display:flex;overflow-x:auto}.specBadgeGroup{border:1px solid color-mix(in srgb, var(--blue) 28%, var(--paper));background:var(--blue-soft);color:var(--ink-soft);border-radius:999px;align-items:center;gap:10px;padding:4px 10px 4px 4px;display:inline-flex}.specBadgeGroup strong{font-size:14px}.badgeClose{color:currentColor;width:18px;min-height:18px;box-shadow:none;background:0 0;border:0;border-radius:999px;padding:0}.badgeClose:hover{background:color-mix(in srgb, currentColor 10%, transparent)}.specBadge.brand{border-color:color-mix(in srgb, var(--blue) 28%, var(--paper));background:var(--blue-soft);color:var(--blue-deep)}.specBadge.success{border-color:color-mix(in srgb, var(--green) 28%, var(--paper));background:var(--green-soft);color:var(--green)}.specBadge.warning{border-color:color-mix(in srgb, var(--amber) 28%, var(--paper));background:var(--amber-soft);color:var(--amber)}.specBadge.error{border-color:color-mix(in srgb, var(--red) 24%, var(--paper));background:var(--red-soft);color:var(--red)}.specBadge.gray{border-color:var(--line-subtle);background:var(--paper-warm);color:var(--ink-soft)}.specTooltipWrap{justify-items:center;gap:12px;display:grid;position:relative}.specTooltip{background:var(--ink);min-height:34px;color:var(--paper);border-radius:8px;justify-content:center;align-items:center;padding:8px 12px;font-size:12px;font-weight:600;line-height:18px;display:inline-flex;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.helpIcon{width:24px;min-height:24px;color:var(--muted);border-radius:999px;padding:0;font-weight:700}.specCodeInput{gap:12px;display:flex}.specCodeInput input,.specInputBases span{border:1px solid var(--line);background:var(--paper);width:64px;height:64px;color:var(--ink);text-align:center;border-radius:12px;place-items:center;font-size:32px;font-weight:500;line-height:1;display:grid;box-shadow:0 1px 2px #1018280d}.specCodeInput input{padding:0}.specCodeInput input:focus,.specInputBases .focused{border-color:var(--focus);outline:4px solid color-mix(in srgb, var(--focus) 24%, transparent)}.specInputBases{gap:12px;display:flex}.modalIcon{background:var(--blue-soft);width:44px;height:44px;color:var(--blue);border:8px solid color-mix(in srgb, var(--blue) 18%, var(--paper));border-radius:999px;place-items:center;display:grid}.modalActions{gap:10px;margin-top:8px;display:flex}.specAppNav{border:1px solid var(--line-subtle);background:var(--paper);border-radius:10px;width:min(100%,420px);overflow:hidden}.specAppNav header{border-bottom:1px solid var(--line-subtle);justify-content:space-between;align-items:center;min-height:48px;padding:0 12px;display:flex}.specAppNav nav{gap:4px;padding:8px;display:flex}.specAppNav nav span{color:var(--ink-soft);border-radius:6px;padding:8px 10px;font-size:13px}.specAppNav nav .active{background:var(--blue-soft);color:var(--blue-deep);font-weight:700}.specAppNav.mobile{max-width:220px}.specAppNav.mobile nav{display:grid}.specBreadcrumb{color:var(--muted);align-items:center;gap:6px;font-size:14px;display:flex}.specBreadcrumb strong{color:var(--ink-soft)}.specCalendar{border:1px solid var(--line-subtle);background:var(--paper);border-radius:10px;grid-template-columns:repeat(7,1fr);gap:4px;width:260px;padding:10px;display:grid}.specCalendar header{color:var(--ink-soft);grid-column:1/-1;align-items:center;gap:8px;padding-bottom:8px;font-weight:700;display:flex}.specCalendar span{min-height:30px;color:var(--ink-soft);border-radius:6px;place-items:center;font-size:12px;display:grid}.specCalendar .active{background:var(--blue);color:var(--paper)}.specCardHeader,.specMetric,.specCommand,.specContent,.specFeed,.specPageHeader,.specSectionFooter,.specSlideout,.specDevice,.specTemplate,.specEmpty,.specUpload,.specBanner,.specLoading,.specColorPicker{border:1px solid var(--line-subtle);background:var(--paper);border-radius:10px;width:min(100%,380px);padding:14px;box-shadow:0 1px 2px #1018280a}.specCardHeader,.specSectionFooter,.specBanner{justify-content:space-between;align-items:center;gap:12px;display:flex}.specCardHeader div,.specBanner div{gap:3px;display:grid}.specCardHeader span,.specBanner span,.specContent p,.specPageHeader p,.specFeed small{color:var(--muted);font-size:13px}.specMetric{gap:8px;display:grid}.specMetric strong{color:var(--ink);font-size:30px}.miniChart{align-items:end;gap:7px;height:54px;display:flex}.miniChart i{background:color-mix(in srgb, var(--blue) 34%, var(--paper));border-radius:5px 5px 0 0;flex:1}.miniChart i:first-child{height:42%}.miniChart i:nth-child(2){height:66%}.miniChart i:nth-child(3){height:52%}.miniChart i:nth-child(4){height:86%}.miniChart i:nth-child(5){height:74%}.specCode{background:var(--ink);width:min(100%,400px);color:var(--line);border-radius:10px;margin:0;padding:14px;font-size:12px;overflow:auto}.specColorPicker{align-items:center;gap:10px;display:flex}.specColorPicker div{background:var(--blue);border-radius:8px;width:44px;height:44px}.specColorPicker input{border:1px solid var(--line);border-radius:8px;flex:1;padding:8px 10px}.specCommand{gap:6px;display:grid}.specCommand label,.specCommand span{border-radius:6px;align-items:center;gap:8px;min-height:36px;padding:0 8px;display:flex}.specCommand label{border:1px solid var(--line)}.specCommand input{border:0;outline:0;width:100%}.specCommand span{color:var(--ink-soft);background:var(--paper-warm)}.specDivider{width:min(100%,380px);color:var(--muted);align-items:center;gap:12px;display:flex}.specDivider span{background:var(--line-subtle);flex:1;height:1px}.specContent,.specPageHeader,.specFeed{gap:7px;display:grid}.specContent small,.specPageHeader span{color:var(--blue-deep);font-weight:700}.specEmpty div,.specUpload>svg,.specAsset>svg,.specGeneric>svg{border:8px solid color-mix(in srgb, var(--blue) 18%, var(--paper));background:var(--blue-soft);width:48px;height:48px;color:var(--blue);border-radius:999px;padding:12px}.specUpload{border-style:dashed}.specFilters{flex-wrap:wrap;gap:8px;display:flex}.specFilters button,.specFilters span{border:1px solid var(--line);background:var(--paper);width:auto;min-height:34px;color:var(--ink-soft);border-radius:8px;align-items:center;gap:6px;padding:0 10px;display:inline-flex}.specBanner{background:var(--blue-soft);border-color:color-mix(in srgb, var(--blue) 28%, var(--paper))}.specBanner button{width:auto}.specLoading{align-items:center;gap:14px;display:flex}.spinIcon{color:var(--blue);animation:.8s linear infinite spin}.specLoading div{flex:1;gap:8px;display:grid}.specLoading i{background:var(--line-subtle);border-radius:999px;height:10px}.specLoading i:nth-child(2){width:78%}.specLoading i:nth-child(3){width:54%}.specSectionFooter span{color:var(--muted);font-size:13px}.specSlideout{gap:12px;display:grid}.specSlideout aside{justify-content:space-between;display:flex}.specSlideout label{color:var(--ink-soft);gap:5px;display:grid}.specSelect{border:1px solid var(--line);background:var(--paper);min-height:40px;color:var(--ink);border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;display:flex}.specPagination{justify-content:center;gap:4px;display:flex}.specPagination button{width:auto;min-width:36px}.specPagination .active{background:var(--blue-soft);color:var(--blue-deep)}.specTree{border:1px solid var(--line-subtle);background:var(--paper);border-radius:10px;gap:4px;width:min(100%,320px);padding:8px;display:grid}.specTree span{min-height:34px;color:var(--ink-soft);border-radius:6px;align-items:center;gap:6px;padding:0 8px;display:flex}.specTree span:first-child{background:var(--paper-warm);font-weight:700}.specDevice{background:linear-gradient(180deg, var(--paper-warm), var(--paper-muted));place-items:center;min-height:210px;display:grid}.specDevice div{border:8px solid var(--ink);background:var(--paper);width:74%;min-height:130px;color:var(--ink-soft);border-radius:16px;place-items:center;gap:6px;display:grid}.iphone-mockup div{border-radius:28px;width:120px;min-height:180px}.credit-card-mockup div{background:linear-gradient(135deg, var(--ink), var(--blue));width:230px;min-height:140px;color:var(--paper);border:0;border-radius:16px}.specTemplate{text-align:left;justify-items:start}.specTemplate header{color:var(--ink);font-size:20px;font-weight:700}.specBackground{border:1px solid var(--line-subtle);width:min(100%,440px);min-height:220px;color:var(--ink-soft);background-color:var(--paper-warm);background-image:linear-gradient(var(--line-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--line-subtle) 1px, transparent 1px);background-size:28px 28px;border-radius:16px;place-items:center;font-weight:700;display:grid;position:relative;overflow:hidden}.specBackground:after{content:"";background:radial-gradient(circle,#f9f5ff00 0,#f9f5ffeb 72%);position:absolute;inset:0}.specBackground span{z-index:1;background:var(--paper);border:1px solid var(--line-subtle);border-radius:999px;padding:8px 12px;position:relative}.background-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-image:linear-gradient(135deg,#7f56d93d,#ffffffc7)}.background-mask:after{background:radial-gradient(circle,#10182800 0,#fffffff5 68%)}.contexts{grid-template-columns:1fr 1fr;gap:8px;margin:18px 0;display:grid}.contexts span{text-align:center;background:#fff;border:0;border-radius:16px;padding:24px}.contexts .dark{background:var(--rail);color:var(--paper)}.contexts .mobile{grid-column:1/-1;max-width:220px}.rel,.relationships button{justify-content:flex-start;width:100%;margin-top:6px;display:flex}.health{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.health span,.row,.historyItem{background:var(--paper-warm);border:0;border-radius:16px;padding:20px}.health span{gap:8px;display:grid}.health b{color:var(--muted);font-size:12px}.health strong{font-size:22px}meter{width:100%;height:8px}meter::-webkit-meter-bar{background:var(--line-subtle);border:0;border-radius:999px}meter::-webkit-meter-optimum-value{background:var(--green);border-radius:999px}.row p{margin:6px 0 0}.row strong+span{margin-left:6px}.tabs{gap:6px;display:flex}.tabs button.active{background:var(--rail);color:var(--paper)}.skillInventory{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px;display:grid}.skillInventory span,.referenceGrid article{background:var(--paper-warm);border:0;border-radius:16px;gap:6px;padding:18px;display:grid}.skillInventory b,.referenceGrid span{color:var(--muted);font-size:12px}.skillInventory strong{color:var(--ink);font-size:24px}.referenceGrid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:16px 0 22px;display:grid}.referenceGrid code{color:var(--blue-deep);overflow-wrap:anywhere;font-size:13px}.skillEditor{margin-top:6px}.markdown{white-space:pre-wrap;background:var(--rail);color:color-mix(in srgb, var(--paper) 94%, var(--blue));border-radius:16px;padding:22px;overflow:auto}.validSummary{background:var(--amber-soft);border:0;border-radius:16px;align-items:center;gap:12px;margin-bottom:10px;padding:18px;display:flex}.validSummary.ok{background:var(--green-soft)}.issue{text-align:left;justify-items:start;width:100%;margin-bottom:8px;display:grid}.issue span{color:var(--ink-soft)}.empty{color:var(--muted)}.historyItem{margin-bottom:12px}.importBox{width:100%;min-height:280px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.download{margin-top:10px}.loading{min-height:100vh;color:var(--muted);place-items:center;display:grid}.layoutRules{gap:10px;display:grid}.layoutRule{border:1px solid var(--line-subtle);border-radius:var(--card-radius);background:var(--paper-warm);overflow:hidden}.layoutRuleTrigger{width:100%;min-height:64px;box-shadow:none;color:var(--ink);text-align:left;background:0 0;border:0;border-radius:0;justify-content:space-between;padding:16px 20px}.layoutRuleTrigger span{overflow-wrap:anywhere;min-width:0;font-weight:var(--text-md-weight,400)}.layoutRuleTrigger svg{color:var(--brand-600,var(--blue));stroke-width:2.4px;flex:none}.layoutRuleTrigger:hover{background:var(--brand-50,var(--blue-soft));border-color:#0000}.layoutRuleBody{gap:12px;padding:0 20px 20px;display:grid}.layoutGallery{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;display:grid}.layoutCard{border-radius:var(--card-radius);background:var(--paper);box-shadow:none;border:0;overflow:hidden}.layoutThumbs{background:var(--paper-muted);width:100%;height:220px;box-shadow:none;cursor:zoom-in;text-align:left;border:0;border-radius:0;grid-template-columns:minmax(0,1fr) 72px;align-items:start;gap:8px;padding:14px;display:grid;position:relative;overflow:hidden}.layoutThumbs img{object-fit:cover;object-position:top center;background:var(--paper);border:0;border-radius:12px;width:100%;height:100%}.layoutThumbs .mobileThumb{object-fit:cover}.layoutThumbs:focus-visible{outline:4px solid color-mix(in srgb, var(--focus) 28%, transparent);outline-offset:-4px}.layoutThumbs:hover img{filter:saturate(1.04)contrast(1.02)}.thumbHint{color:var(--paper);opacity:0;background:#101828c7;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;transition:opacity .16s,transform .16s;position:absolute;bottom:14px;right:14px;transform:translateY(4px)}.layoutThumbs:hover .thumbHint,.layoutThumbs:focus-visible .thumbHint{opacity:1;transform:translateY(0)}.layoutCardBody{gap:5px;padding:12px;display:grid}.layoutCardBody span{color:var(--blue-deep);text-transform:uppercase;font-size:11px;font-weight:800}.layoutCardBody h3{margin:0;font-size:16px;line-height:22px}.layoutCardBody p{color:var(--muted);margin:0;font-size:13px;line-height:19px}.layoutCardBody small{color:var(--ink-soft);font-size:12px}.referenceViewer{z-index:80;background:#0f172aad;place-items:center;padding:28px;display:grid;position:fixed;inset:0}.referenceViewerPanel{background:var(--paper-warm);border-radius:28px;grid-template-rows:auto auto minmax(0,1fr);width:min(1480px,96vw);height:min(940px,92vh);display:grid;overflow:hidden}.referenceViewerBar{background:var(--paper);justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 28px 18px;display:flex}.referenceViewerBar span{color:var(--blue-deep);letter-spacing:.02em;text-transform:uppercase;font-size:12px;font-weight:900}.referenceViewerBar h2{margin:4px 0 6px;font-size:24px;line-height:30px}.referenceViewerBar p{max-width:760px;color:var(--muted);margin:0}.referenceViewerActions{flex-shrink:0;align-items:center;gap:10px;display:flex}.referenceViewerModes{background:var(--paper);border-top:1px solid var(--line-subtle);align-items:center;gap:8px;padding:12px 28px;display:flex}.referenceViewerModes .active{background:var(--ink);color:var(--paper)}.referenceViewerModes code{color:var(--muted);margin-left:auto;font-size:13px}.referenceViewerScroll{min-height:0;padding:28px;overflow:auto}.referenceViewerScroll img{background:var(--paper);border-radius:18px;width:100%;max-width:100%;height:auto;margin:0 auto;display:block}.referenceViewerScroll img.mobileFull{width:25%;min-width:260px;max-width:100%}.emptyPreview{background:var(--paper);min-height:280px;color:var(--muted);border-radius:18px;place-items:center;display:grid}@media (prefers-reduced-motion:reduce){*{transition:none!important}}@media (width<=1120px){.metrics{grid-template-columns:repeat(3,minmax(120px,1fr))}.hero,.componentGrid{grid-template-columns:1fr}.flowline{grid-template-columns:repeat(2,minmax(120px,1fr))}}@media (width<=980px){.app{grid-template-columns:1fr}aside{height:auto;position:static}nav{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.topbar,.grid2,.workspace,.metrics,.buttonShapeGrid{grid-template-columns:1fr}.results{left:24px;right:24px}.list{height:auto;position:static}.typeRow,.typeFields,.tokenRow,.assetRow,.mapRow,.spaceRow{grid-template-columns:1fr}.spaceUsage{order:2}.spaceRow i{display:none}}@media (width<=620px){main{padding:14px}.hero{padding:18px}.hero h1{font-size:30px}.flowline{grid-template-columns:1fr}.panelHead{flex-direction:column;align-items:flex-start}}