:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#eef2f7;--bg-accent:#e4ebf4;--surface:#fff;--surface-muted:#f7f9fc;--surface-inset:#edf1f6;--ink:#15202b;--ink-soft:#2d3a47;--muted:#5f6d7a;--soft:#8b98a6;--line:#d5dde8;--line-strong:#b8c4d4;--accent:#1a5fb4;--accent-hover:#144a8f;--accent-soft:#e6effa;--accent-glow:#1a5fb42e;--success:#1a7a4a;--success-soft:#e8f6ee;--danger:#b42318;--danger-soft:#fdecea;--device:#2a3139;--device-edge:#1a2027;--screen:#08120c;--screen-grid:#78b48c1f;--shadow-sm:0 2px 8px #15202b0f;--shadow:0 16px 48px #15202b1a;--shadow-device:0 24px 56px #0a121c47;--radius:14px;--radius-sm:10px;--radius-xs:7px;--focus:0 0 0 3px var(--accent-glow);--font:"Outfit", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace;font-family:var(--font);font-synthesis:none;text-rendering:optimizelegibility}*,:before,:after{box-sizing:border-box}html{background:var(--bg);min-width:320px;min-height:100%}body{min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(ellipse 80% 50% at 50% -20%, #1a5fb414, transparent), linear-gradient(180deg, var(--bg) 0%, #e8edf4 100%);margin:0}button,input{font:inherit}a{color:inherit}.with-icon{align-items:center;gap:.45em;display:inline-flex}.icon{flex-shrink:0}.icon-spin{animation:.8s linear infinite icon-spin}@keyframes icon-spin{to{transform:rotate(360deg)}}.drop-zone-icon{color:var(--accent);opacity:.85}.batch-item-name{min-width:0}.batch-item-name .icon{opacity:.55}.batch-item.is-active .batch-item-name .icon{opacity:1;color:var(--accent)}.fit-option.with-icon,.preset-button.with-icon{justify-content:center}.advanced-toggle{justify-content:space-between}.advanced-chevron{margin-left:auto;transition:transform .16s}.advanced-chevron.is-open{transform:rotate(180deg)}.status{align-items:flex-start}.status .status-icon{margin-top:1px}.status span{flex:1;min-width:0}.note-kicker{color:var(--accent)}.app-shell{width:min(1180px,100vw - 40px);margin:0 auto;padding:32px 0 48px}.masthead{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 32px;padding-bottom:28px;display:flex}.masthead-intro{flex:420px;min-width:0}.eyebrow{border:1px solid var(--line);background:var(--surface);color:var(--accent);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;align-items:center;gap:8px;margin:0 0 12px;padding:5px 10px;font-size:11px;font-weight:600;display:inline-flex}h1{letter-spacing:-.02em;max-width:14ch;margin:0;font-size:clamp(2rem,4.5vw,2.75rem);font-weight:700;line-height:1.05}.masthead-copy{max-width:52ch;color:var(--muted);margin:14px 0 0;font-size:1.05rem;line-height:1.55}.masthead-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.build-chip,.source-link{border-radius:999px;justify-content:center;align-items:center;min-height:40px;padding:0 16px;font-size:13px;font-weight:600;text-decoration:none;transition:background .16s,border-color .16s,transform .16s;display:inline-flex}.build-chip{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft)}.source-link{background:var(--accent);color:#fff;border:1px solid #0000}.source-link:hover{background:var(--accent-hover);transform:translateY(-1px)}.workbench{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-height:560px;box-shadow:var(--shadow);grid-template-columns:minmax(300px,340px) minmax(0,1fr);gap:0;display:grid;overflow:hidden}.control-rail{border-right:1px solid var(--line);background:var(--surface-muted);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;flex-direction:column;gap:0;max-height:min(88vh,920px);padding:16px;display:flex;overflow:hidden auto}.rail-section{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-sm);gap:12px;padding:14px;display:grid}.rail-section+.rail-section{margin-top:12px}.section-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.section-heading span{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-size:11px;font-weight:600}.section-heading strong{max-width:150px;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.drop-zone{border:2px dashed var(--line-strong);border-radius:var(--radius-sm);background:radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 70%), var(--surface-inset);min-height:132px;color:var(--muted);text-align:center;cursor:pointer;align-content:center;justify-items:center;gap:6px;padding:22px 16px;transition:border-color .16s,background .16s,transform .16s;display:grid;position:relative}.drop-zone:hover{border-color:var(--accent);background:var(--accent-soft)}.drop-zone.is-dragging{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.01)}.drop-zone strong{color:var(--ink);font-size:1.05rem;font-weight:600}.drop-kicker{color:var(--accent);letter-spacing:.05em;text-transform:uppercase;font-size:11px;font-weight:600}.drop-hint{font-size:13px;line-height:1.4}.file-input-hidden{opacity:0;cursor:pointer;position:absolute;inset:0}.batch-list{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface-muted);gap:8px;padding:10px;display:grid}.batch-list-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.batch-list-head span{color:var(--muted);text-transform:uppercase;font-size:11px;font-weight:600}.batch-list-head strong{background:var(--accent-soft);min-width:26px;min-height:24px;color:var(--accent);border-radius:999px;justify-content:center;align-items:center;font-size:12px;font-weight:600;display:inline-flex}.batch-items{gap:6px;max-height:140px;padding-right:2px;display:grid;overflow:auto}.batch-item{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);min-height:44px;color:var(--ink);text-align:left;cursor:pointer;gap:2px;padding:8px 10px;transition:border-color .14s,background .14s;display:grid}.batch-item span{text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;overflow:hidden}.batch-item small{color:var(--muted);font-size:11px}.batch-item:hover{border-color:var(--line-strong)}.batch-item.is-active{border-color:var(--accent);background:var(--accent-soft)}.fit-segmented{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.fit-option,.preset-button{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);min-height:40px;color:var(--muted);cursor:pointer;padding:0 10px;font-size:12px;font-weight:600;transition:border-color .14s,background .14s,color .14s}.fit-option:hover,.preset-button:hover{border-color:var(--line-strong);color:var(--ink)}.fit-option.is-active,.preset-button.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.profile-note{border-radius:var(--radius-xs);background:var(--surface-muted);color:var(--muted);margin:0;padding:10px 12px;font-size:12px;line-height:1.45}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.preset-button:last-child:nth-child(odd){grid-column:1/-1}.advanced-toggle{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface-muted);width:100%;min-height:38px;color:var(--ink-soft);cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:0 12px;font-size:12px;font-weight:600;transition:background .14s;display:flex}.advanced-toggle:hover{background:var(--surface-inset)}.tuning-panel{border-top:1px solid var(--line);gap:12px;padding-top:12px;display:grid}.tuning-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.tuning-header span{color:var(--muted);text-transform:uppercase;font-size:11px;font-weight:600}.tuning-header button{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);min-height:30px;color:var(--ink-soft);cursor:pointer;padding:0 10px;font-size:11px;font-weight:600}.tuning-header button:hover{border-color:var(--line-strong);background:var(--surface-muted)}.range-field{grid-template-columns:76px minmax(0,1fr) 42px;align-items:center;gap:10px;font-size:12px;font-weight:500;display:grid}.range-field span{color:var(--muted)}.range-field input[type=range]{width:100%;accent-color:var(--accent)}.range-field output{color:var(--ink);font-family:var(--mono);text-align:right;font-size:11px}.toggle-row{gap:6px;display:grid}.toggle-field{min-height:28px;color:var(--muted);align-items:center;gap:9px;font-size:12px;font-weight:500;display:flex}.toggle-field input{accent-color:var(--accent)}.toggle-field input:disabled+span{opacity:.45}.recipe-box{border-radius:var(--radius-xs);background:var(--surface-inset);max-height:72px;color:var(--muted);font-family:var(--mono);overflow-wrap:anywhere;padding:10px;font-size:10px;line-height:1.5;display:block;overflow:auto}.field{gap:8px;display:grid}.field>span,.deck-header span,.readout-grid dt,.drop-kicker{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:11px;font-weight:600}.field-color{grid-template-columns:1fr 52px;align-items:end}.field-color span{grid-column:1/-1}.field-color input[type=color]{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);width:100%;min-height:42px;padding:4px}.field-color code{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface-muted);min-height:42px;color:var(--muted);font-family:var(--mono);justify-content:center;align-items:center;font-size:11px;display:inline-flex}.export-actions{gap:8px;display:grid}.download-button{border-radius:var(--radius-sm);background:var(--accent);color:#fff;border:none;justify-content:center;align-items:center;min-height:46px;font-size:14px;font-weight:600;text-decoration:none;transition:background .16s,transform .16s,opacity .16s;display:inline-flex}.download-button:hover:not([aria-disabled=true]){background:var(--accent-hover);transform:translateY(-1px)}.download-button[aria-disabled=true]{pointer-events:none;background:var(--surface-inset);color:var(--soft)}.zip-button{border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);min-height:42px;color:var(--ink);cursor:pointer;font-size:13px;font-weight:600;transition:background .14s,border-color .14s}.zip-button:hover:not(:disabled){background:var(--surface-muted)}.zip-button:disabled{cursor:not-allowed;border-color:var(--line);color:var(--soft)}.status{border-radius:var(--radius-xs);background:var(--surface-muted);color:var(--muted);padding:12px;font-size:13px;line-height:1.45}.status-ok{background:var(--success-soft);color:var(--success)}.status-error{background:var(--danger-soft);color:var(--danger)}.preview-deck{background:radial-gradient(ellipse 70% 45% at 50% 0%, #1a5fb40f, transparent), var(--surface);grid-template-rows:auto minmax(0,1fr) auto auto;gap:16px;min-height:0;padding:20px 24px 24px;display:grid}.deck-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.deck-header strong{letter-spacing:-.01em;margin-top:4px;font-size:1.25rem;font-weight:600;display:block}.frame-code{border:1px solid var(--line);background:var(--surface-muted);min-height:32px;color:var(--muted);font-family:var(--mono);border-radius:999px;align-items:center;padding:0 12px;font-size:12px;font-weight:500;display:inline-flex}.calculator-stage{place-items:center;min-height:0;padding:20px 16px 28px;display:grid}.calculator-device{background:linear-gradient(165deg, #3d4650 0%, var(--device) 42%, var(--device-edge) 100%);width:min(100%,640px);box-shadow:var(--shadow-device);border-radius:18px;padding:18px 18px 14px}.device-top{color:#ffffffe0;letter-spacing:.12em;text-transform:uppercase;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;padding:0 4px;font-size:11px;font-weight:600;display:flex}.device-model{color:#ffffff8c;letter-spacing:.08em;font-size:10px}.screen-bezel{background:var(--screen);border:3px solid #0d1116;border-radius:6px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 8px 24px #00000059}canvas{aspect-ratio:2;width:100%;image-rendering:pixelated;display:block}.empty-screen{color:#8cc89b8c;letter-spacing:.06em;text-align:center;text-transform:uppercase;background:linear-gradient(90deg, var(--screen-grid) 1px, transparent 1px), linear-gradient(var(--screen-grid) 1px, transparent 1px);pointer-events:none;background-size:12px 12px;align-content:center;place-items:center;gap:10px;padding:16px;font-size:12px;font-weight:600;display:grid;position:absolute;inset:0}.empty-screen-icon{color:#8cc89b73}.device-caption{color:#ffffff73;font-family:var(--mono);text-align:center;letter-spacing:.02em;margin-top:10px;font-size:10px}.preview-navigator{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-muted);gap:10px;padding:12px;display:grid}.preview-nav-caption{color:var(--muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:12px;font-weight:500;overflow:hidden}.preview-nav-controls{align-items:center;gap:10px;min-width:0;display:flex}.preview-nav-step{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);min-height:36px;color:var(--ink-soft);cursor:pointer;flex:none;padding:0 12px;font-size:12px;font-weight:600}.preview-nav-step:hover:not(:disabled){border-color:var(--line-strong)}.preview-nav-step:disabled{cursor:not-allowed;opacity:.45}.preview-nav-buttons{scrollbar-width:thin;flex:1;gap:6px;min-width:0;padding-bottom:2px;display:flex;overflow-x:auto}.preview-nav-index{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);min-width:36px;min-height:36px;color:var(--muted);font-variant-numeric:tabular-nums;cursor:pointer;flex:none;padding:0 10px;font-size:12px;font-weight:600;transition:border-color .14s,background .14s,color .14s}.preview-nav-index:hover{border-color:var(--line-strong);color:var(--ink)}.preview-nav-index.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.readout-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;display:grid}.readout-grid div{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface-muted);min-width:0;padding:12px 14px}.readout-grid dd{overflow-wrap:anywhere;margin:6px 0 0;font-size:14px;font-weight:600;line-height:1.25}.production-notes{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px;display:grid}.production-notes article{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);padding:20px}.note-kicker{letter-spacing:.05em;text-transform:uppercase;font-size:11px;font-weight:600}h2{letter-spacing:-.01em;margin:10px 0 8px;font-size:1.1rem;font-weight:600}.production-notes p{color:var(--muted);margin:0;font-size:14px;line-height:1.55}.site-footer{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;padding-top:20px;font-size:13px;display:flex}.site-footer div:first-child{gap:4px;display:grid}.site-footer strong{color:var(--ink);font-size:14px}.footer-links{flex-wrap:wrap;gap:16px;display:flex}.footer-links a{color:var(--accent);font-weight:600;text-decoration:none}.footer-links a:hover{text-underline-offset:3px;text-decoration:underline}input:focus-visible,button:focus-visible,.drop-zone:focus-within,.fit-option:focus-visible,.preset-button:focus-visible,.batch-item:focus-visible,.zip-button:focus-visible,.preview-nav-step:focus-visible,.preview-nav-index:focus-visible,.advanced-toggle:focus-visible,.tuning-header button:focus-visible,.download-button:focus-visible,.source-link:focus-visible,.footer-links a:focus-visible{box-shadow:var(--focus);outline:0}@media (width<=960px){.app-shell{width:min(100vw - 28px,720px);padding-top:24px}.workbench{grid-template-columns:1fr;min-height:0}.control-rail{border-right:0;border-bottom:1px solid var(--line);max-height:none}.readout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.production-notes{grid-template-columns:1fr}}@media (width<=520px){.app-shell{width:calc(100vw - 20px);padding-bottom:32px}.masthead-actions{width:100%}.source-link{flex:1}.preview-deck{padding:16px}.calculator-device{padding:14px}.preview-nav-controls{flex-wrap:wrap;justify-content:center}.preview-nav-buttons{flex:100%;order:3;justify-content:center}.readout-grid{grid-template-columns:1fr}.site-footer{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.icon-spin{animation:none}}