:root{
  --ink:#0b0908; --ink-2:#15110f; --ink-3:#1f1915;
  --bone:#e6dccb; --ash:#8f877c; --ash-2:#5d564e;
  --red:#a3221a; --rust:#b0552c; --gold:#e8b25a; --blue:#3a5b92; --sage:#7d8a6a;
  --hi:#3d342d; --lo:#030202;
  --font-display:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  --pink:#d9475e; --chart:#b5c933; --mag:#b8417f; --cyan:#5fc6cf;
  --font-ui:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--bone);overflow:hidden;
  font-family:var(--font-ui);font-size:14px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--gold)}
:focus-visible{outline:1px dashed var(--gold);outline-offset:2px}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23e6dccb' stroke-width='1.2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23e6dccb'/%3E%3C/svg%3E") 12 12, crosshair}
#scene.over{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M2 14c4-6 8-8 12-8s8 2 12 8c-4 6-8 8-12 8s-8-2-12-8z' fill='none' stroke='%23e8b25a' stroke-width='1.6'/%3E%3Ccircle cx='14' cy='14' r='4' fill='%23e8b25a'/%3E%3C/svg%3E") 14 14, pointer}
#scene.dragging{cursor:grabbing}

/* film */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(5,3,2,.55) 80%,rgba(0,0,0,.85) 100%)}
#grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:.11;mix-blend-mode:screen}
.scan{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.18;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:4;transition:opacity .5s linear}

/* bevels: alternate-1999 system chrome */
.bevel{background:var(--ink-2);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:inset 1px 1px 0 rgba(255,240,220,.05),inset -1px -1px 0 rgba(0,0,0,.5)}
.bevel-in{border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);background:#070505}

/* menu bar */
#menubar{position:fixed;top:0;left:0;right:0;height:34px;z-index:20;display:flex;align-items:center;gap:6px;padding:0 8px;
  font-size:13px;letter-spacing:.04em;opacity:0;transform:translateY(-100%);transition:all .6s var(--ease)}
body.live #menubar{opacity:1;transform:none}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.22em;padding:4px 10px 4px 4px;color:var(--bone)}
.brand svg{color:var(--red)}
#nav{display:flex;gap:2px;flex:1}
#nav button{padding:5px 10px;color:var(--ash);border:1px solid transparent}
#nav button:hover,#nav button.on{color:var(--bone);background:var(--ink-3);border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.tray{display:flex;align-items:center;gap:10px;color:var(--ash)}
#snd{padding:3px 8px;border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);font-size:12px}
#snd[aria-pressed=false]{color:var(--ash-2)}
#clock{font-variant-numeric:tabular-nums;font-size:12px}
#menuBtn{display:none;padding:3px 8px;border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);font-size:12px}

/* status bar */
#status{position:fixed;left:0;right:0;bottom:0;height:26px;z-index:20;display:flex;align-items:center;gap:16px;padding:0 10px;
  font-size:12px;color:var(--ash);opacity:0;transition:opacity .8s}
body.live #status{opacity:1}
#loc{color:var(--bone);white-space:nowrap}
.hint{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ver{color:var(--red);letter-spacing:.12em}

/* region card */
#card{position:fixed;left:16px;bottom:42px;z-index:15;width:min(360px,calc(100vw - 32px));padding:14px 16px 14px;
  background:rgba(13,10,9,.86);backdrop-filter:blur(6px);transition:opacity .5s,transform .5s var(--ease)}
