/* ============================================================
   BRITANNICA CD 97 — browser replica
   Palette: parchment / tan / deep maroon / engraved gold
   ============================================================ */

:root{
  --parch:#f2e8d3;
  --parch-hi:#f9f2e1;
  --parch-lo:#e6d8ba;
  --tan:#d6c5a2;
  --tan-hi:#efe3c8;
  --tan-lo:#b3a077;
  --face:#dccca9;
  --maroon:#6e1f2a;
  --maroon-hi:#8d2b38;
  --maroon-lo:#4c121b;
  --gold:#b8963e;
  --gold-hi:#d9b964;
  --ink:#2b2118;
  --ink-soft:#4a3b2c;
  --hi:#fffdf2;
  --lo:#55462f;
  --lo2:#8a7a5c;
  --link:#8a1f2b;
  --link-visited:#5c4a72;
  --ui-font:Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  --serif:Georgia,"Times New Roman",Times,serif;
  --display:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --art-fs:15px;
  --sb-w:236px;
}
body.ts-small{--art-fs:13px}
body.ts-large{--art-fs:17.5px}
body.ts-xlarge{--art-fs:20px}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font:11px/1.35 var(--ui-font);
  color:var(--ink);
  background:#0f3d3a;
  -webkit-font-smoothing:none;
  user-select:none;
}
::selection{background:var(--maroon);color:#fff}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,select,textarea{font:11px var(--ui-font);color:var(--ink);user-select:text}
a{color:var(--link)}
img,svg{display:block}
[hidden]{display:none!important}

/* ---------- desktop + CRT ---------- */
#desktop{
  position:fixed;inset:0;
  background:
    radial-gradient(120% 90% at 50% 30%, #17524d 0%, #0f3d3a 55%, #082724 100%);
}
#crt{
  position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    radial-gradient(115% 100% at 50% 50%, transparent 62%, rgba(0,0,0,.22) 100%);
  animation:crtflick 7s infinite steps(2);
}
@keyframes crtflick{0%,96%{opacity:1}97%{opacity:.92}98%,100%{opacity:1}}

body.waiting, body.waiting *{cursor:wait!important}

/* ---------- bevel utilities ---------- */
.raised{
  background:var(--face);
  border:1px solid;
  border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.55), inset -1px -1px 0 var(--lo2);
}
.sunken{
  border:1px solid;
  border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 var(--lo2), inset -1px -1px 0 rgba(255,253,242,.5);
}
.field{
  background:#fffdf6;
  border:1px solid;
  border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 var(--lo2);
  padding:3px 5px;
  outline:none;
}
.field:focus{background:#fffef9}

/* ---------- application window ---------- */
.window{
  position:absolute;
  left:14px;top:10px;right:14px;bottom:44px;
  display:flex;flex-direction:column;
  background:var(--tan);
  border:1px solid;
  border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), inset -1px -1px 0 var(--lo2),
             4px 4px 0 rgba(0,0,0,.35);
  z-index:10;
}
.window.opening{animation:winopen .34s cubic-bezier(.2,.8,.3,1)}
@keyframes winopen{from{transform:scale(.965);opacity:0}to{transform:scale(1);opacity:1}}
.window.minimized{display:none}
body.windowed .window{left:5vw;top:4vh;right:5vw;bottom:calc(4vh + 34px)}

