@property --acc{syntax:'<color>';inherits:true;initial-value:#ff9ec4}
:root{--acc:#ff9ec4;transition:--acc .8s ease;--pink:var(--acc);--rose:color-mix(in srgb,var(--acc) 70%,#d6336c);--lav:color-mix(in srgb,var(--acc) 55%,#b9a4ff);--sky:color-mix(in srgb,var(--acc) 45%,#8fd3ff);--bd:color-mix(in srgb,var(--acc) 32%,#fff);--bg:color-mix(in srgb,var(--acc) 9%,#fffafc)}
html[data-mode=light]{--ink:#3a2432;--mut:#8b6a7c;--card:#ffffffcc}
html[data-mode=dark]{--ink:#f5eefa;--mut:#b9a9c9;--card:#241c2bcc;--bg:color-mix(in srgb,var(--acc) 9%,#15111a);--bd:color-mix(in srgb,var(--acc) 35%,#2a2033)}
body,.nav,.card,.btn{transition:background-color .7s,color .5s,border-color .7s}
.wash{position:fixed;inset:0;z-index:5;pointer-events:none;background:var(--acc);opacity:0;clip-path:circle(0 at var(--x) var(--y))}
.wash.go{animation:wash .9s ease-out}
@keyframes wash{0%{opacity:.5;clip-path:circle(0 at var(--x) var(--y))}80%{opacity:.25}100%{opacity:0;clip-path:circle(150vmax at var(--x) var(--y))}}
#lab{padding-top:30px}
.lab{display:grid;gap:18px}
.ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
#sw{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
#sw button{width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 4px 14px color-mix(in srgb,var(--c) 60%,transparent);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#sw button:hover{transform:scale(1.18) rotate(-8deg)}
#sw button.on{transform:scale(1.22);outline:3px solid var(--ink);outline-offset:2px}
.pick{display:inline-flex;gap:8px;align-items:center;background:var(--card);border:2px solid var(--bd);border-radius:99px;padding:4px 14px;cursor:pointer}
.pick input{width:30px;height:30px;border:0;padding:0;background:none;cursor:pointer}
#rnd,#cp{border:2px solid var(--bd);background:var(--card);color:var(--ink);border-radius:99px;padding:6px 14px}
#cmd{background:var(--card);border:2px dashed var(--pink);border-radius:12px;padding:6px 12px;font-size:.9rem}
.dc{background:#313338;color:#dbdee1;border-radius:24px;padding:16px;box-shadow:0 26px 70px color-mix(in srgb,var(--acc) 45%,transparent);max-width:640px;margin:0 auto;width:100%}
.dc .tabs button{background:#404249;color:#dbdee1}.dc .tabs button.on{background:var(--acc);color:#1b1218}
.who{display:flex;gap:10px;align-items:center;margin:4px 0 8px;font-weight:600;color:#fff}
.who i{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--lav));display:grid;place-items:center;font-style:normal}
.who small{background:#5865f2;border-radius:4px;padding:0 5px;font-size:.65rem}
.emb{border-left:5px solid var(--acc);background:#2b2d31;border-radius:6px 14px 14px 6px;padding:12px 14px;animation:pop .45s cubic-bezier(.2,1.4,.4,1);min-height:210px}
.emb h3{color:#fff;margin:0 0 6px}.emb .row{color:#b5bac1}
.emb .bar b{color:var(--acc)}
.fl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;font-size:.85rem}.fl div{color:#b5bac1}.fl b{display:block;color:#fff}
.emb .btns span{background:#4e5058;color:#fff}.emb .btns span.p{background:var(--acc);color:#1b1218;font-weight:600}
.hint{text-align:center;color:var(--mut)}
@media(max-width:800px){.fl{grid-template-columns:repeat(2,1fr)}}
/* ---- image themes ---- */
#bgimg{position:fixed;inset:0;z-index:-2;overflow:hidden}
#bgimg div{position:absolute;inset:-4%;background:center/cover no-repeat;animation:bgin 1.1s ease both,kb 26s ease-in-out infinite alternate}
#bgimg div::after{content:"";position:absolute;inset:0;background:var(--veil)}
@keyframes bgin{from{opacity:0;filter:blur(18px)}}
@keyframes kb{to{transform:scale(1.07) translate(-1.5%,-1%)}}
html{--veil:transparent}
html[data-img][data-mode=light]{--veil:linear-gradient(#ffffff55,#ffffff88)}
html[data-img][data-mode=dark]{--veil:linear-gradient(#000000aa,#000000cc)}
html[data-img] .bg{opacity:.18}
html[data-img] .card,html[data-img] article,html[data-img] .pick{backdrop-filter:blur(10px)}
#petals.rise span{top:auto;bottom:-8vh;animation-name:rise}
@keyframes rise{to{transform:translate(-8vw,-115vh) rotate(-200deg)}}
.rays,.grain{position:fixed;inset:0;pointer-events:none;z-index:1;display:none}
.rays{background:repeating-conic-gradient(from 0deg at 88% 62%,#ffd27a55 0 6deg,transparent 6deg 18deg);mix-blend-mode:screen;animation:spin 60s linear infinite;transform-origin:88% 62%;opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
html[data-fx=sunset] .rays{display:block}
.grain{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:.35;animation:gr .5s steps(4) infinite;box-shadow:inset 0 0 22vmax #6a000099}
@keyframes gr{25%{background-position:40px 20px}50%{background-position:-30px 60px}75%{background-position:20px -40px}}
html[data-fx=horror] .grain{display:block}
html[data-fx=horror] h1{animation:flick 5s infinite,shine 6s linear infinite;text-shadow:2px 0 #ff000088,-2px 0 #00e5ff55}
@keyframes flick{0%,90%,100%{opacity:1}92%{opacity:.25}94%{opacity:1}96%{opacity:.4}}
#sw button{width:74px;height:auto;border-radius:18px;border:3px solid #fff;background:none;padding:0;box-shadow:0 4px 14px #0003;overflow:hidden;color:#fff}
#sw button i{display:block;height:64px;background:var(--t,var(--c)) center/cover}
#sw button small{display:block;padding:2px 0;font-size:.7rem;background:var(--c);color:#fff;text-shadow:0 1px 2px #0006;white-space:nowrap}
#sw{gap:12px}

/* Commands reference — collapsible category groups (native <details>, no JS needed) */
.cmdref{max-width:720px;margin:0 auto;display:grid;gap:10px}
.cmdgrp{background:var(--card);border:2px solid var(--bd);border-radius:16px;padding:4px 18px;overflow:hidden}
.cmdgrp summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;font-family:"Fredoka","Noto Sans Thai",sans-serif;display:flex;align-items:center;gap:8px}
.cmdgrp summary::-webkit-details-marker{display:none}
.cmdgrp summary::after{content:"›";margin-left:auto;transition:transform .25s;font-size:1.3rem;color:var(--mut)}
.cmdgrp[open] summary::after{transform:rotate(90deg)}
.cmdgrp dl{margin:0 0 14px;padding-top:6px;border-top:1px solid var(--bd);display:grid;gap:10px}
.cmdgrp dt{font-family:monospace;font-weight:700;color:var(--rose)}
.cmdgrp dd{margin:2px 0 0;color:var(--mut);font-size:.92rem}