/* Hoopdream styles.
   Theme 2026-10-03 "neon moss": retro-cyberpunk neon (magenta / cyan / violet) blended with nature
   (moss, fern, leaf, dusk, water). Soft bubble shapes, glass panels, no external fonts or assets.
   Canvases are never filtered or tinted, so on-screen colours stay true to the thread colours. */
:root {
  --night:#081413; --dusk:#16112b; --moss:#2f6b45; --fern:#58b06f; --leaf:#9be38f; --water:#3fc7d6;
  --magenta:#ff5fd2; --violet:#9b7bff; --cyan:#62f2e6;
  --glass:rgba(18,40,38,.74); --glass2:rgba(28,58,54,.78); --glassline:rgba(150,255,220,.20);
  --ink:#eef8f1; --mute:#b4cfc3; --line:rgba(170,240,215,.28); --acc:#62f2e6; --acc2:#ff5fd2; --warn:#ffd27a;
  --grad: linear-gradient(120deg, #ff6bd6 0%, #b592ff 48%, #6ff3dd 100%);
  --soft: 0 10px 40px rgba(0,0,0,.35), 0 0 0 1px var(--glassline) inset;
  --round: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; font:16px/1.5 var(--round); color:var(--ink); overflow-x:hidden; position:relative;
  background:
    radial-gradient(60vmax 50vmax at 8% -10%, rgba(88,176,111,.35), transparent 60%),
    radial-gradient(55vmax 45vmax at 105% 10%, rgba(155,123,255,.30), transparent 60%),
    radial-gradient(60vmax 50vmax at 50% 115%, rgba(63,199,214,.26), transparent 60%),
    linear-gradient(170deg, #0a1d1a 0%, #0e1a22 45%, var(--dusk) 100%);
  background-color:var(--night); }
/* organic glow blobs (decorative, behind everything) */
body::before, body::after { content:""; position:fixed; z-index:-1; pointer-events:none; filter:blur(60px); opacity:.55; border-radius:42% 58% 63% 37% / 45% 40% 60% 55%; }
body::before { width:46vmax; height:40vmax; left:-12vmax; top:30vh; background:radial-gradient(circle at 40% 40%, rgba(255,95,210,.45), rgba(255,95,210,0) 70%); animation:blob 26s ease-in-out infinite alternate; }
body::after { width:50vmax; height:44vmax; right:-16vmax; top:-8vmax; background:radial-gradient(circle at 50% 50%, rgba(98,242,230,.38), rgba(155,227,143,.12) 55%, transparent 72%); animation:blob 32s ease-in-out infinite alternate-reverse; }
@keyframes blob { from { transform:translate(0,0) rotate(0deg) scale(1); } to { transform:translate(4vmax,-3vmax) rotate(25deg) scale(1.12); } }
::selection { background:rgba(255,95,210,.45); color:#fff; }
a { color:var(--cyan); }

/* header */
.top { padding:26px 26px 8px; text-align:left; }
.top h1 { margin:0; font-size:28px; font-weight:800; letter-spacing:.14em; line-height:1.15;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 14px rgba(255,95,210,.35)); }
.top h1 span { display:inline-block; font-weight:600; font-size:13px; letter-spacing:.18em; color:var(--mute); -webkit-text-fill-color:var(--mute); filter:none; vertical-align:middle; }
.sub { margin:8px 0 0; color:var(--mute); max-width:60ch; }

/* step pills */
.steps { display:flex; gap:10px; padding:12px 26px 16px; flex-wrap:wrap; }
.steps button { min-height:44px; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--ink); font-weight:600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.steps button.on { background:var(--grad); color:#0b1220; border-color:transparent; box-shadow:0 0 22px rgba(255,95,210,.45), 0 0 40px rgba(98,242,230,.25); }
.steps button:disabled { opacity:.55; cursor:default; color:var(--mute); }

main { padding:0 22px 26px; }
.panel { position:relative; background:var(--glass); border:1px solid var(--glassline); border-radius:34px; padding:22px; box-shadow:var(--soft);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.panel::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 60% at 0% 0%, rgba(155,227,143,.10), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(255,95,210,.10), transparent 60%); }
.panel > * { position:relative; }
.grid2 { display:grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,1fr); gap:22px; align-items:start; }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }

