.app-shell{--cream:#fff8f2;--muted:#b8adc6;--line:#ffffff1f;min-height:100dvh;padding:max(18px, env(safe-area-inset-top)) clamp(18px, 4vw, 72px) max(18px, env(safe-area-inset-bottom));background:radial-gradient(circle at 8% 9%,#c466c438,#0000 22rem),radial-gradient(circle at 91% 75%,#ff834a24,#0000 23rem),#120c1d;overflow:hidden}.topbar,.studio,footer{max-width:1360px;margin-inline:auto}.topbar{justify-content:space-between;align-items:center;min-height:50px;display:flex}.brand{color:var(--cream);letter-spacing:-.045em;align-items:center;gap:11px;font-size:18px;font-weight:720;display:flex}.brand em{color:#ffcf61;font-style:normal}.brand-mark{grid-template-columns:repeat(2,9px);gap:2px;width:20px;height:20px;display:grid;position:relative;transform:rotate(45deg)}.brand-mark i{background:#ffcf61;border-radius:7px 2px;display:block;box-shadow:0 0 12px #ffcf6199}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:#ff7caa}.save-button{color:#fff7dd;cursor:pointer;background:#fff0c317;border:1px solid #ffe1948c;border-radius:999px;padding:10px 15px;font-size:13px;font-weight:700;transition:transform .18s,background .18s}.save-button:hover{background:#fff0c32e;transform:translateY(-1px)}.save-button span{margin-right:4px;font-size:17px;line-height:0;display:inline-block}.studio{grid-template-columns:minmax(190px,.65fr) minmax(410px,1.4fr) minmax(250px,.76fr);align-items:center;gap:clamp(25px,4vw,68px);min-height:calc(100dvh - 122px);padding-block:18px;display:grid}.canvas-intro{align-self:center}.eyebrow{color:#e5ba7c;letter-spacing:.2em;margin:0 0 14px;font-size:10px;font-weight:800}h1{color:var(--cream);letter-spacing:-.065em;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(38px,4vw,64px);font-weight:400;line-height:.98}h1 span{color:#f5c4d8;font-style:italic}.canvas-intro>p:last-child{max-width:22ch;color:var(--muted);margin:22px 0 0;font-size:14px;line-height:1.55}.canvas-stage{aspect-ratio:1;isolation:isolate;border-radius:50%;justify-self:center;width:min(100%,650px);position:relative}.canvas-halo{z-index:-2;border-radius:inherit;filter:blur(30px);opacity:.65;background:conic-gradient(from 40deg,#ffaa5b14,#e95cae6b,#56d4ec1a,#ffaa5b14);animation:7s ease-in-out infinite alternate breathe;position:absolute;inset:-11%}.canvas-stage:before{z-index:-1;border-radius:inherit;content:"";pointer-events:none;border:1px solid #ffe7c233;position:absolute;inset:3.5%}.canvas-stage:after{z-index:1;border-radius:inherit;content:"";pointer-events:none;border:1px dashed #ffe7c21a;position:absolute;inset:9%}.drawing-canvas{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;border:1px solid #ffebde59;border-radius:50%;width:100%;height:100%;display:block;box-shadow:0 26px 70px #00000057,inset 0 0 40px #ffc2ea14}.center-star{z-index:2;color:#ffe8a3;text-shadow:0 0 13px #ffe8a3;pointer-events:none;opacity:.88;border-radius:50%;place-items:center;width:24px;height:24px;font-size:18px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.draw-hint{z-index:2;color:#fff4e58c;letter-spacing:.17em;text-transform:uppercase;pointer-events:none;margin:0;font-size:10px;font-weight:800;position:absolute;bottom:9%;left:50%;transform:translate(-50%)}.controls{border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(150deg,#2e1e3dd9,#171123d6);border-radius:24px;justify-self:end;width:min(100%,300px);padding:20px;box-shadow:0 20px 50px #0000002e}.control-heading,.label-row,.range-control>span,.toggle-row{justify-content:space-between;align-items:center;display:flex}.control-heading{color:#fff7ee;margin-bottom:18px;font-size:13px;font-weight:800}.stroke-count{color:#af9cbd;font-size:11px;font-weight:600}.range-control{color:#fff7ee;margin:16px 0;display:block}.range-control>span{margin-bottom:9px;font-size:12px}.range-control b,.label-row b,.toggle-row b{letter-spacing:-.01em;font-size:12px}.range-control output{color:#f6c779;font-size:11px;font-weight:750}.range-control small{color:#9d90aa;margin-top:6px;font-size:10px;display:block}input[type=range]{accent-color:#f4b75e;cursor:pointer;width:100%;height:18px;margin:0}.toggle-row{border:0;border-top:1px solid var(--line);color:#fff7ee;text-align:left;cursor:pointer;background:0 0;gap:10px;width:100%;padding:12px 0}.toggle-row:last-of-type{border-bottom:1px solid var(--line)}.toggle-row>span:nth-child(2){flex:1}.toggle-row small{color:#9d90aa;margin-top:3px;font-size:10px;line-height:1.25;display:block}.toggle-icon{color:#d1c7da;background:#ffffff14;border-radius:9px;place-items:center;width:26px;height:26px;font-size:15px;display:grid}.toggle-row.on .toggle-icon{color:#ffd16d;background:#f9c05f29}.toggle-icon.sparkle{font-size:16px}.switch{background:#4b4154;border-radius:999px;flex:none;width:31px;height:18px;transition:background .18s;display:block;position:relative}.switch i{background:#d9d0dd;border-radius:50%;width:12px;height:12px;transition:transform .18s,background .18s;position:absolute;top:3px;left:3px}.toggle-row.on .switch{background:#d99152}.toggle-row.on .switch i{background:#fff1cd;transform:translate(13px)}.control-section{margin-top:16px}.label-row{color:#fff7ee;font-size:12px}.color-picker{cursor:pointer;border:1px solid #ffffff4d;border-radius:50%;place-items:center;width:25px;height:25px;display:grid;position:relative;overflow:hidden}.color-picker input{opacity:0;cursor:pointer;width:42px;height:42px;position:absolute;inset:-8px}.color-picker i{border-radius:inherit;pointer-events:none;border:2px solid #ffffffd1;width:17px;height:17px}.swatches{grid-template-columns:repeat(8,1fr);gap:7px;margin-top:10px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:50%;width:100%;padding:0;transition:transform .15s,border-color .15s;box-shadow:inset 0 0 0 1px #00000029}.swatch:hover{transform:scale(1.1)}.swatch.selected{border-color:#fff9e5;transform:scale(1.14)}.compact{margin-top:14px;margin-bottom:0}.background-section{border-top:1px solid var(--line);padding-top:15px}.background-swatches{grid-template-columns:repeat(5,1fr)}.history-actions{grid-template-columns:1fr 1fr auto;gap:7px;margin-top:18px;display:grid}.history-actions button{color:#e8dfea;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff21;border-radius:10px;padding:9px 7px;font-size:11px;font-weight:700;transition:background .16s,color .16s}.history-actions button:hover:not(:disabled){background:#ffffff1f}.history-actions button:disabled{color:#74697c;cursor:not-allowed}.history-actions .clear{color:#ffb5ac}.notice{z-index:8;color:#fff7e9;opacity:0;pointer-events:none;background:#191125e6;border:1px solid #ffffff29;border-radius:999px;margin:0;padding:10px 14px;font-size:12px;transition:opacity .22s,transform .22s;position:fixed;bottom:23px;left:50%;transform:translate(-50%,14px)}.notice.visible{opacity:1;transform:translate(-50%)}footer{color:#95859f;letter-spacing:.04em;text-align:center;padding-bottom:5px;font-size:11px}footer span{color:#ffc66b;margin-left:4px}@keyframes breathe{0%{transform:scale(.94)rotate(0)}to{transform:scale(1.05)rotate(22deg)}}@media (width<=980px){.studio{grid-template-columns:minmax(165px,.62fr) minmax(360px,1.3fr);gap:32px;padding-bottom:44px}.controls{grid-column:1/-1;grid-template-columns:repeat(2,1fr);justify-self:center;gap:0 24px;width:100%;max-width:700px;display:grid}.control-heading{grid-column:1/-1}.toggle-row,.control-section{align-self:start}.history-actions{grid-column:1/-1;max-width:300px}}@media (width<=640px){.app-shell{padding-inline:15px;overflow:visible}.topbar{min-height:42px}.brand{font-size:16px}.save-button{padding:8px 11px;font-size:11px}.studio{flex-direction:column;gap:20px;min-height:auto;padding:22px 0 40px;display:flex}.canvas-intro{text-align:center;width:100%}.eyebrow{margin-bottom:8px;font-size:9px}h1{font-size:clamp(38px,11vw,51px)}.canvas-intro>p:last-child{max-width:29ch;margin:12px auto 0;font-size:12px}.canvas-stage{width:min(100%,510px)}.controls{width:100%;max-width:510px;padding:18px;display:block}.history-actions{max-width:none}footer{padding-bottom:4px}}:root{color:#fff8ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#120c1d;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 #ffe27a}