/* STENO GLASS DESIGN V1 */
:root{--sg-text:#172b45;--sg-muted:#536780;--sg-panel:rgba(255,255,255,.74);
--sg-border:rgba(255,255,255,.85);--sg-input:rgba(255,255,255,.94)}
html.dark{--sg-text:#e5edf9;--sg-muted:#b5c5da;--sg-panel:rgba(22,37,59,.88);
--sg-border:rgba(162,188,220,.22);--sg-input:rgba(18,31,49,.97)}
body{
background:radial-gradient(ellipse at 12% 8%,#dcecf8 0,transparent 50%),
radial-gradient(ellipse at 88% 28%,#dcefe9 0,transparent 48%),#edf2f8!important;
color:var(--sg-text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;
background-attachment:fixed!important
}
html.dark body{background:radial-gradient(ellipse at 10% 0%,#183c50,transparent 55%),
radial-gradient(ellipse at 90% 30%,#243454,transparent 55%),#101b2b!important}
body .glass-card,body .glass-effect,body .nav-glass,body .stat-glass,
body .bg-white,body .sg-panel{
background:var(--sg-panel)!important;
border:1px solid var(--sg-border)!important;
box-shadow:0 12px 36px rgba(30,55,90,.08),inset 0 1px 0 rgba(255,255,255,.25)!important;
border-radius:18px;
}
body .glass-card,body .nav-glass,body .sg-panel{
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body .min-h-screen.bg-gray-50,body .min-h-screen.bg-gray-100{
background-color:transparent!important}
html.dark .bg-white{color:var(--sg-text)}
html.dark .text-gray-900,html.dark .text-gray-800,html.dark .text-gray-700{
color:var(--sg-text)!important}
html.dark .text-gray-600,html.dark .text-gray-500{color:var(--sg-muted)!important}
body textarea,body input:not([type=checkbox]):not([type=radio]):not([type=range]),
body select{background-color:var(--sg-input)!important;color:var(--sg-text);
border-color:rgba(119,145,176,.4)}
body textarea{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#steno-daily-canvas{opacity:.30!important}
#sg-theme{position:fixed;right:14px;bottom:80px;z-index:9994;padding:9px 14px;
border:1px solid var(--sg-border);border-radius:22px;background:var(--sg-panel);
color:var(--sg-text);font:13px system-ui;cursor:pointer;backdrop-filter:blur(12px)}
.sg-main{max-width:1180px;margin:auto;padding:26px 18px 70px;color:var(--sg-text)}
.sg-nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.sg-main a,.sg-entry a{color:#315ec2}
html.dark .sg-main a{color:#9bc3ff}
.sg-panel{padding:22px;margin:20px 0}
.sg-muted{color:var(--sg-muted);line-height:1.6}
.sg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.sg-stat{padding:18px;border:1px solid var(--sg-border);border-radius:14px;background:var(--sg-panel)}
.sg-stat strong{display:block;font-size:29px;margin-bottom:5px}
.sg-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.sg-day{min-height:84px;padding:10px 8px;border:1px solid rgba(127,150,177,.22);
border-radius:12px;text-decoration:none;color:var(--sg-text)!important;background:rgba(255,255,255,.15)}
.sg-day small{display:block;font-size:11px;margin-top:6px}
.sg-day.active{background:rgba(62,153,132,.18);border-color:rgba(52,135,115,.42)}
.sg-day.today{box-shadow:inset 0 0 0 2px #4d7ad1}
.sg-day.selected{outline:2px solid #3e8a80;outline-offset:1px}
.sg-day.outside{opacity:.4}
.sg-scroll{overflow-x:auto}
.sg-main table{border-collapse:collapse;width:100%;font-size:14px}
.sg-main th,.sg-main td{text-align:left;padding:12px 9px;border-bottom:1px solid rgba(127,150,177,.22)}
.sg-main h1{font-size:30px;margin:10px 0}.sg-main h2{font-size:21px;margin:0 0 16px}
.sg-main h3{font-size:17px;margin:24px 0 12px}
.sg-entry{max-width:1100px;margin:20px auto;padding:20px;text-align:center}
.sg-entry a{display:inline-block;padding:12px 20px;border-radius:12px;background:#315ec2;color:white!important;text-decoration:none}
@media(max-width:600px){.sg-panel{padding:14px}.sg-grid{gap:4px}.sg-day{padding:8px 4px;min-height:74px}.sg-day small{font-size:10px}.sg-main h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{#sg-theme,#steno-daily-canvas{display:none!important}}


/* STENO CONTRAST AND MOTION V2 */
html{color-scheme:light}
html.dark{color-scheme:dark}
html.dark{
 --sg-text:#eef4ff;
 --sg-muted:#bdcce0;
 --sg-panel:rgba(21,36,57,.94);
 --sg-input:#14253a;
 --sg-border:rgba(160,185,218,.28)
}
body{color:var(--sg-text)}
html.dark body{color:var(--sg-text)}
html.dark body :is(
 .bg-gray-50,.bg-gray-100,.bg-gray-200,
 .bg-slate-50,.bg-slate-100,.bg-slate-200,
 .bg-white,.glass-card,.glass-effect,.nav-glass,.stat-glass
){
 background-color:#1b2c43!important;
 background-image:none!important;
 color:#eef4ff;
}
html.dark body :is(.bg-blue-50,.bg-blue-100,.bg-indigo-50,.bg-indigo-100){
 background-color:#203852!important;background-image:none!important
}
html.dark body :is(.bg-green-50,.bg-green-100,.bg-teal-50,.bg-teal-100){
 background-color:#173e38!important;background-image:none!important
}
html.dark body :is(.bg-red-50,.bg-red-100,.bg-pink-50,.bg-pink-100){
 background-color:#4a2834!important;background-image:none!important
}
html.dark body :is(.bg-yellow-50,.bg-yellow-100,.bg-orange-50,.bg-orange-100){
 background-color:#443521!important;background-image:none!important
}
html.dark body :is(.bg-purple-50,.bg-purple-100){
 background-color:#35294d!important;background-image:none!important
}
html.dark body :is(
 .text-gray-900,.text-gray-800,.text-gray-700,.text-gray-600,
 .text-slate-900,.text-slate-800,.text-slate-700,.text-black
){color:#edf3ff!important}
html.dark body :is(.text-gray-500,.text-gray-400,.text-slate-500,.muted,.sg-muted){
 color:#bdcce0!important
}
html.dark body :is(.text-blue-600,.text-blue-700,.text-blue-800,.text-indigo-600,.text-indigo-700){
 color:#a8caff!important
}
html.dark body :is(.text-green-600,.text-green-700,.text-green-800,.text-teal-700){
 color:#8ee2b5!important
}
html.dark body :is(.text-red-600,.text-red-700,.text-red-800){
 color:#ffb4bc!important
}
html.dark body :is(.text-orange-600,.text-orange-700,.text-orange-800){
 color:#ffd093!important
}
html.dark body :is(.text-purple-600,.text-purple-700,.text-purple-800){
 color:#d9bdff!important
}
html.dark body :is(input,textarea,select,option){
 color:#eef4ff!important;background-color:#14253a!important;
 -webkit-text-fill-color:#eef4ff
}
html.dark body ::placeholder{color:#adbed4!important;opacity:1}

/* Standalone XP page panels and table. */
html.dark body.sg-xp-page :is(section,.card,.panel,.filters,.table-wrap,.stats){
 background:#1b2c43!important;color:#eef4ff!important;
 border-color:#40536f!important;background-image:none!important
}
html.dark body.sg-xp-page :is(table,thead,tbody,tr,th,td){
 background-color:transparent!important;color:#eef4ff!important
}
html.dark body.sg-xp-page :is(label,p,small,h1,h2,h3){
 color:#d7e4f6!important
}
html.dark body.sg-xp-page a{color:#aecfff}
html.dark body.sg-xp-page button{color:white!important;background:#315ec2!important}

/* History comparison tables and coloured stat cards. */
html.dark body.sg-history-page :is(th,td){color:#e6efff}
html.dark body.sg-history-page :is(.bg-blue-50,.bg-blue-100) :is(p,span,label){
 color:#b8d7ff!important
}
html.dark body.sg-history-page :is(.bg-green-50,.bg-green-100) :is(p,span,label){
 color:#a2ebc3!important
}
html.dark body.sg-history-page :is(.bg-red-50,.bg-red-100) :is(p,span,label){
 color:#ffc3c9!important
}
html.dark body.sg-history-page :is(.bg-gray-50,.bg-gray-100) :is(p,span,label){
 color:#e0eaff!important
}

/* Fixed-colour mistake exercise: maintain readable guide letters. */
html.dark #guide{background:#14253a!important}
html.dark #guide span{color:#91a4bf}
html.dark #guide .correct{color:#f0f5ff!important}
html.dark #guide .wrong{color:#ffb1bc!important;background:#532535!important}

/* Visible motion while retaining readable foreground text. */
#steno-daily-canvas{opacity:.34!important}
html.dark #steno-daily-canvas{opacity:.48!important}
@media(prefers-reduced-motion:reduce){
 #steno-daily-canvas{opacity:.22!important}
}