/* upload bubble */
.drop { display:block; border:2px dashed rgba(98,242,230,.45); border-radius:40px; padding:30px 22px; text-align:center; cursor:pointer; min-height:230px;
  background: radial-gradient(80% 70% at 50% 30%, rgba(98,242,230,.10), rgba(88,176,111,.06) 60%, transparent 80%); transition: border-color .2s, box-shadow .2s, background .2s; }
.drop:hover, .drop:focus-visible { border-color:var(--magenta); box-shadow:0 0 0 4px rgba(255,95,210,.18), 0 0 36px rgba(255,95,210,.22); outline:none; }
.drop.over { border-color:var(--magenta); background: radial-gradient(80% 70% at 50% 40%, rgba(255,95,210,.18), rgba(155,123,255,.10) 60%, transparent 85%); }
.drop strong { font-size:18px; color:var(--leaf); }
.drop input { display:block; margin:0 auto 14px; max-width:100%; color:var(--mute); font:inherit; font-size:14px; }
.drop input::file-selector-button { min-height:44px; margin-right:10px; padding:10px 18px; border-radius:999px; border:0; background:var(--grad); color:#0b1220; font:inherit; font-weight:700; cursor:pointer; }
.thumb { display:block; max-width:100%; max-height:320px; margin:14px auto 8px; border-radius:22px; }

/* form controls */
.opts label { display:block; margin:0 0 14px; font-weight:650; font-size:15px; }
.opts input[type=number], .opts select { display:block; width:100%; min-height:44px; margin-top:6px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; font:inherit; color:var(--ink); background:rgba(6,20,20,.55); }
.opts select option { background:#10241f; color:var(--ink); }
input:focus-visible, select:focus-visible, button:focus-visible { outline:3px solid var(--cyan); outline-offset:2px; }
.opts input[type=range] { display:block; width:100%; height:44px; margin:4px 0 0; background:transparent; accent-color:var(--magenta); -webkit-appearance:none; appearance:none; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { height:10px; border-radius:999px; background:linear-gradient(90deg, var(--fern), var(--water), var(--violet)); box-shadow:0 0 12px rgba(98,242,230,.35); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; margin-top:-9px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, #ffc2ef 40%, var(--magenta)); border:2px solid #fff; box-shadow:0 0 16px rgba(255,95,210,.7); }
input[type=range]::-moz-range-track { height:10px; border-radius:999px; background:linear-gradient(90deg, var(--fern), var(--water), var(--violet)); }
input[type=range]::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background:var(--magenta); border:2px solid #fff; box-shadow:0 0 16px rgba(255,95,210,.7); }
.opts output { display:inline-block; min-width:2.4em; margin-left:6px; padding:1px 10px; border-radius:999px; background:rgba(255,95,210,.18); color:#ffd3f2; text-align:center; font-weight:700; }
.chk { display:flex !important; align-items:center; gap:10px; min-height:44px; font-weight:500 !important; cursor:pointer; }
.chk input { width:22px; height:22px; margin:0; flex:none; accent-color:var(--magenta); }
.muted { color:var(--mute); font-size:14px; font-weight:400; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* buttons: pills & bubbles */
button { font:inherit; min-height:44px; padding:10px 20px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.07); cursor:pointer; color:var(--ink); font-weight:600;
  transition: background .2s, box-shadow .2s, transform .15s; }
button:hover:not(:disabled) { background:rgba(98,242,230,.14); box-shadow:0 0 18px rgba(98,242,230,.25); }
button:active:not(:disabled) { transform:scale(.97); }
button.primary { background:var(--grad); border-color:transparent; color:#0b1220; font-weight:750; box-shadow:0 0 22px rgba(255,95,210,.35), 0 6px 18px rgba(0,0,0,.25); }
button.primary:hover:not(:disabled) { background:var(--grad); box-shadow:0 0 30px rgba(255,95,210,.55), 0 0 44px rgba(98,242,230,.3); }
button:disabled { opacity:.5; cursor:default; box-shadow:none; }

/* canvas stages (light, untinted backgrounds so thread colours read true) */
.stage { border-radius:30px; padding:12px; overflow:hidden; display:flex; justify-content:center; align-items:center; min-height:240px; background:#f3f7f1;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 0 6px rgba(98,242,230,.10), 0 0 40px rgba(155,123,255,.22), 0 12px 30px rgba(0,0,0,.35); }
.stage canvas { display:block; max-width:100%; max-height:70vh; height:auto; }
.checker { background-color:#f4f8f4; background-image: linear-gradient(45deg,#d6e2db 25%,transparent 25%,transparent 75%,#d6e2db 75%), linear-gradient(45deg,#d6e2db 25%,transparent 25%,transparent 75%,#d6e2db 75%); background-size:20px 20px; background-position:0 0,10px 10px; }
.fabric { background:#e9e6df; }

/* sections table */
table.sections { width:100%; border-collapse:separate; border-spacing:0 6px; font-size:14px; }
.sections th { text-align:left; color:var(--mute); font-weight:650; padding:2px 5px; font-size:13px; }
.sections td { padding:4px 5px; vertical-align:middle; background:rgba(255,255,255,.05); transition: background .15s; }
.sections td:first-child { border-radius:999px 0 0 999px; padding-left:12px; }
.sections td:last-child { border-radius:0 999px 999px 0; padding-right:10px; }
.sections tr.hl td { background:rgba(98,242,230,.16); }
.sections select, .sections input { font:inherit; font-size:14px; min-height:44px; color:var(--ink); background:rgba(6,20,20,.6); border:1px solid var(--line); border-radius:999px; padding:4px 8px; }
.sections select option { background:#10241f; color:var(--ink); }
.sections input[type=number] { width:72px; padding:4px 4px 4px 12px; }
.sections input[type=color] { width:44px; height:44px; padding:3px; border-radius:50%; cursor:pointer; }
.sections input[type=color]::-webkit-color-swatch-wrapper { padding:0; } .sections input[type=color]::-webkit-color-swatch { border:0; border-radius:50%; }
.sw { display:inline-block; width:24px; height:24px; border-radius:50%; border:2px solid rgba(255,255,255,.7); vertical-align:middle; box-shadow:0 0 10px rgba(255,255,255,.25); }
.hint { display:block; color:var(--mute); font-size:12px; }

/* notices & report */
.draft { margin:0 0 16px; padding:12px 20px; border-radius:999px; background:rgba(255,210,122,.14); border:1px solid rgba(255,210,122,.5); color:#ffe2a6; font-weight:650; box-shadow:0 0 22px rgba(255,210,122,.15); }
.report { display:grid; grid-template-columns: auto 1fr; gap:6px 16px; font-size:15px; padding:16px 20px; border-radius:28px; background:rgba(6,20,20,.45); border:1px solid var(--glassline); }
.report b { font-weight:600; color:var(--mute); }
.warnings { padding-left:20px; color:var(--warn); font-size:14px; } .warnings li { margin:6px 0; }

/* busy bubble */
.busy { position:fixed; inset:0; z-index:20; background:rgba(6,16,18,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; }
.busy > div { background:var(--glass2); border:1px solid var(--glassline); padding:16px 26px; border-radius:999px; display:flex; gap:12px; align-items:center; box-shadow:0 0 40px rgba(155,123,255,.35); }
.spin { width:22px; height:22px; border:3px solid rgba(255,255,255,.2); border-top-color:var(--magenta); border-right-color:var(--cyan); border-radius:50%; animation:sp 0.9s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } }
.foot { padding:8px 26px 26px; color:var(--mute); font-size:13px; }
.foot .muted { font-size:13px; }
[hidden] { display:none !important; }

/* --- interactions 2026-10-03: select, thread swap card, stitch-direction dial --- */
.secarea { position:relative; }
.secwrap { position:relative; display:inline-block; line-height:0; max-width:100%; }
#secs { cursor:pointer; touch-action:manipulation; }
.secwrap canvas.ov { position:absolute; inset:0; width:100%; height:100%; max-height:none; pointer-events:none; }
.pulse { animation:hdpulse 1.1s ease-in-out infinite alternate; } @keyframes hdpulse { from { opacity:1; } to { opacity:.35; } }
.sections tbody tr { cursor:pointer; }
.sections tr.sel td { background:rgba(255,95,210,.22); } .sections tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--magenta); font-weight:800; }
.tip { margin-top:-6px; }
.card { position:absolute; z-index:5; width:256px; background:rgba(20,44,42,.94); border:1px solid rgba(150,255,220,.32); border-radius:30px; padding:12px 14px 14px; font-size:14px; color:var(--ink);
  box-shadow:0 0 0 1px rgba(255,95,210,.18), 0 0 34px rgba(255,95,210,.28), 0 14px 34px rgba(0,0,0,.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cardhd { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; padding-left:4px; }
.card .x { width:44px; min-width:44px; padding:0; font-size:22px; line-height:42px; border-radius:50%; }
.cardrow { display:flex; align-items:center; gap:10px; }
.swbtn { position:relative; display:inline-block; width:44px; height:44px; flex:none; cursor:pointer; }
.bigsw { display:block; width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.75); box-shadow:0 0 14px rgba(255,255,255,.25); }
.swbtn input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
.swbtn:focus-within .bigsw { outline:3px solid var(--cyan); outline-offset:2px; }
.gen { flex:1; min-width:0; font-size:13px; color:var(--mute); overflow-wrap:anywhere; }
.dirbtn { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:48px; padding:4px 8px; line-height:1; flex:none; border-radius:22px; }
.dirbtn svg rect { rx:9px; }
.dirbtn[aria-expanded=true] { border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 16px rgba(98,242,230,.4); }
.dirstate { font-size:11px; color:var(--mute); margin-top:3px; }
.quick { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.qsw { width:44px; min-height:44px; height:44px; padding:0; border-radius:50%; border:2px solid rgba(255,255,255,.7); box-shadow:0 0 10px rgba(255,255,255,.2); }
.qsw:hover:not(:disabled) { box-shadow:0 0 16px rgba(255,95,210,.6); }
.cardwarn { margin:10px 0 0; padding:9px 14px; border-radius:22px; background:rgba(255,210,122,.14); border:1px solid rgba(255,210,122,.5); color:#ffe2a6; font-size:13px; }
.dial { margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
.dialface { position:relative; width:206px; height:206px; margin:0 auto; border-radius:50%; border:1px solid rgba(150,255,220,.35);
  background: radial-gradient(circle, rgba(98,242,230,.10) 0 30%, rgba(14,34,32,.9) 31% 60%, rgba(155,123,255,.18) 61% 100%);
  box-shadow: 0 0 26px rgba(98,242,230,.25) inset, 0 0 22px rgba(155,123,255,.25); touch-action:none; cursor:grab; }
.dialface:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.needle { position:absolute; left:50%; top:50%; width:126px; height:4px; border-radius:4px; background:var(--grad); box-shadow:0 0 12px rgba(255,95,210,.7); transform:translate(-50%,-50%) rotate(45deg); pointer-events:none; }
.hub { position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#fff; box-shadow:0 0 10px var(--cyan); pointer-events:none; }
/* preset bubbles: JS centres a 28×20 box; keep that box and extend the tap area to 44×44 invisibly */
.dpre { position:absolute; width:28px; height:20px; min-height:0; padding:0; font-size:10px; font-weight:700; border-radius:999px; background:rgba(10,28,26,.92); color:var(--ink); border:1px solid rgba(150,255,220,.4); }
.dpre::before { content:""; position:absolute; left:-8px; top:-12px; width:44px; height:44px; border-radius:50%; }
.dpre.on, #dirauto.on { background:var(--grad); color:#0b1220; border-color:transparent; box-shadow:0 0 14px rgba(255,95,210,.6); }
.dialrow { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-top:10px; }
.dialrow button { padding:8px 14px; font-size:14px; } #dirval { font-weight:800; min-width:48px; text-align:center; color:#ffd3f2; }
.dial .muted { margin:8px 0 0; font-size:13px; }
@media (max-width: 600px) {
  .top { padding:20px 16px 6px; } .top h1 { font-size:24px; } .top h1 span { display:block; margin-top:4px; }
  .steps { padding:10px 16px 14px; gap:8px; } .steps button { padding:10px 14px; }
  main { padding:0 12px 20px; } .panel { padding:16px; border-radius:28px; } .foot { padding:8px 16px 22px; }
  .drop { border-radius:32px; padding:24px 14px; }
  table.sections { font-size:13px; } .sections td, .sections th { padding-left:3px; padding-right:3px; } .sections td:first-child { padding-left:8px; } .sections td:last-child { padding-right:6px; }
  .sections select { padding:4px 4px; } .sections input[type=number] { width:60px; padding:4px 2px 4px 9px; }
  .card { position:static; width:auto; margin-top:12px; } .dialface { width:220px; height:220px; } .dpre { width:30px; height:24px; } .dpre::before { left:-7px; top:-10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { animation:none; } body::before, body::after { animation:none; }
  .spin { animation-duration:2.4s; }
  button, .drop, .sections td { transition:none; } button:active:not(:disabled) { transform:none; }
}
/* round bubble checkboxes (native input kept, only its look changes) */
.chk input[type=checkbox] { -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%; border:2px solid rgba(150,255,220,.6); background:rgba(6,20,20,.6); display:inline-grid; place-content:center; cursor:pointer; }
.chk input[type=checkbox]::before { content:""; width:12px; height:12px; border-radius:50%; transform:scale(0); background:var(--grad); box-shadow:0 0 10px rgba(255,95,210,.8); }
.chk input[type=checkbox]:checked { border-color:var(--magenta); }
.chk input[type=checkbox]:checked::before { transform:scale(1); }
/* mouse/trackpad (any non-touch pointer) on wider screens: keep the floating card at its original compact footprint
   so it covers no more of the design than before; touch screens and phones keep the 44px bubbles above */
@media (min-width: 601px) and (not (pointer: coarse)) {
  .card { width:236px; padding:8px 10px 10px; border-radius:24px; }
  .cardhd { margin-bottom:6px; }
  .card .x { width:32px; min-width:32px; min-height:32px; height:32px; line-height:30px; font-size:18px; }
  .swbtn, .bigsw { width:34px; height:34px; }
  .dirbtn { min-height:34px; min-width:40px; padding:3px 6px; border-radius:18px; }
  .quick { gap:5px; margin-top:8px; }
  .qsw { width:26px; height:26px; min-height:26px; }
  .card .dialrow button { min-height:36px; padding:6px 12px; }
  .dialface { width:190px; height:190px; }
  .needle { width:116px; }
}
/* 2026-10-09: no built-in designs; empty state asks for the visitor's own upload (Canon picker archived in _archived-vudu-designs/) */
.empty { margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--acc); border-radius: 14px; }
.empty p { margin: 0 0 4px; }
.empty .emptyhd { font-size: 1.05em; }
/* wiring 2026-10-04: back link to vudu.work/create + keyboard focus on section rows */
.backnav { margin:0 0 8px; }
.back { color:var(--leaf); font-weight:600; font-size:14px; text-decoration:none; display:inline-block; min-height:44px; line-height:44px; }
.back:hover, .back:focus-visible { color:var(--magenta); text-decoration:underline; outline:none; }
#rows tr:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }

/* Store link 2026-10-08: navy / teal / amethyst crystal pill, no neon glow */
.backnav { display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; }
.back.storelink { color:#e9e4ff; padding:0 16px; border-radius:999px; border:1px solid transparent; line-height:42px; min-height:44px; background:linear-gradient(135deg,#0d1530,#1a1440) padding-box, linear-gradient(90deg,#3fc7d6,#9b7bff) border-box; }
.back.storelink:hover, .back.storelink:focus-visible { color:#ffffff; text-decoration:none; background:linear-gradient(135deg,#12204a,#241a58) padding-box, linear-gradient(90deg,#3fc7d6,#9b7bff) border-box; outline:2px solid #3fc7d6; outline-offset:2px; }
.foot .footstore { display:inline-block; margin-top:10px; color:#e9e4ff; font-weight:600; text-decoration:none; padding:8px 16px; border-radius:999px; border:1px solid transparent; min-height:44px; line-height:26px; background:linear-gradient(135deg,#0d1530,#1a1440) padding-box, linear-gradient(90deg,#3fc7d6,#9b7bff) border-box; }
.foot .footstore:hover, .foot .footstore:focus-visible { color:#fff; outline:2px solid #3fc7d6; outline-offset:2px; }
.foot .footlink { color:var(--water); }

/* VUDU WULF header art (world-visuals 2026-10-09) */
.vw-hero { display:block; max-width:1100px; margin:10px 0 14px; }
.vw-hero img { display:block; width:100%; height:auto; border-radius:14px; }
@media (max-width:640px) { .vw-hero { max-width:420px; margin:8px auto 12px; } }
/* ===== Hoop Dream fix 2026-10-30: no green, no glow, centred 960 column, consistent borders ===== */
:root{--night:#07060B;--dusk:#15121F;--moss:#5B5BF0;--fern:#2EC4C9;--leaf:#F6D9C4;--ink:#EDE6D6;--mute:#b9b0c4;--line:rgba(91,91,240,.45);--acc:#2EC4C9;--acc2:#F28AC0;--grad:linear-gradient(120deg,#2EC4C9,#9B5DE5 52%,#F28AC0)}
body{background:radial-gradient(900px 600px at 85% -10%,rgba(91,91,240,.14),transparent 60%),radial-gradient(900px 600px at -5% 105%,rgba(155,93,229,.2),transparent 60%),#07060B!important}
body::before,body::after{display:none!important}
*{box-shadow:none!important;text-shadow:none!important}
.opts select option,.sections select option{background:#15121F}
.stage{background:#f3f2f7}
.checker{background-color:#f4f3f8;background-image:linear-gradient(45deg,#dcd9e6 25%,transparent 25%,transparent 75%,#dcd9e6 75%),linear-gradient(45deg,#dcd9e6 25%,transparent 25%,transparent 75%,#dcd9e6 75%)}
body>header,body>nav,main,body>footer,.foot,.top,.steps{max-width:960px;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
main{padding-bottom:96px!important}
.opts select,.opts input[type=number],.sections select,.sections input[type=number]{border:1px solid rgba(91,91,240,.55)!important;border-radius:12px!important;padding:.5rem .7rem;min-height:44px}
.sections input[type=color],.sw{border:1px solid #EDE6D6!important;border-radius:10px}
.foot{border-top:1px solid rgba(91,91,240,.35)}
.foot a{display:inline-flex;align-items:center;min-height:44px}
input[type=range]::-webkit-slider-thumb{background:#F28AC0!important;border:2px solid #EDE6D6}
#backlink{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(91,91,240,.55);color:#EDE6D6}
.backnav{display:flex;flex-wrap:wrap;gap:8px}
.panel{background:linear-gradient(150deg,rgba(21,18,31,.92),rgba(42,26,63,.85) 60%,rgba(58,24,56,.8))!important;border-color:rgba(91,91,240,.45)!important}
.sections select{min-width:96px;max-width:120px;padding:.4rem .4rem}
@media (min-width:821px){#s3 .grid2{grid-template-columns:minmax(0,4fr) minmax(0,5fr)}}
.sections td:nth-child(3){min-width:104px}
.sections{table-layout:auto;width:100%}
@media (max-width:600px){
  .sections thead{display:none}
  .sections,.sections tbody{display:block;width:100%}
  .sections tr{display:block;border:1px solid rgba(91,91,240,.45);border-radius:16px;padding:.6rem .8rem;margin-bottom:.6rem}
  .sections td{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem .75rem;padding:.3rem 0!important;background:transparent!important;border:0!important;min-width:0!important}
  .sections td::before{content:attr(data-label);color:var(--mute);font-size:.8rem}
  .sections td[data-label="#"]::before{content:"Section"}
  .sections td .hint{flex-basis:100%;text-align:right}
  .sections td select,.sections td input[type=number]{max-width:none;flex:0 1 60%}
}