.app-shell{--paper:#f8f6ff;--ink:#c9c7db;--muted:#9299b8;--line:#becdff29;min-height:100dvh;padding:max(20px, env(safe-area-inset-top)) clamp(18px, 5vw, 82px) max(22px, env(safe-area-inset-bottom));background:radial-gradient(circle at 12% 14%,#43d7be1f,#0000 24rem),radial-gradient(circle at 86% 16%,#8c8eff2b,#0000 28rem),linear-gradient(155deg,#0d1632 0%,#080d1d 56%,#0d1026 100%);overflow:hidden}.topbar,.hero,.control-panel,footer{max-width:1220px;margin-inline:auto}.topbar{justify-content:space-between;align-items:center;min-height:48px;display:flex}.brand{color:var(--paper);letter-spacing:-.055em;align-items:center;gap:10px;font-size:18px;font-weight:780;text-decoration:none;display:inline-flex}.brand>span:last-child>span{color:#82ebd0}.brand-mark{border:1px solid #b5f5ead9;border-radius:50%;place-items:center;width:23px;height:23px;display:grid;position:relative;box-shadow:0 0 19px #6bf0cf5c}.brand-mark:before{content:"";border:2px solid #9c9cff;border-radius:50%;width:9px;height:9px;position:absolute}.brand-mark i{background:#fae98a;border-radius:50%;width:3px;height:3px;position:absolute}.brand-mark i:first-child{top:1px;left:9px}.brand-mark i:nth-child(2){bottom:6px;right:1px}.brand-mark i:nth-child(3){bottom:2px;left:4px}.save-button,.primary-action,.secondary-action,.quiet-action{cursor:pointer;border:1px solid #0000;transition:transform .18s,background .18s,border-color .18s,color .18s}.save-button{color:#d9fff4;background:#5ddcbe17;border-color:#9df1d86e;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:780}.save-button:hover,.primary-action:hover,.secondary-action:hover{transform:translateY(-2px)}.save-button span{margin-right:4px;font-size:15px}.hero{grid-template-columns:minmax(270px,.78fr) minmax(430px,1.2fr);align-items:center;gap:clamp(42px,8vw,118px);min-height:min(710px,100dvh - 72px);padding:36px 0 40px;display:grid}.eyebrow{color:#8fe9d0;letter-spacing:.19em;margin:0 0 13px;font-size:10px;font-weight:850}.hero h1,.panel-heading h2{color:var(--paper);letter-spacing:-.065em;margin:0;font-family:Georgia,Times New Roman,serif;font-weight:400}.hero h1{max-width:8.7ch;font-size:clamp(48px,6vw,82px);line-height:.93}.hero h1 em{color:#c6b8ff;font-style:italic}.intro{max-width:33ch;color:var(--ink);margin:24px 0 0;font-size:14px;line-height:1.7}.formula{border:1px solid var(--line);background:#111f4180;border-radius:13px;gap:6px;max-width:335px;margin-top:30px;padding:12px 14px;display:grid;box-shadow:inset 0 1px #ffffff08}.formula span{color:#83e8d1;letter-spacing:.14em;font-size:9px;font-weight:850}.formula code{color:#d4d6f4;text-overflow:ellipsis;white-space:nowrap;font-family:SF Mono,Cascadia Code,monospace;font-size:10px;overflow:hidden}.canvas-wrap{justify-self:center;width:min(100%,620px)}.canvas-stage{isolation:isolate;aspect-ratio:1;width:100%;position:relative}.canvas-stage:before{z-index:-2;filter:blur(28px);content:"";background:conic-gradient(from 20deg,#58f0cc08,#8180ff6e,#f8b0dd21,#58f0cc08);border-radius:50%;animation:9s ease-in-out infinite alternate orbitalGlow;position:absolute;inset:-9%}.spiro-canvas{border:1px solid #c5d8ff4a;border-radius:50%;width:100%;height:100%;display:block;box-shadow:0 24px 60px #0000005c,inset 0 0 42px #79acff14}.canvas-stage:after{z-index:1;content:"";pointer-events:none;border:1px solid #cde3ff21;border-radius:50%;position:absolute;inset:3%}.canvas-topline{z-index:2;color:#e6f4ffa1;letter-spacing:.13em;text-transform:uppercase;pointer-events:none;align-items:center;gap:6px;font-size:9px;font-weight:800;display:flex;position:absolute;top:8%;left:10%}.canvas-topline span{background:#83ead1;border-radius:50%;width:6px;height:6px;display:block;box-shadow:0 0 10px #83ead1}.canvas-topline .pulse{animation:1.1s ease-in-out infinite blink}.canvas-caption{z-index:2;color:#e7f0ff94;pointer-events:none;font-size:10px;position:absolute;bottom:8%;right:9%}.canvas-caption strong{color:#f6f6ff;font-size:11px}.canvas-orbit{z-index:-1;pointer-events:none;border:1px solid #7ae5cb26;border-radius:50%;position:absolute}.orbit-one{inset:-4%}.orbit-two{border-color:#b19dff21;inset:-10%}.canvas-note{color:var(--muted);letter-spacing:.025em;text-align:center;margin:16px 0 0;font-size:11px}.control-panel{border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(135deg,#152247e0,#0b1127eb);border-radius:27px;margin-top:14px;padding:clamp(22px,4vw,38px);box-shadow:0 24px 55px #0000002b,inset 0 1px #ffffff0e}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-end;gap:18px;padding-bottom:23px;display:flex}.panel-heading .eyebrow{margin-bottom:7px}.panel-heading h2{font-size:clamp(30px,3vw,43px);line-height:.98}.layer-count{color:#aeb5d0;white-space:nowrap;align-items:center;gap:8px;font-size:11px;font-weight:650;display:flex}.layer-count span{color:#a3f8e0;background:#59e1c21a;border:1px solid #87eed36b;border-radius:50%;place-items:center;width:29px;height:29px;font-size:13px;font-weight:850;display:grid}.controls-grid{grid-template-columns:1.2fr repeat(3,1fr) 1.05fr 1.12fr;gap:22px;padding:27px 0 22px;display:grid}.control-group,.range-field{min-width:0}.control-group{border-right:1px solid var(--line);padding-right:20px}.range-field{border-right:1px solid var(--line);color:var(--paper);padding-right:20px;display:block}.range-field>span,.ink-label{justify-content:space-between;align-items:center;gap:9px;display:flex}.field-label,.range-field b{color:#f3f2ff;letter-spacing:-.01em;font-size:11px;font-weight:800}.range-field b em{color:#95e7d1;font-family:Georgia,serif;font-size:13px;font-style:italic}.range-field output{color:#8debd2;font-family:SF Mono,Cascadia Code,monospace;font-size:10px;font-weight:800}.range-field small,.control-group>p{min-height:28px;color:var(--muted);margin:8px 0 0;font-size:10px;line-height:1.4;display:block}input[type=range]{accent-color:#78dfc3;cursor:pointer;width:100%;height:18px;margin:13px 0 0}.segmented{background:#0206146b;border:1px solid #b4c5ff26;border-radius:10px;grid-template-columns:1fr 1fr;gap:3px;margin-top:10px;padding:3px;display:grid}.segmented button{color:#989fba;cursor:pointer;background:0 0;border:0;border-radius:7px;min-width:0;padding:7px 5px;font-size:10px;font-weight:750;transition:background .16s,color .16s}.segmented button.selected{color:#dffff5;background:#81e8cf29;box-shadow:inset 0 0 0 1px #89efd62e}.compact{border:0;margin-top:20px;padding:0}.compact small{display:none}.ink-group{border:0;padding:0}.color-picker{cursor:pointer;border:1px solid #e0ecff59;border-radius:50%;flex:none;place-items:center;width:27px;height:27px;display:grid;position:relative;overflow:hidden}.color-picker input{opacity:0;cursor:pointer;width:40px;height:40px;position:absolute;inset:-7px}.color-picker i{border-radius:inherit;pointer-events:none;border:2px solid #ffffffdb;width:18px;height:18px}.swatches{grid-template-columns:repeat(6,1fr);gap:7px;margin-top:12px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:50%;width:100%;padding:0;transition:transform .16s,border-color .16s;box-shadow:inset 0 0 0 1px #0003}.swatch:hover{transform:scale(1.1)}.swatch.selected{border-color:#f5f6ff;transform:scale(1.13)}.rainbow-toggle{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#bec5dc;text-align:left;cursor:pointer;background:0 0;grid-template-columns:20px 1fr 24px;align-items:center;gap:7px;width:100%;margin-top:16px;padding:8px 0;display:grid}.rainbow-toggle>span{color:#d5a5ff;font-size:14px}.rainbow-toggle b{color:#e9eaff;font-size:10px}.rainbow-toggle small{color:var(--muted);grid-column:2/3;margin-top:-6px;font-size:9px}.rainbow-toggle>i{background:#48516f;border-radius:99px;grid-area:1/3/3/4;width:24px;height:14px;transition:background .18s;display:block;position:relative}.rainbow-toggle>i:after{content:"";background:#d5d9e7;border-radius:50%;width:8px;height:8px;transition:transform .18s,background .18s;position:absolute;top:3px;left:3px}.rainbow-toggle.enabled>i{background:linear-gradient(90deg,#82ecd2,#a993ff,#f3a3d4)}.rainbow-toggle.enabled>i:after{background:#fff;transform:translate(10px)}.actions{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:9px;padding-top:21px;display:flex}.primary-action,.secondary-action{border-radius:12px;padding:11px 14px;font-size:11px;font-weight:820}.primary-action{color:#08201f;background:linear-gradient(100deg,#77e6ca,#a5f1dd);box-shadow:0 8px 19px #4adebb29}.secondary-action{color:#e3e6ff;background:#b1c0ff14;border-color:#bdc9ff33}.primary-action span,.secondary-action span{margin-right:3px;font-size:14px}.quiet-action{color:#9ca4c1;background:0 0;border:0;padding:8px 5px;font-size:10px;font-weight:700}.quiet-action:hover:not(:disabled){color:#f0f1ff}.quiet-action.danger{color:#d1a3bc}.quiet-action:disabled{opacity:.38;cursor:not-allowed}.notice{z-index:5;color:#eff7ff;opacity:0;pointer-events:none;white-space:nowrap;background:#080f24eb;border:1px solid #c4e0ff38;border-radius:999px;margin:0;padding:10px 14px;font-size:11px;transition:opacity .2s,transform .2s;position:fixed;bottom:19px;left:50%;transform:translate(-50%,13px)}.notice.visible{opacity:1;transform:translate(-50%)}footer{color:#7e86a7;letter-spacing:.04em;text-align:center;padding:28px 0 6px;font-size:10px}footer span{color:#a6ebd9;letter-spacing:.18em;font-size:9px;font-weight:850}@keyframes orbitalGlow{0%{opacity:.65;transform:scale(.96)rotate(-8deg)}to{opacity:1;transform:scale(1.05)rotate(18deg)}}@keyframes blink{50%{opacity:.25;transform:scale(.72)}}@media (width<=1080px){.hero{grid-template-columns:minmax(245px,.7fr) minmax(400px,1.16fr);gap:48px}.controls-grid{grid-template-columns:repeat(3,1fr)}.control-group,.range-field{border-right:0;padding-right:0}.mode-group,.playback-group,.ink-group{border-top:1px solid var(--line);padding-top:20px}.mode-group{grid-column:span 2}}@media (width<=700px){.app-shell{padding-inline:15px;overflow:visible}.topbar{min-height:38px}.brand{font-size:16px}.save-button{padding:8px 11px;font-size:11px}.hero{flex-direction:column;gap:27px;min-height:auto;padding:38px 0 40px;display:flex}.hero-copy{text-align:center;width:100%}.eyebrow{margin-bottom:9px;font-size:9px}.hero h1{max-width:none;font-size:clamp(47px,14vw,67px)}.intro{max-width:32ch;margin:18px auto 0;font-size:13px}.formula{text-align:left;margin:22px auto 0}.canvas-wrap{width:min(100%,540px)}.canvas-note{margin-top:14px}.control-panel{border-radius:22px;margin-top:0;padding:21px 17px}.panel-heading{align-items:flex-start;padding-bottom:19px}.panel-heading h2{font-size:32px}.layer-count{text-align:center;flex-direction:column;gap:3px;font-size:9px}.layer-count span{width:26px;height:26px}.controls-grid{grid-template-columns:1fr 1fr;gap:20px 17px;padding:21px 0}.mode-group,.playback-group,.ink-group{grid-column:span 2}.mode-group{border-top:0;padding-top:0}.range-field:nth-of-type(2){border-left:1px solid var(--line);padding-left:17px}.range-field small,.control-group>p{min-height:25px}.ink-group{grid-template-columns:1fr 1fr;column-gap:18px;display:grid}.ink-label,.swatches{grid-column:span 2}.rainbow-toggle,.ink-group .compact{align-self:end}.ink-group .compact{margin-top:16px}.actions{gap:8px;padding-top:17px}.primary-action,.secondary-action{padding:10px 11px}.notice{text-overflow:ellipsis;max-width:calc(100vw - 30px);overflow:hidden}}@media (width<=390px){.actions{grid-template-columns:1fr 1fr;display:grid}.primary-action,.secondary-action{width:100%}.quiet-action{text-align:left}}:root{color:#f7f5ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#080d1d;font-family:Inter,ui-rounded,SF Pro Rounded,Avenir Next,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100dvh}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #a7f3d0}