/* ==========================================================================
TAROT GOLD/BLACK LINER — theme stylesheet
Occult tarot-codex aesthetic: near-black violet ground, hairline gold
linework, double-framed cards, celestial ornaments, serif + mono type.
Fonts (add to ; the stylesheet itself is font-import-free):
CONTENTS
01 tokens + theme presets 06 links (.tlink) + scroll areas
02 base / background / stars 07 buttons, forms, tabs, panels
03 layout (.wrap, .spread) 08 tables, badges, messages
04 masthead + ornaments 09 search overlay
05 tarot cards (.tcard) 10 meteor beam, hint, motion
========================================================================== */
/* ---------- 01 · tokens + theme presets --------------------------------- */
:root{
--bg:#0c0b10;
--bg2:#100e16;
--gold:#c79a4f;
--gold-rgb:199,154,79;
--gold-bright:#e8cb8c;
--gold-line:#b08d4c;
--gold-dim:#7a6334;
--gold-numeral:#8f6f33;
--ink:#e8cb8c;
--muted:#9d8a5e;
--h1:#f3e3bd;
--danger:#d9776b;
--ok:#7fae6f;
--serif:"Cormorant Garamond","Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,serif;
--mono:"Spline Sans Mono","SF Mono",Consolas,monospace;
--grain:.05;
}
[data-theme="silver"]{ --gold:#aeb6bf; --gold-rgb:174,182,191; --gold-bright:#e8edf2; --gold-line:#8a93a0; --gold-dim:#5f6873; --gold-numeral:#73808d; --ink:#e2e7ee; --muted:#8f98a3; --h1:#f2f5f9; }
[data-theme="bronze"]{ --gold:#b07a47; --gold-rgb:176,122,71; --gold-bright:#e3b483; --gold-line:#946238; --gold-dim:#6b4a2a; --gold-numeral:#7d5630; --ink:#e3b483; --muted:#9c7b5c; --h1:#f0d0a8; }
[data-theme="jade"] { --gold:#6fae90; --gold-rgb:111,174,144; --gold-bright:#aee3c8; --gold-line:#4f8e72; --gold-dim:#356550; --gold-numeral:#3f7560; --ink:#bfe6d4; --muted:#7fa896; --h1:#d4f0e2; }
[data-theme="rose"] { --gold:#c77f8f; --gold-rgb:199,127,143; --gold-bright:#e8b6c2; --gold-line:#a85f70; --gold-dim:#7a3f4e; --gold-numeral:#8f4f5e; --ink:#e8c2cb; --muted:#a8848c; --h1:#f3d4dc; }
[data-theme="indigo"] { --bg:#0a0c15; --bg2:#0d1020; --gold:#8093d6; --gold-rgb:128,147,214; --gold-bright:#bcc8f2; --gold-line:#6272b3; --gold-dim:#434f80; --gold-numeral:#4f5c92; --ink:#ccd5f2; --muted:#8791b8; --h1:#e4e9fb; }
[data-theme="crimson"] { --bg:#120a0c; --bg2:#180d10; --gold:#c25f5c; --gold-rgb:194,95,92; --gold-bright:#e8a49e; --gold-line:#a04c4a; --gold-dim:#733534; --gold-numeral:#8a403e; --ink:#e8bab4; --muted:#a87f7a; --h1:#f3d2cc; }
[data-theme="evergreen"]{ --bg:#0a0f0b; --bg2:#0d140f; --gold:#5a9c6d; --gold-rgb:90,156,109; --gold-bright:#a8d8b6; --gold-line:#47804f; --gold-dim:#305a3c; --gold-numeral:#3a6b47; --ink:#bfe0c8; --muted:#7ea68b; --h1:#d8f0de; }
[data-theme="day"]{
--bg:#eee5d0; --bg2:#e6dbc2;
--gold:#96712a; --gold-rgb:150,113,42; --gold-bright:#6e501a; --gold-line:#a58b52;
--gold-dim:#8d7c54; --gold-numeral:#7f632a;
--ink:#3e3527; --muted:#7c705a; --h1:#2c2415;
--danger:#a8483c; --ok:#4d7a41;
--grain:.07;
}
/* ---------- 02 · base / background / stars ------------------------------ */
*{box-sizing:border-box}
html,body{min-height:100%}
body{
margin:0;
color:var(--ink);
background:linear-gradient(180deg, rgba(10,9,14,0.64) 0%, rgba(9,8,12,0.72) 52%, rgba(7,6,10,0.84) 100%), var(--bg);
font-family:var(--serif);
min-height:100vh;
position:relative;
}
body.has-bg-layer{ background:var(--bg); }
#pageBgLayer{
position:fixed; inset:0; z-index:-2; display:none;
background-position:center 48%; background-size:cover; background-repeat:no-repeat;
transform:scale(1.06);
}
body.has-bg-layer #pageBgLayer{ display:block; }
body.has-bg-layer::after{
content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
background:linear-gradient(180deg, rgba(10,9,14,0.64) 0%, rgba(9,8,12,0.72) 52%, rgba(7,6,10,0.84) 100%);
}
.stars,.stars2{position:fixed;top:0;left:0;width:1px;height:1px;border-radius:50%;z-index:0;pointer-events:none;}
.stars{background:rgba(232,203,140,.55)}
.stars2{background:rgba(232,203,140,.3)}
body::before{
content:'';position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);
width:1100px;height:620px;
background:radial-gradient(closest-side, rgba(var(--gold-rgb),.10), transparent 72%);
z-index:0;pointer-events:none;
animation:candle 14s ease-in-out infinite;
}
@keyframes candle{
0%,100%{opacity:.82;transform:translate(-50%,-50%) scale(1);}
50% {opacity:1; transform:translate(-50%,-50%) scale(1.03);}
}
body.no-breathe::before{animation:none;}
html::after{
content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
opacity:var(--grain);mix-blend-mode:overlay;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--gold-bright);}
::selection{background:rgba(var(--gold-rgb),.28);color:var(--h1);}
code{color:var(--gold-bright);background:rgba(var(--gold-rgb),.08);
padding:2px 7px;border-radius:5px;border:1px solid rgba(var(--gold-rgb),.2);font-size:.85em;}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--gold-rgb),.5) transparent;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-thumb{background:rgba(var(--gold-rgb),.45);border-radius:3px;}
::-webkit-scrollbar-track{background:transparent;}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px;border-radius:2px;}
.tcard:focus-within{border-color:var(--gold);}
/* ---------- 03 · layout -------------------------------------------------- */
.wrap{width:var(--wrap-width,1400px);max-width:calc(100vw - 32px);
margin:0 auto;position:relative;z-index:2;transform-origin:center center;}
body.spread-page{display:flex;align-items:center;justify-content:center;height:100vh;overflow:hidden;padding:0;}
body.doc-page{padding:44px 16px 72px;}
body.doc-page .wrap{width:min(var(--wrap-width,1100px),100%);}
.spread{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:var(--gap,12px);align-items:stretch;width:100%;margin:0;}
@media (max-width:760px){
body.spread-page{height:auto;min-height:100dvh;overflow:auto;padding:28px 0;}
.wrap{width:auto!important;max-width:520px;transform:none!important;padding:0 12px;}
.spread{grid-template-columns:repeat(var(--cols-mobile,2),minmax(0,1fr));}
h1{font-size:clamp(28px,9vw,42px);letter-spacing:.14em;}
input,select,textarea{font-size:16px;}
a.tlink{padding:10px 9px;}
.tab{padding:10px 16px;}
}
@media (hover:none){
.search-hint,.theme-btn[data-kbd]::after{display:none;}
}
/* ---------- 04 · masthead + ornaments ------------------------------------ */
.masthead{text-align:center;margin:0 0 20px;}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);}
.orn::before,.orn::after{content:'';height:1px;width:64px;
background:linear-gradient(90deg,transparent,var(--gold-line));}
.orn::after{background:linear-gradient(90deg,var(--gold-line),transparent);}
.orn .dia{font-size:11px;letter-spacing:.4em;}
.kicker{margin:7px 0 0;font-family:var(--mono);font-size:11px;
letter-spacing:.5em;text-transform:uppercase;color:var(--muted);}
h1{margin:4px 0 4px;font-weight:600;font-size:46px;
letter-spacing:.18em;color:var(--h1);line-height:1;
text-shadow:0 0 32px rgba(var(--gold-rgb),.25);
background:linear-gradient(178deg,var(--h1) 10%,var(--gold-bright) 40%,var(--gold) 62%,var(--h1) 92%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
h1.foil-anim{background-size:220% 220%;animation:foil 9s ease-in-out infinite;}
@keyframes foil{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
.meta{margin:0;font-family:var(--mono);font-size:11px;
letter-spacing:.16em;color:var(--gold-dim);}
h2.theading{font-weight:600;font-size:22px;letter-spacing:.14em;color:var(--h1);margin:34px 0 10px;}
h3.theading{font-weight:600;font-size:16px;letter-spacing:.12em;color:var(--gold-bright);margin:24px 0 8px;}
.theme-btn{background:none;border:none;color:inherit;font:inherit;letter-spacing:inherit;
text-transform:inherit;cursor:pointer;padding:0;border-bottom:1px dotted transparent;
transition:color .2s,border-color .2s;}
.theme-btn:hover{color:var(--gold-bright);border-bottom-color:var(--gold-line);}
.theme-btn[data-kbd]::after{content:' [' attr(data-kbd) ']';opacity:.5;font-size:.78em;letter-spacing:.18em;}
.rule{display:flex;align-items:center;gap:8px;width:82px;margin:12px 0;color:var(--gold);}
.rule::before,.rule::after{content:'';flex:1;height:1px;
background:linear-gradient(90deg,transparent,var(--gold-line),transparent);}
.rule .dia{font-size:8px;}
.rule--wide{width:100%;max-width:420px;margin:18px auto;}
/* ---------- 05 · tarot cards (.tcard) ------------------------------------ */
.tcard{
position:relative;display:flex;flex-direction:column;align-items:center;
padding:20px 14px 14px;min-height:var(--card-min-h,430px);
background:
radial-gradient(120% 60% at 50% 0%, rgba(var(--gold-rgb),.08), transparent 60%),
linear-gradient(180deg, rgba(16,14,22,0.78), rgba(11,10,15,0.82));
border:1px solid var(--gold-line);
border-radius:12px;
box-shadow:0 10px 22px rgba(0,0,0,.45), inset 0 0 30px rgba(var(--gold-rgb),.04);
transition:transform .2s ease, border-color .2s ease;
}
.tcard::before{content:'';position:absolute;inset:7px;border:1px solid rgba(var(--gold-rgb),.32);
border-radius:8px;pointer-events:none;}
.tcard::after{content:'◆';position:absolute;top:-1px;left:50%;transform:translate(-50%,-58%);
color:var(--gold);font-size:9px;background:var(--bg);padding:0 6px;}
.tcard:hover{transform:translateY(-4px);border-color:var(--gold);
box-shadow:0 16px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--gold-rgb),.18), inset 0 0 34px rgba(var(--gold-rgb),.06);}
.tcard--sealed{filter:grayscale(.3);opacity:.5;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z' fill='none' stroke='white' stroke-opacity='.07'/%3E%3C/svg%3E") 0 0/28px 28px,
radial-gradient(120% 60% at 50% 0%, rgba(var(--gold-rgb),.08), transparent 60%),
linear-gradient(180deg, rgba(16,14,22,0.78), rgba(11,10,15,0.82));}
.tcard--sealed.no-lattice{background:
radial-gradient(120% 60% at 50% 0%, rgba(var(--gold-rgb),.08), transparent 60%),
linear-gradient(180deg, rgba(16,14,22,0.78), rgba(11,10,15,0.82));}
.cor{position:absolute;width:12px;height:12px;pointer-events:none;border:0 solid var(--gold-line);opacity:.85;}
.cor--tl{top:12px;left:12px;border-top-width:1px;border-left-width:1px;border-top-left-radius:5px;}
.cor--tr{top:12px;right:12px;border-top-width:1px;border-right-width:1px;border-top-right-radius:5px;}
.cor--bl{bottom:12px;left:12px;border-bottom-width:1px;border-left-width:1px;border-bottom-left-radius:5px;}
.cor--br{bottom:12px;right:12px;border-bottom-width:1px;border-right-width:1px;border-bottom-right-radius:5px;}
.tcard--sealed .title{font-family:var(--serif);font-style:italic;
font-size:22px;letter-spacing:.04em;color:var(--gold-dim);}
.tcard--static,.tcard--static:hover{transform:none;border-color:var(--gold-line);
box-shadow:0 10px 22px rgba(0,0,0,.45), inset 0 0 30px rgba(var(--gold-rgb),.04);}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cardInSealed{from{opacity:0;transform:translateY(16px)}to{opacity:.5;transform:none}}
.tcard.anim-in{animation:cardIn .55s cubic-bezier(.22,.9,.3,1) backwards;
animation-delay:calc(.04s + var(--i,0) * .08s);}
.tcard--sealed.anim-in{animation-name:cardInSealed;}
.numeral{font-size:14px;letter-spacing:.34em;color:var(--gold-numeral);
display:flex;align-items:center;gap:9px;}
.numeral::before,.numeral::after{content:'';width:16px;height:1px;background:var(--gold-line);opacity:.7;}
.emblem{width:86px;height:86px;margin:12px 0 2px;display:block;overflow:visible;transition:transform .4s cubic-bezier(.34,1.4,.5,1);}
.emblem-link{display:flex;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;}
.emblem-img{width:86px;height:86px;object-fit:contain;display:block;margin:12px 0 2px;border-radius:12px;
transition:transform .4s cubic-bezier(.34,1.4,.5,1);}
.tcard:hover .emblem,
.tcard:hover .emblem-img{transform:translateY(-4px) rotate(-5deg) scale(1.06);}
.emblem-link:hover .emblem,
.emblem-link:hover .emblem-img{transform:translateY(-4px) rotate(-5deg) scale(1.08);
filter:drop-shadow(0 0 8px rgba(var(--gold-rgb),.45));}
.emblem .ln{fill:none;stroke:var(--gold);stroke-width:1;}
.emblem .ln-d{fill:none;stroke:var(--gold);stroke-width:1;opacity:.55;}
.emblem .fill{fill:var(--gold);}
.title{margin:6px 0 3px;font-size:16px;font-weight:600;letter-spacing:.06em;
color:var(--h1);text-align:center;white-space:nowrap;line-height:1.1;}
.subtitle{margin:0;font-family:var(--mono);font-size:9px;
letter-spacing:.06em;color:var(--muted);text-transform:uppercase;text-align:center;line-height:1.5;}
.foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:10px;
color:var(--gold);font-size:8px;letter-spacing:.3em;opacity:.7;}
/* ---------- 06 · links (.tlink) + scroll areas --------------------------- */
.links{display:flex;flex-direction:column;gap:8px;width:100%;
max-height:var(--links-max-h,260px);overflow:hidden auto;overscroll-behavior:contain;padding-right:2px;}
a.tlink{
display:flex;align-items:center;gap:7px;
padding:8px 9px;text-decoration:none;
border:1px solid rgba(var(--gold-rgb),.28);border-radius:6px;
color:var(--gold-bright);font-size:12.5px;letter-spacing:.02em;
background:rgba(var(--gold-rgb),.03);
transition:background .18s ease,border-color .18s ease,transform .15s ease,color .18s ease;
}
a.tlink .star{color:var(--gold);font-size:9px;opacity:.85;flex:0 0 auto;transition:transform .25s ease;}
a.tlink .ico{font-size:14px;line-height:1;flex:0 0 auto;}
a.tlink .ico-img{width:14px;height:14px;object-fit:contain;border-radius:2px;
filter:drop-shadow(0 0 1px rgba(var(--gold-rgb),.4));flex:0 0 auto;}
a.tlink .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
a.tlink .arr{flex:0 0 auto;font-family:var(--mono);font-size:12px;
color:var(--gold-dim);transition:transform .18s ease,color .18s ease;}
a.tlink:hover{background:rgba(var(--gold-rgb),.12);border-color:var(--gold);transform:translateX(2px);}
a.tlink:hover .arr{color:var(--gold-bright);transform:translateX(3px);}
a.tlink:hover .star{transform:rotate(90deg);}
a.tlink--soon{opacity:.48;cursor:default;border-style:dashed;color:var(--muted);}
a.tlink--soon .arr{color:var(--gold-dim);}
a.tlink--soon:hover{background:rgba(var(--gold-rgb),.03);border-color:rgba(var(--gold-rgb),.28);transform:none;}
a.tlink--soon:hover .arr{transform:none;color:var(--gold-dim);}
a.tlink--soon:hover .star{transform:none;}
/* ---------- 07 · buttons, forms, tabs, panels ---------------------------- */
button,.btn{font:inherit;cursor:pointer;border-radius:7px;border:1px solid var(--gold-line);
background:rgba(var(--gold-rgb),.08);color:var(--gold-bright);padding:8px 14px;letter-spacing:.05em;
transition:background .15s,border-color .15s;font-size:14px;text-decoration:none;display:inline-block;}
button:hover,.btn:hover{background:rgba(var(--gold-rgb),.18);border-color:var(--gold);}
button.ghost,.btn.ghost{background:none;}
button.danger,.btn.danger{border-color:var(--danger);color:var(--danger);}
button.danger:hover,.btn.danger:hover{background:rgba(217,119,107,.12);}
button.primary,.btn.primary{background:rgba(var(--gold-rgb),.2);border-color:var(--gold);color:var(--h1);font-size:15px;padding:10px 22px;}
button.small,.btn.small{font-size:12px;padding:5px 10px;}
label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
input,select,textarea{width:100%;background:rgba(var(--gold-rgb),.04);border:1px solid var(--gold-line);
border-radius:6px;color:var(--gold-bright);padding:8px 10px;font:inherit;font-size:14px;outline:none;}
input::placeholder,textarea::placeholder{color:var(--muted);font-style:italic;}
input:focus,textarea:focus,select:focus{border-color:var(--gold);}
input[type="checkbox"],input[type="radio"]{width:auto;accent-color:var(--gold);}
input[type="range"]{padding:0;border:none;background:transparent;accent-color:var(--gold);}
textarea{min-height:160px;resize:vertical;line-height:1.6;font-family:var(--mono);font-size:13px;}
.tpanel{border:1px solid var(--gold-line);border-radius:10px;padding:16px;margin-bottom:14px;
background:rgba(16,14,22,.6);}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.row > div{flex:1;min-width:160px;}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 18px;}
header.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
border-bottom:1px solid var(--gold-line);padding-bottom:14px;margin-bottom:18px;flex-wrap:wrap;}
header.bar h1{margin:0;font-size:24px;letter-spacing:.12em;color:var(--h1);text-shadow:none;}
header.bar .meta{font-size:11px;color:var(--gold-dim);letter-spacing:.1em;}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.tab{padding:8px 16px;border:1px solid var(--gold-line);border-radius:7px;background:rgba(var(--gold-rgb),.04);
color:var(--muted);cursor:pointer;letter-spacing:.06em;font-size:14px;}
.tab.active{background:rgba(var(--gold-rgb),.14);color:var(--gold-bright);border-color:var(--gold);}
.panel{display:none;}
.panel.active{display:block;}
.seg{display:flex;gap:0;border:1px solid var(--gold-line);border-radius:8px;overflow:hidden;max-width:520px;}
.seg button{flex:1;border:none;border-radius:0;background:transparent;color:var(--muted);padding:9px 12px;font-size:13px;letter-spacing:.03em;}
.seg button + button{border-left:1px solid var(--gold-line);}
.seg button.active{background:rgba(var(--gold-rgb),.18);color:var(--h1);}
.savebar{position:fixed;left:0;right:0;bottom:0;background:rgba(10,9,14,.94);border-top:1px solid var(--gold-line);
padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:14px;align-items:center;justify-content:flex-end;backdrop-filter:blur(6px);z-index:20;}
/* ---------- 08 · tables, badges, messages -------------------------------- */
table.ttable{width:100%;border-collapse:collapse;font-size:13.5px;}
.ttable th{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--gold-line);}
.ttable td{padding:9px 10px;border-bottom:1px solid rgba(var(--gold-rgb),.16);color:var(--gold-bright);}
.ttable tbody tr:hover td{background:rgba(var(--gold-rgb),.05);}
.ttable td.mono,.mono{font-family:var(--mono);}
.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
border:1px solid rgba(var(--gold-rgb),.4);border-radius:4px;padding:2px 8px;color:var(--gold);
background:rgba(var(--gold-rgb),.06);}
.badge.ok{border-color:var(--ok);color:var(--ok);background:rgba(127,174,111,.08);}
.badge.danger{border-color:var(--danger);color:var(--danger);background:rgba(217,119,107,.08);}
.msg{font-size:13px;letter-spacing:.04em;}
.msg.ok{color:var(--ok);}
.msg.err{color:var(--danger);}
.hint{margin:20px auto 0;max-width:680px;text-align:center;color:var(--gold-dim);
font-family:var(--mono);font-size:10px;line-height:1.9;letter-spacing:.04em;}
.hint p{margin:6px 0;}
.hint .hint-orn{color:var(--gold);letter-spacing:.4em;font-size:9px;margin-bottom:2px;opacity:.7;}
details{margin-top:8px;font-size:12px;color:var(--muted);}
summary{cursor:pointer;color:var(--gold-dim);}
.prose{font-size:16px;line-height:1.85;color:var(--ink);letter-spacing:.01em;
font-variant-numeric:oldstyle-nums;}
.prose p{margin:0 0 14px;}
.prose em{color:var(--gold-bright);}
.prose--illuminated > p:first-of-type::first-letter{
float:left;font-size:3.3em;line-height:.82;padding:5px 10px 0 0;
color:var(--gold);font-style:normal;
text-shadow:0 0 18px rgba(var(--gold-rgb),.35);}
.ttable td,.num{font-variant-numeric:tabular-nums;}
blockquote{margin:16px 0;padding:10px 16px;border-left:2px solid var(--gold-line);
color:var(--gold-bright);font-style:italic;background:rgba(var(--gold-rgb),.04);border-radius:0 8px 8px 0;}
/* ---------- 09 · search overlay ------------------------------------------ */
.search-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;
justify-content:center;padding-top:12vh;background:rgba(6,8,14,.72);backdrop-filter:blur(8px);
animation:sfade .18s ease;}
@keyframes sfade{from{opacity:0}to{opacity:1}}
.search-overlay[hidden]{display:none;}
.search-box{width:min(94vw, clamp(560px, 46vw, 880px));background:rgba(14,18,28,.94);
border:1px solid var(--gold-line);border-radius:clamp(10px,0.8vw,16px);
padding:clamp(20px,1.8vw,34px) clamp(20px,1.8vw,34px) clamp(14px,1.2vw,24px);
box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 40px rgba(var(--gold-rgb),.05);position:relative;}
.search-box::before{content:'';position:absolute;inset:6px;border:1px solid rgba(var(--gold-rgb),.18);
border-radius:7px;pointer-events:none;}
.search-orn{text-align:center;color:var(--gold);font-size:clamp(11px,0.95vw,17px);letter-spacing:.4em;
margin-bottom:clamp(10px,0.9vw,16px);font-family:var(--mono);}
.search-box input[type="text"], #searchInput{width:100%;background:transparent;border:none;border-bottom:1px solid var(--gold-line);
color:var(--gold-bright);font-family:var(--serif);font-size:clamp(22px,2vw,36px);
padding:clamp(6px,0.5vw,10px) 4px clamp(10px,0.9vw,16px);
outline:none;letter-spacing:.04em;border-radius:0;}
.search-box input::placeholder{color:var(--muted);font-style:italic;font-size:clamp(18px,1.6vw,28px);}
.search-results{list-style:none;padding:0;margin:clamp(10px,0.9vw,16px) 0 0;
max-height:min(52vh,620px);overflow:auto;}
.search-results li{margin:2px 0;}
.search-results a{display:flex;align-items:center;gap:clamp(9px,0.9vw,14px);
padding:clamp(8px,0.85vw,15px) clamp(10px,1vw,16px);color:var(--gold-dim);
text-decoration:none;border:1px solid transparent;border-radius:6px;font-size:clamp(13px,1.05vw,20px);}
.search-results a:hover, .search-results a.is-active{background:rgba(var(--gold-rgb),.12);
border-color:var(--gold-line);color:var(--gold-bright);}
.search-results a .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-results a .src{font-family:var(--mono);font-size:clamp(10px,0.78vw,14px);
color:var(--muted);letter-spacing:.1em;flex:0 0 auto;}
.search-empty{padding:14px 10px;color:var(--muted);font-size:clamp(12px,1vw,18px);
text-align:center;font-style:italic;}
.search-hint{display:flex;gap:14px;justify-content:flex-end;font-family:var(--mono);
font-size:clamp(10px,0.78vw,14px);color:var(--muted);margin-top:clamp(8px,0.8vw,14px);letter-spacing:.1em;}
.search-hint kbd,kbd{font-family:var(--mono);background:rgba(var(--gold-rgb),.1);border:1px solid var(--gold-line);
padding:1px 5px;border-radius:3px;color:var(--gold-dim);font-size:.9em;}
/* ---------- 10 · meteor beam, motion safety ------------------------------ */
@property --beam-angle{ syntax:''; inherits:false; initial-value:0deg; }
.beam{position:absolute;inset:-1px;border-radius:13px;pointer-events:none;z-index:6;
opacity:0;transition:opacity .45s ease;}
body.meteor-hover .tcard:hover .beam{opacity:1;}
body.meteor-always .tcard--glow .beam{opacity:1;}
.tcard.fx .beam{opacity:1;}
.beam::before{
content:'';position:absolute;inset:0;border-radius:inherit;padding:2.5px;
background:conic-gradient(from var(--beam-angle),
transparent 0deg, transparent 270deg,
rgba(var(--gold-rgb),.12) 300deg,
rgba(var(--gold-rgb),.55) 332deg,
rgba(var(--gold-rgb),1) 352deg,
#ffffff 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
filter:drop-shadow(0 0 5px rgba(var(--gold-rgb),1)) drop-shadow(0 0 12px rgba(var(--gold-rgb),.7));
animation:beam-spin var(--beam-dur,3.4s) linear infinite;
animation-delay:var(--beam-delay,0s);
}
.beam::after{
content:'';position:absolute;inset:0;border-radius:inherit;padding:2.5px;
background:conic-gradient(from var(--beam-angle),
transparent 0deg 300deg,
rgba(255,255,255,.95) 305deg, transparent 306.4deg,
transparent 311deg,
rgba(255,255,255,.80) 316deg, transparent 317.1deg,
transparent 322deg,
rgba(255,255,255,.95) 329deg, transparent 330.3deg,
transparent 336deg,
rgba(255,255,255,.75) 342deg, transparent 343deg,
transparent 348deg,
rgba(255,255,255,.90) 351deg, transparent 352deg,
transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
filter:drop-shadow(0 0 3px rgba(var(--gold-rgb),.95)) drop-shadow(0 0 6px rgba(255,255,255,.5));
animation:beam-spin var(--beam-dur,3.4s) linear infinite, beam-twinkle 1.1s ease-in-out infinite;
animation-delay:var(--beam-delay,0s), var(--tw-delay,0s);
}
@keyframes beam-spin{ to{ --beam-angle:360deg; } }
@keyframes beam-twinkle{ 0%,100%{opacity:.35} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){
*{transition:none!important}
.tcard{animation:none!important}
.beam::before,.beam::after{animation:none!important;}
body::before,h1.foil-anim{animation:none!important;}
.emblem--idle [data-part="ring"],.emblem--idle .wing,.emblem--idle .tw,
.constellations .cst-dot,.tcard.deal-in{animation:none!important;}
}
/* ---------- 11 · print — the codex in ink on paper ----------------------- */
@media print{
:root,[data-theme]{
--bg:#ffffff;--bg2:#ffffff;
--gold:#6b5220;--gold-rgb:107,82,32;--gold-bright:#5c4519;--gold-line:#a08a5a;
--gold-dim:#7a6a4a;--gold-numeral:#6b5220;--ink:#26221a;--muted:#6d655a;--h1:#1d1a12;
--grain:0;
}
html::after,body::before,.stars,.stars2,.beam,.savebar,.theme-btn,.search-overlay,
.constellations,.theme-dock{display:none!important;}
body{background:#fff!important;color:var(--ink);}
h1{background:none;-webkit-text-fill-color:initial;color:var(--h1);text-shadow:none;}
.tcard,.tcard--static{background:#fff;box-shadow:none;break-inside:avoid;}
.tcard--sealed{background:#fff;filter:none;opacity:.6;}
a{color:var(--gold);text-decoration:none;}
}
/* ==========================================================================
v4 ADDITIONS
12 day-codex component overrides 15 charts, maps, calendar, timeline
13 adornments (filigree, 16 pricing, theme dock, mobile
rules, illuminated)
14 idle emblems, constellations,
deal entrance
========================================================================== */
/* ---------- 12 · day codex — parchment overrides ------------------------- */
body[data-theme="day"]{
background:linear-gradient(180deg,#f3ecdb 0%, #eae0c8 55%, #e0d4b6 100%);
}
[data-theme="day"] .stars,[data-theme="day"] .stars2,
[data-theme="day"] svg.constellations{display:none;}
body[data-theme="day"]::before{
background:radial-gradient(closest-side, rgba(var(--gold-rgb),.12), transparent 72%);
}
[data-theme="day"] .tcard{
background:
radial-gradient(120% 60% at 50% 0%, rgba(var(--gold-rgb),.08), transparent 60%),
linear-gradient(180deg, rgba(252,246,232,.92), rgba(240,231,210,.94));
box-shadow:0 10px 22px rgba(74,58,26,.16), inset 0 0 30px rgba(var(--gold-rgb),.05);
}
[data-theme="day"] .tcard:hover{
box-shadow:0 16px 30px rgba(74,58,26,.2), 0 0 0 1px rgba(var(--gold-rgb),.2), inset 0 0 34px rgba(var(--gold-rgb),.07);
}
[data-theme="day"] .tcard--static,[data-theme="day"] .tcard--static:hover{
box-shadow:0 10px 22px rgba(74,58,26,.16), inset 0 0 30px rgba(var(--gold-rgb),.05);
}
[data-theme="day"] .tcard--sealed{
filter:none;opacity:.55;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z' fill='none' stroke='black' stroke-opacity='.08'/%3E%3C/svg%3E") 0 0/28px 28px,
linear-gradient(180deg, rgba(252,246,232,.92), rgba(240,231,210,.94));
}
[data-theme="day"] .tpanel{background:rgba(252,246,232,.55);}
[data-theme="day"] .tcal{background:rgba(252,246,232,.55);}
[data-theme="day"] .search-overlay{background:rgba(74,60,32,.32);}
[data-theme="day"] .search-box{
background:rgba(250,244,229,.97);
box-shadow:0 30px 80px rgba(60,45,18,.3), inset 0 0 40px rgba(var(--gold-rgb),.05);
}
[data-theme="day"] .savebar{background:rgba(243,236,219,.94);}
[data-theme="day"] h1{text-shadow:0 1px 0 rgba(255,255,255,.5);}
[data-theme="day"] blockquote{background:rgba(var(--gold-rgb),.06);}
/* ---------- 13 · adornments (all opt-in) ---------------------------------- */
.corf{
position:absolute;width:22px;height:22px;pointer-events:none;
background:var(--gold-line);opacity:.9;transition:background .2s ease;
--corf-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='white'%3E%3Cpath d='M1,23 C1,9 9,1 23,1' stroke-width='1.5'/%3E%3Cpath d='M4.5,23 C4.5,12 12,4.5 23,4.5' stroke-width='.9' opacity='.65'/%3E%3Cpath d='M12,12.5 c3.4,-1.2 5.6,1 4.6,4.2 c-.7,2.2 -3.4,2.3 -3.4,.6' stroke-width='.9'/%3E%3C/g%3E%3Ccircle cx='7.6' cy='7.6' r='1.5' fill='white'/%3E%3Cpath d='M19.5,16.2 L20.6,19 L19.5,21.8 L18.4,19 Z' fill='white'/%3E%3C/svg%3E");
-webkit-mask:var(--corf-m) center/contain no-repeat;
mask:var(--corf-m) center/contain no-repeat;
}
.corf--tl{top:11px;left:11px;}
.corf--tr{top:11px;right:11px;transform:rotate(90deg);}
.corf--br{bottom:11px;right:11px;transform:rotate(180deg);}
.corf--bl{bottom:11px;left:11px;transform:rotate(270deg);}
.tcard:hover .corf{background:var(--gold);}
.rule--dotted::before,.rule--dotted::after{
background:repeating-linear-gradient(90deg, var(--gold-line) 0 1.5px, transparent 1.5px 6px);
}
.rule--dotted::before{-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000);}
.rule--dotted::after{-webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent);}
.rule--swash::before,.rule--swash::after{
height:9px;background:var(--gold-line);
--swash-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M0,8.5 C26,8.5 34,1.5 56,1.5 C64,1.5 70,3 80,5' fill='none' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E");
-webkit-mask:var(--swash-m) center/100% 100% no-repeat;
mask:var(--swash-m) center/100% 100% no-repeat;
}
.rule--swash::before{transform:scaleX(-1);}
.prose--illuminated-frame > p:first-of-type::first-letter{
float:left;font-size:2.9em;line-height:1;padding:8px 13px;margin:5px 13px 2px 0;
color:var(--gold);font-style:normal;
border:1px solid var(--gold-line);border-radius:6px;
background:rgba(var(--gold-rgb),.06);
box-shadow:inset 0 0 0 3px var(--bg), inset 0 0 0 4px rgba(var(--gold-rgb),.35);
text-shadow:0 0 14px rgba(var(--gold-rgb),.3);
}
/* ---------- 14 · idle emblems, constellations, deal entrance -------------- */
.emblem--idle [data-part="ring"]{
transform-box:view-box;transform-origin:60px 60px;
animation:emb-spin 80s linear infinite;
}
@keyframes emb-spin{to{transform:rotate(360deg)}}
.emblem--idle .wing{
transform-box:view-box;transform-origin:60px 55px;
animation:emb-flutter 5.5s ease-in-out infinite;
}
@keyframes emb-flutter{0%,100%{transform:scale(1,1)}50%{transform:scale(.93,1.015)}}
.emblem--idle .tw{animation:emb-tw 3.6s ease-in-out infinite;animation-delay:var(--d,0s);}
@keyframes emb-tw{0%,100%{opacity:1}50%{opacity:.35}}
svg.constellations{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.constellations line{stroke:rgba(var(--gold-rgb),.20);stroke-width:.7;}
.constellations .cst-dot{fill:rgba(var(--gold-rgb),.85);}
.constellations .cst-dot.cst-tw{animation:emb-tw 4.2s ease-in-out infinite;animation-delay:var(--d,0s);}
.constellations .cst-name{font-family:var(--mono);font-size:8px;letter-spacing:.3em;
fill:var(--gold-dim);opacity:.55;text-transform:uppercase;}
@keyframes dealIn{
0%{opacity:0;transform:perspective(1100px) rotateY(-92deg) translateY(10px);}
55%{opacity:1;}
100%{opacity:1;transform:perspective(1100px) rotateY(0deg) translateY(0);}
}
@keyframes dealInSealed{
0%{opacity:0;transform:perspective(1100px) rotateY(-92deg) translateY(10px);}
55%{opacity:.5;}
100%{opacity:.5;transform:perspective(1100px) rotateY(0deg) translateY(0);}
}
.tcard.deal-in{animation:dealIn .8s cubic-bezier(.22,.85,.3,1) backwards;
animation-delay:calc(.06s + var(--i,0) * .12s);}
.tcard--sealed.deal-in{animation-name:dealInSealed;}
/* ---------- 15 · charts, maps, calendar, timeline ------------------------- */
.tchart{width:100%;}
.tchart svg{width:100%;height:auto;display:block;overflow:visible;}
.tchart .axis{stroke:rgba(var(--gold-rgb),.4);stroke-width:1;fill:none;}
.tchart .grid{stroke:rgba(var(--gold-rgb),.16);stroke-width:1;stroke-dasharray:1 5;fill:none;}
.tchart .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--muted);text-transform:uppercase;}
.tchart .val{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;fill:var(--gold-dim);}
.tchart .ser{fill:none;stroke:var(--gold);stroke-width:1.2;}
.tchart .ser--dim{stroke-width:1;opacity:.5;stroke-dasharray:4 4;}
.tchart .area{fill:rgba(var(--gold-rgb),.07);stroke:none;}
.tchart .pt{fill:var(--gold);}
.tchart .bar{fill:rgba(var(--gold-rgb),.10);stroke:var(--gold-line);stroke-width:1;transition:fill .18s ease;}
.tchart .bar:hover{fill:rgba(var(--gold-rgb),.24);}
.tchart .seg{stroke:var(--gold-line);stroke-width:1;transition:opacity .18s ease;}
.tchart .big{font-family:var(--serif);fill:var(--h1);font-weight:600;letter-spacing:.04em;}
.tchart-legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:10px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.tchart-legend .key{display:flex;align-items:center;gap:7px;}
.tchart-legend .swatch{width:14px;height:0;border-top:1.2px solid var(--gold);}
.tchart-legend .swatch--dim{border-top-style:dashed;opacity:.55;}
.tmap .dot{fill:rgba(var(--gold-rgb),.30);}
.tmap .mk{fill:var(--gold);}
.tmap .mk-halo{fill:none;stroke:rgba(var(--gold-rgb),.4);stroke-width:.8;}
.tmap .route{fill:none;stroke:var(--gold);stroke-width:.9;stroke-dasharray:3 4;opacity:.8;}
.tmap .cst-line{stroke:rgba(var(--gold-rgb),.45);stroke-width:.8;fill:none;}
.tcal{width:100%;border:1px solid var(--gold-line);border-radius:10px;padding:14px;
background:rgba(16,14,22,.6);}
.tcal-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px;}
.tcal-title{font-size:19px;letter-spacing:.14em;color:var(--h1);font-weight:600;}
.tcal-sub{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.tcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.tcal-dow{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);text-align:center;padding:3px 0 6px;}
.tcal-day{min-height:46px;border:1px solid rgba(var(--gold-rgb),.15);border-radius:5px;
padding:5px 6px;font-size:12.5px;color:var(--gold-bright);position:relative;
display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums;
transition:border-color .15s ease, background .15s ease;}
.tcal-day:hover{border-color:var(--gold-line);background:rgba(var(--gold-rgb),.06);}
.tcal-day.is-out{opacity:.25;}
.tcal-day.is-today{border-color:var(--gold);background:rgba(var(--gold-rgb),.08);
box-shadow:inset 0 0 0 2px var(--bg), inset 0 0 0 3px rgba(var(--gold-rgb),.35);}
.tcal-ev{font-size:7px;line-height:1;color:var(--gold);letter-spacing:2px;}
.tcal-note{font-family:var(--mono);font-size:8px;color:var(--muted);letter-spacing:.04em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* ---------- 16 · pricing, theme dock, mobile ------------------------------ */
.price-amt{font-family:var(--serif);font-size:44px;color:var(--h1);letter-spacing:.03em;line-height:1;margin:6px 0 2px;}
.price-amt sup{font-size:17px;color:var(--gold-dim);font-weight:500;margin-right:2px;}
.price-per{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;}
.feat{display:flex;flex-direction:column;gap:8px;width:100%;font-size:13.5px;color:var(--ink);margin:4px 0;}
.feat > div{display:flex;gap:9px;align-items:baseline;}
.feat > div::before{content:'✦';color:var(--gold);font-size:9px;flex:0 0 auto;}
.feat > div.off{color:var(--gold-dim);opacity:.6;}
.feat > div.off::before{content:'◇';}
.theme-dock{position:fixed;right:14px;bottom:14px;z-index:40;display:flex;gap:8px;align-items:center;
padding:9px 13px;border:1px solid var(--gold-line);border-radius:999px;
background:rgba(12,11,16,.85);backdrop-filter:blur(6px);
box-shadow:0 10px 26px rgba(0,0,0,.45);}
[data-theme="day"] .theme-dock{background:rgba(246,239,224,.92);box-shadow:0 10px 26px rgba(70,55,25,.25);}
.theme-dock .dock-lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;
text-transform:uppercase;color:var(--muted);margin-right:2px;}
.theme-dot{width:17px;height:17px;border-radius:50%;cursor:pointer;padding:0;flex:0 0 auto;
border:1px solid rgba(255,255,255,.28);
background:radial-gradient(circle at 35% 32%, var(--dot,#c79a4f), rgba(0,0,0,.6));
transition:transform .15s ease, box-shadow .15s ease;}
[data-theme="day"] .theme-dot{border-color:rgba(0,0,0,.25);}
.theme-dot:hover{transform:scale(1.22);}
.theme-dot.active{box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--gold);}
@media (max-width:760px){
.tcal{padding:10px;}
.tcal-day{min-height:38px;padding:4px 5px;font-size:11.5px;}
.tcal-note{display:none;}
.theme-dock{right:10px;bottom:10px;padding:8px 11px;gap:7px;max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:center;}
.theme-dock .dock-lbl{display:none;}
.price-amt{font-size:36px;}
.tchart-legend{gap:12px;}
}
/* ==========================================================================
v5 ADDITIONS
17 hourline (24h timeline) 18 constellation modes 19 diamond filter slider
========================================================================== */
/* ---------- 17 · hourline — 24h timeline with hour-positioned chips ------ */
.thourline{position:relative;width:100%;}
.thl-axis{position:absolute;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--gold-line) 4%,var(--gold-line) 96%,transparent);}
.thl-hour{position:absolute;transform:translateX(-50%);
font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;color:var(--gold-dim);}
.thl-stem{position:absolute;width:1px;
background:linear-gradient(180deg,rgba(var(--gold-rgb),.55),rgba(var(--gold-rgb),.14));}
.thl-dot{position:absolute;width:7px;height:7px;border-radius:50%;
transform:translate(-50%,-50%);background:rgba(var(--gold-rgb),.8);}
.thl-dot.is-on{background:var(--ok);
box-shadow:0 0 3px rgba(127,174,111,.9), 0 0 12px rgba(127,174,111,.55);}
.thl-chip{position:absolute;transform:translateX(-50%);
display:flex;align-items:center;gap:8px;padding:6px 12px;
border:1px solid rgba(var(--gold-rgb),.35);border-radius:8px;
background:rgba(16,14,22,.78);
font-family:var(--mono);font-size:14px;letter-spacing:.03em;color:var(--gold-bright);
white-space:nowrap;transition:border-color .18s ease, box-shadow .18s ease;}
.thl-chip .thl-flag{font-size:15px;line-height:1;}
.thl-chip:hover{border-color:var(--gold);box-shadow:0 0 12px rgba(var(--gold-rgb),.22);}
.thl-chip.is-on{border-color:var(--ok);color:var(--h1);
background:rgba(127,174,111,.07);box-shadow:0 0 14px rgba(127,174,111,.22);}
.thl-sel{position:absolute;border:1px solid rgba(var(--gold-rgb),.5);
background:rgba(var(--gold-rgb),.06);border-radius:10px;}
.thl-sel-lbl{position:absolute;transform:translate(-50%,-100%);padding-bottom:7px;
font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--h1);white-space:nowrap;}
[data-theme="day"] .thl-chip{background:rgba(252,246,232,.88);}
@media (max-width:760px){
.thl-chip{font-size:11.5px;padding:4px 8px;gap:5px;}
.thl-hour{font-size:10px;}
}
/* ---------- 18 · constellation modes -------------------------------------
body.constellations-morph clusters fade out one by one, re-randomize,
then fade back in (auto cycle)
body.constellations-pointer whole sky drifts gently after the pointer
(both also available as Tarot.constellationMorph() / .constellationPointer()) */
svg.constellations{will-change:transform;}
.cst-cluster{transition:opacity 1.2s ease;}
/* ---------- 19 · diamond filter slider (.tdsl) ---------------------------
A status-filter slider whose track is a mosaic of tiny diamonds ramping
dark → accent → white toward the knob. variant: grid | scatter. */
.tdsl{width:100%;}
.tdsl-labels{display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);margin-bottom:8px;}
.tdsl-track{position:relative;border-radius:999px;
border:1px solid rgba(var(--gold-rgb),.35);
background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));
box-shadow:inset 0 2px 8px rgba(0,0,0,.45);
cursor:pointer;touch-action:none;outline-offset:4px;}
.tdsl-clip{position:absolute;inset:0;border-radius:999px;overflow:hidden;}
.tdsl-field{display:block;position:absolute;inset:0;}
.tdsl-knob{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(circle at 35% 30%,#ffffff,#d8d2c6 62%,#a49c8c);
border:1px solid rgba(0,0,0,.4);
box-shadow:0 2px 10px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--gold-rgb),.4), 0 0 16px rgba(var(--gold-rgb),.22);
cursor:grab;}
.tdsl-track:active .tdsl-knob{cursor:grabbing;}
[data-theme="day"] .tdsl-track{
background:linear-gradient(180deg,rgba(60,48,25,.14),rgba(60,48,25,.07));
box-shadow:inset 0 2px 8px rgba(60,48,25,.18);}
@media (prefers-reduced-motion:reduce){
.cst-cluster{transition:none!important;}
}
/* ---------- 20 · 柔光 soft glow — halation layer (v5.1) ----------
Candlelight bleeding through the gold lines. Everything scales with two
page-level knobs: --glow-mult (halo strength ×, default 1) and
--glow-breathe-dur (breathing period, default 7s).
.glow-soft frames: .tcard / .tcard--static / .tpanel — soft halo,
brightens further on card hover
.glow-breathe modifier: the halo slowly breathes
button.glow-soft candlelit button (.primary/.ghost stay gold, .danger
glows in --danger — semantic, not decorative)
.rule--glow divider halation (combine with --wide/--dotted/--swash)
body.glow-edges faint gold bloom + hairline along the viewport edges
Restraint: one breathing element and one glowing primary per view; never
every card at once. Sealed cards never glow. */
@property --glow-a{syntax:'';inherits:false;initial-value:1;}
@keyframes glowBreathe{0%,100%{--glow-a:.68}50%{--glow-a:1.35}}
.glow-breathe{animation:glowBreathe var(--glow-breathe-dur,7s) ease-in-out infinite;}
/* Frames — full box-shadow rewrite (keeps the standard dark drop + inset). */
.glow-soft{
border-color:rgba(var(--gold-rgb),.8);
box-shadow:
0 10px 22px rgba(0,0,0,.45),
inset 0 0 30px rgba(var(--gold-rgb),calc(.05*var(--glow-mult,1)*var(--glow-a,1))),
0 0 1px rgba(var(--gold-rgb),calc(.5*var(--glow-mult,1)*var(--glow-a,1))),
0 0 15px rgba(var(--gold-rgb),calc(.14*var(--glow-mult,1)*var(--glow-a,1))),
0 0 46px rgba(var(--gold-rgb),calc(.08*var(--glow-mult,1)*var(--glow-a,1)));
}
.tcard.glow-soft:hover{
border-color:var(--gold);
box-shadow:
0 16px 30px rgba(0,0,0,.5),
inset 0 0 34px rgba(var(--gold-rgb),calc(.07*var(--glow-mult,1))),
0 0 1px rgba(var(--gold-rgb),calc(.65*var(--glow-mult,1))),
0 0 20px rgba(var(--gold-rgb),calc(.22*var(--glow-mult,1))),
0 0 60px rgba(var(--gold-rgb),calc(.12*var(--glow-mult,1)));
}
/* .tcard--static pins its shadow with a 2-class rule — repin with the halo. */
.tcard--static.glow-soft,.tcard--static.glow-soft:hover{
border-color:rgba(var(--gold-rgb),.8);
box-shadow:
0 10px 22px rgba(0,0,0,.45),
inset 0 0 30px rgba(var(--gold-rgb),calc(.05*var(--glow-mult,1)*var(--glow-a,1))),
0 0 1px rgba(var(--gold-rgb),calc(.5*var(--glow-mult,1)*var(--glow-a,1))),
0 0 15px rgba(var(--gold-rgb),calc(.14*var(--glow-mult,1)*var(--glow-a,1))),
0 0 46px rgba(var(--gold-rgb),calc(.08*var(--glow-mult,1)*var(--glow-a,1)));
}
/* Buttons — smaller halo, no dark drop; label gets a faint light bleed. */
button.glow-soft,.btn.glow-soft{
border-color:var(--gold);
box-shadow:
0 0 8px rgba(var(--gold-rgb),calc(.2*var(--glow-mult,1)*var(--glow-a,1))),
0 0 24px rgba(var(--gold-rgb),calc(.11*var(--glow-mult,1)*var(--glow-a,1))),
inset 0 0 9px rgba(var(--gold-rgb),calc(.1*var(--glow-mult,1)*var(--glow-a,1)));
text-shadow:0 0 9px rgba(var(--gold-rgb),calc(.4*var(--glow-mult,1)));
transition:background .15s,border-color .15s,box-shadow .18s ease;
}
button.glow-soft:hover,.btn.glow-soft:hover{
box-shadow:
0 0 12px rgba(var(--gold-rgb),calc(.32*var(--glow-mult,1))),
0 0 34px rgba(var(--gold-rgb),calc(.16*var(--glow-mult,1))),
inset 0 0 12px rgba(var(--gold-rgb),calc(.14*var(--glow-mult,1)));
}
button.glow-soft.danger,.btn.glow-soft.danger{
box-shadow:
0 0 8px rgba(217,119,107,calc(.22*var(--glow-mult,1)*var(--glow-a,1))),
0 0 24px rgba(217,119,107,calc(.12*var(--glow-mult,1)*var(--glow-a,1))),
inset 0 0 9px rgba(217,119,107,calc(.1*var(--glow-mult,1)*var(--glow-a,1)));
text-shadow:0 0 9px rgba(217,119,107,calc(.45*var(--glow-mult,1)));
}
button.glow-soft.danger:hover,.btn.glow-soft.danger:hover{
box-shadow:
0 0 12px rgba(217,119,107,calc(.34*var(--glow-mult,1))),
0 0 34px rgba(217,119,107,calc(.17*var(--glow-mult,1))),
inset 0 0 12px rgba(217,119,107,calc(.15*var(--glow-mult,1)));
}
/* Divider halation — drop-shadow follows the line's gradient/mask, so the
glow fades out at the ends and works on --dotted/--swash too. */
.rule--glow::before,.rule--glow::after{
filter:drop-shadow(0 0 3px rgba(var(--gold-rgb),calc(.8*var(--glow-mult,1))))
drop-shadow(0 0 8px rgba(var(--gold-rgb),calc(.45*var(--glow-mult,1))));
}
.rule--glow .dia,.rule--glow span{
text-shadow:0 0 10px rgba(var(--gold-rgb),calc(.65*var(--glow-mult,1))),
0 0 22px rgba(var(--gold-rgb),calc(.3*var(--glow-mult,1)));
}
/* Viewport-edge bloom — light seeping in from outside the frame. */
body.glow-edges::after{
content:'';position:fixed;inset:0;z-index:3;pointer-events:none;
box-shadow:
inset 0 0 0 1px rgba(var(--gold-rgb),calc(.1*var(--glow-mult,1))),
inset 0 0 60px rgba(var(--gold-rgb),calc(.05*var(--glow-mult,1))),
inset 0 0 170px rgba(var(--gold-rgb),calc(.04*var(--glow-mult,1)));
}
/* Day codex — halation reads as sunlight on paper: warm, fainter. */
[data-theme="day"] .glow-soft,
[data-theme="day"] .tcard--static.glow-soft,
[data-theme="day"] .tcard--static.glow-soft:hover{
box-shadow:
0 10px 22px rgba(74,58,26,.16),
inset 0 0 30px rgba(var(--gold-rgb),.05),
0 0 16px rgba(var(--gold-rgb),calc(.2*var(--glow-mult,1)*var(--glow-a,1))),
0 0 44px rgba(var(--gold-rgb),calc(.12*var(--glow-mult,1)*var(--glow-a,1)));
}
[data-theme="day"] .tcard.glow-soft:hover{
box-shadow:
0 16px 30px rgba(74,58,26,.2),
inset 0 0 34px rgba(var(--gold-rgb),.07),
0 0 20px rgba(var(--gold-rgb),calc(.26*var(--glow-mult,1))),
0 0 52px rgba(var(--gold-rgb),calc(.15*var(--glow-mult,1)));
}
[data-theme="day"] body.glow-edges::after,body[data-theme="day"].glow-edges::after{
box-shadow:
inset 0 0 0 1px rgba(var(--gold-rgb),calc(.14*var(--glow-mult,1))),
inset 0 0 60px rgba(var(--gold-rgb),calc(.07*var(--glow-mult,1))),
inset 0 0 170px rgba(var(--gold-rgb),calc(.05*var(--glow-mult,1)));
}
@media (prefers-reduced-motion:reduce){
.glow-breathe{animation:none!important;}
}
@media print{
.glow-soft,.tcard--static.glow-soft,button.glow-soft,.btn.glow-soft{
box-shadow:none!important;text-shadow:none!important;}
.glow-breathe{animation:none!important;}
.rule--glow::before,.rule--glow::after{filter:none!important;}
body.glow-edges::after{display:none!important;}
}
/* ---------- 21 · 注灵 progress (.tprog) — hairline mana-pour (v5.2) --------
--p = percentage. Luminous hairline fill, ◆ tip riding the meniscus, slow
light-pour shimmer. Variants: .tprog--full (✦ tip, for 100%),
.tprog--quiet (no shimmer). Optional milestone tick:
inside the track. */
.tprog{width:100%;}
.tprog-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;font-family:var(--mono);}
.tprog-head .lbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.tprog-head .val{font-size:11px;letter-spacing:.08em;color:var(--gold-dim);font-variant-numeric:tabular-nums;}
.tprog-track{position:relative;height:9px;}
.tprog-track::before{content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:rgba(var(--gold-rgb),.16);}
.tprog-fill{position:absolute;left:0;top:4px;height:1px;width:var(--p,0%);overflow:hidden;
background:linear-gradient(90deg,rgba(var(--gold-rgb),.35),var(--gold) 70%,var(--gold-bright));
box-shadow:0 0 6px rgba(var(--gold-rgb),.5), 0 0 16px rgba(var(--gold-rgb),.18);
transition:width .6s ease;}
.tprog-fill::before{content:'';position:absolute;top:0;bottom:0;width:56px;left:-60px;
background:linear-gradient(90deg,transparent,rgba(255,246,220,.95),transparent);
animation:tprogPour 2.6s linear infinite;}
@keyframes tprogPour{from{left:-60px}to{left:100%}}
.tprog-track::after{content:'◆';position:absolute;left:var(--p,0%);top:4.5px;
transform:translate(-50%,-50%);font-size:9px;line-height:1;color:var(--gold-bright);
text-shadow:0 0 8px rgba(var(--gold-rgb),.8), 0 0 18px rgba(var(--gold-rgb),.35);
transition:left .6s ease;}
.tprog--full .tprog-track::after{content:'✦';font-size:13px;
text-shadow:0 0 10px rgba(var(--gold-rgb),.95), 0 0 26px rgba(var(--gold-rgb),.5);}
.tprog--full .tprog-head .val{color:var(--h1);}
.tprog--quiet .tprog-fill::before{display:none;}
.tprog-tick{position:absolute;top:1px;width:1px;height:7px;transform:translateX(-.5px);
background:rgba(var(--gold-rgb),.3);}
[data-theme="day"] .tprog-fill{box-shadow:0 0 5px rgba(var(--gold-rgb),.35);}
/* ---------- 22 · loaders — waiting states (v5.2) --------------
A .loader-sigil self-inscribing emblem — JS: Tarot.loaderSigil(el,{emblem,size,dur})
B .loader-moon moon waxes & wanes
C .loader-stars ✦ ✧ ✦ lighting in sequence ✦✧✦
D .loader-comet comet patrolling a hairline */
.loader-sigil{overflow:visible;}
.loader-sigil [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
animation:sigilDraw var(--sigil-dur,3.2s) cubic-bezier(.45,.05,.4,.95) infinite;
animation-delay:var(--d,0s);}
.loader-sigil .fill{opacity:0;animation:sigilFill var(--sigil-dur,3.2s) ease infinite;
animation-delay:var(--d,0s);}
@keyframes sigilDraw{0%{stroke-dashoffset:1;opacity:0}6%{opacity:1}52%{stroke-dashoffset:0}
80%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes sigilFill{0%,45%{opacity:0}60%,80%{opacity:1}95%,100%{opacity:0}}
.loader-moon{display:inline-block;position:relative;width:26px;height:26px;border-radius:50%;
border:1px solid rgba(var(--gold-rgb),.55);overflow:hidden;vertical-align:middle;
box-shadow:0 0 10px rgba(var(--gold-rgb),.15), inset 0 0 6px rgba(var(--gold-rgb),.12);}
.loader-moon::before{content:'';position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle at 42% 40%,rgba(var(--gold-rgb),.9),rgba(var(--gold-rgb),.55));
animation:moonWax var(--moon-dur,3.4s) ease-in-out infinite;}
@keyframes moonWax{0%{transform:translateX(-103%)}50%{transform:translateX(0)}100%{transform:translateX(103%)}}
.loader-stars{display:inline-flex;gap:7px;color:var(--gold);font-size:12px;line-height:1;}
.loader-stars i{font-style:normal;opacity:.25;animation:starPulse 1.6s ease-in-out infinite;}
.loader-stars i:nth-child(2){animation-delay:.27s;}
.loader-stars i:nth-child(3){animation-delay:.54s;}
@keyframes starPulse{0%,60%,100%{opacity:.25;text-shadow:none;transform:scale(1)}
30%{opacity:1;text-shadow:0 0 10px rgba(var(--gold-rgb),.8);transform:scale(1.18)}}
.loader-comet{display:inline-block;position:relative;width:140px;height:9px;vertical-align:middle;}
.loader-comet::before{content:'';position:absolute;left:0;right:0;top:4px;height:1px;
background:rgba(var(--gold-rgb),.14);}
.loader-comet::after{content:'';position:absolute;top:4px;height:1px;width:44px;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--gold) 70%,#fff);
box-shadow:0 0 8px rgba(var(--gold-rgb),.6);
animation:cometSeek 3.6s infinite;}
/* v5.2.5 — one cycle = full round trip: the comet compresses to a spark at each
wall and flips there (scaleX), so the bright head always leads the motion. */
@keyframes cometSeek{
0% {left:0%;width:8px;transform:scaleX(1);animation-timing-function:ease-in;}
15% {left:14%;width:44px;animation-timing-function:linear;}
35% {left:calc(86% - 44px);width:44px;animation-timing-function:ease-out;}
49.9%{transform:scaleX(1);}
50% {left:calc(100% - 8px);width:8px;transform:scaleX(-1);animation-timing-function:ease-in;}
65% {left:calc(86% - 44px);width:44px;animation-timing-function:linear;}
85% {left:14%;width:44px;animation-timing-function:ease-out;}
99.9%{transform:scaleX(-1);}
100% {left:0%;width:8px;transform:scaleX(1);}
}
/* ---------- 23 · 星语 tooltip — [data-tip] (v5.2) --------------------------
flip below: data-tip-pos="bottom"
Pure CSS, shows on hover / :focus-visible, hides on touch (hover:none).
NOT for elements that own ::before/::after (.tcard, .rule, .theme-btn). */
[data-tip]{position:relative;}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);
transform:translate(-50%,3px);
font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.08em;line-height:1.5;
color:var(--gold-bright);white-space:nowrap;text-transform:none;
background:rgba(16,14,22,.94);border:1px solid rgba(var(--gold-rgb),.45);border-radius:6px;
padding:5px 10px;box-shadow:0 8px 20px rgba(0,0,0,.5), inset 0 0 12px rgba(var(--gold-rgb),.05);
opacity:0;pointer-events:none;z-index:40;transition:opacity .16s ease, transform .16s ease;}
[data-tip]::before{content:'◆';position:absolute;left:50%;bottom:calc(100% + 3px);
transform:translate(-50%,3px);font-size:7px;line-height:1;color:var(--gold);
text-shadow:0 0 6px rgba(var(--gold-rgb),.6);
opacity:0;pointer-events:none;z-index:41;transition:opacity .16s ease, transform .16s ease;}
[data-tip]:hover::after,[data-tip]:focus-visible::after,
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;transform:translate(-50%,0);}
[data-tip][data-tip-pos="bottom"]::after{bottom:auto;top:calc(100% + 10px);transform:translate(-50%,-3px);}
[data-tip][data-tip-pos="bottom"]::before{bottom:auto;top:calc(100% + 3px);transform:translate(-50%,-3px);}
[data-tip][data-tip-pos="bottom"]:hover::after,[data-tip][data-tip-pos="bottom"]:focus-visible::after,
[data-tip][data-tip-pos="bottom"]:hover::before,[data-tip][data-tip-pos="bottom"]:focus-visible::before{transform:translate(-50%,0);}
@media (hover:none){[data-tip]::after,[data-tip]::before{display:none;}}
[data-theme="day"] [data-tip]::after{background:rgba(252,246,232,.97);color:#4a3a1a;
box-shadow:0 8px 20px rgba(74,58,26,.25);}
/* ---------- 24 · 分页 pagination (.tpage) (v5.2) ---------------------------
Roman numerals up to ~XII pages, arabic beyond. Current page wears the
double inset ring (same construction as the calendar's today). */
.tpage{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
font-family:var(--mono);font-size:12.5px;}
.tpage-num,.tpage-btn{min-width:32px;height:32px;padding:0 9px;display:inline-flex;
align-items:center;justify-content:center;border:1px solid rgba(var(--gold-rgb),.3);
border-radius:6px;color:var(--gold-dim);text-decoration:none;letter-spacing:.06em;
font-variant-numeric:tabular-nums;cursor:pointer;background:none;
transition:border-color .15s,color .15s,background .15s,transform .15s;}
.tpage-num:hover,.tpage-btn:hover{border-color:var(--gold);color:var(--gold-bright);
background:rgba(var(--gold-rgb),.1);transform:translateY(-1px);}
.tpage-num.is-current{border-color:var(--gold-line);color:var(--h1);
background:rgba(var(--gold-rgb),.08);cursor:default;transform:none;
box-shadow:inset 0 0 0 2px var(--bg), inset 0 0 0 3px rgba(var(--gold-rgb),.35);
text-shadow:0 0 10px rgba(var(--gold-rgb),.3);}
.tpage-btn[aria-disabled="true"],.tpage-num[aria-disabled="true"]{
border-style:dashed;opacity:.45;pointer-events:none;}
.tpage-gap{color:var(--gold-dim);letter-spacing:.1em;padding:0 2px;}
/* ---------- 25 · 年历热力 heatmap (.theat) — Tarot.charts.heatmap (v5.2) ----
The year as a sky of diamond facets; the brightest days become ✦ stars
and twinkle. Level ramp: dark facet → gold → bright star. */
.theat{position:relative;width:100%;}
.theat svg{display:block;width:100%;height:auto;}
.theat text{font-family:var(--mono);fill:var(--muted);letter-spacing:.08em;}
.theat .hc0{fill:rgba(var(--gold-rgb),.09);}
.theat .hc1{fill:var(--gold);fill-opacity:.26;}
.theat .hc2{fill:var(--gold);fill-opacity:.48;}
.theat .hc3{fill:var(--gold);fill-opacity:.74;}
.theat .hc4{fill:var(--gold-bright);}
.theat .hcell{transition:fill-opacity .15s ease;}
.theat .hcell:hover{stroke:var(--gold-bright);stroke-width:.8;}
.theat .htoday{stroke:var(--gold-bright);stroke-width:.8;}
.theat .htw{animation:heatTw 3.8s ease-in-out infinite;}
@keyframes heatTw{0%,100%{opacity:1}50%{opacity:.5}}
.theat-legend{display:flex;align-items:center;gap:7px;margin-top:10px;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}
.theat-legend i{width:9px;height:9px;transform:rotate(45deg);border-radius:1px;display:block;}
.theat-legend .l0{background:rgba(var(--gold-rgb),.09);}
.theat-legend .l1{background:rgba(var(--gold-rgb),.26);}
.theat-legend .l2{background:rgba(var(--gold-rgb),.48);}
.theat-legend .l3{background:rgba(var(--gold-rgb),.74);}
.theat-legend .l4{background:var(--gold-bright);box-shadow:0 0 6px rgba(var(--gold-rgb),.5);}
.theat-tip{position:absolute;z-index:5;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--gold-bright);white-space:nowrap;
background:rgba(16,14,22,.94);border:1px solid rgba(var(--gold-rgb),.45);border-radius:6px;
padding:4px 9px;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:opacity .12s ease;}
.theat-tip.is-on{opacity:1;}
.theat-tip b{color:var(--h1);font-weight:500;}
[data-theme="day"] .theat .hc0{fill:rgba(var(--gold-rgb),.13);}
[data-theme="day"] .theat-tip{background:rgba(252,246,232,.97);color:#4a3a1a;
box-shadow:0 8px 20px rgba(74,58,26,.25);}
/* ---------- 26 · 半环仪表 gauge (.tgauge) — Tarot.charts.gauge (v5.2) ------
Astrolabe hand: dotted semi-arc + tick ring, luminous value band, slender
annular needle, ✦ at the value, double-ring hub, serif figure center. */
.tgauge{width:100%;}
.tgauge svg{display:block;width:100%;height:auto;max-width:340px;margin:0 auto;overflow:visible;}
.tgauge .arc-bg{stroke:rgba(var(--gold-rgb),.22);stroke-width:1;fill:none;}
.tgauge .tick{stroke:rgba(var(--gold-rgb),.28);stroke-width:1;}
.tgauge .tick--major{stroke:var(--gold-line);}
.tgauge .arc-band{stroke:rgba(var(--gold-rgb),.14);stroke-width:8;fill:none;}
.tgauge .arc-val{stroke:var(--gold);stroke-width:1.4;fill:none;
filter:drop-shadow(0 0 3px rgba(var(--gold-rgb),.55));}
.tgauge .arc-red{stroke:var(--danger);opacity:.5;fill:none;}
.tgauge .needle{stroke:var(--gold-bright);stroke-width:1;}
.tgauge .needle-g,.tgauge .spark-g{transition:transform 1.1s cubic-bezier(.3,.8,.3,1);}
.tgauge .arc-val,.tgauge .arc-band{transition:stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1);}
.tgauge .hub{stroke:var(--gold-line);fill:none;}
.tgauge .hub-dot{fill:var(--gold);}
.tgauge .spark{fill:var(--gold-bright);}
.tgauge .big{fill:var(--h1);font-family:var(--serif);font-size:36px;letter-spacing:.04em;}
.tgauge .big .unit{font-size:14px;fill:var(--gold-dim);}
.tgauge .big.is-danger{fill:var(--danger);}
.tgauge .subl{fill:var(--muted);font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;}
.tgauge .minmax{fill:var(--gold-dim);font-family:var(--mono);font-size:9px;letter-spacing:.12em;}
@media (prefers-reduced-motion:reduce){
.tprog-fill::before{display:none;}
.loader-sigil [pathLength]{animation:none;stroke-dashoffset:0;opacity:1;}
.loader-sigil .fill{animation:none;opacity:1;}
.loader-moon::before{animation:none;transform:none;}
.loader-stars i{animation:none;opacity:.7;}
.loader-comet::after{animation:none;left:calc(50% - 22px);}
.theat .htw{animation:none;}
.tgauge .needle-g,.tgauge .spark-g,.tgauge .arc-val,.tgauge .arc-band{transition:none!important;}
}
@media print{
.theat .htw{animation:none!important;}
.tprog-fill{box-shadow:none!important;}
.loader-comet::after,.loader-stars i{animation:none!important;}
}