:root{--bg:#f7f7f4;--surface:#fff;--surface-2:#f0efeb;--border:#d8d6cf;--border-strong:#b8b5ad;--text:#1c1c1c;--text-muted:#6c6a64;--accent:#2f6f3f;--accent-hover:#235730;--accent-text:#fff;--danger:#b22222;--shadow:0 1px 2px #0000000a, 0 4px 16px #0000000f;--radius:8px;--radius-sm:4px;--gap:1rem}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--text);background:var(--bg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}input,select{font:inherit;color:inherit}a{color:var(--accent)}h1,h2,h3,h4{margin:0 0 .5em;font-weight:600}.btn{background:var(--accent);color:var(--accent-text);border:1px solid var(--accent);border-radius:var(--radius-sm);justify-content:center;align-items:center;gap:.4em;padding:.55em 1.1em;font-weight:500;transition:background .15s;display:inline-flex}.btn:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn--ghost{color:var(--text);border-color:var(--border-strong);background:0 0}.btn--ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-strong)}.btn--link{color:var(--accent);background:0 0;border:none;padding:0;font-weight:500;text-decoration:underline}input[type=number],input[type=text],select{border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--radius-sm);padding:.4em .6em}input[type=number]{width:5em}label{align-items:center;gap:.4em;display:inline-flex}.setup-shell{flex-direction:column;align-items:center;gap:1.25rem;min-height:100%;padding:2.5rem 1rem 1.5rem;display:flex}.setup-footer{text-align:center;color:var(--text-muted);margin-top:auto;padding-top:2rem;font-size:.85rem}.static-nav{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.static-nav a{color:var(--text-muted)}.static-nav a:hover{color:var(--accent)}.static-nav__sep{color:var(--border-strong)}.home-info{width:100%;max-width:640px;color:var(--text);margin-top:1rem;padding:0 .5rem}.home-info h2{margin:1.4rem 0 .5rem;font-size:1.15rem}.home-info p,.home-info li{color:var(--text-muted);line-height:1.55}.home-info ol{margin:.4em 0 .8em;padding-left:1.4rem}.static-page{padding:2rem 2.25rem;line-height:1.55}.static-page h1{margin-top:0;font-size:1.6rem}.static-page h2{margin-top:1.5rem;font-size:1.1rem}.static-page p{margin:.6em 0}.static-page code{background:var(--surface-2);border-radius:3px;padding:.1em .35em;font-size:.92em}.brand,a.brand{color:var(--text-muted);text-decoration:none}a.brand:hover{color:var(--accent)}.setup-hero{text-align:center;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.setup-hero h1{color:var(--text);margin:.4rem 0 0;font-size:1.4rem}.setup-hero p{color:var(--text-muted);margin:0;line-height:1.45}.zine-anim{width:200px;max-width:100%;height:auto;color:var(--text-muted);display:block}.zine-anim__page{animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.zine-anim__page--1{animation-name:zine-page-1}.zine-anim__page--2{animation-name:zine-page-2}@keyframes zine-page-1{0%,12%{transform:translate(100px,55px)}28%,92%{transform:translate(70px,100px)}to{transform:translate(100px,55px)}}@keyframes zine-page-2{0%,12%{transform:translate(100px,145px)}28%,92%{transform:translate(130px,100px)}to{transform:translate(100px,145px)}}.zine-anim__fold{transform-box:fill-box;transform-origin:0;animation:6s ease-in-out infinite zine-fold}@keyframes zine-fold{0%,50%{transform:scaleX(1)}62%,78%{transform:scaleX(.04)}90%,to{transform:scaleX(1)}}.zine-anim__spine{opacity:0;animation:6s ease-in-out infinite zine-spine}@keyframes zine-spine{0%,18%{opacity:0}32%,88%{opacity:.7}to{opacity:0}}@media (prefers-reduced-motion:reduce){.zine-anim__page,.zine-anim__fold,.zine-anim__spine{animation:none}.zine-anim__page--1{transform:translate(70px,100px)}.zine-anim__page--2{transform:translate(130px,100px)}.zine-anim__spine{opacity:.7}}.setup-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:640px;padding:1.75rem 2rem 2rem}.setup-title{text-align:center;margin-bottom:.5rem;font-size:1.4rem}.setup-subtitle{text-align:center;color:var(--text-muted);margin:0 0 1.5rem}.brand{color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;font-size:1.1rem;font-weight:600}.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius);text-align:center;background:var(--surface-2);cursor:pointer;padding:2.5rem 1.5rem;transition:border-color .15s,background .15s;position:relative;overflow:hidden}.dropzone--active{border-color:var(--accent);background:#eaf3ec}.dropzone--busy{cursor:progress;border-color:var(--accent)}.dropzone__content{transition:opacity .2s,filter .2s}.dropzone--busy .dropzone__content{opacity:.18;filter:blur(.5px)}.dropzone p{margin:.5em 0}.dropzone-icon{font-size:2rem}.dropzone__overlay{color:var(--accent);letter-spacing:.01em;background:#ffffffb3;flex-direction:column;justify-content:center;align-items:center;gap:.8rem;font-size:1.15rem;font-weight:600;display:flex;position:absolute;inset:0}.spinner{border:3px solid var(--surface-2);border-top-color:var(--accent);border-radius:50%;width:2.2rem;height:2.2rem;animation:.8s linear infinite spinner-rotate}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.6s}}.file-meta{background:var(--surface-2);border-radius:var(--radius-sm);flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;display:flex}.file-meta strong{font-size:1rem}.error{color:var(--danger);border-radius:var(--radius-sm);background:#fbecec;border:1px solid #f0c0c0;margin-top:1rem;padding:.6em 1em}.layout-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1rem;display:grid}.layout-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:left;cursor:pointer;flex-direction:column;gap:.5rem;padding:1.25rem;transition:border-color .15s,transform .1s,opacity .2s;display:flex}.layout-card:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.layout-card:disabled{opacity:.45;cursor:not-allowed}.setup-layout-anchor{justify-content:center;width:100%;scroll-margin-top:1.5rem;display:flex}.setup-card[data-enabled=false]{opacity:.7}.setup-card[data-enabled=false] .setup-title,.setup-card[data-enabled=false] .setup-subtitle{color:var(--text-muted)}.dropzone--loaded{border-style:solid;border-color:var(--accent);background:#eaf3ec}.layout-card svg{color:var(--text-muted)}.layout-card h3{margin:0;font-size:1rem}.layout-card p{color:var(--text-muted);margin:0;font-size:.85rem}.studio-shell{flex-direction:column;min-height:100vh;display:flex}.studio-header{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:1rem;padding:.7rem 1.2rem;display:flex}.studio-header__actions{align-items:center;gap:.8rem;margin-left:auto;display:flex}.studio-header__stats{font-variant-numeric:tabular-nums}.studio-header .brand{font-size:.95rem}.studio-header .meta{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.9rem;display:flex}.studio-header .meta strong{color:var(--text)}.studio-header .meta-sep{color:var(--border-strong)}.studio-body{flex:1;grid-template-columns:minmax(320px,420px) 1fr;gap:0;min-height:0;display:grid}.studio-left{background:var(--bg);border-right:1px solid var(--border);flex-direction:column;gap:.8rem;padding:1rem;display:flex;overflow-y:auto}.studio-right{background:var(--surface-2);flex-direction:column;gap:1rem;min-height:0;padding:1rem;display:flex;position:relative}@media (width<=999px){.studio-body{flex-direction:column;display:flex}.studio-left{border-right:none;border-bottom:1px solid var(--border)}}.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.step-card__header{text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:.6rem;width:100%;padding:.7rem .9rem;font-weight:600;line-height:1.4;display:flex}.step-card__header:hover{background:var(--surface-2)}.step-card__head-text{white-space:nowrap;flex:auto;align-items:baseline;gap:.5rem;min-width:0;display:flex;overflow:hidden}.step-card__title{flex:none}.step-card__summary{text-overflow:ellipsis;min-width:0;color:var(--text-muted);flex:auto;font-size:.85em;font-weight:400;overflow:hidden}.step-card__chevron{width:.9em;height:.9em;color:var(--text-muted);flex:none;transition:transform .15s}.step-card[data-expanded=true] .step-card__chevron{transform:rotate(90deg)}.step-card__body{border-top:1px solid var(--border);flex-direction:column;gap:.7rem;padding:.5rem 1rem 1rem;display:flex}.thumb-strip{flex-wrap:wrap;gap:.4rem;max-height:360px;padding:.4rem 0;display:flex;overflow-y:auto}.thumb{border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:2px solid #0000;flex-direction:column;flex:none;align-items:center;gap:2px;padding:2px;display:flex}.thumb:hover{border-color:var(--border-strong)}.thumb--in-range{background:#d9ead9}.thumb--endpoint{border-color:var(--accent)}.thumb__canvas-wrap{background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden}.thumb__canvas-wrap canvas{display:block}.thumb__placeholder{color:var(--text-muted);background:var(--surface-2);justify-content:center;align-items:center;font-size:.85em;display:flex;position:absolute;inset:0}.thumb__num{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.72rem}.range-inputs{flex-wrap:nowrap;align-items:center;gap:.5rem;display:flex}.range-inputs input[type=number]{width:4em}.btn--compact{padding:.4em .7em}.settings-grid{flex-direction:column;gap:.6rem;display:flex}.settings-row{justify-content:space-between;align-items:center;gap:.8rem;display:flex}.settings-row>label:first-child,.settings-row>.settings-label{color:var(--text-muted);white-space:nowrap;flex:none}.settings-row>input[type=number],.settings-row>select{flex:none;margin-left:auto}.settings-row .radio-group{margin-left:auto}.settings-row--toggle .hint{text-align:right;margin-left:auto}.check-label{color:var(--text);white-space:nowrap;align-items:center;gap:.4em;display:inline-flex}.check-label input[type=checkbox]{margin:0}.hint{color:var(--text-muted);font-size:.8em}.radio-group{gap:1rem;display:flex}.preview-empty{color:var(--text-muted);text-align:center;padding:3rem}.preview-iframe{border:1px solid var(--border);width:100%;height:100%;min-height:80vh;box-shadow:var(--shadow);background:#fff}.preview-overlay{color:#fff;border-radius:var(--radius-sm);z-index:10;pointer-events:none;background:#000000b3;padding:.4em .8em;font-size:.85em;position:absolute;top:1.5rem;right:1.5rem}.stats{grid-template-columns:1fr 1fr;gap:.4rem 1rem;display:grid}.stats span:nth-child(odd){color:var(--text-muted)}