:root{color-scheme:dark;--background: #070d18;--surface: #111d30;--surface-elevated: #16263b;--surface-soft: #0f1f33;--text-primary: #eaf3ff;--text-muted: #90a7c6;--accent: #63ccff;--accent-strong: #37b8ff;--danger: #f87171;--border: #29415a;--border-strong: #365779;--shadow: 0 18px 44px rgba(0, 0, 0, .44)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:Inter,Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:1.45;color:var(--text-primary);background:radial-gradient(58rem 40rem at 8% 0%,rgba(99,204,255,.13),transparent 62%),radial-gradient(42rem 36rem at 100% 12%,rgba(55,184,255,.09),transparent 66%),linear-gradient(170deg,#040912 0%,var(--background) 50%,#0a1424 100%)}button,input{font:inherit;color:inherit}h1,h2,p{margin:0}.app{width:min(1320px,100%);margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:16px}.app-header{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}.title-group{display:flex;flex-direction:column;gap:6px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted)}h1{font-size:clamp(28px,3.5vw,40px);font-weight:700;letter-spacing:.01em}.subtitle{font-size:14px;color:var(--text-muted)}.status-pill{margin:0;display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:#0a1829cc;color:var(--text-muted);font-size:13px;font-weight:600}.status-pill.ready{border-color:#63ccff80;color:var(--accent);background:#15344ec7}.controls,.panel{background:linear-gradient(180deg,#16263cf2,#111d30f0);border:1px solid var(--border);border-radius:16px;box-shadow:inset 0 1px #ffffff0a,var(--shadow)}.controls{padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.control-group{display:flex;align-items:center;gap:10px}.slider-tools{margin-left:auto;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0c1b2dd1}.point-count-control{display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);white-space:nowrap}.control-label{font-size:13px}.point-count-control strong{color:var(--text-primary);min-width:16px;text-align:right}input[type=range]{-webkit-appearance:none;appearance:none;width:210px;height:6px;border-radius:999px;border:1px solid rgba(55,88,120,.65);background:linear-gradient(90deg,#63ccffcc,#2f84c6a6)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;border:2px solid #cceeff;background:var(--accent);box-shadow:0 0 0 4px #63ccff38;cursor:pointer}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:2px solid #cceeff;background:var(--accent);box-shadow:0 0 0 4px #63ccff38;cursor:pointer}.btn{min-height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--border-strong);background:linear-gradient(180deg,#1e3350,#192b45);color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .18s ease}.btn:hover{border-color:#6ec7ffd9;background:linear-gradient(180deg,#234061,#1d3553);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-accent{border-color:#63ccffa8;background:linear-gradient(180deg,#226494,#1a4b73)}.btn-accent:hover{border-color:#a4e1fff2;background:linear-gradient(180deg,#2977ad,#1e5c8a)}.btn.danger{border-color:#e37171a6;background:linear-gradient(180deg,#66353d,#552a31)}.btn.danger:hover{border-color:var(--danger);background:linear-gradient(180deg,#7a3d47,#65343c)}.file-input{position:relative;overflow:hidden}.file-input input{position:absolute;inset:0;opacity:0;cursor:pointer}.btn:focus-visible,input:focus-visible,.file-input:focus-within{outline:2px solid var(--accent);outline-offset:2px}.grid{display:grid;gap:16px;grid-template-columns:minmax(420px,1.18fr) minmax(280px,.82fr)}.panel{padding:14px;display:flex;flex-direction:column;gap:12px}.section-head{display:flex;flex-direction:column;gap:4px}h2{font-size:18px;font-weight:650;color:var(--text-primary)}.section-head p{font-size:13px;color:var(--text-muted)}.canvas-stack{display:grid;gap:12px}.canvas-block{margin:0;display:grid;gap:8px}.canvas-block figcaption{font-size:13px;font-weight:600;color:var(--text-muted)}.canvas-wrap{background:linear-gradient(180deg,#112439f5,#0d1c2ef2);border:1px solid var(--border);border-radius:12px;padding:10px;display:flex;justify-content:center;align-items:center}canvas{display:block;width:100%;height:auto;object-fit:contain;border-radius:10px;background:var(--surface-soft)}.canvas-block canvas{aspect-ratio:4 / 3}.curve-wrap{padding:14px}.curve-wrap canvas{aspect-ratio:1 / 1;width:min(100%,420px);max-height:min(48vh,420px);margin:0 auto}.curve-tip{color:var(--text-muted);font-size:13px}.preset-panel{display:flex;flex-direction:column;gap:10px}.preset-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.preset-actions p{margin-top:4px;font-size:13px;color:var(--text-muted)}.preset-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}.preset-item,.preset-empty{border-radius:12px;border:1px solid var(--border);background:#0f1f33bf;padding:10px}.preset-item{display:flex;align-items:center;justify-content:space-between;gap:12px}.preset-meta strong{font-size:14px}.preset-meta p{margin-top:4px;color:var(--text-muted);font-size:12px}.preset-buttons{display:flex;gap:8px}.preset-empty{text-align:center;color:var(--text-muted)}.storage-warning{color:var(--danger)}@media(max-width:980px){.app{padding:18px}.app-header{align-items:flex-start;flex-direction:column}.controls{flex-direction:column;align-items:stretch}.control-group{flex-wrap:wrap}.slider-tools{margin-left:0;width:100%;justify-content:space-between}input[type=range]{width:min(100%,320px)}.grid{grid-template-columns:1fr}.curve-wrap canvas{width:min(100%,380px);max-height:min(44vh,380px)}}@media(max-width:680px){.app{padding:14px}.btn{min-height:40px;padding:0 12px;font-size:13px}.preset-item{flex-direction:column;align-items:flex-start}.preset-buttons{width:100%}.preset-buttons .btn{flex:1}}@media(prefers-reduced-motion:reduce){.btn{transition:none}}
