:root{color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#07090f}#root{min-height:100vh}.page{min-height:100vh;padding:32px clamp(20px,3vw,40px);color:#e9f2ff;background:radial-gradient(circle at top left,rgba(66,109,182,.35),transparent 34%),radial-gradient(circle at bottom right,rgba(35,81,120,.28),transparent 28%),linear-gradient(180deg,#0d1320,#09101b);font-family:Space Grotesk,Segoe UI,sans-serif}.layout{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:24px;align-items:start}.sidebar{position:sticky;top:24px;display:grid;gap:18px}.sidebar-block{padding:18px;border-radius:18px;background:#09101dd1;border:1px solid rgba(137,180,255,.18);box-shadow:0 24px 60px #00000047}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:#9cc7ff;margin:0 0 12px}.lede{margin:0;color:#c7d8f5;line-height:1.6}.controls{display:grid;gap:12px}.picker{display:grid;gap:6px;font-size:.9rem;color:#d8e6ff}.picker select,.picker input{width:100%;min-height:40px;border-radius:10px;border:1px solid rgba(130,170,255,.35);background:#08101ecc;color:#e9f2ff;padding:8px 10px}.julia-controls{display:grid;gap:12px}.picker.small input{width:100%}.controls-row{display:flex;gap:10px;flex-wrap:wrap}.btn{padding:12px 20px;min-height:44px;border-radius:999px;border:1px solid #6fa6ff;background:linear-gradient(135deg,#4786ff,#85b5ff);color:#07101f;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;touch-action:manipulation}.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px #4786ff4d}.btn.ghost{background:transparent;color:#cfe3ff}.btn.ghost.active{background:#6fa6ff2e;border-color:#8fbcffcc;color:#f3f7ff}.slider{display:grid;gap:6px;font-size:.9rem;color:#d8e6ff}.slider input{width:100%}.slider .value{font-variant-numeric:tabular-nums;color:#9cc7ff}.minimap-panel{display:grid;gap:12px}.minimap-settings{display:grid;gap:10px}.minimap-info{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;border-radius:14px;background:#060c17b8;border:1px solid rgba(137,180,255,.14)}.minimap-info span{display:block;margin-bottom:4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#89b4ff}.minimap-info strong{font-size:.98rem;color:#e9f2ff}.slider.compact{gap:4px}.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;color:#dbe8ff}.panel-head span{font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:#89b4ff}.panel-note{margin:0;color:#c3d7ff;line-height:1.5;font-size:.9rem}.minimap{width:100%;height:auto;aspect-ratio:4 / 3;display:block;border-radius:14px;border:1px solid rgba(156,199,255,.22);background:#050812;cursor:crosshair}.mode-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:4px;border-radius:14px;background:#060c17db;border:1px solid rgba(137,180,255,.16);overflow:hidden}.mode-toggle-option{min-height:44px;padding:10px 14px;border:0;border-radius:10px;background:#121c2e59;color:#70819d;font-weight:600;cursor:pointer;opacity:.62;transition:background .2s ease,color .2s ease,box-shadow .2s ease,opacity .2s ease}.mode-toggle-option.active{background:linear-gradient(135deg,#4786ff4d,#85b5ff33);color:#f3f7ff;box-shadow:inset 0 0 0 1px #8fbcff57;opacity:1}.mode-toggle-option:not(.active):hover{background:#2f416273;color:#8ea3c4;opacity:.78}.canvas-shell{display:grid;gap:18px}.canvas-frame{border-radius:22px;padding:14px;background:#0c1424b8;border:1px solid rgba(130,170,255,.2);box-shadow:0 30px 80px #0006}canvas{width:100%;height:min(78vh,760px);display:block;border-radius:14px;touch-action:none}.meta{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));background:#0a0f1c9e;padding:16px 20px;border-radius:16px;border:1px solid rgba(130,170,255,.2);color:#c3d7ff}.meta span{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:#89b4ff;margin-bottom:6px}.meta strong{font-size:1rem}@media(max-width:960px){.layout{grid-template-columns:1fr}.sidebar{position:static}canvas{height:58vh}}@media(max-width:640px){.page{padding:20px 16px 36px}.btn{padding:14px 22px;font-size:1rem}}