#titlebar{
  height:26px;flex:none;
  display:flex;align-items:center;gap:6px;
  padding:0 3px 0 5px;
  background:linear-gradient(180deg, var(--maroon-hi) 0%, var(--maroon) 45%, var(--maroon-lo) 100%);
  border-bottom:1px solid var(--gold);
  color:#f7ecd6;
}
.tb-crest{
  width:17px;height:19px;flex:none;
  background:radial-gradient(circle at 50% 38%, var(--gold-hi) 0 2px, transparent 2px),
             linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #8a6d24);
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
#tb-title{
  flex:1;font-weight:bold;font-size:11px;letter-spacing:.02em;
  text-shadow:1px 1px 0 rgba(0,0,0,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-btns{display:flex;gap:2px}
.tbb{
  width:19px;height:17px;
  display:flex;align-items:center;justify-content:center;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), inset -1px -1px 0 var(--lo2);
}
.tbb:hover{background:var(--tan-hi)}
.tbb:active{
  border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 var(--lo2);
}
.tbb:active .gly{transform:translate(1px,1px)}
.tbb-x:hover{background:#c96a5e}
.gly{display:block;position:relative}
.gly-min{width:8px;height:2px;background:var(--ink);margin-top:7px}
.gly-max{width:9px;height:8px;border:1px solid var(--ink);border-top-width:3px}
.gly-x{width:8px;height:8px;
  background:
    linear-gradient(45deg,transparent 42%,var(--ink) 42% 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,var(--ink) 42% 58%,transparent 58%);
}
.gly-snd{width:11px;height:9px;
  background:linear-gradient(90deg,var(--ink) 0 3px, transparent 3px);
  clip-path:polygon(0 30%,30% 30%,62% 0,62% 100%,30% 70%,0 70%);
}
#tray-sound.muted .gly-snd{opacity:.35}
#tray-sound.muted::after{content:"✕";position:absolute;font-size:8px;color:#a33;right:1px;top:0}

/* ---------- menubar ---------- */
#menubar{
  height:22px;flex:none;display:flex;align-items:stretch;
  background:var(--tan);
  border-bottom:1px solid var(--lo2);
  padding:0 2px;
  position:relative;z-index:60;
}
.menu-top{
  display:flex;align-items:center;padding:0 8px;
  border:1px solid transparent;
}
.menu-top:hover,.menu-top.open{
  background:var(--maroon);color:#f7ecd6;
}
.menu-pop{
  position:absolute;top:100%;left:0;min-width:210px;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), 3px 3px 0 rgba(0,0,0,.35);
  padding:2px;
  z-index:70;
}
.menu-item{
  display:flex;align-items:center;gap:6px;
  padding:3px 18px 3px 4px;
  white-space:nowrap;
  border:1px solid transparent;
}
.menu-item .mi-ico{width:18px;flex:none;display:flex;justify-content:center}
.menu-item .mi-lbl{flex:1}
.menu-item .mi-key{color:#7a6a4f;margin-left:24px;font-size:10px}
.menu-item:hover:not(.disabled){background:var(--maroon);color:#f7ecd6}
.menu-item:hover:not(.disabled) .mi-key{color:#e3cfa6}
.menu-item.disabled{color:#988a6c;text-shadow:1px 1px 0 var(--hi)}
.menu-item.checked .mi-ico::before{content:"✓";font-size:11px;color:var(--maroon)}
.menu-item:hover.checked .mi-ico::before{color:#f7ecd6}
.menu-sep{height:1px;background:var(--lo2);margin:3px 2px;box-shadow:0 1px 0 var(--hi)}

/* ---------- toolbar ---------- */
#toolbar{
  flex:none;display:flex;align-items:center;gap:2px;
  padding:3px 4px;
  background:var(--tan);
  border-bottom:1px solid var(--lo2);
  box-shadow:inset 0 1px 0 var(--hi);
}
.tlbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;width:52px;padding:3px 2px 2px;
  border:1px solid transparent;
}
.tlbtn .tl-ico{height:20px;display:flex;align-items:center;justify-content:center}
.tlbtn .tl-lbl{font-size:10px;line-height:1}
.tlbtn:hover:not(:disabled){
  border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), inset -1px -1px 0 var(--lo2);
  background:var(--tan-hi);
}
.tlbtn:active:not(:disabled){
  border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 var(--lo2);
}
.tlbtn:active:not(:disabled) .tl-ico,
.tlbtn:active:not(:disabled) .tl-lbl{transform:translate(1px,1px)}
.tlbtn:disabled{cursor:default}
.tlbtn:disabled .tl-ico svg{opacity:.32;filter:grayscale(1)}
.tlbtn:disabled .tl-lbl{color:#988a6c;text-shadow:1px 1px 0 var(--hi)}
.tlbtn.pressed{
  border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 var(--lo2);
  background:var(--parch-lo);
}
.tl-sep{width:2px;align-self:stretch;margin:2px 3px;
  border-left:1px solid var(--lo2);border-right:1px solid var(--hi)}
.tlbtn svg{shape-rendering:geometricPrecision}

/* ---------- find bar ---------- */
#findbar{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:4px 6px;background:var(--parch-lo);
  border-bottom:1px solid var(--lo2);
}
#find-input{width:220px}
.fb-case{display:flex;align-items:center;gap:4px}
#find-count{min-width:70px;color:var(--ink-soft)}
.fb-close{margin-left:auto}
mark.find-hl{background:#e9c945;color:var(--ink);padding:0;box-shadow:0 0 0 1px #b8963e}
mark.find-hl.cur{background:#c9552e;color:#fff}

/* ---------- main split ---------- */
#main{flex:1;display:flex;min-height:0;padding:3px;gap:0}
#sidebar{
  width:var(--sb-w);flex:none;min-width:150px;max-width:420px;
  background:var(--parch);
  border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 var(--lo2);
  overflow:auto;
  user-select:none;
}
#splitter{width:5px;flex:none;cursor:ew-resize;background:transparent}
#splitter:hover{background:rgba(110,31,42,.25)}
#content{
  flex:1;min-width:0;overflow:auto;
  background:var(--parch);
  background-image: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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.35 0 0 0 0 0.24 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 var(--lo2);
  margin-left:3px;
}
#content.loading{cursor:wait}

/* sidebar internals */
.sb-h{
  font:bold 10px var(--ui-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--maroon);
  padding:7px 9px 4px;
  border-bottom:1px solid var(--tan-lo);
  background:linear-gradient(180deg,var(--parch-hi),var(--parch));
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.sb-item{
  display:flex;align-items:center;gap:7px;
  padding:5px 9px 5px 12px;
  border-bottom:1px dotted var(--tan-lo);
  cursor:pointer;
  font-size:11px;
}
.sb-item:hover{background:var(--maroon);color:#f7ecd6}
.sb-item.on{background:var(--parch-lo);box-shadow:inset 2px 0 0 var(--maroon);font-weight:bold}
.sb-item .sb-bullet{width:5px;height:5px;background:var(--gold);flex:none;transform:rotate(45deg)}
.sb-item:hover .sb-bullet{background:#f7ecd6}
.sb-note{padding:8px 10px;font-size:10px;color:var(--ink-soft);line-height:1.5}
.sb-letter{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin:2px;
  font:bold 11px var(--serif);
  border:1px solid transparent;
  cursor:pointer;
}
.sb-letter:hover{border-color:var(--hi) var(--lo) var(--lo) var(--hi);background:var(--tan-hi)}
.sb-letter.on{background:var(--maroon);color:#f7ecd6;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.sb-letters{padding:6px 6px 2px;display:flex;flex-wrap:wrap}

/* ---------- status bar ---------- */
#statusbar{
  flex:none;height:22px;display:flex;gap:3px;padding:2px 3px;
  background:var(--tan);border-top:1px solid var(--hi);
}
.sb-seg{
  display:flex;align-items:center;gap:6px;
  padding:0 8px;height:100%;
  border:1px solid;border-color:var(--lo2) var(--hi) var(--hi) var(--lo2);
  font-size:10px;white-space:nowrap;overflow:hidden;
}
.sb-grow{flex:1}
.sb-loc{width:26%}
.sb-count{width:21%}
.mini-disc{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:conic-gradient(from 0deg,#efe9dc,#b9ab8e,#efe9dc,#b9ab8e,#efe9dc);
  box-shadow:inset 0 0 0 2px #d8c8a8, inset 0 0 0 3.5px #8a7a5c;
}
.mini-disc.busy{animation:spin .5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- article typography ---------- */
.art{
  max-width:74ch;
  padding:26px 34px 46px 30px;
  font:var(--art-fs)/1.66 var(--serif);
  color:var(--ink);
  user-select:text;
  animation:artfade .3s ease-out;
}
@keyframes artfade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.art-kicker{
  font:bold 10px var(--ui-font);letter-spacing:.22em;text-transform:uppercase;
  color:var(--maroon);
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.art-kicker::after{content:"";flex:1;height:3px;border-top:1px solid var(--tan-lo);border-bottom:1px solid var(--tan-lo)}
.art h1{
  font:bold calc(var(--art-fs) * 2.05)/1.15 var(--serif);
  color:#3a1218;
  letter-spacing:-.01em;
  margin-bottom:4px;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.art-pron{font:italic calc(var(--art-fs) * .92) var(--serif);color:var(--ink-soft);margin-bottom:12px}
.art-pron b{font-style:normal;font-weight:bold}
.art-headnote{
  font:italic calc(var(--art-fs) * .95)/1.55 var(--serif);
  color:#43331f;
  border-top:1px solid var(--tan-lo);
  border-bottom:1px solid var(--tan-lo);
  padding:9px 4px;
  margin:0 0 18px;
}
.art-facts{
  float:right;width:236px;margin:4px 0 14px 22px;
  background:var(--parch-hi);
  border:1px solid var(--tan-lo);
  box-shadow:2px 2px 0 rgba(85,70,47,.18);
  padding:0 0 6px;
  font-size:calc(var(--art-fs) * .82);
}
.art-facts h4{
  font:bold 10px var(--ui-font);letter-spacing:.18em;text-transform:uppercase;
  background:var(--maroon);color:#f2e3c2;
  padding:4px 9px;
}
.art-facts dl{padding:6px 9px 0}
.art-facts dt{font-weight:bold;color:var(--maroon);margin-top:5px}
.art-facts dd{margin:0 0 2px;border-bottom:1px dotted var(--tan-lo);padding-bottom:3px}
.art p{margin:0 0 calc(var(--art-fs) * .85);text-align:justify;hyphens:auto}
.art .lede::first-letter{
  float:left;
  font:bold calc(var(--art-fs) * 3.6)/.82 var(--display);
  color:var(--maroon);
  padding:4px 8px 0 0;
  text-shadow:1px 1px 0 rgba(255,255,255,.6), -1px -1px 0 rgba(85,70,47,.28);
}
.art h2{
  font:bold calc(var(--art-fs) * 1.16) var(--serif);
  font-variant:small-caps;letter-spacing:.05em;
  color:#5a1f28;
  margin:24px 0 10px;
  padding-bottom:3px;
  border-bottom:1px solid var(--tan-lo);
  scroll-margin-top:12px;
}
.art h2 .sec-no{color:var(--gold);margin-right:6px;font-variant:normal}
.art h2.flash{animation:secflash 1.1s ease-out}
@keyframes secflash{0%{background:#ecd9a8}100%{background:transparent}}
.xref{
  color:var(--link);text-decoration:none;cursor:pointer;
  border-bottom:1px solid transparent;
}
.xref:hover{text-decoration:underline;background:#f0e2c0;border-bottom-color:var(--gold)}
.xref:active{color:var(--maroon-lo)}
.xref.visited{color:var(--link-visited)}
.xref:focus-visible{outline:1px dotted var(--ink);outline-offset:1px}
.art blockquote{
  margin:14px 22px;font-style:italic;color:#43331f;
  border-left:3px double var(--tan-lo);padding-left:12px;
}
.art table{
  border-collapse:collapse;margin:14px 0 18px;font-size:calc(var(--art-fs) * .88);
  box-shadow:2px 2px 0 rgba(85,70,47,.15);
}
.art th{
  background:var(--tan);font:bold 10px var(--ui-font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--maroon);text-align:left;
}
.art th,.art td{border:1px solid var(--tan-lo);padding:4px 10px}
.art td{background:var(--parch-hi)}
.art tr:nth-child(even) td{background:var(--parch)}
.art-related{
  margin-top:28px;padding-top:4px;
  border-top:3px double var(--tan-lo);
}
.art-related h3{
  font:bold 11px var(--ui-font);letter-spacing:.18em;text-transform:uppercase;color:var(--maroon);
  margin:8px 0 6px;
}
.art-related ul{list-style:none}
.art-related li{padding:3px 0 3px 16px;position:relative;font-size:calc(var(--art-fs) * .92)}
.art-related li::before{content:"❧";position:absolute;left:0;color:var(--gold);font-size:12px}
.art-related .rel-desc{color:var(--ink-soft);font-style:italic}
.art-sig{
  margin-top:20px;text-align:right;
  font:italic calc(var(--art-fs) * 1.02) var(--serif);color:#43331f;
}
.art-contrib{
  margin-top:6px;text-align:right;
  font:10.5px var(--ui-font);color:#7a6a4f;
  border-top:1px solid var(--tan-lo);padding-top:5px;
}
.art-media-strip{
  margin:18px 0 6px;padding:8px 10px;
  background:var(--parch-hi);border:1px solid var(--tan-lo);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:11px;
}
.art-media-strip b{font:bold 10px var(--ui-font);letter-spacing:.14em;text-transform:uppercase;color:var(--maroon)}
.mchip{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px 2px 5px;background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  cursor:pointer;font-size:10px;
}
.mchip:hover{background:var(--tan-hi)}
.mchip:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.mchip .mchip-g{color:var(--maroon);font-size:11px}

/* loading pane */
.loadpane{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--ink-soft);
}
.loadpane .big-disc{
  width:64px;height:64px;border-radius:50%;
  background:conic-gradient(from 20deg,#efe9dc,#b9ab8e,#efe9dc,#9c8c6b,#efe9dc,#b9ab8e,#efe9dc);
  box-shadow:inset 0 0 0 8px #d8c8a8, inset 0 0 0 10px #8a7a5c, 0 0 0 3px rgba(85,70,47,.25), 3px 4px 6px rgba(0,0,0,.3);
  position:relative;animation:spin .7s linear infinite;
}
.loadpane .big-disc::after{
  content:"";position:absolute;inset:26px;border-radius:50%;
  background:var(--maroon);box-shadow:0 0 0 2px #8a6d24;
}
.loadpane .lp-txt{font-size:11px;letter-spacing:.04em}

/* empty / error states */
.statepane{max-width:52ch;margin:60px auto;text-align:center;padding:0 20px}
.statepane .sp-ico{font-size:40px;color:var(--tan-lo);margin-bottom:10px;text-shadow:1px 1px 0 var(--hi)}
.statepane h2{font:bold 20px var(--serif);color:#3a1218;margin-bottom:8px}
.statepane p{font:13px/1.6 var(--serif);color:var(--ink-soft);margin-bottom:8px;text-align:center}
.statepane .sp-links{margin-top:14px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- home view ---------- */
.home{padding:22px 26px 34px;max-width:980px;margin:0 auto}
.home-head{display:flex;align-items:center;justify-content:center;gap:26px;padding:8px 0 4px}
.home-crest{flex:none;filter:drop-shadow(2px 3px 0 rgba(85,70,47,.3))}
.home-word{text-align:center}
.home-word .hw-pre{font:bold 10px var(--ui-font);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.home-word h1{
  font:bold 44px/1.02 var(--display);
  font-variant:small-caps;letter-spacing:.01em;
  color:var(--maroon);
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(60,20,26,.35), 2px 2px 0 rgba(184,150,62,.25);
}
.home-word .hw-ed{font:italic 13px var(--serif);color:var(--ink-soft);margin-top:4px}
.home-rule{height:5px;margin:12px 40px 18px;border-top:1px solid var(--tan-lo);border-bottom:1px solid var(--tan-lo)}
.home-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 8px}
.tile{
  display:flex;gap:12px;align-items:center;
  padding:13px 14px;min-height:74px;text-align:left;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), inset -1px -1px 0 var(--lo2), 2px 2px 0 rgba(85,70,47,.22);
  transition:transform .08s ease;
}
.tile:hover{background:var(--tan-hi);transform:translateY(-1px)}
.tile:active{
  border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 var(--lo2);
  transform:translateY(1px);
}
.tile:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}
.tile .t-ico{
  width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--parch);border:1px solid var(--tan-lo);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.6);
}
.tile .t-ico svg{transition:transform .12s ease}
.tile:hover .t-ico svg{transform:scale(1.07)}
.tile .t-tx b{display:block;font:bold 14px var(--serif);color:#3a1218;margin-bottom:2px}
.tile .t-tx span{font-size:10px;color:var(--ink-soft);line-height:1.4;display:block}
.home-strip{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px;margin:18px 8px 0}
.hbox{
  background:var(--parch-hi);border:1px solid var(--tan-lo);
  box-shadow:2px 2px 0 rgba(85,70,47,.18);
  min-height:120px;display:flex;flex-direction:column;
}
.hbox h3{
  font:bold 10px var(--ui-font);letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--maroon-hi),var(--maroon));
  color:#f2e3c2;padding:4px 9px;
  display:flex;justify-content:space-between;align-items:center;
}
.hbox h3 .hbox-sub{font-weight:normal;letter-spacing:.05em;text-transform:none;color:#d9b964;font-size:9px}
.hbox .hb-body{padding:8px 10px;font:12px/1.55 var(--serif);color:var(--ink);flex:1}
.hbox .hb-body .hb-item{display:block;padding:3px 0;border-bottom:1px dotted var(--tan-lo);cursor:pointer}
.hbox .hb-body .hb-item:hover{background:#f0e2c0}
.hbox .hb-body .hb-item:last-child{border-bottom:none}
.hbox .hb-item .hb-when{color:var(--maroon);font-weight:bold;font-size:10px;font-family:var(--ui-font)}
.hbox .hb-empty{color:#988a6c;font-style:italic}
.home-ticker{
  margin:16px 8px 0;padding:5px 10px;
  background:var(--maroon);color:#e9d6ac;font-size:10px;letter-spacing:.06em;
  display:flex;gap:8px;align-items:center;
  border:1px solid;border-color:var(--maroon-hi) var(--maroon-lo) var(--maroon-lo) var(--maroon-hi);
  cursor:pointer;
}
.home-ticker b{color:var(--gold-hi);letter-spacing:.16em}
.home-ticker:hover{color:#fff}
.fact-fade{animation:factfade .5s ease}
@keyframes factfade{from{opacity:0}to{opacity:1}}

/* ---------- index view ---------- */
.idx{padding:18px 24px 30px}
.idx-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.idx-head h1{font:bold 26px var(--serif);color:#3a1218}
.idx-head .idx-sub{font:italic 12px var(--serif);color:var(--ink-soft)}
.idx-letters{display:flex;flex-wrap:wrap;gap:2px;margin:8px 0 12px;padding:6px;background:var(--parch-hi);border:1px solid var(--tan-lo)}
.idx-letter{
  width:26px;height:24px;
  font:bold 13px var(--serif);color:var(--maroon);
  border:1px solid transparent;
}
.idx-letter:hover{border-color:var(--hi) var(--lo) var(--lo) var(--hi);background:var(--tan-hi)}
.idx-letter:active,.idx-letter.on{border-color:var(--lo) var(--hi) var(--hi) var(--lo);background:var(--maroon);color:#f2e3c2}
.idx-letter:disabled{color:#b3a68c;text-shadow:1px 1px 0 var(--hi);cursor:default}
.idx-findrow{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.idx-findrow label{font-weight:bold}
#idx-filter{width:240px}
.idx-count{color:var(--ink-soft);margin-left:auto}
.idx-cols{columns:2;column-gap:34px;column-rule:1px dotted var(--tan-lo)}
.idx-e{
  break-inside:avoid;display:flex;align-items:baseline;gap:6px;
  padding:2.5px 4px;font:13.5px var(--serif);cursor:pointer;
  border-bottom:1px dotted transparent;
}
.idx-e:hover{background:#f0e2c0;border-bottom-color:var(--tan-lo)}
.idx-e .idx-term{color:var(--ink)}
.idx-e .idx-dots{flex:1;border-bottom:1px dotted var(--tan-lo);transform:translateY(-3px)}
.idx-e .idx-pg{font-size:10.5px;color:#7a6a4f;font-family:var(--ui-font)}
.idx-e.see .idx-term{font-style:italic;color:var(--ink-soft)}
.idx-e.see .idx-see{font-style:normal;color:var(--link);font-size:12px}
.idx-prefix{
  position:sticky;bottom:8px;float:right;
  background:var(--maroon);color:#f2e3c2;
  font:bold 13px var(--ui-font);letter-spacing:.1em;
  padding:3px 12px;box-shadow:2px 2px 0 rgba(0,0,0,.3);
}

/* ---------- search view ---------- */
.srch{padding:20px 26px 30px;max-width:860px}
.srch h1{font:bold 26px var(--serif);color:#3a1218;margin-bottom:12px}
.srch-form{display:flex;gap:8px;align-items:center;margin-bottom:6px}
#srch-q{flex:1;font:14px var(--serif);padding:5px 8px}
.srch-hint{font:italic 11.5px var(--serif);color:var(--ink-soft);margin-bottom:18px}
.srch-hint a{cursor:pointer}
.srch-meta{
  font:11px var(--ui-font);color:var(--ink-soft);
  border-bottom:1px solid var(--tan-lo);padding-bottom:5px;margin-bottom:10px;
}
.srch-res{padding:9px 6px;border-bottom:1px dotted var(--tan-lo);cursor:pointer}
.srch-res:hover{background:#f0e2c0}
.srch-res h3{font:bold 16px var(--serif);color:var(--link)}
.srch-res.visited h3{color:var(--link-visited)}
.srch-res .sr-crumb{font:10px var(--ui-font);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:1px 0 3px}
.srch-res p{font:12.5px/1.5 var(--serif);color:var(--ink-soft)}
.srch-res p b{color:var(--maroon);background:#f0e2c0;padding:0 1px}
.srch-empty{margin-top:26px}

/* ---------- media view ---------- */
.media{padding:18px 24px 30px}
.media h1{font:bold 26px var(--serif);color:#3a1218;margin-bottom:4px}
.media .media-sub{font:italic 12px var(--serif);color:var(--ink-soft);margin-bottom:14px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.mcard{
  background:var(--parch-hi);border:1px solid var(--tan-lo);
  box-shadow:2px 2px 0 rgba(85,70,47,.2);
  cursor:pointer;padding:6px 6px 7px;
  transition:transform .09s ease;
}
.mcard:hover{transform:translateY(-2px);box-shadow:3px 4px 0 rgba(85,70,47,.28)}
.mcard:active{transform:translateY(0)}
.mcard .mthumb{
  height:104px;background:#efe6cf;border:1px solid var(--tan-lo);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.mcard .mthumb svg{width:100%;height:100%}
.mcard .mbadge{
  position:absolute;left:0;bottom:0;background:var(--maroon);color:#e9d6ac;
  font:bold 8.5px var(--ui-font);letter-spacing:.12em;padding:2px 6px;
}
.mcard h3{font:bold 12px var(--serif);color:#3a1218;margin:6px 2px 1px}
.mcard p{font:10px/1.35 var(--ui-font);color:var(--ink-soft);margin:0 2px}
.mviewer{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.mv-frame{
  background:#1c1712;padding:8px;flex:1 1 400px;max-width:620px;
  border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
}
.mv-screen{background:var(--parch-hi);position:relative;overflow:hidden}
.mv-screen svg{width:100%;height:auto;display:block}
.mv-wm{
  position:absolute;right:6px;bottom:5px;font:bold 8px var(--ui-font);letter-spacing:.18em;
  color:rgba(110,31,42,.5);text-transform:uppercase;pointer-events:none;
}
.mv-ctl{
  display:flex;align-items:center;gap:6px;margin-top:8px;
  background:var(--face);padding:4px 6px;
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
}
.mv-btn{
  width:26px;height:22px;font-size:10px;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
}
.mv-btn:hover{background:var(--tan-hi)}
.mv-btn:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.mv-btn.on{background:var(--maroon);color:#f2e3c2;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.mv-track{flex:1;height:12px;background:#efe6cf;border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);position:relative;cursor:pointer}
.mv-fill{position:absolute;inset:1px auto 1px 1px;width:0%;background:repeating-linear-gradient(90deg,var(--maroon) 0 6px,var(--maroon-hi) 6px 8px)}
.mv-time{font:10px var(--ui-font);min-width:76px;text-align:right;color:var(--ink-soft)}
.mv-info{flex:1 1 240px;min-width:220px}
.mv-info h2{font:bold 19px var(--serif);color:#3a1218;margin-bottom:3px}
.mv-info .mv-type{font:bold 9.5px var(--ui-font);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.mv-info p{font:12.5px/1.55 var(--serif);color:var(--ink-soft);margin:8px 0}
.scanlines::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
}
.vflick{animation:vflick 4s infinite steps(3)}
@keyframes vflick{0%,92%{opacity:1}94%{opacity:.94}96%,100%{opacity:1}}

/* ---------- atlas ---------- */
.atlas{padding:18px 24px 30px}
.atlas h1{font:bold 26px var(--serif);color:#3a1218;margin-bottom:4px}
.atlas .atlas-sub{font:italic 12px var(--serif);color:var(--ink-soft);margin-bottom:12px}
.atlas-flex{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.atlas-map{
  flex:1 1 460px;background:#e9dfc6;padding:6px;
  border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 var(--lo2), 3px 3px 0 rgba(85,70,47,.2);
}
.atlas-map svg{width:100%;height:auto}
.atlas-map .cont{fill:#d9c69a;stroke:#8a7a5c;stroke-width:.7;cursor:pointer;transition:fill .12s}
.atlas-map .cont:hover,.atlas-map .cont.sel{fill:#c98a5a}
.atlas-map .cont.sel{stroke:var(--maroon);stroke-width:1.1}
.atlas-map .ocean{fill:#b9c8c2}
.atlas-map .grat{stroke:#a3b3a6;stroke-width:.35;fill:none}
.atlas-map .mk{cursor:pointer}
.atlas-map .mk circle{fill:var(--maroon);stroke:#f2e3c2;stroke-width:1}
.atlas-map .mk:hover circle{fill:#c9552e}
.atlas-map .mk text{font:bold 6.5px var(--ui-font);fill:#43331f;paint-order:stroke;stroke:#efe6cf;stroke-width:2}
.atlas-panel{
  flex:1 1 240px;min-width:230px;
  background:var(--parch-hi);border:1px solid var(--tan-lo);
  box-shadow:2px 2px 0 rgba(85,70,47,.2);padding:0 0 10px;
}
.atlas-panel h3{
  font:bold 10px var(--ui-font);letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--maroon-hi),var(--maroon));color:#f2e3c2;padding:5px 10px;
}
.atlas-panel .ap-body{padding:10px 12px;font:12.5px/1.55 var(--serif)}
.atlas-panel dl{margin:6px 0 10px}
.atlas-panel dt{font-weight:bold;color:var(--maroon);font-size:11px;font-family:var(--ui-font);margin-top:6px}
.atlas-panel dd{margin:0;border-bottom:1px dotted var(--tan-lo);padding-bottom:3px}

/* ---------- yearbook ---------- */
.yb{padding:18px 26px 34px;max-width:860px}
.yb-head{display:flex;align-items:baseline;gap:16px;border-bottom:3px double var(--tan-lo);padding-bottom:8px;margin-bottom:14px}
.yb-head h1{font:bold 30px var(--display);font-variant:small-caps;color:var(--maroon)}
.yb-head .yb-sub{font:italic 13px var(--serif);color:var(--ink-soft)}
.yb-cat{
  display:inline-block;font:bold 9.5px var(--ui-font);letter-spacing:.16em;text-transform:uppercase;
  background:var(--tan);border:1px solid var(--tan-lo);color:var(--maroon);
  padding:2px 8px;margin-bottom:5px;
}
.yb-e{padding:12px 4px;border-bottom:1px dotted var(--tan-lo)}
.yb-e h2{font:bold 18px var(--serif);color:#3a1218;display:flex;align-items:baseline;gap:10px}
.yb-e .yb-month{font:bold 10px var(--ui-font);letter-spacing:.12em;color:#b8963e;background:#3a1218;padding:2px 7px;color:#e9d6ac;flex:none}
.yb-e p{font:13.5px/1.6 var(--serif);color:var(--ink);margin-top:5px;text-align:justify}

/* ---------- history & bookmarks ---------- */
.lst{padding:18px 24px 30px;max-width:880px}
.lst h1{font:bold 26px var(--serif);color:#3a1218;margin-bottom:4px}
.lst .lst-sub{font:italic 12px var(--serif);color:var(--ink-soft);margin-bottom:14px}
.lst-row{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px;border-bottom:1px dotted var(--tan-lo);
  font-size:11px;
}
.lst-row:hover{background:#f0e2c0}
.lst-row .lr-ico{width:18px;text-align:center;color:var(--maroon);font-size:13px;flex:none}
.lst-row .lr-title{flex:1;font:bold 13px var(--serif);color:var(--link);cursor:pointer}
.lst-row.visited .lr-title{color:var(--link-visited)}
.lst-row .lr-meta{color:#7a6a4f;font-size:10px;white-space:nowrap}
.lst-actions{display:flex;gap:8px;margin:12px 0}

/* ---------- dictionary ---------- */
.dict{padding:18px 24px 30px;max-width:820px}
.dict h1{font:bold 26px var(--serif);color:#3a1218;margin-bottom:12px}
.dict-form{display:flex;gap:8px;margin-bottom:10px}
#dict-q{flex:1;font:14px var(--serif);padding:5px 8px}
.dict-e{padding:10px 6px;border-bottom:1px dotted var(--tan-lo)}
.dict-e .d-hw{font:bold 16.5px var(--serif);color:#3a1218}
.dict-e .d-pr{font:italic 12px var(--serif);color:var(--ink-soft);margin:0 8px}
.dict-e .d-pos{font:italic 12px var(--serif);color:var(--maroon)}
.dict-e .d-def{font:13px/1.55 var(--serif);margin-top:3px;color:var(--ink)}
.dict-e .d-def i{color:var(--ink-soft)}
#dictpop{
  position:fixed;z-index:500;width:288px;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), 4px 4px 0 rgba(0,0,0,.35);
  animation:popin .13s ease-out;
}
@keyframes popin{from{transform:translateY(4px) scale(.98);opacity:0}to{transform:none;opacity:1}}
#dictpop .dp-title{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,var(--maroon-hi),var(--maroon));
  color:#f2e3c2;font-weight:bold;font-size:10px;letter-spacing:.08em;
  padding:3px 4px 3px 8px;cursor:move;
}
#dictpop .dp-body{padding:9px 11px;font:12.5px/1.5 var(--serif);user-select:text}
#dictpop .dp-hw{font:bold 15.5px var(--serif);color:#3a1218}
#dictpop .dp-pr{font-style:italic;color:var(--ink-soft);font-size:11.5px}
#dictpop .dp-pos{font-style:italic;color:var(--maroon)}
#dictpop .dp-foot{display:flex;justify-content:flex-end;gap:6px;padding:0 8px 8px}
#dictpop .dp-nf{color:var(--ink-soft);font-style:italic}

/* ---------- dialogs ---------- */
#modal-root{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;pointer-events:none}
#modal-root .m-veil{position:absolute;inset:0;background:rgba(20,12,8,.28);pointer-events:auto}
.dlg{
  position:relative;min-width:300px;max-width:520px;pointer-events:auto;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), inset -1px -1px 0 var(--lo2), 5px 5px 0 rgba(0,0,0,.4);
  animation:popin .14s ease-out;
}
.dlg-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(180deg,var(--maroon-hi),var(--maroon));
  color:#f7ecd6;font-weight:bold;font-size:11px;
  padding:3px 4px 3px 9px;cursor:move;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.dlg-body{padding:14px 16px;font-size:11px;line-height:1.5;user-select:text}
.dlg-body .dlg-ico{float:left;font-size:30px;margin:2px 14px 4px 0;color:var(--maroon);text-shadow:1px 1px 0 var(--hi)}
.dlg-btns{display:flex;justify-content:flex-end;gap:8px;padding:0 14px 13px}
.dlg-btn{
  min-width:76px;padding:4px 12px;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), inset -1px -1px 0 var(--lo2);
  font-size:11px;
}
.dlg-btn:hover{background:var(--tan-hi)}
.dlg-btn:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo);box-shadow:inset 1px 1px 0 var(--lo2)}
.dlg-btn.default{outline:1px solid var(--lo);outline-offset:1px;font-weight:bold}
.dlg-btn:disabled{color:#988a6c;text-shadow:1px 1px 0 var(--hi);cursor:default;box-shadow:none}
.dlg-btn:focus-visible{outline:1px dotted var(--ink);outline-offset:-4px}
.dlg-row{display:flex;align-items:center;gap:8px;margin:7px 0}
.dlg-row label{min-width:96px}
.dlg hr{border:none;border-top:1px solid var(--lo2);border-bottom:1px solid var(--hi);margin:10px 0}
.dlg .radio-g label,.dlg .chk-g label{display:flex;gap:6px;align-items:center;margin:5px 0;cursor:pointer}
.dlg .prog{height:16px;background:#efe6cf;border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);margin:10px 0;position:relative;overflow:hidden}
.dlg .prog i{position:absolute;inset:1px auto 1px 1px;width:0%;background:repeating-linear-gradient(90deg,var(--maroon) 0 9px,var(--maroon-hi) 9px 11px);transition:width .12s linear}
.spin-ctl{display:inline-flex;align-items:center;gap:0}
.spin-ctl input{width:44px;text-align:center}
.spin-ctl .spin-up,.spin-ctl .spin-dn{width:15px;height:11px;font-size:7px;line-height:1;display:flex;align-items:center;justify-content:center;background:var(--face);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.spin-ctl .spin-up:active,.spin-ctl .spin-dn:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.spin-ctl .spin-col{display:flex;flex-direction:column}

/* ---------- tooltip ---------- */
#tooltip{
  position:fixed;z-index:950;pointer-events:none;
  background:#ffffe1;border:1px solid #000;
  padding:3px 7px;font:10px var(--ui-font);color:#000;
  box-shadow:2px 2px 0 rgba(0,0,0,.3);
  max-width:230px;
}
#tooltip b{display:block}
#tooltip span{color:#555}

/* ---------- taskbar ---------- */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:34px;z-index:200;
  background:var(--tan);
  border-top:1px solid var(--hi);
  box-shadow:0 -1px 0 var(--lo2);
  display:flex;align-items:center;gap:5px;padding:3px 4px;
}
#startbtn{
  display:flex;align-items:center;gap:5px;
  font-weight:bold;padding:3px 10px 3px 6px;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), inset -1px -1px 0 var(--lo2);
}
#startbtn:active,#startbtn.open{border-color:var(--lo) var(--hi) var(--hi) var(--lo);box-shadow:inset 1px 1px 0 var(--lo2)}
.start-flag{
  width:14px;height:14px;
  background:
    linear-gradient(135deg, var(--maroon) 0 48%, var(--gold) 52% 100%);
  clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);
}
#tb-tasks{flex:1;display:flex;gap:4px;min-width:0}
.task-btn{
  display:flex;align-items:center;gap:6px;max-width:260px;min-width:140px;
  padding:3px 8px;font-size:10px;text-align:left;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6);
  overflow:hidden;white-space:nowrap;
}
.task-btn.on{border-color:var(--lo) var(--hi) var(--hi) var(--lo);box-shadow:inset 1px 1px 0 var(--lo2);background:var(--parch-lo);font-weight:bold}
.task-btn .tk-crest{width:10px;height:11px;flex:none;background:linear-gradient(180deg,var(--gold-hi),var(--gold));clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
#tray{
  display:flex;align-items:center;gap:4px;
  border:1px solid;border-color:var(--lo2) var(--hi) var(--hi) var(--lo2);
  padding:2px 6px;height:26px;
}
#tray-sound{position:relative;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
#tray-clock{font-size:10px;padding:0 4px}
#startmenu{
  position:fixed;left:4px;bottom:36px;z-index:300;width:212px;
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), 3px 3px 0 rgba(0,0,0,.4);
  display:flex;
}
#startmenu .sm-band{
  width:26px;flex:none;
  background:linear-gradient(180deg,var(--maroon-hi),var(--maroon-lo));
  color:var(--gold-hi);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:bold 12px var(--display);font-variant:small-caps;letter-spacing:.14em;
  display:flex;align-items:center;justify-content:flex-start;padding:8px 0;
}
#startmenu .sm-items{flex:1;padding:2px}
.sm-item{display:flex;align-items:center;gap:9px;padding:6px 8px;font-size:11px;cursor:pointer}
.sm-item:hover{background:var(--maroon);color:#f2e3c2}
.sm-item .sm-ico{width:20px;text-align:center;font-size:14px}
.sm-sep{height:1px;background:var(--lo2);margin:2px 4px;box-shadow:0 1px 0 var(--hi)}

/* ---------- splash ---------- */
#splash{
  position:fixed;inset:0;z-index:1000;background:#0a0805;
  display:flex;align-items:center;justify-content:center;
  color:#cbb98d;
}
#sp-launch,#sp-loading,#sp-title{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.sp-cd{
  width:200px;height:200px;border-radius:50%;position:relative;flex:none;
  background:
    radial-gradient(circle, #efe9dc 0 12%, transparent 12%),
    conic-gradient(from 30deg,#e8e2d4,#b9ab8e,#efe9dc,#9c8c6b,#e8e2d4,#cbb98d,#e8e2d4,#b9ab8e,#e8e2d4);
  box-shadow:0 0 0 2px rgba(0,0,0,.6), 0 0 34px rgba(201,185,141,.25), inset 0 0 22px rgba(0,0,0,.28);
}
.sp-cd-sheen{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 200deg, transparent 0 40deg, rgba(255,255,255,.35) 55deg, transparent 75deg, transparent 200deg, rgba(255,255,255,.22) 225deg, transparent 250deg);
  mix-blend-mode:screen;
}
.sp-cd-label{
  position:absolute;inset:31%;border-radius:50%;
  background:radial-gradient(circle at 50% 32%, var(--maroon-hi), var(--maroon) 58%, var(--maroon-lo));
  box-shadow:0 0 0 3px #b8963e, inset 0 0 8px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  color:#e9d6ac;font:bold 13px var(--display);font-variant:small-caps;letter-spacing:.08em;
}
.sp-cd-label .sp-cd-sub{font:bold 9px var(--ui-font);letter-spacing:.3em;color:var(--gold-hi)}
.sp-cd-hole{
  position:absolute;inset:45.5%;border-radius:50%;background:#0a0805;
  box-shadow:0 0 0 3px #d8c8a8, 0 0 0 4px rgba(0,0,0,.55);
}
.sp-cd.spinning{animation:spin 1.05s linear infinite}
.sp-tray{padding:10px 26px 18px;background:#171310;border:1px solid #3a3128;box-shadow:0 6px 20px rgba(0,0,0,.6), inset 0 1px 0 #2c2620;border-radius:4px}
.sp-word{font:bold 34px var(--display);font-variant:small-caps;color:#e3cf9d;text-shadow:0 2px 0 #000, 0 0 18px rgba(201,185,141,.35);margin-top:6px}
.sp-line2{font:12px var(--ui-font);letter-spacing:.22em;text-transform:uppercase;color:#8a7a5c}
.sp-insert{
  margin-top:8px;padding:9px 30px;font:bold 13px var(--ui-font);color:var(--ink);
  background:var(--face);
  border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.7), inset -1px -1px 0 var(--lo2), 0 4px 0 rgba(0,0,0,.5);
}
.sp-insert:hover{background:var(--tan-hi)}
.sp-insert:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo);box-shadow:inset 1px 1px 0 var(--lo2);transform:translateY(2px)}
.sp-hint{font:italic 11px var(--serif);color:#8a7a5c}
.sp-copy{font:9.5px var(--ui-font);color:#5c5040;letter-spacing:.06em;margin-top:10px}
.sp-prog-wrap{width:340px}
.sp-prog{height:18px;background:#171310;border:1px solid #4a4033;box-shadow:inset 1px 1px 0 #000;padding:2px}
#sp-prog-bar{height:100%;width:0%;background:repeating-linear-gradient(90deg,var(--maroon-hi) 0 9px,var(--maroon) 9px 11px)}
#sp-loadmsg{font:11px var(--ui-font);color:#a3926c;letter-spacing:.05em;min-height:14px}
#sp-title{gap:10px;padding:30px;cursor:pointer}
#sp-title .sp-title-word{
  font:bold 52px/1.05 var(--display);font-variant:small-caps;color:#e3cf9d;
  text-shadow:0 2px 0 #000, 0 0 26px rgba(201,185,141,.4), 0 -1px 0 rgba(0,0,0,.8);
}
.sp-title-rule{width:340px;height:5px;border-top:1px solid #8a6d24;border-bottom:1px solid #5c5040}
.sp-title-sub{font:italic 15px var(--serif);color:#a3926c}
.sp-title-edition{font:bold 11px var(--ui-font);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-hi);margin-top:2px}
.sp-begin{margin-top:16px;font:bold 13px var(--ui-font);color:#e9d6ac;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
#splash.leaving{animation:splashout .45s ease-in forwards}
@keyframes splashout{to{opacity:0;transform:scale(1.03)}}

/* ---------- blackout ---------- */
#blackout{position:fixed;inset:0;z-index:1200;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.bo-text{font:bold 17px "Courier New",monospace;color:#e8b64c;text-align:center;letter-spacing:.03em;text-shadow:0 0 8px rgba(232,182,76,.5)}
#bo-restart{padding:7px 22px;font:bold 12px var(--ui-font);color:var(--ink);background:var(--face);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
#bo-restart:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}

/* ---------- media animations ---------- */
.mv-screen.paused *{animation-play-state:paused!important}
.an-disc-spin{animation:spin 2.2s linear infinite}
.an-rocket{animation:rocketUp 14s cubic-bezier(.3,.55,.6,1) infinite}
@keyframes rocketUp{0%,6%{transform:translateY(0)}55%{transform:translateY(-46px)}100%{transform:translateY(-230px)}}
.an-flame{transform-origin:161px 176px;animation:flame .12s linear infinite alternate}
@keyframes flame{from{transform:scaleY(.82) scaleX(.9)}to{transform:scaleY(1.18) scaleX(1.06)}}
.an-smoke{transform-origin:160px 168px;animation:smokePuff 2.4s ease-out infinite}
@keyframes smokePuff{0%{transform:scale(.6);opacity:.95}70%{opacity:.5}100%{transform:scale(2.1) translateY(-6px);opacity:0}}
.an-lava circle{animation:lapUp 1.5s ease-out infinite}
.an-lava circle:nth-child(2){animation-delay:.25s}
.an-lava circle:nth-child(3){animation-delay:.5s}
.an-lava circle:nth-child(4){animation-delay:.8s}
.an-lava circle:nth-child(5){animation-delay:1.05s}
@keyframes lapUp{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-52px);opacity:0}}
.an-ash{transform-origin:165px 30px;animation:ashDrift 4s ease-in-out infinite alternate}
@keyframes ashDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(16px,-10px) scale(1.25)}}
.an-glow{animation:glowPulse .7s ease-in-out infinite alternate}
@keyframes glowPulse{from{opacity:.65}to{opacity:1}}
.an-flow{stroke-dasharray:7 5;animation:flowDown 1.1s linear infinite}
@keyframes flowDown{to{stroke-dashoffset:-24}}
.an-sun{animation:sunPulse 3s ease-in-out infinite alternate;transform-origin:160px 100px}
@keyframes sunPulse{from{opacity:.85}to{opacity:1}}
.an-o1{transform-origin:160px 100px;animation:orb 4.2s linear infinite}
.an-o2{transform-origin:160px 100px;animation:orb 7.4s linear infinite}
.an-o3{transform-origin:160px 100px;animation:orb 11.6s linear infinite}
@keyframes orb{to{transform:rotate(360deg)}}
.an-comet{animation:cometRun 12s linear infinite}
@keyframes cometRun{0%{transform:translate(120px,-46px);opacity:0}10%{opacity:1}80%{opacity:1}100%{transform:translate(-260px,110px);opacity:0}}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:repeating-conic-gradient(#d9c9a6 0% 25%, #e9dcbe 0% 50%) 0 0/4px 4px}
::-webkit-scrollbar-thumb{
  background:var(--face);
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,253,242,.6), inset -1px -1px 0 var(--lo2);
}
::-webkit-scrollbar-button:single-button{
  background:var(--face);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  height:16px;width:16px;
}
::-webkit-scrollbar-button:single-button:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
*{scrollbar-color:var(--face) #dccfae;scrollbar-width:auto}

/* focus */
button:focus-visible,.tile:focus-visible{outline:1px dotted var(--ink);outline-offset:-3px}

/* responsive guard for smaller windows */
@media (max-width:860px){
  .home-tiles{grid-template-columns:1fr 1fr}
  .home-strip{grid-template-columns:1fr}
  .idx-cols{columns:1}
  :root{--sb-w:190px}
}

/* ---------- print ---------- */
#print-area{display:none}
@media print{
  body{background:#fff;overflow:visible}
  #desktop,#splash,#modal-root,#dictpop,#tooltip,#blackout,#crt,#startmenu{display:none!important}
  #print-area{display:block!important;user-select:text}
  #print-area .art{max-width:100%;padding:0;font-size:12pt;color:#000}
  #print-area .art h1{color:#000}
  #print-area .art h2{color:#000;border-color:#999}
  #print-area .xref{color:#000;text-decoration:none}
  #print-area .xref::after{content:""}
  #print-area .art-facts{border-color:#999}
  #print-area .art-facts h4{background:#666;color:#fff}
  #print-area .print-head{font:bold 9pt var(--ui-font);letter-spacing:.14em;text-transform:uppercase;border-bottom:2pt solid #6e1f2a;padding-bottom:4pt;margin-bottom:12pt;color:#6e1f2a}
  #print-area .print-foot{margin-top:16pt;border-top:1pt solid #999;padding-top:5pt;font:8.5pt var(--ui-font);color:#555}
}