:root{
  --bg:#fff7fb;--bg2:#fff1f6;--card:#ffffff;--text:#2f2941;--muted:#756d87;--line:#f0dbe7;
  --primary:#ff7faa;--primary-2:#ffb74d;--accent:#7bdac8;--shadow:0 16px 40px rgba(118,67,98,.12);
  --radius:24px;--wheel-border:#fff;--success:#ff8b5e;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:radial-gradient(circle at top left,var(--bg),var(--bg2));color:var(--text)}
body{min-height:100vh}
a{text-decoration:none;color:inherit} button,input,textarea{font:inherit}
button{cursor:pointer;border:none;background:none} img{display:block;max-width:100%}
.app-shell{max-width:1240px;margin:0 auto;padding:18px 18px 32px}
.topbar,.brand,.top-actions,.hero-card,.workspace,.card-head,.label-row,.wheel-actions,.section-head,.library-actions,.editor-actions,.history-head,footer,.checkline,.top-actions button,.template-card,.tool-card,.library-card .top{display:flex;align-items:center}
.topbar{justify-content:space-between;gap:16px;margin-bottom:18px}
.brand{gap:12px}.brand img{width:52px;height:52px;border-radius:16px;box-shadow:0 10px 24px rgba(255,127,170,.28)}
.brand strong{display:block;font-size:1.1rem}.brand small{display:block;color:var(--muted)}
.top-actions{gap:10px;flex-wrap:wrap}
.ghost,.primary-lite,.spin-button,.small-number,.chip,input,textarea,.heart-button{border-radius:16px}
.ghost,.primary-lite{padding:10px 14px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 20px rgba(255,255,255,.6)}
.small{padding:10px 12px;font-size:.95rem}
.hero-card{justify-content:space-between;gap:24px;background:linear-gradient(135deg,#fffdfa,#fff6fb 48%,#fff3ef);border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.hero-card h1{font-size:clamp(1.7rem,3vw,2.8rem);margin:8px 0 10px;line-height:1.15}.hero-card p{margin:0;color:var(--muted);font-size:1.06rem}
.eyebrow,.section-overline{font-size:.78rem;letter-spacing:.12em;font-weight:800;color:#d46b93;text-transform:uppercase}
.hero-mascot-card{position:relative;min-width:220px;width:220px;height:180px;display:grid;place-items:center}.hero-glow{position:absolute;inset:12px;background:radial-gradient(circle,#fff4a6 0,#ffdce9 45%,rgba(255,255,255,0) 72%);filter:blur(6px)}
.mascot svg{width:100%;height:100%;filter:drop-shadow(0 12px 26px rgba(255,138,180,.2))}.mascot-hero{width:170px;height:170px;position:relative}
.workspace{align-items:flex-start;gap:18px;margin-bottom:18px}.wheel-panel{flex:1.08}.editor-panel{flex:.92}
.card,.soft-card{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{padding:18px}.soft-card{padding:18px;margin-bottom:18px}
.card-head{justify-content:space-between;gap:12px;margin-bottom:14px}.card-head h2{margin:4px 0 0;font-size:1.35rem}
.heart-button{width:42px;height:42px;border:1px solid var(--line);background:#fff;font-size:1.3rem;box-shadow:0 8px 18px rgba(255,127,170,.12)}
.autosave{color:#ff70a0;font-weight:700;font-size:.92rem}.hint,.muted,.counter{color:var(--muted);font-size:.9rem}
label{display:block;font-weight:700;margin:10px 0 8px}.label-row{justify-content:space-between;gap:12px}
input[type="text"],textarea,.small-number{width:100%;border:1px solid var(--line);padding:14px;background:#fff;outline:none;color:var(--text)}
input[type="text"]:focus,textarea:focus,.small-number:focus{border-color:#ff9dbd;box-shadow:0 0 0 4px rgba(255,127,170,.12)}
textarea{resize:vertical;min-height:176px;line-height:1.45}
.small-number{margin-top:10px;padding:10px 12px;max-width:140px}
.field-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:10px;align-items:start}
input[type="range"]{width:100%;accent-color:#ff85ad}.option-block{background:#fff7fb;border:1px dashed #f0c6d8;border-radius:18px;padding:12px}
.checkline{gap:10px;align-items:flex-start;margin:8px 0;font-size:.96rem}.checkline input{margin-top:4px}
.personalize{margin-top:14px;padding-top:8px;border-top:1px solid #f6e6ee}.personalize h3{margin:0 0 12px}.chip-row{display:flex;gap:10px;flex-wrap:wrap}.chip{padding:10px 12px;background:#fff;border:1px solid var(--line);font-weight:700}.chip.active{background:linear-gradient(135deg,#fff0f6,#fffbe9);border-color:#ffb6cd;box-shadow:0 10px 20px rgba(255,127,170,.12)}
.editor-actions{gap:10px;flex-wrap:wrap;margin-top:16px}.primary-lite{background:linear-gradient(135deg,#ff8db4,#ffbf70);color:#fff;font-weight:800}
.history-head{justify-content:space-between;margin-top:18px;margin-bottom:10px}.history-list{display:grid;gap:10px}.history-item{padding:12px 14px;background:#fff9fc;border:1px solid var(--line);border-radius:16px}.history-item .time{font-size:.82rem;color:var(--muted);display:block;margin-top:4px}
.wheel-stage{position:relative;display:grid;place-items:center;min-height:540px;background:radial-gradient(circle at top,#fffefd 0,#fff4f8 55%,#ffedf3 100%);border:1px solid var(--line);border-radius:24px;padding:20px;overflow:hidden}
.theme-candy{--ring1:#ffd6e7;--ring2:#fff4bd;--centerBg:#fffafc}.theme-peach{--ring1:#ffd9c8;--ring2:#ffe8ba;--centerBg:#fffaf5}.theme-starlight{--ring1:#e5d9ff;--ring2:#fff2a9;--centerBg:#fffafd}.theme-mint{--ring1:#d2f4ee;--ring2:#fff4bf;--centerBg:#f8fffd}
.pointer{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:0;border-bottom:34px solid #ff7faa;z-index:4;filter:drop-shadow(0 6px 8px rgba(255,127,170,.3))}
.orbit{position:absolute;border:1px dashed rgba(255,255,255,.75);border-radius:50%;pointer-events:none}.orbit-a{inset:48px}.orbit-b{inset:80px;border-style:dotted}
.wheel-rotate{position:relative;width:min(100%,520px);aspect-ratio:1/1;transition:transform 3s cubic-bezier(.18,.89,.18,1);will-change:transform}
#wheelCanvas{width:100%;height:100%;display:block;filter:drop-shadow(0 20px 36px rgba(136,77,112,.15))}
.wheel-center{position:absolute;inset:50%;transform:translate(-50%,-50%);width:32%;height:32%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,var(--centerBg));border:10px solid rgba(255,255,255,.95);box-shadow:0 14px 28px rgba(255,151,180,.18), inset 0 0 0 1px rgba(255,127,170,.12)}
.mascot-center{width:84%;height:84%;animation:mascotFloat 2.4s ease-in-out infinite}
@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.spin-button{width:100%;margin-top:16px;padding:16px 18px;background:linear-gradient(135deg,#ff8eb5,#ffb85e);color:#fff;font-weight:900;font-size:1.06rem;box-shadow:0 14px 28px rgba(255,142,181,.28)}
.spin-button:disabled{opacity:.65;cursor:default}.result-box{margin-top:14px;min-height:72px;border-radius:18px;padding:18px;background:#fff8fb;border:1px solid var(--line);font-weight:800;font-size:1.08rem;text-align:center;display:grid;place-items:center}
.result-box strong{display:block;font-size:1.4rem;color:#ff6d9c;margin-top:4px}
.wheel-actions{justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.section-head{justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{margin:.25rem 0 0}.template-grid,.library-grid,.other-tools{display:grid;gap:12px}
.template-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.library-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.other-tools{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.template-card,.tool-card,.library-card{align-items:flex-start;gap:12px;padding:14px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 20px rgba(255,127,170,.08)}
.template-icon,.tool-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(135deg,#fff0f6,#fff8dd)}
.template-card h3,.library-card h3,.tool-card h3{margin:0 0 4px;font-size:1rem}.template-card p,.library-card p,.tool-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.4}
.library-card .top{justify-content:space-between;gap:8px}.library-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.tiny{padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:.9rem}
footer{justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 6px 6px;color:var(--muted);font-size:.92rem}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(18px);background:#2e263f;color:#fff;padding:12px 16px;border-radius:999px;box-shadow:0 12px 30px rgba(32,23,46,.22);opacity:0;pointer-events:none;transition:.24s;z-index:40}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-backdrop{position:fixed;inset:0;background:rgba(26,19,35,.42);display:grid;place-items:center;padding:20px;z-index:60}.modal-card{max-width:520px;width:min(100%,520px);background:#fff;border-radius:22px;box-shadow:0 26px 50px rgba(18,12,25,.26);padding:18px;border:1px solid var(--line)}.modal-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px}.icon-only{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:1.3rem}
.confetti-layer,.streamer-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti{position:absolute;width:10px;height:16px;border-radius:3px;animation:confettiFall 1.8s ease-out forwards}.streamer{position:absolute;width:8px;height:90px;border-radius:999px;opacity:0;transform-origin:top center;animation:streamerFall 2.2s ease-out forwards}.party-popper{position:absolute;top:24%;width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:40px solid #ffa95b}.party-popper.left{left:18%;transform:rotate(-35deg)}.party-popper.right{right:18%;transform:rotate(35deg)}
@keyframes confettiFall{0%{opacity:0;transform:translate3d(0,-24px,0) rotate(0)}10%{opacity:1}100%{opacity:1;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot))}}
@keyframes streamerFall{0%{opacity:0;transform:translate3d(0,-24px,0) rotate(0deg)}12%{opacity:1}100%{opacity:1;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot))}}
@keyframes popperFlash{0%{opacity:.2}20%{opacity:1}100%{opacity:0}}
@media (max-width:980px){.workspace{flex-direction:column}.field-grid{grid-template-columns:1fr}.hero-card{flex-direction:column;align-items:flex-start}.hero-mascot-card{align-self:center}}
@media (max-width:640px){.app-shell{padding:12px}.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%}.top-actions .ghost{flex:1}.wheel-stage{min-height:420px;padding:14px}.wheel-rotate{width:min(100%,360px)}.hero-card{padding:18px}.template-grid,.library-grid,.other-tools{grid-template-columns:1fr}.result-box{font-size:1rem}}

/* V3 — a hidden dialog must remain hidden even against component display rules. */
[hidden] { display: none !important; }
/* Crisp, original mascot illustration, always upright while the wheel rotates. */
.mascot img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(147,96,126,.14)); }
.mascot-hero { width:184px; height:184px; }
.wheel-stage { isolation:isolate; }
.wheel-center { z-index:3; width:29%; height:29%; border-width:7px; background:radial-gradient(circle at 34% 24%,#fff,#fff8f9 75%,#ffe8ee); box-shadow:0 8px 32px rgba(156,98,132,.17), inset 0 0 0 2px #fff; }
.mascot-center { width:96%; height:96%; animation:mascotFloat 3.4s ease-in-out infinite; }
.mascot-center img { filter:drop-shadow(0 4px 6px rgba(163,116,132,.13)); }
.modal-backdrop:not([hidden]) { display:grid; }
.modal-card:focus { outline:none; }
@media(max-width:640px) { .mascot-hero { width:166px; height:166px; } .wheel-center{width:30%;height:30%;border-width:5px;} }
@media(prefers-reduced-motion:reduce) { .mascot-center{animation:none;} }
/* Mobile first-use focus: do not let the banner push the actual wheel off-screen. */
@media(max-width:640px) {
 .hero-card { flex-direction:row; align-items:center; gap:8px; padding:14px 12px; }
 .hero-card > div:first-child { min-width:0; flex:1; }
 .hero-card h1 { font-size:1.35rem; line-height:1.3; margin:4px 0 6px; }
 .hero-card p { font-size:.77rem; line-height:1.4; }
 .hero-card .eyebrow { font-size:.62rem; letter-spacing:.045em; }
 .hero-mascot-card { width:96px; min-width:96px; height:110px; flex-shrink:0; align-self:center; }
 .mascot-hero { width:100px; height:100px; }
 .hero-glow { inset:6px; }
}

/* V4: viewport-wide celebration overlay. It does not block clicks, links, or scrolling. */
#celebrationViewport { position:fixed; inset:0; width:100vw; height:100vh; z-index:35; pointer-events:none; overflow:hidden; display:none; }
.install-guide { padding:6px 4px 16px; line-height:1.7; }
.install-guide p { margin:10px 0; }
.install-detail { padding:10px 12px; background:#fff6fb; border:1px solid var(--line); border-radius:12px; font-size:.9rem; }
.install-guide button { margin-top:12px; }
/* The mascot stays part of the brand; adults can use calm / formal layouts. */
body[data-visual-mode="soft"] { --bg:#f8f9ff; --bg2:#f5f8fc; --primary:#a29cc5; --primary-2:#8cb8ca; --shadow:0 12px 30px rgba(78,85,109,.075); }
body[data-visual-mode="soft"] .hero-card { background:linear-gradient(135deg,#ffffff,#f4f7fd); }
body[data-visual-mode="soft"] .mascot-hero,body[data-visual-mode="soft"] .mascot-center { opacity:.83; filter:saturate(.78); }
body[data-visual-mode="soft"] .wheel-stage { background:radial-gradient(circle at top,#fff,#f7f7ff); }
body[data-visual-mode="soft"] .spin-button,body[data-visual-mode="soft"] .primary-lite { background:linear-gradient(120deg,#a29cc5,#7dbbbd); box-shadow:0 10px 24px rgba(99,130,157,.19); }
body[data-visual-mode="simple"] { --bg:#f5f7fa; --bg2:#eef1f5; --primary:#526d91; --primary-2:#526d91; --text:#27384c; --muted:#627084; --line:#dfe5ed; --shadow:0 9px 22px rgba(54,70,88,.055); }
body[data-visual-mode="simple"] .hero-card { background:#fff; min-height:100px; }
body[data-visual-mode="simple"] .hero-card h1 { font-size:clamp(1.3rem,2.1vw,1.9rem); }
body[data-visual-mode="simple"] .hero-mascot-card,body[data-visual-mode="simple"] .wheel-center .mascot,body[data-visual-mode="simple"] .hero-glow { display:none; }
body[data-visual-mode="simple"] .wheel-center { width:19%;height:19%;border:6px solid #fff; background:radial-gradient(circle,#fff,#edf2f7); }
body[data-visual-mode="simple"] .wheel-center::after { content:'GO'; font-weight:900;font-size:clamp(15px,2vw,27px);color:#536b84; }
body[data-visual-mode="simple"] .wheel-stage { background:#fafbfd; }
body[data-visual-mode="simple"] .orbit { opacity:.12; }
body[data-visual-mode="simple"] .spin-button,body[data-visual-mode="simple"] .primary-lite { background:#506a88;box-shadow:none; }
body[data-visual-mode="simple"] .pointer { border-bottom-color:#53708c; }
body[data-visual-mode="simple"] .autosave { color:#536b84; }
@media(prefers-reduced-motion:reduce) { #celebrationViewport { opacity:.6; } }