:root { color-scheme:dark; font-family:system-ui,sans-serif; color:#f7f5ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; font-family:system-ui,sans-serif; background:transparent; }
:root.is-lit { background:#000000; overscroll-behavior:none; }
body.is-lit { overflow:hidden; background:#000000; overscroll-behavior:none; }
body.is-lit > header, body.is-lit > footer, body.is-lit::before, body.is-lit::after { display:none; }
[hidden] { display:none !important; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; min-height:48px; padding:10px 16px; border:1px solid #46527a; border-radius:14px; background:#141a37; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible,a:focus-visible { outline:3px solid #65e6ff; outline-offset:4px; }
a { color:#b8b4ff; text-underline-offset:4px; }
#light-home { width:100%; margin:0 auto; }
.light-page .page-header { font-family:'Noto Serif JP',serif; }
.light-page .page-header p { font-size:1rem; color:var(--text-light); }
.light-controls .container { max-width:420px; padding:0 24px; }
.light-controls p { margin-bottom:20px; }
.light-controls .light-note { margin-bottom:0; }
p { line-height:1.8; font-size:14px; color:#c7ccef; }
.light-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:24px 0; }
.light-choice { min-width:0; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:10px; padding:14px 6px; overflow-wrap:anywhere; font-size:13px; }
.light-choice[aria-pressed=true] { border-color:#c5c3ff; box-shadow:0 0 0 1px #c5c3ff; background:#282c50; }
.light-swatch { width:28px; height:28px; border-radius:50%; flex-shrink:0; }
.light-primary { border:0; background:#c5c3ff; color:#111432; width:100%; border-radius:28px; }
.light-note,#light-status { font-size:12px; }
/* Header geometry and navigation colors come from the shared style.css. */
#header { font-family:'Noto Serif JP',serif; }
#header a { color:inherit; text-decoration:none; }
#header .nav-links a:hover { color:var(--secondary-color); }
#header .mobile-menu-btn { min-width:44px; min-height:44px; padding:8px; border:0; border-radius:0; background:transparent; }
#header .mobile-menu-btn span { display:block; width:22px; height:2px; margin:4px auto; background:currentColor; }
#header .mobile-menu-btn[aria-expanded=true] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
#header .mobile-menu-btn[aria-expanded=true] span:nth-child(2) { opacity:0; }
#header .mobile-menu-btn[aria-expanded=true] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
/* Keep the fixed viewport container black for browsers that sample its edge color.
   The absolute inner surface provides the changing light without changing that hint. */
#light-stage { position:fixed; inset:0; background:#000000; touch-action:manipulation; }
#light-surface { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; background:#000000; }
#light-panel { position:absolute; bottom:0; left:0; right:0; max-height:90dvh; overflow-y:auto; border-radius:22px 22px 0 0; padding:20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); background:#0d122d; box-shadow:0 -10px 40px #0003; }
#light-panel > .light-choices,#light-panel > p { max-width:480px; margin-left:auto; margin-right:auto; }
.light-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:480px; margin:auto; }
h2 { font-size:16px; font-weight:500; margin:0; }
#light-close,#light-stop { background:transparent; }
#light-wake-status { font-size:12px; }
#light-stop { display:block; margin:auto; }
/* Match the shared site's footer while keeping its layout out of the light stage. */
footer { padding:30px 0 max(30px,env(safe-area-inset-bottom)); text-align:center; font-family:'Noto Serif JP',serif; font-size:.75rem; opacity:.5; }
footer .container { max-width:1000px; margin:0 auto; padding:0 20px; }
footer p { margin:0; font-size:inherit; color:inherit; }
footer .footer-home { margin-bottom:12px; }
footer .footer-home a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:340px) { .light-controls .container { padding-left:16px; padding-right:16px; } .light-choices { gap:8px; } }