#card.hide{opacity:0;transform:translateY(10px)}
.card-kicker{font-size:12px;letter-spacing:.24em;color:var(--acc,var(--red))}
.card-title{font-family:var(--font-display);font-weight:600;font-size:28px;letter-spacing:.16em;text-transform:uppercase;margin:4px 0 6px;line-height:1.05}
.card-text{font-size:13px;line-height:1.55;color:#cfc5b4}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{padding:7px 12px;font-size:13px;letter-spacing:.08em;color:var(--bone);background:var(--ink-3)}
.btn:hover{background:#2a221d}
.btn:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.btn.go{color:var(--gold)}

/* tooltip */
#tip{position:fixed;z-index:30;pointer-events:none;padding:4px 8px;font-size:12px;letter-spacing:.06em;color:var(--gold);white-space:nowrap}

/* title flash: The Fragile layer */
#title{position:fixed;left:-4vw;top:22vh;z-index:6;pointer-events:none;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.82;
  font-size:clamp(56px,13vw,210px);letter-spacing:.32em;opacity:0}
#title .l{display:inline-block;background-image:url(./assets/mem/paintings-360.jpg);background-size:60vw auto;background-position:center;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:brightness(1.9) contrast(1.3) saturate(1.3)}
#title .m{transform:scaleX(-1)}
#title .ghost{position:absolute;left:.5em;top:.55em;color:transparent;-webkit-text-stroke:1px rgba(230,220,203,.28);pointer-events:none}
#title .echo{position:absolute;right:18vw;top:.62em;font-style:italic;font-weight:500;text-transform:none;letter-spacing:.02em;color:var(--pink);font-size:.62em;opacity:.9}
#title .r{transform:rotate(180deg)}
#title .d{transform:translateY(.12em)}
#title .sub{display:block;font-family:var(--font-ui);font-weight:500;font-size:13px;letter-spacing:.5em;color:var(--bone);margin:22px 0 0 5vw;opacity:.85}
#title.show{animation:flash 2.8s var(--ease) forwards}
@keyframes flash{
  0%{opacity:0;transform:translateX(-6vw);filter:blur(10px)}
  18%{opacity:1;transform:translateX(0);filter:blur(.4px)}
  70%{opacity:.95;filter:blur(.6px)}
  100%{opacity:0;transform:translateX(3vw);filter:blur(6px)}
}

/* memory drift */
#drift{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity 3s linear}
#drift.on{opacity:1}
.drift-img{position:absolute;background-size:cover;background-position:center;mix-blend-mode:screen;filter:blur(14px) saturate(1.3);opacity:.55}
.d1{width:60vw;height:60vh;left:-10vw;top:10vh;background-image:url(./assets/mem/paintings-361.jpg);animation:dr1 40s linear infinite}
.d2{width:55vw;height:70vh;right:-12vw;top:5vh;background-image:url(./assets/mem/roll-sky-03.jpg);animation:dr2 52s linear infinite}
.d3{width:80vw;height:40vh;left:10vw;bottom:-6vh;background-image:url(./assets/mem/night-366.jpg);animation:dr1 60s linear infinite reverse}
@keyframes dr1{from{transform:translate(0,0) rotate(0)}50%{transform:translate(6vw,-4vh) rotate(4deg)}to{transform:translate(0,0) rotate(0)}}
@keyframes dr2{from{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,5vh) scale(1.15)}to{transform:translate(0,0) scale(1)}}
.frag{position:absolute;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.6em;color:rgba(230,220,203,.55);font-size:13px}
.f1{left:12vw;top:30vh;transform:rotate(-90deg)}.f2{right:14vw;top:22vh}.f3{left:40vw;bottom:24vh;transform:scaleX(-1)}
.f6{right:10vw;top:12vh;text-transform:none;font-style:italic;letter-spacing:.3em;font-size:18px;color:rgba(217,71,94,.7)}
.f4{right:8vw;bottom:38vh;transform:rotate(90deg);color:rgba(163,34,26,.8)}.f5{left:22vw;top:64vh;letter-spacing:1.1em}

