@font-face { font-family:"Michelangelus"; src:url(assets/fonts/Michelangelus-Regular.ttf) format("truetype"); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"Michelangelus"; src:url(assets/fonts/Michelangelus-Italic.ttf) format("truetype"); font-weight:400; font-style:italic; font-display:swap }
@font-face { font-family:"Michelangelus"; src:url(assets/fonts/Michelangelus-Bold.ttf) format("truetype"); font-weight:500 900; font-style:normal; font-display:swap }
@font-face { font-family:"Michelangelus"; src:url(assets/fonts/Michelangelus-BoldItalic.ttf) format("truetype"); font-weight:500 900; font-style:italic; font-display:swap }
/* Liter (SIL OFL, assets/fonts/Liter-OFL.txt): the Swiss grotesk of the interface. One weight; hierarchy is size and space. */
@font-face { font-family:"Liter"; src:url(assets/fonts/Liter-Regular.ttf) format("truetype"); font-weight:400; font-style:normal; font-display:swap }
/* Chinese: Noto Serif SC subset to the characters in the site (tools/subset_fonts.py) */
@font-face { font-family:"NotoSerifSC-Sub"; src:url(assets/fonts/NotoSerifSC-Regular.sub.woff2) format("woff2"); font-weight:100 500; font-display:swap; unicode-range:U+00B7,U+2010-206F,U+2E80-9FFF,U+F900-FAFF,U+FF00-FFEF }
@font-face { font-family:"NotoSerifSC-Sub"; src:url(assets/fonts/NotoSerifSC-SemiBold.sub.woff2) format("woff2"); font-weight:501 900; font-display:swap; unicode-range:U+00B7,U+2010-206F,U+2E80-9FFF,U+F900-FAFF,U+FF00-FFEF }
:root { --ink:#1d1b18; --paper:#f6f2ea; --accent:#c6482f; --muted:#8a847a; --glass:rgba(22,20,18,.62); --font:"Michelangelus","NotoSerifSC-Sub",-apple-system,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Helvetica Neue",Arial,sans-serif; --serif:"Michelangelus","NotoSerifSC-Sub","Iowan Old Style","Palatino","Songti SC","Noto Serif CJK SC",Georgia,serif; }
/* Landing scale: 1px up to a 1440 × 900 window, then grows with the window so a 4K screen sees the same composition,
   not a small island with a near-square crop of the ribbon photo. Hairlines (1px) are left alone. */
:root { --u:max(1px, min(calc(100vw / 1440), calc(100vh / 900))) }
* { box-sizing:border-box }
html,body { margin:0; height:100%; background:#0d0c0b; color:var(--paper); font-family:var(--font); overflow:hidden; -webkit-user-select:none; user-select:none }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block }
.hidden { display:none !important }
/* Preparing the rooms: the landing's language while the shaders link. Paper ground, a hairline head, the ribbon window
   shown whole at its own 3:1 with the ultramarine and ochre planes, and the measures of the house (ceiling, door, sill,
   table, seat) breathing as the loading mark. Every animation is transform-only, so it keeps moving while the main thread
   runs the daylight bake. */
#warming { position:fixed; inset:0; z-index:25; display:grid; place-items:center; overflow:auto; padding:calc(24 * var(--u)); background:#f2efe7; color:#1a1917; opacity:1; transition:opacity .45s ease }
#warming.done { opacity:0; pointer-events:none }
#warming .wm { width:min(calc(1100 * var(--u)), 100%); }
#warming .wm-head { display:flex; align-items:baseline; gap:calc(28 * var(--u)); padding-bottom:calc(11 * var(--u)); border-bottom:1px solid #1a1917; font-size:calc(11.5 * var(--u)); letter-spacing:.22em; text-transform:uppercase }
#warming .wm-place { flex:1; color:#77716a }
#warming .wm-addr { color:#77716a }
#warming .wm-window { position:relative; margin:calc(34 * var(--u)) 0 calc(30 * var(--u)); aspect-ratio:3 / 1; max-height:46vh }
#warming .wm-window img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover }
#warming .wm-plane { position:absolute; display:block }
#warming .wm-blue { left:calc(-14 * var(--u)); bottom:calc(-14 * var(--u)); width:19%; height:58%; background:#2c4a8a }
#warming .wm-ochre { right:calc(-14 * var(--u)); top:calc(-14 * var(--u)); width:13%; height:46%; background:#d8a646 }
#warming .wm-row { display:flex; align-items:flex-end; gap:calc(30 * var(--u)) }
#warming .wm-text { flex:1; min-width:0 }
#warming .wm-title { font-family:var(--serif); font-size:clamp(calc(30 * var(--u)),4.6vw,calc(60 * var(--u))); line-height:1; letter-spacing:-.025em }
#warming .wm-sub { margin-top:calc(12 * var(--u)); max-width:34em; font-size:calc(13.5 * var(--u)); line-height:1.6; color:#46423c }
#warming .wm-measure { display:flex; align-items:flex-end; gap:calc(6 * var(--u)); height:calc(46 * var(--u)) }
#warming .wm-measure span { width:calc(3 * var(--u)); height:calc(var(--h) / 244 * calc(46 * var(--u))); background:#1a1917; transform-origin:bottom; animation:wm-breathe 1.6s cubic-bezier(.45,0,.55,1) infinite }
#warming .wm-measure span.r { background:#bf3f2b }
#warming .wm-measure span:nth-child(2) { animation-delay:.12s } #warming .wm-measure span:nth-child(3) { animation-delay:.24s }
#warming .wm-measure span:nth-child(4) { animation-delay:.36s } #warming .wm-measure span:nth-child(5) { animation-delay:.48s }
@keyframes wm-breathe { 0%, 100% { transform:scaleY(1) } 50% { transform:scaleY(.38) } }
#warming .wm-progress { display:flex; align-items:center; gap:calc(16 * var(--u)); margin-top:calc(22 * var(--u)); padding-top:calc(14 * var(--u)); border-top:1px solid #1a1917 }
#warming .wm-bar { position:relative; flex:1; height:1px; overflow:hidden; background:rgba(26,25,23,.16) }
#warming .wm-bar i { position:absolute; left:0; top:0; bottom:0; width:30%; background:#1a1917; animation:wm-slide 1.3s cubic-bezier(.45,0,.55,1) infinite }
#warming[data-known] .wm-bar i { animation:none; transition:width .25s ease }
@keyframes wm-slide { from { transform:translateX(-100%) } to { transform:translateX(340%) } }
#warming #warmcount { min-width:calc(150 * var(--u)); text-align:right; font-size:calc(11 * var(--u)); letter-spacing:.12em; text-transform:uppercase; color:#77716a; font-variant-numeric:tabular-nums }
#warming .wm-head span { white-space:nowrap }
@media (max-width:820px) { #warming .wm-head .wm-place { display:none } #warming .wm-head { justify-content:space-between; letter-spacing:.12em; font-size:10.5px } #warming .wm-window { aspect-ratio:16 / 9 } }
@media (prefers-reduced-motion:reduce) { #warming .wm-measure span { animation:none } #warming .wm-bar i { animation-duration:3s } }
/* First steps: two glass cards over the first view. Left, the house in four lines; right, the four controls that matter.
   Hairlines, a serif title, small-caps labels and one ultramarine plane, as on the landing. */
#firststeps { position:absolute; left:50%; top:50%; z-index:7; transform:translate(-50%,-50%); display:flex; align-items:stretch; gap:calc(18 * var(--u)); width:min(calc(1140 * var(--u)), calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; pointer-events:auto }
/* The fade sits on each card, not the wrapper: an animated ancestor would become the backdrop root and the blur would see nothing. */
#firststeps .fs-card { animation:fs-in .4s ease both }
#firststeps .fs-controls { animation-delay:.08s }
@keyframes fs-in { from { opacity:0; transform:translateY(calc(12 * var(--u))) } to { opacity:1; transform:none } }
#firststeps .fs-card { box-sizing:border-box; padding:calc(26 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u)); color:#fbf8f1; background:rgba(24,22,20,.72); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); border:1px solid rgba(255,255,255,.14); border-radius:calc(14 * var(--u)); box-shadow:0 calc(18 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.28) }
#firststeps .fs-intro { flex:1.4 1 0; min-width:0 }
#firststeps .fs-controls { flex:1.1 1 0; min-width:0; display:flex; flex-direction:column }
#firststeps .fs-photos { position:relative; margin:0 0 calc(18 * var(--u)); display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:calc(6 * var(--u)); height:calc(230 * var(--u)) }
#firststeps .fs-photos img { position:relative; z-index:1; display:block; width:100%; height:100%; min-height:0; object-fit:cover; background:#2a2724 }
#firststeps .fs-photos .fs-main { grid-row:1 / span 2 }
#firststeps .fs-plane { position:absolute; left:calc(-10 * var(--u)); bottom:calc(-10 * var(--u)); width:18%; height:44%; background:#2c4a8a }
#firststeps .fs-kicker { font-size:calc(11 * var(--u)); letter-spacing:.22em; text-transform:uppercase; color:rgba(251,248,241,.7) }
#firststeps .fs-title { margin:calc(4 * var(--u)) 0 calc(14 * var(--u)); font-family:var(--serif); font-weight:400; font-size:calc(34 * var(--u)); line-height:1.08; letter-spacing:-.01em }
#firststeps .fs-lines { list-style:none; margin:0; padding:0 }
#firststeps .fs-lines li { display:grid; grid-template-columns:calc(30 * var(--u)) 1fr; gap:calc(10 * var(--u)); padding:calc(7 * var(--u)) 0; border-top:1px solid rgba(255,255,255,.16); font-family:var(--serif); font-size:calc(16.5 * var(--u)); line-height:1.45 }
#firststeps .fs-lines em { padding-top:calc(2 * var(--u)); font-size:calc(12.5 * var(--u)); color:rgba(251,248,241,.55) }
#firststeps .fs-sign { margin:calc(12 * var(--u)) 0 0; padding-top:calc(10 * var(--u)); border-top:1px solid rgba(255,255,255,.16); font-size:calc(13 * var(--u)); letter-spacing:.04em; line-height:1.55; color:rgba(251,248,241,.72) }
#firststeps .fs-controls ul { list-style:none; margin:0; padding:0; display:grid; gap:calc(20 * var(--u)); flex:1; align-content:center }
#firststeps .fs-controls li { display:grid; grid-template-columns:calc(156 * var(--u)) 1fr; align-items:center; gap:calc(16 * var(--u)); font-size:calc(19 * var(--u)); line-height:1.3 }
#firststeps .fs-keys { display:flex; align-items:center; gap:calc(6 * var(--u)) }
#firststeps .fs-keys small { font-size:calc(13 * var(--u)); color:rgba(251,248,241,.72); margin-left:calc(4 * var(--u)) }
#firststeps kbd { display:inline-grid; place-items:center; min-width:calc(34 * var(--u)); height:calc(34 * var(--u)); box-sizing:border-box; padding:0 calc(8 * var(--u)); font:600 calc(16 * var(--u)) var(--font); color:#fbf8f1; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.5); border-bottom-width:calc(3 * var(--u)); border-radius:calc(7 * var(--u)) }
#firststeps .fs-mouse { width:calc(22 * var(--u)); height:calc(32 * var(--u)) }
#firststeps .fs-foot { margin-top:calc(18 * var(--u)); padding-top:calc(12 * var(--u)); border-top:1px solid rgba(255,255,255,.18); font-size:calc(14 * var(--u)); color:rgba(251,248,241,.78) }
#firststeps.touch .fs-desk, #firststeps:not(.touch) .fs-touch { display:none }
#firststeps.touch .fs-controls li { grid-template-columns:1fr; font-size:calc(18 * var(--u)) }
@media (max-width:820px) {
  #firststeps { flex-direction:column; width:calc(100vw - 24px); max-height:calc(100dvh - 24px) }
  #firststeps .fs-photos { height:calc(150 * var(--u)); grid-template-columns:1fr }
  #firststeps .fs-photos img:not(.fs-main) { display:none }
  #firststeps .fs-card { padding:calc(18 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)) }
  #firststeps .fs-lines li { font-size:calc(15 * var(--u)); padding:calc(5 * var(--u)) 0 }
  #firststeps .fs-title { font-size:calc(28 * var(--u)) }
}
@media (prefers-reduced-motion:reduce) { #firststeps .fs-card { animation:none } }
/* Landing, after the Purists: white ground, hairlines on a 12-column grid, one ribbon window, three colour planes
   (ultramarine, ochre, vermilion) and a scale of the house's own heights (ceiling, door, sill, table, seat). */
#title { --lc-ink:#1a1917; --lc-paper:#f2efe7; --lc-mute:#77716a; --lc-blue:#2c4a8a; --lc-red:#bf3f2b; --lc-ochre:#d8a646; --lc-rule:rgba(26,25,23,.16);
  position:fixed; inset:0; z-index:30; overflow-y:auto; background:var(--lc-paper); color:var(--lc-ink) }
.lc { min-height:100%; max-width:calc(1400 * var(--u)); margin:0 auto; padding:clamp(calc(16 * var(--u)),3.4vh,calc(36 * var(--u))) clamp(calc(20 * var(--u)),4.2vw,calc(64 * var(--u))) clamp(calc(16 * var(--u)),3vh,calc(30 * var(--u))); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(calc(14 * var(--u)),1.8vw,calc(28 * var(--u))); align-content:center }
.lc > * { grid-column:1 / -1 }
.lc-head { display:flex; align-items:baseline; gap:calc(28 * var(--u)); padding-bottom:calc(11 * var(--u)); border-bottom:1px solid var(--lc-ink); font-size:calc(11.5 * var(--u)); letter-spacing:.22em; text-transform:uppercase }
.lc-place { flex:1; color:var(--lc-mute) }
.lc-lang { display:flex; gap:calc(2 * var(--u)) }
.lc-lang button { font:inherit; letter-spacing:.14em; color:var(--lc-mute); background:none; border:0; border-bottom:1px solid transparent; padding:calc(2 * var(--u)) calc(5 * var(--u)); cursor:pointer }
.lc-lang button.on { color:var(--lc-ink); border-bottom-color:var(--lc-ink) }
.lc-hero { display:grid; grid-template-columns:subgrid; align-items:end; padding:clamp(calc(10 * var(--u)),3vh,calc(34 * var(--u))) 0 clamp(calc(14 * var(--u)),2.8vh,calc(30 * var(--u))) }
.lc-hero h1 { grid-column:1 / 9; margin:0 0 0 -.04em; padding-bottom:.17em; font-family:var(--serif); font-weight:400; font-size:min(13vw,19vh,calc(196 * var(--u))); line-height:.82; letter-spacing:-.035em }
.lc-intro { grid-column:9 / -1; padding-bottom:clamp(calc(18 * var(--u)),3vh,calc(30 * var(--u))) }
.lc-addr { font-size:calc(12 * var(--u)); letter-spacing:.2em; text-transform:uppercase; padding-bottom:calc(9 * var(--u)); margin-bottom:calc(10 * var(--u)); border-bottom:1px solid var(--lc-rule) }
.lc-lede { margin:0; font-size:clamp(calc(14 * var(--u)),1.15vw,calc(16.5 * var(--u))); line-height:1.7; color:#33302b; text-wrap:pretty }
.lc-window { position:relative; margin:0 0 calc(24 * var(--u)); height:clamp(calc(150 * var(--u)), calc(100vh - calc(640 * var(--u))), 46vh) }
.lc-window figcaption { position:absolute; right:0; top:100% }
.lc-window img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 46% }
.lc-plane { position:absolute; display:block }
.lc-blue { left:calc(-14 * var(--u)); bottom:calc(-14 * var(--u)); width:19%; height:58%; background:var(--lc-blue) }
.lc-ochre { right:calc(-14 * var(--u)); top:calc(-14 * var(--u)); width:13%; height:46%; background:var(--lc-ochre) }
.lc figcaption { display:flex; gap:calc(10 * var(--u)); justify-content:flex-end; padding-top:calc(8 * var(--u)); font-size:calc(11 * var(--u)); letter-spacing:.12em; color:var(--lc-mute) }
.lc-points { display:grid; grid-template-columns:subgrid; row-gap:calc(14 * var(--u)); padding-top:clamp(calc(10 * var(--u)),2.4vh,calc(26 * var(--u))) }
.lc-point, .lc-plan { grid-column:span 3; margin:0; border-top:1px solid var(--lc-ink); padding-top:calc(10 * var(--u)) }
.lc-point em { font-size:calc(13 * var(--u)); color:var(--lc-mute) }
.lc-point h3 { margin:calc(2 * var(--u)) 0 calc(6 * var(--u)); font-family:var(--serif); font-weight:500; font-size:clamp(calc(17 * var(--u)),1.5vw,calc(21 * var(--u))); letter-spacing:.01em }
.lc-point p { margin:0; max-width:22em; font-size:calc(13.5 * var(--u)); line-height:1.65; color:#46423c }
.lc-plan svg { display:block; width:100%; height:clamp(calc(70 * var(--u)),12vh,calc(124 * var(--u))) }
.lc-plan figcaption { justify-content:flex-start; padding-top:calc(6 * var(--u)) }
#lcPlan .w { fill:var(--lc-ink) } #lcPlan .o { fill:var(--lc-paper) } #lcPlan .g { stroke:var(--lc-ink); stroke-width:.035 }
#lcPlan .sb { fill:var(--lc-ink) } #lcPlan .vp { fill:var(--lc-red) } #lcPlan .v { fill:var(--lc-red); opacity:.28 } #lcPlan text { font-family:var(--serif); font-style:italic; font-size:.5px; fill:var(--lc-mute) }
.lc-foot { display:flex; align-items:center; gap:clamp(calc(16 * var(--u)),2.4vw,calc(34 * var(--u))); margin-top:clamp(calc(14 * var(--u)),3vh,calc(30 * var(--u))); padding-top:clamp(calc(12 * var(--u)),2vh,calc(18 * var(--u))); border-top:1px solid var(--lc-ink) }
button.primary { font:inherit; font-size:calc(15 * var(--u)); letter-spacing:.14em; text-transform:uppercase; color:#fbf8f1; background:var(--lc-red, var(--accent)); border:0; border-radius:0; padding:calc(16 * var(--u)) calc(26 * var(--u)) calc(15 * var(--u)); cursor:pointer; transition:background .2s }
button.primary::after { content:"\2192"; margin-left:calc(16 * var(--u)); letter-spacing:0 }
button.primary:hover:not(:disabled) { background:var(--lc-ink, var(--ink)) }
button.primary:disabled { opacity:.4; cursor:default }
.lc-status { flex:1; min-width:0 }
.loading { position:relative; height:calc(16 * var(--u)); font-size:calc(11 * var(--u)); letter-spacing:.08em; color:var(--lc-mute) }
#loadbar { position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--lc-ink); transition:width .25s }
.lc .hint { margin-top:calc(6 * var(--u)); font-size:calc(12 * var(--u)); color:var(--lc-mute) }
.lc-credit { font-size:calc(12 * var(--u)); letter-spacing:.06em; color:var(--lc-mute); white-space:nowrap }
.lc-measure { position:relative; display:flex; align-items:flex-end; gap:calc(6 * var(--u)); height:calc(46 * var(--u)) }
.lc-measure span { width:calc(3 * var(--u)); height:calc(var(--h) / 244 * calc(46 * var(--u))); background:var(--lc-ink) }
.lc-measure span.r { background:var(--lc-red) }
.lc-measure small { position:absolute; right:0; top:calc(-15 * var(--u)); font-size:calc(9.5 * var(--u)); letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; color:var(--lc-mute) }
@media (max-width:820px) {
  .lc-hero h1 { grid-column:1 / -1; font-size:min(23vw,140px) }
  .lc-intro { grid-column:1 / -1; padding-top:18px }
  .lc-window { height:24vh }
  .lc-points { row-gap:0; padding-top:4px }
  .lc-point { grid-column:1 / -1; display:grid; grid-template-columns:2.2em 1fr; column-gap:8px; padding:9px 0 10px }
  .lc-point em { grid-row:span 2; padding-top:4px }
  .lc-point h3 { margin:0 0 3px; font-size:17px }
  .lc-plan, .lc-measure, .lc-place, .lc .hint, .lc .loading { display:none }
  .lc-credit { white-space:normal; font-size:11px }
  .lc-foot { position:sticky; bottom:0; margin:10px calc(-1 * clamp(20px,4.2vw,64px)) 0; padding:12px clamp(20px,4.2vw,64px) calc(12px + env(safe-area-inset-bottom)); background:var(--lc-paper) }
}
#hud { position:fixed; inset:0; pointer-events:none; z-index:20 }
#topbar { position:absolute; left:0; right:0; top:0; display:flex; gap:calc(8 * var(--u)); align-items:center; padding:calc(12 * var(--u)) calc(14 * var(--u)); pointer-events:auto; background:linear-gradient(180deg, rgba(0,0,0,.45), transparent) }
#topbar .brand { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-underline-offset:.25em; font-family:var(--serif); font-size:calc(18 * var(--u)); letter-spacing:.02em; text-shadow:0 1px calc(8 * var(--u)) rgba(0,0,0,.6) }
#topbar .brand:hover, #topbar .brand:focus-visible { text-decoration:underline; text-decoration-thickness:1px }
#topbar .spacer { flex:1 }
.chip { font:inherit; font-size:calc(13 * var(--u)); color:var(--paper); background:var(--glass); border:1px solid rgba(255,255,255,.18); border-radius:calc(999 * var(--u)); padding:calc(7 * var(--u)) calc(13 * var(--u)); cursor:pointer; backdrop-filter:blur(calc(8 * var(--u))) }
.chip:hover { background:rgba(60,56,50,.8) } .chip.on { background:var(--accent); border-color:transparent }
#crosshair { position:absolute; left:50%; top:50%; width:calc(6 * var(--u)); height:calc(6 * var(--u)); margin:calc(-3 * var(--u)); border-radius:50%; background:rgba(255,255,255,.85); box-shadow:0 0 0 1px rgba(0,0,0,.4) }
#label { position:absolute; left:50%; top:calc(50% + calc(26 * var(--u))); transform:translateX(-50%); font-size:calc(18 * var(--u)); line-height:1.45; padding:calc(9 * var(--u)) calc(16 * var(--u)); border-radius:calc(10 * var(--u)); background:var(--glass); backdrop-filter:blur(calc(8 * var(--u))); text-shadow:0 1px calc(3 * var(--u)) rgba(0,0,0,.7); max-width:calc(100vw - calc(32 * var(--u))); width:max-content; text-align:center; opacity:0; transition:opacity .15s }
#label.show { opacity:1 }
body.touring #crosshair, body.touring #label, body.in-pano #crosshair, body.in-pano #label { display:none }
#toast { position:absolute; left:50%; bottom:calc(92 * var(--u)); transform:translateX(-50%); font-size:calc(13 * var(--u)); padding:calc(8 * var(--u)) calc(14 * var(--u)); border-radius:calc(9 * var(--u)); background:var(--glass); opacity:0; transition:opacity .3s; max-width:70vw; text-align:center }
#toast.show { opacity:1 }
/* Panorama loading: a glass pill in the middle of the view with the download percentage and a hairline bar. */
#panoload { position:absolute; left:50%; top:calc(50% - calc(28 * var(--u))); transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:calc(9 * var(--u)); min-width:calc(220 * var(--u)); padding:calc(14 * var(--u)) calc(20 * var(--u)) calc(13 * var(--u)); border-radius:calc(12 * var(--u)); background:var(--glass); backdrop-filter:blur(10px); color:var(--paper); font-size:calc(14 * var(--u)); font-variant-numeric:tabular-nums; pointer-events:none; z-index:8 }
#panoload i { position:relative; display:block; width:100%; height:2px; overflow:hidden; background:rgba(255,255,255,.2) }
#panoload b { position:absolute; inset:0; background:var(--paper); transform-origin:left; transform:scaleX(.04); transition:transform .15s linear }
#ctxmenu { position:fixed; z-index:50; display:flex; flex-direction:column; min-width:200px; padding:5px; border-radius:10px; background:var(--glass); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); box-shadow:0 8px 28px rgba(0,0,0,.35) }
#ctxmenu.hidden { display:none }
#ctxmenu button { font:inherit; font-size:13px; text-align:left; color:var(--paper); background:none; border:0; border-radius:7px; padding:8px 12px; cursor:pointer; white-space:nowrap }
#ctxmenu button:hover:not(:disabled) { background:rgba(255,255,255,.14) }
#ctxmenu button:disabled { opacity:.5; cursor:default }
#ctxmenu button.sep { margin-top:4px; border-top:1px solid rgba(255,255,255,.14); border-radius:0 0 7px 7px; color:rgba(246,242,234,.75) }
/* Stats for nerds: monospace, top left under the bar, selectable so the numbers can be copied. */
#nerdstats { position:fixed; left:calc(12 * var(--u)); top:calc(var(--bar-h, calc(58 * var(--u))) + calc(8 * var(--u))); z-index:45; max-width:calc(100vw - calc(24 * var(--u))); padding:calc(8 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); color:#f4f1ea; background:rgba(10,10,10,.78); border:1px solid rgba(255,255,255,.12); border-radius:calc(8 * var(--u)); font:calc(11.5 * var(--u))/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; pointer-events:auto; user-select:text }
#nerdstats .ns-head { display:flex; align-items:center; justify-content:space-between; gap:calc(16 * var(--u)); margin-bottom:calc(4 * var(--u)) }
#nerdstats .ns-head button { font:inherit; font-size:calc(16 * var(--u)); line-height:1; color:inherit; background:none; border:0; padding:0 calc(2 * var(--u)); cursor:pointer; opacity:.7 }
#nerdstats .ns-head button:hover { opacity:1 }
#nerdstats pre { margin:0; font:inherit; white-space:pre; overflow-x:auto }
#minimap { position:absolute; left:calc(16 * var(--u)); bottom:calc(16 * var(--u)); width:calc(190 * var(--u)); height:calc(190 * var(--u)); border-radius:50%; box-shadow:0 0 0 calc(3 * var(--u)) rgba(255,255,255,.55), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.5); background:rgba(28,30,34,.85); pointer-events:auto; cursor:pointer }
#bigmap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(8,8,10,.78); pointer-events:auto; backdrop-filter:blur(4px) }
#bigmapCanvas { width:min(92vw, 1100px); height:min(80vh, 760px); border-radius:14px; background:#f3f6fb; box-shadow:0 30px 80px rgba(0,0,0,.6) }
.mapHint { position:absolute; bottom:22px; left:0; right:0; text-align:center; font-size:13px; color:rgba(255,255,255,.75) }
#panel { position:absolute; right:14px; top:58px; bottom:14px; width:min(420px, 92vw); background:rgba(246,242,234,.97); color:var(--ink); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); pointer-events:auto; display:flex; flex-direction:column; overflow:hidden }
#panelHead { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,.08); font-weight:600 }
#panelClose { border:0; background:none; font-size:22px; cursor:pointer; color:var(--muted) }
#panelBody { overflow:auto; padding:10px 12px 20px; font-size:14px; line-height:1.5 }
.vp { display:flex; gap:10px; align-items:center; padding:8px; border-radius:10px; cursor:pointer } .vp:hover { background:rgba(0,0,0,.05) } .vp.active { background:rgba(198,72,47,.12) }
.vp img { width:96px; height:64px; object-fit:cover; border-radius:6px; background:#ddd } .vp .t { font-weight:600; font-size:13.5px } .vp .s { color:var(--muted); font-size:12px }
.dot { display:inline-block; width:calc(9 * var(--u)); height:calc(9 * var(--u)); border-radius:50%; margin-right:calc(6 * var(--u)) } .dot.pano{background:#2f6fe0} .dot.photo{background:#2fa66a} .dot.rn{background:#e0383a}
.post { padding:10px 8px 14px; border-bottom:1px solid rgba(0,0,0,.08) } .post h4 { margin:0 0 6px; font-size:15px } .post p { margin:4px 0 8px; color:#3f3b35; white-space:pre-wrap } .post img, .post video { width:100%; border-radius:8px; margin-top:6px; display:block } .post a { color:var(--accent); font-size:12px } .post .go { font:inherit; font-size:12.5px; margin-top:8px; padding:6px 10px; border-radius:7px; border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer }
#compare { position:absolute; inset:0; pointer-events:auto } #compareImg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:inset(0 45% 0 0) }
#compareSlider { position:absolute; left:50%; bottom:40px; transform:translateX(-50%); width:min(60vw, 520px) } #compareHint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); font-size:12px; color:rgba(255,255,255,.8); white-space:nowrap }
#compare .bar { position:absolute; top:0; bottom:0; width:2px; background:#fff; left:55%; box-shadow:0 0 8px rgba(0,0,0,.6) }
#viewExit { position:absolute; left:50%; top:64px; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:14px; padding:6px 6px 6px 16px; border-radius:12px; background:rgba(16,15,14,.34); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:13px; letter-spacing:.03em; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:auto }
#viewExit[data-mode="pano"] .vx-compare, #viewExit[data-mode="compare"] .vx-pano { display:none }
#viewExitBtn { display:flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.16); color:#fff; font:inherit; cursor:pointer }
#viewExitBtn:hover { background:rgba(255,255,255,.3) }
#viewExit kbd { display:inline-grid; place-items:center; min-width:22px; height:22px; border-radius:5px; background:#fff; color:var(--ink); font:600 12px/1 -apple-system, system-ui, sans-serif; text-shadow:none }
@media (pointer:coarse) { #viewExit { padding-left:6px } #viewExit > span, #viewExit kbd { display:none } }
/* Tour caption: lives in the free strip between the minimap's corner (--cap-l) and the right-hand clearance (--cap-r).
   Centered on the viewport when that keeps it clear of the map, otherwise pushed right to --cap-l; type scales with the strip. */
#hud { --cap-l:calc(calc(16 * var(--u)) + calc(190 * var(--u)) + calc(12 * var(--u))); --cap-r:calc(16 * var(--u)); --cap-free:calc(100vw - var(--cap-l) - var(--cap-r)) }
#caption { position:absolute; left:50%; bottom:calc(40 * var(--u)); transform:translateX(max(-50%, calc(var(--cap-l) - 50vw))); width:max-content; max-width:min(calc(820 * var(--u)), var(--cap-free)); font-family:var(--serif); font-size:clamp(calc(16 * var(--u)), var(--cap-free) / 20, calc(26 * var(--u))); line-height:1.4; text-align:center; text-shadow:0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.8); padding:.5em .9em; border-radius:calc(14 * var(--u)); background:rgba(22,20,18,.56); backdrop-filter:blur(calc(8 * var(--u))); text-wrap:pretty }
#caption small { display:block; font-family:var(--font); font-size:max(calc(12 * var(--u)), .58em); opacity:.8; margin-top:.25em }
/* Too narrow beside the map: go above it. */
@media (max-width:580px) { #hud { --cap-l:16px } #caption { bottom:calc(16px + 190px + 12px) } }
/* Touch: smaller map, and the Jump/Use buttons take the bottom-right corner. */
@media (pointer:coarse) { #hud { --cap-l:calc(16px + 150px + 10px); --cap-r:calc(22px + 80px + 14px) } #caption { bottom:calc(24px + env(safe-area-inset-bottom)) } }
/* Portrait phone: the stick sits above the map, so the only clear full-width strip is under the top bar. */
@media (pointer:coarse) and (max-width:600px) { #hud { --cap-l:16px; --cap-r:16px } #caption { top:calc(var(--bar-h, 58px) + 10px); bottom:auto } }
/* A toast during the tour moves out of the caption's way: under the top bar, or on a portrait phone (caption on top) just above the map and Jump. */
#hud:has(> #caption:not(.hidden)) #toast { top:calc(var(--bar-h, calc(58 * var(--u))) + calc(12 * var(--u))); bottom:auto }
@media (pointer:coarse) and (max-width:600px) { #hud:has(> #caption:not(.hidden)) #toast { top:auto; bottom:calc(16px + 150px + 16px) } }
#touch { display:none }
@media (pointer:coarse) { #touch { display:block; position:absolute; inset:0; pointer-events:none } #stick { position:absolute; left:26px; bottom:250px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); pointer-events:auto } #knob { position:absolute; left:40px; top:40px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.7) } #lookpad { position:absolute; right:0; top:60px; bottom:0; width:55%; pointer-events:auto } #touchAct { position:absolute; right:22px; bottom:40px; font:inherit; font-size:15px; padding:16px 22px; border-radius:40px; border:0; background:var(--accent); color:#fff; pointer-events:auto } #minimap { width:150px; height:150px } #crosshair { display:none } }

.chip { white-space:nowrap }
.chip[hidden] { display:none }
.pin-chip { display:inline-flex; align-items:center; gap:calc(6 * var(--u)) }
.pin-chip .dot { margin:0 }
#btn-music { font-size:calc(16 * var(--u)); line-height:1; padding:calc(7 * var(--u)) calc(11 * var(--u)) }
#btn-music.on { background:var(--accent); border-color:transparent }
.pet-chip { display:inline-flex; align-items:center; gap:7px }
.pet-chip kbd { font:500 calc(11 * var(--u))/1 system-ui,sans-serif; border:1px solid rgba(255,255,255,.3); border-radius:calc(4 * var(--u)); padding:calc(3 * var(--u)) calc(4 * var(--u)); opacity:.85 }
.caret { margin-left:calc(7 * var(--u)); display:inline-block; transition:transform .15s }
#legends { position:relative }
#btn-legends[aria-expanded="true"] .caret { transform:rotate(180deg) }
#legendsPanel { position:absolute; top:calc(100% + calc(6 * var(--u))); right:0; width:calc(260 * var(--u)); max-width:calc(100vw - calc(28 * var(--u))); max-height:calc(100dvh - var(--bar-h,calc(58 * var(--u))) - calc(16 * var(--u))); overflow:auto; padding:calc(7 * var(--u)); border-radius:calc(12 * var(--u)); background:rgba(22,20,18,.88); border:1px solid rgba(255,255,255,.2); box-shadow:0 calc(12 * var(--u)) calc(36 * var(--u)) rgba(0,0,0,.4); backdrop-filter:blur(calc(12 * var(--u))); pointer-events:auto; z-index:8 }
#legendsPanel button { font:inherit; font-size:calc(14 * var(--u)); color:var(--paper); border:0; background:none; border-radius:calc(7 * var(--u)); cursor:pointer }
#legendsPanel button:hover { background:rgba(255,255,255,.1) }
#legendsPanel button:focus-visible, .chip:focus-visible { outline:calc(2 * var(--u)) solid var(--paper); outline-offset:calc(2 * var(--u)) }
.legend-row { display:flex; align-items:center; gap:calc(5 * var(--u)); padding:calc(11 * var(--u)) calc(10 * var(--u)); width:100%; text-align:left }
.legend-row .dot { flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.4) }
.legend-state { margin-left:auto; font-size:calc(12 * var(--u)); opacity:.6 }
.legend-row[aria-pressed="true"] .legend-state { opacity:1 }
.legend-row[aria-pressed="false"] .dot { opacity:.35 }
.legend-actions { display:flex; gap:calc(5 * var(--u)); border-top:1px solid rgba(255,255,255,.16); padding-top:calc(6 * var(--u)); margin-top:calc(4 * var(--u)) }
.legend-actions button { flex:1; padding:calc(10 * var(--u)) calc(5 * var(--u)) }
.legend-touch { display:none; border-top:1px solid rgba(255,255,255,.16); margin-top:calc(4 * var(--u)); padding-top:calc(4 * var(--u)) }
@media (pointer:coarse) { .legend-touch { display:block } .pet-chip kbd { display:none } }
@media (max-width:600px) { #label { font-size:16px; padding:7px 12px } }
#controls { position:absolute; top:calc(66 * var(--u)); left:50%; transform:translateX(-50%); width:min(calc(560 * var(--u)), calc(100vw - calc(28 * var(--u)))); max-height:calc(100dvh - calc(90 * var(--u))); overflow:auto; pointer-events:auto; padding:calc(16 * var(--u)) calc(20 * var(--u)); color:var(--ink); background:rgba(246,242,234,.97); border-radius:calc(14 * var(--u)); box-shadow:0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.5); z-index:5 }
.controls-head { display:flex; align-items:center; justify-content:space-between; font-family:var(--serif); font-size:calc(23 * var(--u)); padding-bottom:calc(8 * var(--u)); border-bottom:1px solid rgba(0,0,0,.1) }
#controlsClose { font:inherit; font-size:calc(26 * var(--u)); color:var(--muted); background:none; border:0; cursor:pointer; padding:0 calc(4 * var(--u)) }
#controlsBody { display:grid; gap:calc(8 * var(--u)); padding:calc(14 * var(--u)) 0; font-size:calc(14 * var(--u)); line-height:1.45 }
.music-credit { margin-top:calc(4 * var(--u)); padding-top:calc(10 * var(--u)); border-top:1px solid rgba(0,0,0,.1); font-size:calc(13 * var(--u)); line-height:1.5; color:#5c574f }
.music-credit a { color:var(--accent) }
.controls-foot { font-size:calc(12 * var(--u)); color:var(--muted); border-top:1px solid rgba(0,0,0,.1); padding-top:calc(10 * var(--u)) }
#touchJump { display:none }
@media (max-width:1100px) { #topbar { gap:5px; flex-wrap:wrap } #topbar .brand { font-size:15px } .chip { padding:6px 9px; font-size:12px } #controls { top:96px; max-height:calc(100dvh - 115px) } }
@media (pointer:coarse) { #touchJump { display:block; position:absolute; right:22px; bottom:112px; font:inherit; font-size:15px; padding:16px 22px; border-radius:40px; border:1px solid rgba(255,255,255,.35); background:var(--glass); color:#fff; pointer-events:auto; touch-action:manipulation } #controlsBody { font-size:13px } }

#topbar { z-index:6 }
#controls { top:calc(var(--bar-h, calc(58 * var(--u))) + calc(8 * var(--u))); max-height:calc(100dvh - var(--bar-h, calc(58 * var(--u))) - calc(26 * var(--u))) }
#panel { top:calc(var(--bar-h, 58px) + 8px); z-index:4 }
#bigmap, #compare { z-index:4 }
#minimap { z-index:2 }
#touch { z-index:1 }

/* ==== Corbusian interface (in the house) ===============================================================================
   The landing's language carried inside: a paper band with an ink hairline, small-caps labels separated by hairlines,
   every action with its key in a hairline box, square colour swatches (vermilion, ultramarine, green for the three
   media), paper plates with ink text for dropdowns, panels, tutorial, toast, label and caption. Square corners throughout. */
#hud { --hp:#f2efe7; --hp-a:rgba(242,239,231,.94); --hi:#1a1917; --hm:#77716a; --hr:rgba(26,25,23,.16); --hk:rgba(26,25,23,.42); --hred:#bf3f2b }
#topbar { background:var(--hp-a); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--hi); color:var(--hi); padding:calc(9 * var(--u)) calc(18 * var(--u)) calc(9 * var(--u)) calc(22 * var(--u)); gap:0 }
#topbar .brand { display:inline-flex; align-items:baseline; gap:calc(10 * var(--u)); font-family:var(--serif); font-size:calc(30 * var(--u)); line-height:1.05; letter-spacing:-.012em; color:var(--hi); text-shadow:none }
#topbar .brand b { font-weight:600 }
#topbar kbd, #hud .dd-panel kbd { display:inline-grid; place-items:center; min-width:calc(17 * var(--u)); height:calc(17 * var(--u)); box-sizing:border-box; padding:0 calc(4 * var(--u)); font:500 calc(10 * var(--u))/1 var(--font); letter-spacing:0; text-transform:none; color:var(--hm); background:none; border:1px solid var(--hk); border-radius:0; opacity:1 }
#topbar .brand kbd { align-self:center; margin-left:calc(2 * var(--u)) }
#topbar > .chip, #topbar > .dd { border-left:1px solid var(--hr) }
#topbar .chip { display:inline-flex; align-items:center; gap:calc(8 * var(--u)); height:calc(36 * var(--u)); padding:0 calc(13 * var(--u)); color:var(--hi); background:none; border:0; border-radius:0; backdrop-filter:none; font-size:calc(11.5 * var(--u)); letter-spacing:.16em; text-transform:uppercase; position:relative }
#topbar .chip:hover { background:rgba(26,25,23,.06) }
#topbar .chip.on { background:none; color:var(--hred) }
#topbar .chip.on::after { content:''; position:absolute; left:calc(13 * var(--u)); right:calc(13 * var(--u)); bottom:calc(4 * var(--u)); height:2px; background:var(--hred) }
#topbar .chip:focus-visible, #topbar .brand:focus-visible, #hud .dd-panel button:focus-visible { outline:2px solid var(--hi); outline-offset:-2px }
#btn-music { font-size:calc(15 * var(--u)); letter-spacing:0 }
#btn-music.on { background:none }
#topbar .caret { margin-left:0; font-size:calc(9 * var(--u)); color:var(--hm) }
#hud .dd { position:relative }
#btn-media[aria-expanded="true"] .caret, #btn-legends[aria-expanded="true"] .caret { transform:rotate(180deg) }
#hud .dd-panel, #legendsPanel { position:absolute; top:calc(100% + calc(9 * var(--u)) + 1px); right:0; min-width:calc(250 * var(--u)); width:auto; padding:0; color:var(--hi); background:var(--hp); border:1px solid var(--hi); border-radius:0; box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0,0,0,.18); backdrop-filter:none; pointer-events:auto; z-index:7 }
#mediaPanel.hidden { display:none }
#hud .dd-row, #hud .legend-row { display:flex; align-items:center; gap:calc(10 * var(--u)); width:100%; box-sizing:border-box; padding:calc(12 * var(--u)) calc(16 * var(--u)); font:inherit; font-size:calc(13.5 * var(--u)); text-align:left; color:var(--hi); background:none; border:0; border-top:1px solid var(--hr); border-radius:0; cursor:pointer }
#hud .dd-panel > :first-child, #legendsPanel > :first-child { border-top:0 }
#hud .dd-row:hover, #legendsPanel button:hover { background:rgba(26,25,23,.06) }
#hud .dd-row kbd { margin-left:auto }
#hud .legend-row kbd { margin-left:auto } #hud .legend-row kbd + .legend-state { margin-left:calc(8 * var(--u)) }
#legendsPanel button { color:var(--hi) }
#hud .legend-state { font-size:calc(10.5 * var(--u)); letter-spacing:.14em; text-transform:uppercase; color:var(--hm); opacity:1 }
#hud .legend-row[aria-pressed="true"] .legend-state { color:var(--hred) }
#hud .legend-actions { gap:0; padding:0; margin:0; border-top:1px solid var(--hi) }
#hud .legend-actions button { padding:calc(11 * var(--u)) calc(8 * var(--u)); font-size:calc(10.5 * var(--u)); letter-spacing:.16em; text-transform:uppercase; border-radius:0 }
#hud .legend-actions button + button { border-left:1px solid var(--hr) }
#hud .legend-touch { border-top:1px solid var(--hi); margin:0; padding:0 }
#hud .dot { border-radius:0; width:calc(10 * var(--u)); height:calc(10 * var(--u)); margin:0; box-shadow:none; flex:none }
#hud .dot.rn { background:#bf3f2b } #hud .dot.pano { background:#2c4a8a } #hud .dot.photo { background:#3e7a55 }
#hud .legend-row[aria-pressed="false"] .dot { opacity:.3 }
/* side panel (RedNote / panorama / photo lists) */
#panel { right:0; bottom:0; background:var(--hp); color:var(--hi); border-left:1px solid var(--hi); border-radius:0; box-shadow:calc(-14 * var(--u)) 0 calc(40 * var(--u)) rgba(0,0,0,.16) }
#panelHead { padding:calc(16 * var(--u)) calc(20 * var(--u)) calc(13 * var(--u)); font-family:var(--serif); font-weight:400; font-size:calc(22 * var(--u)); border-bottom:1px solid var(--hi) }
#panelClose { color:var(--hi); font-size:calc(22 * var(--u)) }
#panelBody { padding:0 0 calc(20 * var(--u)) }
#panel .vp { border-radius:0; padding:calc(10 * var(--u)) calc(18 * var(--u)); border-bottom:1px solid var(--hr) }
#panel .vp:hover { background:rgba(26,25,23,.05) }
#panel .vp.active { background:rgba(191,63,43,.08); box-shadow:inset 3px 0 0 var(--hred) }
#panel .vp img { border-radius:0 }
#panel .vp .t { font-weight:500; display:flex; align-items:center; gap:calc(8 * var(--u)) }
/* tutorial */
#controls { background:var(--hp); color:var(--hi); border:1px solid var(--hi); border-radius:0; box-shadow:0 calc(18 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.2) }
#hud .controls-head { font-weight:400; border-bottom:1px solid var(--hi) }
#controlsBody > * { padding-bottom:calc(7 * var(--u)); border-bottom:1px solid var(--hr) }
#hud .controls-foot { border-top:0; letter-spacing:.04em }
/* toast, aim label, tour caption, panorama exit, loading pill, right-click menu */
#toast, #label, #panoload { background:var(--hp-a); color:var(--hi); border:1px solid var(--hk); border-radius:0; text-shadow:none; box-shadow:0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.14) }
#label { font-family:var(--serif) }
#panoload i { background:var(--hr) } #panoload b { background:var(--hi) }
#caption { background:var(--hp-a); color:var(--hi); border:1px solid var(--hk); border-left:calc(5 * var(--u)) solid var(--hred); border-radius:0; text-shadow:none; box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.16) }
#caption small { color:var(--hi); opacity:1; letter-spacing:.12em; text-transform:uppercase }
#viewExit { background:var(--hp-a); color:var(--hi); border:1px solid var(--hi); border-radius:0; box-shadow:0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.16) }
#viewExitBtn { color:var(--hi); background:none; border:1px solid var(--hk); border-radius:0 }
#viewExitBtn:hover { background:rgba(26,25,23,.06) }
#viewExit kbd { background:none; color:var(--hi); border:1px solid var(--hk); border-radius:0 }
#ctxmenu { padding:0; background:#f2efe7; color:#1a1917; border:1px solid #1a1917; border-radius:0; backdrop-filter:none; box-shadow:0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.2) }
#ctxmenu button { color:#1a1917; border-radius:0; padding:calc(10 * var(--u)) calc(14 * var(--u)); border-top:1px solid rgba(26,25,23,.14) }
#ctxmenu button:first-child { border-top:0 }
#ctxmenu button:hover:not(:disabled) { background:rgba(26,25,23,.06) }
#ctxmenu button.sep { margin-top:0; border-top:1px solid #1a1917; border-radius:0; color:#77716a }
@media (pointer:coarse) { #topbar kbd, #hud .dd-panel kbd { display:none } }
@media (max-width:1100px) { #topbar { flex-wrap:wrap; padding:6px 10px } #topbar .brand { font-size:22px } #topbar .chip { height:30px; padding:0 9px; letter-spacing:.1em; font-size:11px } }
#topbar > .chip { border-left:1px solid var(--hr) }
#panel { top:var(--bar-h, 54px) }
#topbar .pet-ico { width:calc(19 * var(--u)); height:calc(19 * var(--u)); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
#topbar .pet-ico .f { fill:currentColor; stroke:none }

/* ==== Tutorial as a Swiss sheet: grotesk, flush left, a strict two-column grid, numbered groups under heavy rules,
   keys as solid black squares, one vermilion block. ==== */
#controls { --sw:var(--font); font-synthesis:none; width:min(calc(860 * var(--u)), calc(100vw - calc(28 * var(--u)))); padding:0; font-family:var(--sw); background:#f4f2ec; color:#111; border:0; border-top:calc(6 * var(--u)) solid #111; box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.28) }
#hud #controls .controls-head { display:grid; grid-template-columns:calc(54 * var(--u)) 1fr auto; align-items:end; gap:calc(18 * var(--u)); padding:calc(26 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)); font-family:var(--sw); border-bottom:calc(2 * var(--u)) solid #111 }
#controls .sw-red { display:block; width:calc(54 * var(--u)); height:calc(54 * var(--u)); background:#c8352a }
#controls .sw-titles { display:flex; flex-direction:column; gap:calc(6 * var(--u)) }
#controls #controlsTitle { font-size:calc(44 * var(--u)); line-height:.9; font-weight:400; letter-spacing:-.035em }
#controls .sw-sub { font-size:calc(11 * var(--u)); font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:#555 }
#controls #controlsClose { align-self:start; font:300 calc(30 * var(--u))/1 var(--sw); color:#111 }
#controlsBody { padding:calc(6 * var(--u)) calc(30 * var(--u)) calc(14 * var(--u)); gap:0; font-size:calc(13.5 * var(--u)) }
#controlsBody > * { padding-bottom:0; border-bottom:0 }
#controls .sw-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:calc(34 * var(--u)) }
#controls .sw-group { margin-top:calc(14 * var(--u)); border-top:calc(2 * var(--u)) solid #111 }
#controls .sw-group header { display:flex; align-items:baseline; gap:calc(12 * var(--u)); padding:calc(8 * var(--u)) 0 calc(6 * var(--u)) }
#controls .sw-num { font-size:calc(24 * var(--u)); font-weight:400; letter-spacing:-.02em; color:#c8352a; font-variant-numeric:tabular-nums }
#controls .sw-name { font-size:calc(11.5 * var(--u)); font-weight:400; letter-spacing:.2em; text-transform:uppercase }
#controls .sw-row { display:grid; grid-template-columns:calc(150 * var(--u)) 1fr; align-items:center; gap:calc(12 * var(--u)); padding:calc(4 * var(--u)) 0; border-top:1px solid rgba(0,0,0,.14) }
#controls .sw-keys { display:flex; flex-wrap:wrap; gap:calc(4 * var(--u)) }
#controls .sw-keys kbd { display:inline-grid; place-items:center; min-width:calc(24 * var(--u)); height:calc(24 * var(--u)); padding:0 calc(6 * var(--u)); box-sizing:border-box; font:400 calc(12 * var(--u))/1 var(--sw); letter-spacing:.02em; color:#f4f2ec; background:#111; border:0; border-radius:0 }
#controls .sw-keys kbd.wide { padding:0 calc(8 * var(--u)); font-size:calc(10.5 * var(--u)); letter-spacing:.08em; text-transform:uppercase }
#controls .sw-what { font-size:calc(13.5 * var(--u)); line-height:1.3 }
#controls .sw-plain { padding:calc(9 * var(--u)) 0; border-top:1px solid rgba(0,0,0,.14); font-size:calc(14 * var(--u)) }
#controls .music-credit { margin-top:calc(22 * var(--u)); padding-top:calc(10 * var(--u)); border-top:calc(2 * var(--u)) solid #111; font-size:calc(11.5 * var(--u)); color:#444 }
#controls .music-credit a { color:#c8352a }
#hud #controls .controls-foot { padding:calc(10 * var(--u)) calc(30 * var(--u)) calc(16 * var(--u)); font-size:calc(10.5 * var(--u)); letter-spacing:.16em; text-transform:uppercase; color:#555; border-top:1px solid rgba(0,0,0,.14) }
@media (max-width:820px) { #controls .sw-grid { grid-template-columns:1fr } }
#topbar .pet-ico { stroke:none } #topbar .pet-ico .cut { fill:none; stroke:var(--hp); stroke-width:1.3; stroke-linecap:round } #topbar .pet-ico .eye { fill:var(--hp) }
/* Day / dusk: a sun by day, a crescent moon at dusk (the button carries .on at dusk). */
#topbar .tod-ico { width:calc(19 * var(--u)); height:calc(19 * var(--u)) }
#topbar .tod-ico .sun circle { fill:currentColor } #topbar .tod-ico .sun path { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square }
#topbar .tod-ico .moon { fill:currentColor; display:none }
#btn-dusk.on .tod-ico .sun { display:none } #btn-dusk.on .tod-ico .moon { display:inline }
#topbar #btn-dusk.on { color:var(--hi) } #topbar #btn-dusk.on::after { display:none }
#topbar .pin-ico { width:calc(19 * var(--u)); height:calc(19 * var(--u)) } #topbar .pin-ico .f { fill:currentColor } #topbar .pin-ico .eye { fill:var(--hp) }

/* ==== Swiss bar: grotesk, solid pictograms, keys as black squares ==== */
#topbar { font-family:var(--font); font-synthesis:none }
#topbar .brand { font-family:var(--font); font-weight:400; font-size:calc(30 * var(--u)); letter-spacing:-.035em }
#topbar .brand b { font-weight:400 }
#topbar .chip { font-family:var(--font); letter-spacing:.12em }
#topbar kbd, #hud .dd-panel kbd { min-width:calc(18 * var(--u)); height:calc(18 * var(--u)); font:400 calc(10.5 * var(--u))/1 var(--font); color:var(--hp); background:var(--hi); border:0 }
#topbar .ico { width:calc(20 * var(--u)); height:calc(20 * var(--u)) }
#topbar .ico .f { fill:currentColor } #topbar .ico .eye { fill:var(--hp) }
#topbar .ico .ln { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round }
#topbar .ico .cutw { fill:none; stroke:var(--hp); stroke-width:2.2; stroke-linecap:round }
#topbar #btn-music.on { color:var(--hred) } #topbar #btn-music.on::after { display:none }
/* ==== Swiss type everywhere in the house: Liter for the whole interface (the landing keeps its serif poster). ==== */
#hud, #hud button, #hud input, #ctxmenu, #ctxmenu button, #nerdstats .ns-head { font-family:var(--font); font-synthesis:none }
#hud #caption, #hud #label, #hud #panelHead, #hud .controls-head, #firststeps .fs-title, #firststeps .fs-lines li, #hud #toast, #hud #panoload, #hud #viewExit { font-family:var(--font); font-weight:400 }
#hud #caption { letter-spacing:-.01em }
#hud #panelHead { letter-spacing:-.02em }
#hud .vp .t { font-weight:400 }
#firststeps .fs-title { letter-spacing:-.02em }
#firststeps kbd, #hud #caption small { font-family:var(--font); font-weight:400 }
#firststeps kbd { color:#111; background:#f4f2ec; border:0 }

/* Bigger pictograms in the bar */
#topbar .ico, #topbar .pet-ico, #topbar .pin-ico, #topbar .tod-ico { width:calc(26 * var(--u)); height:calc(26 * var(--u)) }
#topbar .chip { height:calc(40 * var(--u)); gap:calc(9 * var(--u)) }
/* The demonstration strip: Swiss, bottom centre. Step number in red, the keys as black squares that flash red when
   "pressed", the action in Liter, a small-caps label. */
#demobar { position:absolute; left:50%; bottom:calc(36 * var(--u)); transform:translateX(-50%); display:flex; align-items:center; gap:calc(18 * var(--u)); padding:calc(16 * var(--u)) calc(24 * var(--u)); min-width:calc(520 * var(--u)); max-width:calc(100vw - calc(40 * var(--u))); box-sizing:border-box; color:#111; background:#f4f2ec; border-top:calc(5 * var(--u)) solid #111; box-shadow:0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.25); font-family:var(--font); font-synthesis:none; z-index:6 }
#demobar.hidden { display:none }
#demobar .db-num { font-size:calc(22 * var(--u)); color:#c8352a; font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap }
#demobar .db-num:empty { display:none }
#demobar .db-keys { display:flex; gap:calc(5 * var(--u)) }
#demobar .db-keys:empty { display:none }
#demobar .db-keys kbd { display:inline-grid; place-items:center; min-width:calc(34 * var(--u)); height:calc(34 * var(--u)); padding:0 calc(8 * var(--u)); box-sizing:border-box; font:400 calc(15 * var(--u))/1 var(--font); color:#f4f2ec; background:#111; border:0; border-radius:0 }
#demobar .db-keys kbd.wide { font-size:calc(11 * var(--u)); letter-spacing:.12em; text-transform:uppercase; padding:0 calc(10 * var(--u)) }
#demobar .db-keys kbd.hit { animation:db-hit .55s ease-out }
#demobar .db-keys kbd:first-child { background:#c8352a }
@keyframes db-hit { 0% { transform:scale(1) } 35% { transform:scale(.86) } 100% { transform:scale(1) } }
#demobar .db-text { flex:1; font-size:calc(22 * var(--u)); letter-spacing:-.015em; white-space:nowrap }
#demobar .db-label { font-size:calc(10.5 * var(--u)); letter-spacing:.2em; text-transform:uppercase; color:#666 }
body.demo #crosshair, body.demo #label, body.demo #caption { display:none }
@media (max-width:700px) { #demobar { min-width:0; gap:10px; padding:12px 14px } #demobar .db-text { font-size:16px; white-space:normal } #demobar .db-label { display:none } }
body.demo #toast { display:none }
/* Touch buttons, Swiss: squares in ink and vermilion, Liter small caps. */
@media (pointer:coarse) {
  #touchJump, #touchAct { border-radius:0 !important; border:0 !important; font-family:var(--font) !important; font-size:12px !important; letter-spacing:.16em; text-transform:uppercase; color:#f4f2ec !important; box-shadow:0 8px 22px rgba(0,0,0,.25) }
  #touchJump { background:#111 !important } #touchAct { background:#c8352a !important }
  #stick { border-radius:50%; border:1px solid rgba(244,242,236,.7) !important; background:rgba(17,17,17,.18) !important }
}

/* ==== Landing and loading screens in Liter. Both read their type from --font / --serif, so pointing those at Liter on
   these two screens restyles them whole. The original Michelangelus versions are kept: ?serif=1 brings them back. ==== */
:root { --font-m:"Michelangelus","NotoSerifSC-Sub",-apple-system,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Helvetica Neue",Arial,sans-serif; --serif-m:"Michelangelus","NotoSerifSC-Sub","Iowan Old Style","Palatino","Songti SC","Noto Serif CJK SC",Georgia,serif; --liter:"Liter","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif }
#title, #warming { --font:var(--liter); --serif:var(--liter); font-family:var(--liter); font-synthesis:none }
#title button, #warming button { font-family:inherit }
#title .lc-hero h1 { letter-spacing:-.05em }
#title .lc-point h3 { font-weight:400 }
#warming .wm-title { letter-spacing:-.035em }
html.serif-landing #title, html.serif-landing #warming { --font:var(--font-m); --serif:var(--serif-m); font-family:var(--font-m); font-synthesis:auto }
html.serif-landing #title .lc-hero h1 { letter-spacing:-.035em }
html.serif-landing #title .lc-point h3 { font-weight:500 }
html.serif-landing #warming .wm-title { letter-spacing:-.025em }

/* ==== Swiss type in the house: Liter for the whole interface (bar, dropdowns, panels, tutorial, intro, captions, labels,
   toasts, the demonstration strip, touch buttons, menus). One weight, so faux bold is switched off. ==== */
#hud, #hud *, #ctxmenu, #ctxmenu *, #nerdstats .ns-head, #nerdstats .ns-head * { font-family:var(--liter) !important; font-synthesis:none }
#hud #controls { --sw:var(--liter) }
#hud .sw-name, #hud .sw-num, #hud #controlsTitle, #hud .fs-title, #hud .fs-lines li, #hud #caption, #hud #panelHead, #hud .vp .t, #hud #label { font-weight:400 }
/* Language: two squares, 中 and EN; the current language is filled. */
#topbar .lang-sym { display:inline-flex; gap:2px }
#topbar .lang-sym b { display:inline-grid; place-items:center; min-width:calc(22 * var(--u)); height:calc(22 * var(--u)); padding:0 calc(3 * var(--u)); box-sizing:border-box; font-weight:400; font-size:calc(11.5 * var(--u)); letter-spacing:.02em; color:var(--hi); border:1px solid var(--hi) }
html[lang="zh"] #topbar .lang-sym b[data-l="zh"], html[lang="en"] #topbar .lang-sym b[data-l="en"] { color:var(--hp); background:var(--hi) }
/* ==== Equal modules in the bar: every button the same width, content centred; dropdown carets sit in the corner. ==== */
#topbar .chip { box-sizing:border-box; width:calc(84 * var(--u)); padding:0; justify-content:center; gap:calc(9 * var(--u)) }
#topbar .chip .caret { position:absolute; right:calc(6 * var(--u)); bottom:calc(5 * var(--u)); font-size:calc(8 * var(--u)); line-height:1 }
#topbar .lang-sym b { min-width:calc(19 * var(--u)); height:calc(19 * var(--u)); font-size:calc(10 * var(--u)); padding:0 calc(2 * var(--u)) }
@media (max-width:1100px) { #topbar .chip { width:auto; padding:0 9px } }
/* ==== Semi-transparent text boxes: translucent paper with a blur behind, so the house reads through but the text stays legible. ==== */
#hud { --hp-t:rgba(242,239,231,.78) }
#topbar { background:rgba(242,239,231,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
#hud .dd-panel, #legendsPanel, #panel, #hud #controls, #demobar, #ctxmenu, #toast, #label, #panoload, #caption, #viewExit {
  background:var(--hp-t, rgba(242,239,231,.78)) !important; -webkit-backdrop-filter:blur(16px) saturate(1.05); backdrop-filter:blur(16px) saturate(1.05) }
#ctxmenu { background:rgba(242,239,231,.84) !important }
/* More transparent: about 60% paper, with a stronger blur behind so the text still reads. */
#hud { --hp-t:rgba(242,239,231,.6) }
#topbar { background:rgba(242,239,231,.6); -webkit-backdrop-filter:blur(18px) saturate(1.1); backdrop-filter:blur(18px) saturate(1.1) }
#hud .dd-panel, #legendsPanel, #panel, #hud #controls, #demobar, #toast, #label, #panoload, #caption, #viewExit { -webkit-backdrop-filter:blur(20px) saturate(1.1); backdrop-filter:blur(20px) saturate(1.1) }
#ctxmenu { background:rgba(242,239,231,.66) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px) }

/* Landing text: everything except the "Dwelling" title takes the warm grey of the photo caption (--lc-mute). */
#title .lc-head, #title .lc-head *, #title .lc-addr, #title .lc-lede, #title .lc-point h3, #title .lc-point p, #title .lc-point em,
#title .lc-plan figcaption, #title .loading, #title #loadtext, #title .hint, #title .lc-credit, #title .lc-measure small { color:var(--lc-mute) }
#title .lc-lang button.on { color:var(--lc-mute); border-bottom-color:var(--lc-mute) }
#title .lc-hero h1 { color:var(--lc-ink) }
#firststeps #fsDemo { cursor:pointer } #firststeps #fsDemo:hover { color:#fff }
/* Even more transparent: about 40% paper, a strong blur keeps the text legible. */
#hud { --hp-t:rgba(242,239,231,.4) }
#topbar { background:rgba(242,239,231,.4); -webkit-backdrop-filter:blur(22px) saturate(1.15); backdrop-filter:blur(22px) saturate(1.15) }
#hud .dd-panel, #legendsPanel, #panel, #hud #controls, #demobar, #toast, #label, #panoload, #caption, #viewExit { -webkit-backdrop-filter:blur(24px) saturate(1.15); backdrop-filter:blur(24px) saturate(1.15) }
#ctxmenu { background:rgba(242,239,231,.48) !important; -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px) }

/* Hero plan scale: segmented bar */
#lcPlan .sbo { fill:var(--lc-paper); stroke:var(--lc-ink); stroke-width:.03 }
/* Hero: the numbers and the titles of 01 02 03 stay in ink */
#title .lc-point em, #title .lc-point h3 { color:var(--lc-ink) }
/* Swiss minimap: a square plan with a hairline frame (drawn on the canvas) */
#minimap { border-radius:0 !important; box-shadow:0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.18) !important; background:none !important }
#lcPlan text.sl { font-family:var(--liter); font-style:normal; font-size:.62px; fill:var(--lc-ink) }
/* Full plan (M): paper plate with a hairline, over a light veil */
#bigmap { background:rgba(242,239,231,.35) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
#bigmapCanvas { border-radius:0 !important; background:#f2efe7 !important; box-shadow:0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.25) !important }
#bigmap .mapHint { color:#1a1917; font-size:calc(11 * var(--u)); letter-spacing:.16em; text-transform:uppercase }
/* Aim label: smaller type and padding */
#hud #label { font-size:calc(14 * var(--u)); padding:calc(5 * var(--u)) calc(10 * var(--u)); top:calc(50% + calc(20 * var(--u))) }

/* Hide the interface (Z): everything in the HUD goes except a faint eye in the corner that brings it back. */
#ui-restore { display:none }
body.ui-hidden #hud > *:not(#ui-restore):not(#crosshair):not(#label):not(#caption), body.ui-hidden #nerdstats { display:none !important }   /* aim and tour captions stay */
body.ui-hidden #ui-restore { display:inline-flex; align-items:center; gap:calc(8 * var(--u)); position:absolute; top:calc(12 * var(--u)); right:calc(12 * var(--u)); padding:calc(6 * var(--u)) calc(9 * var(--u)); color:#1a1917; background:rgba(242,239,231,.4); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:0; cursor:pointer; pointer-events:auto; opacity:.45; transition:opacity .2s }
body.ui-hidden #ui-restore:hover { opacity:1 }
#ui-restore .ico { width:calc(22 * var(--u)); height:calc(22 * var(--u)) } #ui-restore .ico .f { fill:currentColor } #ui-restore .ico .eye { fill:#f2efe7 }
#ui-restore kbd { display:inline-grid; place-items:center; min-width:calc(18 * var(--u)); height:calc(18 * var(--u)); font:400 calc(10.5 * var(--u))/1 var(--liter); color:#f2efe7; background:#1a1917; border:0 }

/* Z lives in the top-right corner in both states: first in the bar, and the restore eye in exactly the same box. */
#topbar #btn-ui { border-left:1px solid var(--hr) }
body.ui-hidden #ui-restore { top:calc(9 * var(--u)); right:calc(18 * var(--u)); left:auto; width:calc(84 * var(--u)); height:calc(40 * var(--u)); padding:0; justify-content:center; gap:calc(9 * var(--u)); opacity:.6 }
body.ui-hidden #ui-restore .ico { width:calc(26 * var(--u)); height:calc(26 * var(--u)) }
#topbar #btn-legends.pins-on { color:var(--hred) }

/* M on the minimap's top-left corner, opening the plan */
#mm-key { position:absolute; left:calc(16 * var(--u)); bottom:calc((16 + 190 + 6) * var(--u)); padding:0; border:0; background:none; cursor:pointer; pointer-events:auto; z-index:3 }
#mm-key kbd { display:inline-grid; place-items:center; min-width:calc(18 * var(--u)); height:calc(18 * var(--u)); font:400 calc(10.5 * var(--u))/1 var(--liter); color:#f2efe7; background:#1a1917; border:0 }
@media (pointer:coarse) { #mm-key { display:none } }
/* Z, first press: the key squares go, everything else stays */
body.keys-hidden #topbar kbd, body.keys-hidden #hud .dd-panel kbd, body.keys-hidden #mm-key { display:none !important }

/* Default: no key squares and a compact bar (narrower modules, tighter gaps); Z once restores the keyed layout. */
body.keys-hidden #topbar .chip { width:calc(50 * var(--u)) }
body.keys-hidden #topbar .brand kbd { display:none }

/* hide icon: an ink slash with a paper gap, like the other solid pictograms */
#topbar .ico .gap { fill:none; stroke:var(--hp); stroke-width:4.4; stroke-linecap:square }
#topbar .ico .bar { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square }
/* language: two small squares, the same visual width as an icon */
#topbar .lang-sym { gap:1px }
#topbar .lang-sym b { min-width:calc(16 * var(--u)); height:calc(16 * var(--u)); font-size:calc(9 * var(--u)); padding:0 calc(2 * var(--u)) }
/* the right edge mirrors the left */
#topbar { padding-right:calc(22 * var(--u)) }
body.ui-hidden #ui-restore { right:calc(22 * var(--u)) }

/* Enter as a wide key */
#firststeps kbd.wide { min-width:calc(84 * var(--u)); font-size:calc(16 * var(--u)); letter-spacing:0 }
#topbar .brand kbd.wide { padding:0 calc(6 * var(--u)) }
/* the bar closes on the right with a hairline, like every module */
#topbar #btn-ui { border-right:1px solid var(--hr) }
/* ==== Welcome cards in the tutorial's language: translucent paper, square, a heavy ink rule on top, hairline rows,
   red numerals and a red block, keys as solid black squares. ==== */
#firststeps .fs-card { color:#1a1917; background:var(--hp-t, rgba(242,239,231,.4)) !important; -webkit-backdrop-filter:blur(24px) saturate(1.15); backdrop-filter:blur(24px) saturate(1.15);
  border:0; border-top:calc(6 * var(--u)) solid #1a1917; border-radius:0; box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.22) }
#firststeps .fs-photos img { border-radius:0 }
#firststeps .fs-kicker { color:#555 }
#firststeps .fs-title { color:#1a1917; font-weight:400; letter-spacing:-.025em }
#firststeps .fs-lines li { border-top:1px solid rgba(26,25,23,.16); color:#1a1917 }
#firststeps .fs-lines li:first-child { border-top:calc(2 * var(--u)) solid #1a1917 }
#firststeps .fs-lines em { color:#c8352a; font-style:normal }
#firststeps .fs-sign { color:#555; border-top:calc(2 * var(--u)) solid #1a1917 }
/* controls card: a red block before the title, rows under hairlines, black key squares */
#firststeps .fs-controls .fs-title { display:flex; align-items:center; gap:calc(14 * var(--u)); padding-bottom:calc(14 * var(--u)); margin-bottom:0; border-bottom:calc(2 * var(--u)) solid #1a1917 }
#firststeps .fs-controls .fs-title::before { content:''; flex:none; width:calc(30 * var(--u)); height:calc(30 * var(--u)); background:#c8352a }
#firststeps .fs-controls ul { gap:0; align-content:start; margin-top:calc(6 * var(--u)) }
#firststeps .fs-controls li { padding:calc(9 * var(--u)) 0; border-top:1px solid rgba(26,25,23,.16); color:#1a1917; font-size:calc(17 * var(--u)) }
#firststeps .fs-controls li:first-child { border-top:0 }
#firststeps kbd, #firststeps kbd.wide { color:#f2efe7 !important; background:#1a1917 !important; border:0 !important; border-radius:0 !important; box-shadow:none }
#firststeps .fs-mouse { color:#1a1917 }
#firststeps .fs-foot { color:#555; border-top:calc(2 * var(--u)) solid #1a1917; font-size:calc(11 * var(--u)); letter-spacing:.14em; text-transform:uppercase }
#firststeps #fsDemo:hover, #firststeps li:hover { color:#c8352a }

/* ==== Photo mode panel ===============================================================================================
   The side plate's language: paper, ink hairlines, small-caps section heads, square controls, the vermilion for state. */
#hud .dot.shot { background:#1a1917 }
#photo { position:absolute; top:calc(58 * var(--u)); right:0; bottom:0; width:min(calc(372 * var(--u)), 94vw); overflow:auto; pointer-events:auto; z-index:6; color:var(--hi); background:var(--hp); border-left:1px solid var(--hi); box-shadow:calc(-14 * var(--u)) 0 calc(40 * var(--u)) rgba(0,0,0,.16); font-size:calc(13 * var(--u)); -webkit-user-select:text; user-select:text }
#photo .ph-head { display:flex; align-items:baseline; gap:calc(10 * var(--u)); padding:calc(16 * var(--u)) calc(20 * var(--u)) calc(13 * var(--u)); border-bottom:1px solid var(--hi) }
#photo h2 { margin:0; flex:1; font-family:var(--serif); font-weight:400; font-size:calc(22 * var(--u)) }
#photo kbd { display:inline-grid; place-items:center; min-width:calc(17 * var(--u)); height:calc(17 * var(--u)); padding:0 calc(4 * var(--u)); font:500 calc(10 * var(--u))/1 var(--font); color:var(--hm); border:1px solid var(--hk) }
#photo .ph-close { font:inherit; font-size:calc(22 * var(--u)); line-height:1; color:var(--hi); background:none; border:0; cursor:pointer; padding:0 calc(2 * var(--u)) }
#photo section { padding:calc(14 * var(--u)) calc(20 * var(--u)); border-bottom:1px solid var(--hr) }
#photo h3 { margin:calc(4 * var(--u)) 0 calc(9 * var(--u)); font-weight:400; font-size:calc(10.5 * var(--u)); letter-spacing:.16em; text-transform:uppercase; color:var(--hm) }
#photo h3:not(:first-child) { margin-top:calc(14 * var(--u)) }
#photo button { font:inherit; color:var(--hi); background:none; border:1px solid var(--hk); border-radius:0; cursor:pointer; padding:calc(7 * var(--u)) calc(9 * var(--u)) }
#photo button:hover:not(:disabled) { background:rgba(26,25,23,.06) }
#photo button:disabled, #photo input:disabled { opacity:.4; cursor:default }
#photo button.on { color:var(--hp); background:var(--hi); border-color:var(--hi) }
#photo button:focus-visible, #photo input:focus-visible { outline:2px solid var(--hi); outline-offset:1px }
#photo .ph-prompt { display:flex; gap:calc(6 * var(--u)) }
#photo .ph-prompt input { flex:1; min-width:0; font:inherit; color:var(--hi); background:#fbf9f4; border:1px solid var(--hi); border-radius:0; padding:calc(8 * var(--u)) calc(9 * var(--u)) }
#photo .ph-matched { min-height:1.2em; margin:calc(8 * var(--u)) 0; font-size:calc(11.5 * var(--u)); color:var(--hred) }
#photo .ph-presets { display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(5 * var(--u)) }
#photo .ph-presets button { font-size:calc(11.5 * var(--u)) }
#photo .ph-light.off .ph-row { opacity:.45 }
#photo .ph-row { display:grid; grid-template-columns:calc(92 * var(--u)) 1fr calc(62 * var(--u)); align-items:center; gap:calc(8 * var(--u)); margin:calc(5 * var(--u)) 0 }
#photo .ph-row input { width:100%; accent-color:var(--hred) }
#photo .ph-row output { text-align:right; font-variant-numeric:tabular-nums; color:var(--hm); font-size:calc(11.5 * var(--u)) }
#photo .ph-seg { display:flex }
#photo .ph-seg button { flex:1; font-size:calc(11.5 * var(--u)); white-space:nowrap }
#photo .ph-seg button + button { border-left:0 }
#photo .ph-seg + .ph-seg { margin-top:calc(6 * var(--u)) }
#photo .ph-go { border-bottom:0 }
#photo .ph-bar { position:relative; height:2px; background:var(--hr); overflow:hidden }
#photo .ph-bar b { position:absolute; inset:0; background:var(--hred); transform-origin:left; transform:scaleX(0) }
#photo .ph-status { min-height:1.2em; margin:calc(9 * var(--u)) 0; font-size:calc(11.5 * var(--u)); color:var(--hm); font-variant-numeric:tabular-nums }
#photo .ph-actions { display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:calc(6 * var(--u)) }
#photo .ph-actions .primary { color:var(--hp); background:var(--hi); border-color:var(--hi); letter-spacing:.14em; text-transform:uppercase; font-size:calc(11.5 * var(--u)) }
#photo .ph-actions .primary:hover:not(:disabled) { background:#000 }
@media (max-width:700px) { #photo { top:auto; height:62vh; width:100vw; border-left:0; border-top:1px solid var(--hi) } }
#photo button.on:hover:not(:disabled) { background:var(--hi) }
/* while a still is on the canvas, only the top bar and the photo panel stay */
body.photo-still #minimap, body.photo-still #crosshair, body.photo-still #label, body.photo-still #caption, body.photo-still #touch, body.photo-still #toast { display:none !important }