:root{--text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);--text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);--text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--radius-md:0.75rem;--radius-lg:1rem;--radius-full:9999px;--color-bg:#f7f6f2;--color-surface:#fbfbf9;--color-surface-2:#f0eee8;--color-border:#d7d3cb;--color-text:#25231d;--color-text-muted:#6d6b66;--color-primary:#ff993b;--color-primary-hover:#0c4e54;--shadow-sm:0 1px 2px rgb(0 0 0 / 0.05);--shadow-md:0 12px 32px rgb(0 0 0 / 0.08);--transition:180ms cubic-bezier(0.16,1,0.3,1);--font-body:Inter,system-ui,sans-serif;--font-display:Inter,system-ui,sans-serif;}[data-theme="dark"]{--color-bg:#151513;--color-surface:#1d1d1a;--color-surface-2:#272723;--color-border:#3a3934;--color-text:#ece7df;--color-text-muted:#b1aba1;--color-primary:#58a5ae;--color-primary-hover:#6db8c1;--shadow-sm:0 1px 2px rgb(0 0 0 / 0.2);--shadow-md:0 12px 32px rgb(0 0 0 / 0.32);}*{box-sizing:border-box;}body{margin:0;min-height:100vh;font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;color:var(--color-text);background:radial-gradient(circle at top left,rgb(1 105 111 / 0.08),transparent 28%),var(--color-bg);}button,input{font:inherit;}.shell{width:min(1120px,calc(100% - 2rem));margin:0 auto;padding:var(--space-8) 0 var(--space-12);}.topbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);}.brand{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);letter-spacing:0.04em;text-transform:uppercase;color:var(--color-text-muted);}.brand svg{width:1.8rem;height:1.8rem;color:var(--color-primary);}.theme-toggle{width:46px;height:46px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform var(--transition),background var(--transition),border-color var(--transition);}.theme-toggle:hover{transform:translateY(-1px);}.hero{margin-bottom:var(--space-8);}.hero h1{margin:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--text-xl);line-height:1.08;}.hero p{margin:0;color:var(--color-text-muted);}.grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--space-6);align-items:start;}.panel{background:color-mix(in srgb,var(--color-surface) 90%,transparent);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);backdrop-filter:blur(12px);}.controls{padding:var(--space-6);position:sticky;top:1rem;}.controls h2,.preview h2{margin:0 0 var(--space-4);font-size:var(--text-lg);}.field{margin-bottom:var(--space-4);}.field:last-child{margin-bottom:0;}.field label{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);}.value{color:var(--color-text);font-variant-numeric:tabular-nums;}input[type="range"]{width:100%;accent-color:var(--color-primary);cursor:pointer;}input[type="file"]{width:100%;padding:var(--space-3);border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-muted);}.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);}.btn{border:1px solid transparent;border-radius:var(--radius-full);padding:0.8rem 1.1rem;min-height:44px;cursor:pointer;transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition);}.btn:hover{transform:translateY(-1px);}.btn-primary{background:var(--color-primary);color:white;}.btn-primary:hover{background:var(--color-primary-hover);}.btn-secondary{background:var(--color-surface-2);color:var(--color-text);border-color:var(--color-border);}.note{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);}.preview{padding:var(--space-6);}.canvas-wrap{display:grid;gap:var(--space-4);}.canvas-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}.canvas-head{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--text-sm);}canvas{display:block;width:100%;height:auto;background:white;}.hint{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm);}@media (max-width:900px){.grid{grid-template-columns:1fr;}.controls{position:static;}}