@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap";*{box-sizing:border-box}:root{--ink-strong:#1d2840;--ink-muted:#4f5f82;--edge-soft:#344d803d;--panel-bg-top:#ffffffe6;--panel-bg-bottom:#f7f9ffe6;--panel-shadow:0 12px 32px #1a2c5424;--preview-border:#38548c42;--fallback-text:#7d5050;--fallback-bg-top:#fff3f3;--fallback-bg-bottom:#fffaf8;--tab-bg:#f8faff;--tab-active-start:#2e4f88;--tab-active-end:#3c64a5;--tab-active-text:#f5f8ff;--stop-bg-top:#fff;--stop-bg-bottom:#f8faff;--slider-track:#e9edf6;--slider-range-start:#7394d6;--slider-range-end:#4b6fb6;--thumb-bg:#fff;--thumb-border:#385892;--thumb-ring:#3b5e9c33;--button-bg:#fbfcff;--button-hover:#eef3ff;--button-text:#2f4b80;--control-bg:#fff;--output-pre-bg:#f4f7ff;--output-pre-border:#43609933;--error-text:#8f2d2d;--error-bg:#fff2f2;--error-border:#f0cbcb;--texture-dot:#283e680d;--bg-grad-1:#eef1ff;--bg-grad-2:#e5f0ff;--bg-grad-3:#f9ece3;--bg-base-top:#fcfdff;--bg-base-mid:#f3f7ff;--bg-base-bottom:#f9f6ff;--card-shadow:0 8px 20px #1e305617;--hover-shadow:0 7px 16px #243b6824;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--ink-strong:#e6ecff;--ink-muted:#aebadc;--edge-soft:#6f88ba61;--panel-bg-top:#141d2ff0;--panel-bg-bottom:#0f1727eb;--panel-shadow:0 16px 34px #02061099;--preview-border:#7591c973;--fallback-text:#ffc5c5;--fallback-bg-top:#412230;--fallback-bg-bottom:#341f2b;--tab-bg:#171f34;--tab-active-start:#365ca2;--tab-active-end:#4a75be;--tab-active-text:#f5f8ff;--stop-bg-top:#1b2741;--stop-bg-bottom:#151f34;--slider-track:#2d3a59;--slider-range-start:#6f95df;--slider-range-end:#5076bf;--thumb-bg:#dce6ff;--thumb-border:#6f95df;--thumb-ring:#7c99dc4d;--button-bg:#202c47;--button-hover:#2a395a;--button-text:#dce6ff;--control-bg:#1a2741;--output-pre-bg:#142039;--output-pre-border:#7596da5c;--error-text:#ffd0d0;--error-bg:#4a2228;--error-border:#774048;--texture-dot:#bccef617;--bg-grad-1:#1a2440;--bg-grad-2:#13263e;--bg-grad-3:#2a2335;--bg-base-top:#0c1324;--bg-base-mid:#101a2e;--bg-base-bottom:#141827;--card-shadow:0 8px 20px #00000054;--hover-shadow:0 8px 16px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:radial-gradient(circle at 15% 20%, var(--bg-grad-1) 0%, transparent 38%), radial-gradient(circle at 85% 12%, var(--bg-grad-2) 0%, transparent 34%), radial-gradient(circle at 55% 85%, var(--bg-grad-3) 0%, transparent 36%), linear-gradient(165deg, var(--bg-base-top) 0%, var(--bg-base-mid) 52%, var(--bg-base-bottom) 100%);color:var(--ink-strong);margin:0;font-family:Manrope,Segoe UI,Tahoma,sans-serif;line-height:1.45}#root{z-index:1;min-height:100vh;position:relative}body:before{content:"";background-image:radial-gradient(var(--texture-dot) .7px, transparent .7px);pointer-events:none;opacity:.23;z-index:0;background-size:18px 18px;position:fixed;inset:0}.app{flex-direction:column;gap:18px;width:min(96vw,1520px);max-width:none;margin:0 auto;padding:clamp(18px,3vw,34px);display:flex}.workspaceGrid{grid-template-columns:minmax(0,2.65fr) minmax(0,1fr);align-items:start;gap:0;display:grid}.workspaceShell{padding:clamp(12px,1.8vw,18px)}.workspacePane{box-shadow:none;background:0 0;border:0;border-radius:0;padding:clamp(8px,1vw,14px)}.codePanel{border-left:1px solid var(--edge-soft);max-height:calc(100vh - 32px);margin-left:clamp(14px,1.6vw,22px);padding-left:clamp(14px,1.6vw,22px);position:sticky;top:16px;overflow:auto}.panel{border:1px solid var(--edge-soft);background:linear-gradient(180deg, var(--panel-bg-top), var(--panel-bg-bottom));box-shadow:var(--panel-shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;border-radius:18px;padding:clamp(14px,2vw,22px);animation:.42s forwards panelIn;transform:translateY(10px)}.panelTop{justify-content:space-between;align-items:center;gap:12px;display:flex}.panelTitleRow{align-items:center;gap:8px;margin-bottom:10px;display:flex}.panelTop .panelTitleRow{margin-bottom:0}.panelTitleRow h1,.panelTitleRow h2,.panelTitleRow h3{margin:0}.titleIcon{color:var(--ink-muted);flex-shrink:0;display:block}.panel:nth-of-type(2){animation-delay:80ms}.panel:nth-of-type(3){animation-delay:.14s}.panel h1,.panel h2,.panel h3{letter-spacing:-.02em;color:var(--ink-strong);margin:0 0 10px;line-height:1.15}.panel h1,.panel h2{font-family:Space Grotesk,Trebuchet MS,sans-serif}.panel h3{font-family:Space Grotesk,Trebuchet MS,sans-serif;font-size:1rem}.panel .panelTitleRow h1,.panel .panelTitleRow h2,.panel .panelTitleRow h3{margin:0;line-height:1}.panel .panelTitleRow .titleIcon{align-self:center}.panelHint{color:var(--ink-muted);margin:0 0 12px}.previewBox{border:1px solid var(--preview-border);border-radius:16px;width:100%;height:clamp(220px,36vw,280px);overflow:hidden;box-shadow:inset 0 1px #ffffffb3}.previewFallback{width:100%;height:100%;color:var(--fallback-text);background:linear-gradient(180deg, var(--fallback-bg-top), var(--fallback-bg-bottom));text-align:center;place-items:center;padding:12px;display:grid}.previewCssOnly{background-size:130% 130%;width:100%;height:100%;animation:8s ease-in-out infinite alternate gradientDrift}.controlGroup{flex-direction:column;gap:10px;margin-bottom:14px;display:flex}@keyframes modePanelIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.modePanel{animation:.2s modePanelIn}.angleEditorRow{justify-content:space-between;align-items:center;gap:10px;display:flex}.angleInput{border:1px solid var(--edge-soft);width:92px;color:var(--ink-strong);background:var(--control-bg);border-radius:10px;padding:8px 10px;font-size:14px}.rowBetween{justify-content:space-between;align-items:center;gap:10px;display:flex}.loadSection{border-top:1px solid var(--edge-soft);flex-direction:column;gap:10px;margin-top:30px;margin-bottom:14px;padding-top:22px;display:flex}.loadSectionLabel{text-transform:uppercase;letter-spacing:.07em;color:var(--ink-muted);font-size:11px;font-weight:700}.modeTabs{border:1px solid var(--edge-soft);background:var(--tab-bg);border-radius:12px;gap:3px;width:100%;padding:3px;display:flex;overflow:hidden}.tabButton{color:var(--ink-muted);cursor:pointer;text-align:center;background:0 0;border:0;border-radius:9px;flex:1;padding:9px 14px;font-size:13px;font-weight:600;transition:background .15s,color .15s,box-shadow .15s}.tabButton:hover:not(.active){color:var(--ink-strong);background:var(--edge-soft)}.tabButton.active{background:linear-gradient(135deg, var(--tab-active-start), var(--tab-active-end));color:var(--tab-active-text);box-shadow:0 1px 4px #00000026}.stopsContainer{scroll-snap-type:x mandatory;flex-direction:row;gap:12px;margin-bottom:0;padding-bottom:4px;display:flex;overflow-x:auto}.stopCard{border:1px solid var(--edge-soft);background:linear-gradient(180deg, var(--stop-bg-top), var(--stop-bg-bottom));width:280px;min-width:280px;box-shadow:var(--card-shadow);scroll-snap-align:start;cursor:grab;border-radius:14px;flex-direction:column;gap:12px;padding:12px;transition:transform .14s,box-shadow .14s,border-color .14s,opacity .14s;display:flex}.stopCard.isDragging{opacity:.6;cursor:grabbing;transform:scale(.98)}.stopCard.isDropTarget{border-color:var(--tab-active-end);box-shadow:0 0 0 2px color-mix(in oklab, var(--tab-active-end) 28%, transparent)}.stopTitle{color:var(--ink-strong);align-items:center;gap:6px;display:inline-flex}.stopCardHeader{justify-content:space-between;align-items:center;display:flex}.colorPickerWrap{flex-direction:column;gap:8px;display:flex}.colorPickerWrap .react-colorful{border:1px solid var(--edge-soft);border-radius:10px;width:100%;height:130px}.colorInput{border:1px solid var(--edge-soft);background:var(--control-bg);color:var(--ink-strong);border-radius:10px;padding:7px 9px;font-size:14px}.positionWrap{flex-direction:column;gap:8px;display:flex}.positionHeader{justify-content:space-between;align-items:center;display:flex}.positionLabel{color:var(--ink-muted);letter-spacing:.02em;text-transform:uppercase;font-size:12px;font-weight:700}.positionValue{color:var(--button-text);background:var(--button-bg);border:1px solid var(--edge-soft);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700}.sliderRoot{align-items:center;width:100%;height:22px;display:flex;position:relative}.sliderTrack{background:var(--slider-track);border-radius:999px;flex:1;height:7px;position:relative}.sliderRange{background:linear-gradient(135deg, var(--slider-range-start), var(--slider-range-end));border-radius:999px;height:100%;position:absolute}.sliderThumb{background:var(--thumb-bg);border:2px solid var(--thumb-border);width:18px;height:18px;box-shadow:0 0 0 3px var(--thumb-ring);border-radius:50%;display:block}.button{border:1px solid var(--edge-soft);background:var(--button-bg);color:var(--button-text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:7px 11px;font-weight:600;line-height:1.1;transition:transform .12s,background-color .12s,box-shadow .12s;display:inline-flex}.iconButton{white-space:nowrap}.iconOnlyButton{width:30px;height:30px;padding:0}.themeToggleButton{width:36px;height:36px;padding:0}.iconButton svg,.panelTitleRow svg,.stopTitle svg{flex-shrink:0;display:block}.iconButton span,.stopTitle span{align-items:center;display:inline-flex}.button:hover{background:var(--button-hover);box-shadow:var(--hover-shadow);transform:translateY(-1px)}.button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.textarea{resize:vertical;border:1px solid var(--edge-soft);width:100%;color:var(--ink-strong);background:var(--control-bg);border-radius:10px;padding:10px;font-family:IBM Plex Mono,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.45}.errorText{color:var(--error-text);background:var(--error-bg);border:1px solid var(--error-border);border-radius:8px;margin:0;padding:8px 10px}.outputBlock{border:1px solid var(--edge-soft);background:linear-gradient(180deg, var(--stop-bg-top), var(--stop-bg-bottom));border-radius:12px;margin-bottom:10px;padding:12px}.outputHeader{justify-content:space-between;align-items:center;gap:8px;display:flex}.outputHeader h3{margin:0}.outputBlock pre{white-space:pre-wrap;word-break:break-word;background:var(--output-pre-bg);border:1px solid var(--output-pre-border);border-radius:10px;margin:8px 0 0;padding:10px;font-size:13px}.addStopCard{text-align:center;border:1px dashed var(--edge-soft);background:linear-gradient(180deg, var(--stop-bg-top), var(--stop-bg-bottom));width:280px;min-width:280px;min-height:292px;color:var(--ink-muted);cursor:pointer;scroll-snap-align:start;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:12px;transition:transform .12s,box-shadow .12s,border-color .12s;display:flex}.addStopCard strong{color:var(--ink-strong)}.addStopCard span{font-size:13px}.addStopCard:hover{border-color:var(--tab-active-end);box-shadow:var(--hover-shadow);transform:translateY(-2px)}.appFooter{border-top:1px solid var(--edge-soft);color:var(--ink-muted);flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:4px;padding:14px 4px 0;font-size:13px;display:flex}.appFooter p{margin:0}.appFooter a{color:var(--button-text);font-weight:700;text-decoration:none}.appFooter a:hover{text-decoration:underline}@keyframes panelIn{to{opacity:1;transform:translateY(0)}}@keyframes gradientDrift{0%{filter:saturate(1.02);transform:scale(1)}to{filter:saturate(1.08);transform:scale(1.04)}}@media (width<=780px){.workspaceGrid{grid-template-columns:1fr}.codePanel{border-left:0;border-top:1px solid var(--edge-soft);max-height:none;margin-top:14px;margin-left:0;padding-top:14px;padding-left:0;position:static;overflow:visible}.panelTop,.angleEditorRow,.rowBetween{flex-direction:column;align-items:flex-start}.outputHeader{flex-wrap:wrap}}@media (width<=580px){.stopCard,.addStopCard{width:calc(100vw - 58px);min-width:calc(100vw - 58px)}.modeTabs{width:100%}}@media (prefers-reduced-motion:reduce){.panel,.previewCssOnly,.button{transition:none;animation:none}}