:root { color-scheme: dark; --bg:#070918; --panel:#10152d; --line:rgba(164,191,255,.16); --text:#edf2ff; --muted:#94a2c7; --accent:#69dcff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--text); font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background:radial-gradient(circle at 8% 0%,#1a2150 0,transparent 34rem),radial-gradient(circle at 90% 80%,#171044 0,transparent 30rem),var(--bg); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.24; background-image:radial-gradient(#fff 0.55px,transparent .75px); background-size:38px 38px; mask-image:linear-gradient(black,transparent); }
.app-shell { width:min(1500px,100%); margin:auto; padding:30px clamp(18px,4vw,58px) 54px; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:26px; }
.brand { display:flex; align-items:center; gap:10px; color:#f6f8ff; text-decoration:none; font-size:1.35rem; letter-spacing:-.04em; }.brand strong { color:var(--accent); }.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:#06121c; background:linear-gradient(135deg,#8dffde,#5da9ff); font-size:20px; }.site-header p { margin:0; color:var(--muted); }
.explorer { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:18px; align-items:stretch; }
.canvas-card,.controls { position:relative; border:1px solid var(--line); border-radius:18px; background:rgba(14,18,43,.78); box-shadow:0 24px 60px rgba(0,0,0,.24); overflow:hidden; }
.canvas-card { min-height:clamp(400px,68vh,760px); isolation:isolate; }.canvas-toolbar { position:absolute; z-index:2; inset:0 0 auto; display:flex; justify-content:space-between; gap:15px; padding:14px 18px; font-size:.79rem; background:linear-gradient(rgba(4,6,18,.55),transparent); pointer-events:none; }.canvas-toolbar span:first-child { font-weight:700; }.hint { color:#b4c0df; }.canvas-glow { position:absolute; z-index:-1; width:36%; aspect-ratio:1; left:8%; bottom:-30%; border-radius:50%; background:#194596; filter:blur(70px); opacity:.26; }
canvas { display:block; width:100%; height:100%; min-height:inherit; cursor:grab; touch-action:none; } canvas:active { cursor:grabbing; }
.controls { display:flex; flex-direction:column; padding:22px; gap:22px; }.control-group { display:grid; gap:8px; } label,.label-row { color:#c8d2ef; font-weight:650; font-size:.83rem; }.label-row { display:flex; justify-content:space-between; }.label-row output { color:var(--accent); font-variant-numeric:tabular-nums; } select,input { width:100%; accent-color:var(--accent); } select { border:1px solid var(--line); border-radius:9px; padding:10px 11px; color:var(--text); background:#101833; font:inherit; outline:none; } select:focus-visible,button:focus-visible,input:focus-visible,.brand:focus-visible { outline:3px solid #75ddff; outline-offset:3px; } input[type=range] { padding:5px 0; }
.actions { display:grid; gap:9px; margin-top:auto; } button { border:1px solid var(--line); border-radius:9px; padding:10px; color:#dbe4ff; background:#18203d; font:inherit; font-weight:650; cursor:pointer; transition:transform .15s,background .15s,border-color .15s; } button:hover { transform:translateY(-1px); border-color:#6188ca; background:#202b4e; } button.primary { color:#061222; border-color:#7cf0ed; background:linear-gradient(100deg,#6ce6ff,#99ffca); }
.fractal-info { padding:12px; border:1px solid var(--line); border-radius:10px; background:rgba(5,8,26,.42); color:#b9c7e8; font-size:.78rem; line-height:1.45; }.fractal-info strong { display:block; margin-bottom:4px; color:var(--accent); font-size:.8rem; }.fractal-info p { margin:0; }
.geometry-controls { display:grid; gap:9px; }.step-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.step-actions button { font-size:.76rem; padding:9px 6px; }.geometry-controls p { margin:0; color:var(--accent); font-size:.78rem; font-weight:700; text-align:center; }.step-explanation { margin-top:18px; padding:14px 18px; border:1px solid var(--line); border-radius:13px; background:rgba(13,18,42,.82); color:#c4d0ee; }.step-explanation strong { color:var(--accent); font-size:.8rem; }.step-explanation p { margin:4px 0 0; font-size:.9rem; }
.status-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:18px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:var(--line); }.status-bar div { padding:13px 18px; background:rgba(13,18,42,.82); }.status-bar span { display:block; color:var(--muted); font-size:.67rem; font-weight:700; letter-spacing:.12em; }.status-bar strong { font-variant-numeric:tabular-nums; font-size:.9rem; }
.about { width:min(710px,100%); padding-top:62px; }.eyebrow { margin:0 0 6px; color:var(--accent); letter-spacing:.16em; font-size:.7rem; font-weight:800; }.about h1 { margin:0; letter-spacing:-.04em; font-size:clamp(1.8rem,4vw,2.8rem); }.about p:not(.eyebrow) { margin:12px 0 0; color:#bac5e2; font-size:1.03rem; }
@media (max-width:850px) { .explorer { grid-template-columns:1fr; }.controls { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.actions { margin:0; align-content:end; }.canvas-card { min-height:min(67vh,650px); } }
@media (max-width:590px) { .app-shell { padding-top:18px; }.site-header { align-items:flex-start; flex-direction:column; gap:8px; }.site-header p { font-size:.88rem; }.canvas-card { min-height:430px; }.canvas-toolbar { padding:12px; }.hint { display:none; }.controls { grid-template-columns:1fr; padding:18px; gap:16px; }.actions { grid-template-columns:repeat(3,1fr); }.actions button { font-size:.78rem; padding:11px 5px; }.status-bar div { padding:11px 12px; }.status-bar strong { font-size:.77rem; }.about { padding-top:44px; } }