/* windows */
.win{position:fixed;z-index:25;width:min(460px,calc(100vw - 24px));max-height:min(70vh,640px);display:flex;flex-direction:column;
  background:#0e0b0a;animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}}
.win-bar{display:flex;align-items:center;gap:8px;height:26px;padding:0 4px 0 8px;cursor:move;user-select:none;touch-action:none;
  background:linear-gradient(90deg,#5c140f,#2a0d0a 60%,#1a1210);font-size:12px;letter-spacing:.14em;color:var(--bone)}
.win-bar .t{flex:1}
.win-x{width:18px;height:18px;line-height:14px;text-align:center;font-size:12px;border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);background:var(--ink-3)}
.win-body{padding:16px 18px 18px;overflow:auto;font-size:13px;line-height:1.6;color:#d6ccbb}
.win-body h2{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:24px;color:var(--bone);margin-bottom:10px;line-height:1.1}
.win-body p{margin-bottom:10px}
.muted{color:var(--ash)}
.empty{margin-top:8px;padding:10px 12px;border:1px dashed var(--ash-2);color:var(--ash);font-size:12px;line-height:1.55}
.row-links{margin-top:6px}
.search{display:flex;align-items:center;gap:8px;margin:6px 0 10px}
.search span{font-size:12px;color:var(--ash)}
input,select,textarea{width:100%;font:inherit;font-size:13px;color:var(--bone);background:#070505;padding:7px 8px;
  border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);border-radius:0}
form label{display:block;font-size:12px;color:var(--ash);margin-bottom:10px}
form label input,form label select,form label textarea{margin-top:4px}
.formmsg{margin-top:10px;font-size:12px;color:var(--gold);min-height:1em}
.arch{list-style:none}
.arch li{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:8px 0;border-top:1px solid #241d18}
.arch .k{font-size:12px;letter-spacing:.1em;color:var(--red);text-transform:uppercase}
.arch .v b{color:var(--bone);font-weight:500}
.arch .v small{display:block;color:var(--ash);font-size:12px}
.arch .none{grid-column:1/-1;color:var(--ash);font-size:12px}

/* book reader */
.win.wide{width:min(860px,calc(100vw - 24px));max-height:calc(100vh - 90px)}
.bk-head{text-align:center;margin-bottom:12px}
.bk-head h2{margin-bottom:4px}
.bk-by{font-size:12px;color:var(--ash);letter-spacing:.06em}
.bk-by i{font-family:var(--font-display);font-size:15px;color:var(--bone)}
.bk-view{display:flex;justify-content:center;gap:2px;background:#000;padding:10px;border:1px solid #1d1714}
.bk-view img{display:block;height:auto;width:100%;max-width:400px;max-height:calc(100vh - 290px);object-fit:contain;background:#000}
.bk-view.two img{width:50%}
.bk-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.bk-count{font-size:12px;color:var(--ash);letter-spacing:.08em}
.btn:disabled{color:var(--ash-2);cursor:default}
.alink{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* memory window */
.win.memwin{width:min(340px,calc(100vw - 24px))}
.mem-k{font-size:12px;letter-spacing:.24em;color:var(--red)}
.mem-t{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:.06em;color:var(--bone);margin:4px 0 2px;line-height:1.1}
.mem-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.mem-n{font-size:12px;color:var(--ash);min-width:56px;text-align:center}
.card-empty{font-size:12px;color:var(--ash);border:1px dashed var(--ash-2);padding:6px 8px;width:100%}

/* boot */
#boot{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#050403;transition:opacity 1s linear}
#boot.gone{opacity:0;pointer-events:none}
.boot-bg{position:absolute;inset:-5%;background:url(./assets/mem/paintings-356.jpg) center/cover;filter:blur(18px) saturate(1.2);opacity:.22}
.boot-inner{position:relative;width:min(520px,calc(100vw - 40px))}
#bootlog{font-family:var(--font-ui);font-size:13px;line-height:1.7;color:var(--ash);min-height:12.5em;white-space:pre-wrap}
#bootlog .ok{color:var(--gold)}
#bootlog .h{color:var(--bone);letter-spacing:.24em}
.boot-bar{height:14px;margin:14px 0 18px;padding:2px}
#bootfill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--red) 0 10px,transparent 10px 13px);transition:width .3s}
.boot-actions{display:flex;align-items:center;gap:18px}
#enter{padding:10px 26px;letter-spacing:.4em;font-weight:700}
#enter:disabled{color:var(--ash-2);cursor:wait}
.link{color:var(--ash);text-decoration:underline;text-underline-offset:3px;font-size:13px}
.link:hover{color:var(--bone)}
.boot-note{margin-top:18px;font-size:12px;color:var(--ash-2)}

/* mobile */
@media (max-width:760px){
  #nav{display:none;position:fixed;top:34px;right:0;left:0;flex-direction:column;background:var(--ink-2);border-bottom:1px solid var(--lo);padding:6px}
  #nav.open{display:flex}
  #nav button{text-align:left;padding:12px}
  #menuBtn{display:block}
  #clock{display:none}
  .hint{display:none}
  #card{left:8px;right:8px;width:auto;bottom:34px;padding:10px 12px}
  .card-title{font-size:21px}
  .card-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px}
  .card-actions{gap:6px;margin-top:8px}
  .card-actions .btn{padding:6px 9px;font-size:12px}
  .win{left:6px!important;right:6px;top:auto!important;bottom:32px;width:auto;max-height:68vh}
  .win.wide{width:auto;max-height:calc(100vh - 76px)}
  .bk-view img{max-height:calc(100vh - 300px)}
  #title{top:16vh}
  body:has(#windows .win) #card{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){
  #title.show{animation:fadeOnly 2.4s linear forwards}
  @keyframes fadeOnly{0%{opacity:0}20%{opacity:1}75%{opacity:1}100%{opacity:0}}
  .drift-img{animation:none}
}