/* Dark: a near-black ground that takes a faint tint of the last bowl struck, and light ink on it. On with ?dark=1. */
html.dark{--bg:#0c0c0f;--ink:232,230,224;--glass:rgba(24,24,30,.5)}
html.dark,html.dark body{background:var(--bgc,#0c0c0f)}
/* after a strike: darker at the bottom right, lighter and more the bowl's color at the top left; the header and footer show the same fixed field */
html.dark body{background:linear-gradient(to top left,var(--bgb,#0c0c0f),var(--bgc,#0c0c0f) 55%,var(--bgt,#0c0c0f)) fixed}
html.dark .hd{background:none}
html.dark .hd::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top left,var(--bgb,#0c0c0f),var(--bgc,#0c0c0f) 55%,var(--bgt,#0c0c0f)) fixed;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
html.dark .glass{border-color:rgba(255,255,255,.08);box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
html.dark .card{background:rgba(16,16,20,.88)}
html.dark .fig,html.dark .about2 .aphoto{background:#1c1c22}
html.dark .cell{background:rgba(255,255,255,.025)}
html.dark .cell.wc{background:rgba(255,255,255,.045)}
html.dark svg.paths ellipse{stroke:rgba(255,255,255,.09)}
html.dark .sheet{background:rgba(18,18,22,.86)}
html.dark .bgc .side::before,html.dark .bgc .sheet::before{background:linear-gradient(rgba(12,12,15,.72),rgba(12,12,15,.62))}
/* the light and dark switch and the sound switch: one quiet line at the bottom right, on desktop and phones (IV, 2026-10-12) */
.mode{font-family:'League Spartan',sans-serif;font-weight:300;color:var(--dim);transition:color .6s}
.ctl{position:fixed;right:var(--P);bottom:16px;z-index:60;display:flex;align-items:center}
.ctl .row{display:flex;align-items:center}
.hint{position:fixed;left:calc(var(--P) + 1vw);bottom:31px;z-index:60;margin:0;font-family:'League Spartan',sans-serif;font-weight:300;font-size:12px;letter-spacing:.05em;line-height:14px;color:var(--dim);transition:opacity .6s;pointer-events:none}
body.reading .hint{opacity:0}
@media (max-width:900px){.hint{display:none}}
html .ctl .mode,html .ctl .snd{position:static;transform:none;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-size:13px;letter-spacing:.05em;line-height:1}
html .ctl .mode{gap:.4em}
html .ctl .snd::before{content:'';width:1px;height:11px;background:currentColor;opacity:.3;margin:0 14px}
.mode span{transition:color .6s}.mode span.on{color:var(--type);font-weight:400}
html,body{transition:background-color 1.2s}
/* phones (IV, 2026-10-12): the two switches at the bottom right of the opening screen, scrolling away with it */
@media (max-width:900px){.ctl{position:absolute;left:auto;right:12px;bottom:auto;top:calc(100svh - 48px - env(safe-area-inset-bottom))}}
/* the reading pages' own type (page.css) and the footer, in dark */
html.dark{--type-dim:rgba(232,230,224,.80);--type-faint:rgba(232,230,224,.36)}
html.dark #foot{background:linear-gradient(to top left,var(--bgb,#0c0c0f),var(--bgc,#0c0c0f) 55%,var(--bgt,#0c0c0f)) fixed}
/* light: warm quartz white, washed after each strike with a pale gradient of that bowl's color (IV, 2026-10-12) */
html:not(.dark),html:not(.dark) body{background:var(--bgc,#fbf9f6)}
html:not(.dark) body,html:not(.dark) #foot{background:linear-gradient(to top left,var(--bgb,#fbf9f6),var(--bgc,#fbf9f6) 55%,var(--bgt,#fbf9f6)) fixed}
html:not(.dark) .hd{background:none}
html:not(.dark) .hd::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top left,var(--bgb,#fbf9f6),var(--bgc,#fbf9f6) 55%,var(--bgt,#fbf9f6)) fixed;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
/* the headline takes the color of the last bowl struck, on both grounds */
.words .hl,.card h1{color:var(--hlc,var(--type))}
html.dark .pc input,html.dark .pc select,html.dark .pc textarea{color:var(--type);background:transparent}
html.dark .pc option{color:#222}