/* Decorative layers never receive input, obscure labels or affect document width. */
:root{--season-art:none;--season-spark:#ffd089}
:root[data-theme=halloween]{--season-art:url('halloween-v81.png');--season-spark:#efaa61}
:root[data-theme=christmas]{--season-art:url('christmas-v81.png');--season-spark:#fff1ce}
:root[data-theme=easter]{--season-art:url('easter-v81.png');--season-spark:#ffd0ca}
:root[data-theme=lunar-new-year]{--season-art:url('lunar-new-year-v81.png');--season-spark:#f4c566}
.hero-stage,.login-art,.contact-header,.site-header{position:relative}
.appearance-decoration{position:absolute;inset-inline-end:0;top:0;width:125px;height:125px;background:var(--season-art) center/contain no-repeat;pointer-events:none;user-select:none;z-index:1}
.hero-copy>.appearance-decoration{position:relative;top:auto;inset-inline-end:auto;width:215px;height:140px;margin-top:18px;z-index:1}
.login-art>.appearance-decoration{top:auto;bottom:8%;inset-inline-end:10%;width:240px;height:200px}
.site-header>.appearance-decoration,.contact-header>.appearance-decoration{inset-inline-end:200px;width:95px;height:70px}
.topbar{position:relative}
:root:not([data-theme=blue]):not([data-theme=red-black]) .topbar::after{content:'';position:absolute;inset-inline-end:240px;top:-8px;width:100px;height:80px;background:var(--season-art) center/contain no-repeat;pointer-events:none}
.appearance-particles{position:fixed;inset:80px 0 auto;height:300px;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.appearance-particles i{position:absolute;left:5%;top:-12px;width:4px;height:4px;border-radius:50%;background:var(--season-spark);opacity:0;animation:hrs-season-drift 12s linear infinite}
.appearance-particles i:nth-child(2){left:15%;animation-delay:-3s}.appearance-particles i:nth-child(3){left:28%;animation-delay:-8s}.appearance-particles i:nth-child(4){left:39%;animation-delay:-5s}.appearance-particles i:nth-child(5){left:48%;animation-delay:-11s}.appearance-particles i:nth-child(6){left:61%;animation-delay:-2s}.appearance-particles i:nth-child(7){left:70%;animation-delay:-7s}.appearance-particles i:nth-child(8){left:81%;animation-delay:-9s}.appearance-particles i:nth-child(9){left:90%;animation-delay:-1s}.appearance-particles i:nth-child(10){left:96%;animation-delay:-6s}
:root[data-theme=easter] .appearance-particles i{width:7px;height:4px;border-radius:70% 10%}
:root[data-theme=halloween] .appearance-particles i{animation-direction:reverse}
@keyframes hrs-season-drift{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}15%{opacity:.45}85%{opacity:.35}100%{opacity:0;transform:translate3d(22px,300px,0) rotate(100deg)}}
:root[data-effects=false] .appearance-particles{display:none}
.appearance-form{max-width:1000px}.appearance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0;border:0;padding:0}
.appearance-grid legend{font-size:15px;margin-bottom:12px;padding:0}
.appearance-option{position:relative;display:flex;flex-direction:column;border:2px solid var(--line);background:var(--white);border-radius:16px;overflow:hidden;cursor:pointer;gap:0}
.appearance-option:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.appearance-option:has(input:focus-visible){outline:3px solid var(--teal);outline-offset:3px}
.appearance-option input{position:absolute;top:13px;inset-inline-start:12px;z-index:1;width:18px;height:18px;accent-color:var(--teal)}
.appearance-swatch{display:flex;height:100px;align-items:center;justify-content:center;background:linear-gradient(120deg,#111b2b,#2457aa);color:#fff}
.appearance-swatch img{height:96px;width:160px;object-fit:contain}.appearance-swatch>span{font-size:22px;font-weight:700;letter-spacing:3px}
.appearance-option[data-choice=red-black] .appearance-swatch{background:linear-gradient(120deg,#141315,#811d28)}
.appearance-option[data-choice=halloween] .appearance-swatch{background:linear-gradient(120deg,#1b1714,#7d3516)}
.appearance-option[data-choice=christmas] .appearance-swatch{background:linear-gradient(120deg,#10281c,#28633f)}
.appearance-option[data-choice=easter] .appearance-swatch{background:linear-gradient(120deg,#eff9f5,#fbe7dd)}
.appearance-option[data-choice=lunar-new-year] .appearance-swatch{background:linear-gradient(120deg,#29100f,#9f2223)}
.appearance-option strong{padding:14px 16px 4px;color:var(--ink)}.appearance-option small{padding:0 16px 16px;color:var(--muted);line-height:1.5}
.appearance-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.appearance-info{color:var(--muted);line-height:1.6}.appearance-current{font-weight:600;color:var(--teal)}
@media(max-width:760px){.appearance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar::after{display:none}.hero-copy>.appearance-decoration{width:180px;height:120px;margin-top:10px}.site-header>.appearance-decoration,.contact-header>.appearance-decoration{display:none}}
@media(max-width:400px){.appearance-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.appearance-particles{display:none}.appearance-decoration{animation:none}}

:root[data-theme=songkran]{--season-art:url('songkran-v81.png');--season-spark:#bfeffa}
:root[data-theme=cinco-de-mayo]{--season-art:url('cinco-de-mayo-v81.png');--season-spark:#f5d273}
:root[data-theme=diwali]{--season-art:url('diwali-v81.png');--season-spark:#f7d38a}
.appearance-option[data-choice=songkran] .appearance-swatch{background:linear-gradient(120deg,#163542,#b5e9ed)}
.appearance-option[data-choice=cinco-de-mayo] .appearance-swatch{background:linear-gradient(120deg,#4d171d,#1d7170)}
.appearance-option[data-choice=diwali] .appearance-swatch{background:linear-gradient(120deg,#291c0f,#926b29)}
:root[data-theme=songkran] .appearance-particles i{width:4px;height:7px;border-radius:60% 60% 80% 80%}
:root[data-theme=cinco-de-mayo] .appearance-particles i{border-radius:0;background:#f4c767}
:root[data-theme=cinco-de-mayo] .appearance-particles i:nth-child(3n){background:#6ee0d1}
:root[data-theme=cinco-de-mayo] .appearance-particles i:nth-child(3n+1){background:#f39d9c}
:root[data-theme=diwali] .appearance-particles i{animation-direction:reverse;box-shadow:0 0 7px #f1b34a}