:root { color-scheme:light; --paper:#fefdfb; --ink:#0c2567; --soft:#64728c; --blue:#1b66dc; --edge:#dce2ec; --font-system:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-chinese:var(--font-system); --font-title:Georgia,var(--font-system); font-family:var(--font-system); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar { display:none; width:0; height:0; }
body { margin:0; overflow:hidden; }
html.is-reading, html.is-reading body { overflow-x:hidden; overflow-y:hidden; }
button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
:is(button,a):focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
[hidden] { display:none !important; }
.world { position:relative; width:100%; height:100vh; height:100dvh; min-height:420px; overflow:hidden; background:radial-gradient(ellipse at 48% 28%,#fff 0%,rgba(255,255,255,.35) 48%,transparent 80%),var(--paper); isolation:isolate; }
.world::before { content:""; position:absolute; inset:0; z-index:0; background:url("./assets/paper-grain.png") repeat; opacity:.22; pointer-events:none; }
.world:focus { outline:none; }
#scene { position:absolute; inset:0; z-index:1; width:100%; height:100%; touch-action:none; -webkit-touch-callout:none; user-select:none; }
.site-header { position:absolute; z-index:8; top:32px; left:8%; right:8%; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.brand { font:600 20px/1.3 var(--font-title); letter-spacing:-.02em; pointer-events:auto; }
.sound-toggle { pointer-events:auto; width:44px; height:44px; padding:11px; background:transparent; border:0; border-radius:50%; }
.sound-toggle:hover { background:rgba(34,69,130,.045); }
.sound-toggle svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sound-toggle .sound-on { display:none; }
.sound-toggle.is-playing .sound-on { display:block; }
.sound-toggle.is-playing .sound-off { display:none; }
.copy-panel { --about-top:clamp(110px,18vh,175px); position:absolute; z-index:3; left:50%; transform:translateX(-50%); top:var(--about-top); width:min(520px,calc(100% - 96px)); }
#about-panel { --about-top:clamp(88px,12dvh,120px); width:min(680px,calc(100% - 64px)); overflow:visible; padding-bottom:6px; }
.about-content { position:relative; }
.about-links { display:flex; flex-direction:column; flex:0 0 auto; margin-left:104px; }
#about-panel .quick-projects { flex-shrink:0; align-self:flex-start; min-height:44px; }
h1 { font:600 24px/1.45 var(--font-title); letter-spacing:.025em; margin:0 0 23px; }
.intro { display:flex; align-items:flex-start; gap:24px; }
.avatar { flex:0 0 80px; height:80px; width:80px; border-radius:50%; display:grid; place-items:center; font-size:13px; color:var(--soft); background:linear-gradient(145deg,#f1f1f2,#ebedf0); }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.intro > div:last-child { min-width:0; }
.intro-copy { color:var(--soft); font-size:16px; margin:0; padding-left:1em; line-height:1.65; overflow-wrap:anywhere; list-style:disc; }
.intro-copy li { padding-left:.1em; white-space:pre-line; }
.intro-copy li::marker { font-size:.7em; color:var(--ink); }
.socials { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; align-items:center; }
.socials :is(button,a) { border:0; background:transparent; padding:0; color:var(--ink); opacity:1; font-size:13px; text-decoration:none; }
.socials a:hover { text-decoration:underline; text-underline-offset:4px; }
.socials .social-link { display:grid; place-items:center; flex:0 0 40px; width:40px; height:44px; border-radius:10px; transition:background .18s,color .18s; }
.social-link:disabled { opacity:.66; }
.socials a.social-link:hover { background:rgba(50,115,219,.055); color:var(--blue); }
.social-icon { width:23px; height:23px; display:block; background:currentColor; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
.social-icon-original { object-fit:contain; background:transparent; -webkit-mask:none; mask:none; }
#thoughts-panel { --thoughts-top:clamp(84px,10vh,112px); top:var(--thoughts-top); }
#thoughts-panel h1 { margin-bottom:18px; }
.thought-list { max-height:min(520px,max(132px,calc(63vh - var(--thoughts-top) - 49px))); max-height:min(520px,max(132px,calc(63dvh - var(--thoughts-top) - 49px))); overflow-y:auto; overscroll-behavior-y:contain; touch-action:pan-y pinch-zoom; padding:4px 9px 12px 4px; background:transparent; border:0; box-shadow:none; }
.entry + .entry { margin-top:10px; }
.entry-thumbnail { position:relative; flex:0 0 54px; width:54px; height:47px; border:1px solid rgba(255,255,255,.62); background:rgba(181,207,230,.18); border-radius:7px; display:grid; place-items:center; color:#557492; font-size:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.65); }
.entry-thumbnail img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.entry-copy { position:relative; min-width:0; }
.entry-title { display:block; font-size:16px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.entry-summary { display:block; color:var(--soft); margin-top:4px; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.project-heading { position:absolute; z-index:3; top:clamp(105px,20vh,190px); left:9%; pointer-events:none; }
.project-heading h1 { margin-bottom:10px; }
.project-heading p { color:var(--soft); font-size:14px; margin:0; }
.landmarks { position:absolute; inset:0; z-index:4; pointer-events:none; }
.landmark { position:absolute; width:80px; height:83px; padding:0 0 37px; border:0; border-radius:0; background:transparent; color:var(--soft); font-size:14px; line-height:1.4; transform:translate(-50%,-100%); pointer-events:auto; }
.landmark:hover, .landmark[aria-current="location"] { color:var(--ink); }
.landmark-prop { height:44px; padding:4px 0 0; transform:translate(-50%,0); display:flex; align-items:flex-start; justify-content:center; font-family:var(--font-chinese); font-weight:400; letter-spacing:normal; }
.landmark-dot { position:absolute; width:9px; height:9px; border-radius:50%; background:#b9c3d2; left:calc(50% - 4.5px); bottom:0; }
.landmark-dot::after { content:""; position:absolute; top:8px; left:4px; width:1px; height:18px; background:#b9c3d2; }
.landmark[aria-current="location"] .landmark-dot { background:var(--blue); }
.charge { position:absolute; z-index:4; width:42px; height:4px; border-radius:2px; background:#dde5ef; transform:translate(-50%,0); pointer-events:none; overflow:hidden; }
.charge-fill { display:block; height:100%; width:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; }
.project-links { position:absolute; inset:0; z-index:5; pointer-events:none; }
.tag-hit { position:absolute; border:0; border-radius:4px; background:transparent; pointer-events:auto; transform:translate(-50%,-50%); min-width:44px; min-height:44px; }
.tag-hit:hover { background:rgba(255,253,248,.07); }
.controls { position:absolute; left:9%; right:8%; bottom:max(26px,env(safe-area-inset-bottom)); z-index:7; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.control-help { display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:14px; row-gap:5px; color:var(--soft); font-size:12px; line-height:1.6; }
.control-help > :not(.control-icon) { grid-column:2; }
.control-icon { grid-column:1; grid-row:1 / span 3; width:20px; height:28px; align-self:center; color:var(--ink); fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.direction-label { font-size:12px; color:var(--soft); }
.asset-status { display:flex; align-items:center; gap:7px; font-size:12px; }
.asset-status button { min-height:32px; padding:4px 8px; border:1px solid var(--edge); border-radius:14px; background:transparent; font-size:12px; }
.touch-help { display:none; }
.control-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.control-actions button { min-height:44px; padding:10px 17px; border-radius:22px; font-size:14px; white-space:nowrap; }
.previous { border:1px solid #9aa8c0; background:rgba(255,255,255,.18); }
.next { border:1px solid var(--blue); background:var(--blue); color:#fff; box-shadow:0 2px 6px rgba(32,90,183,.1); }
.previous:hover { border-color:var(--ink); background:rgba(255,255,255,.6); }
.next:hover { background:#125bc9; border-color:#125bc9; }
.next span { margin-left:7px; }
.control-actions button:disabled { opacity:.6; }
.navigation-icon { display:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.next .navigation-icon { display:inline-block; vertical-align:middle; margin-left:7px; }
.help-toggle { display:none; }
.journey-help { position:absolute; right:0; bottom:60px; width:270px; max-width:calc(100vw - 40px); padding:14px 16px; border:1px solid rgba(183,201,224,.5); border-radius:16px; background:rgba(254,253,251,.94); box-shadow:0 8px 28px rgba(24,56,112,.08); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.journey-help p { margin:0; color:var(--soft); font-size:14px; line-height:1.75; }
.tag-hit:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.reader { border:1px solid #e2e6ed; border-radius:12px; width:min(680px,calc(100% - 64px)); max-height:80vh; max-height:80dvh; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; padding:0; background:var(--paper); color:var(--ink); box-shadow:0 20px 80px rgba(21,54,106,.12); }
.reader::backdrop { background:rgba(249,249,250,.68); backdrop-filter:blur(3px); }
.reader-top { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px 6px 30px; background:var(--paper); color:var(--soft); font-size:12px; }
#reader-kind { min-width:0; overflow-wrap:anywhere; }
.close-reader { width:44px; height:44px; padding:0; border:0; background:transparent; font-size:28px; line-height:1; color:var(--soft); }
.reader-body { padding:8px 40px 40px; overflow-wrap:anywhere; }
.reader-body h2 { font:500 24px/1.5 var(--font-title); letter-spacing:.025em; margin:8px 0 28px; }
.reader-body h3 { font:500 20px/1.6 var(--font-title); color:var(--ink); margin:36px 0 18px; }
.reader-body p { font-size:16px; line-height:1.95; color:#5d6f89; margin:0 0 22px; }
.reader-image { display:block; width:100%; height:auto; max-height:320px; object-fit:contain; border-radius:8px; margin:0 0 26px; }
.reader-action { display:inline-block; padding:10px 16px; border:1px solid var(--edge); border-radius:20px; color:var(--ink); text-decoration:none; font-size:14px; }
.reader-action:hover { border-color:var(--blue); }
.reader-body .placeholder-action { display:inline-block; margin-top:10px; padding:10px 15px; border:1px solid var(--edge); border-radius:20px; background:#f4f4f0; color:var(--soft); font-size:13px; }
.fallback { position:absolute; left:9%; right:9%; bottom:130px; z-index:5; font-size:12px; color:var(--soft); }
.fallback :is(button,a) { padding:10px 15px; border:1px solid var(--edge); background:var(--paper); border-radius:4px; margin:8px 8px 0 0; }
.no-script { position:absolute; left:9%; bottom:130px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(pointer:coarse) { .desktop-help { display:none; } .touch-help { display:inline; } .direction-label { display:none; } }
@media(max-width:600px) { .site-header { top:20px; left:24px; right:20px; } .brand { font-size:17px; } .copy-panel { left:50%; width:calc(100% - 48px); top:clamp(94px,16vh,140px); } h1 { font-size:22px; margin-bottom:21px; } .intro { gap:16px; } .avatar { width:64px; height:64px; flex-basis:64px; } .intro-copy { font-size:15px; } .socials { gap:8px; margin-top:8px; } .entry-title { font-size:15px; } .entry-summary { font-size:13px; } .entry-thumbnail { width:46px; height:42px; flex-basis:46px; } #thoughts-panel { --thoughts-top:clamp(76px,9vh,94px); } .thought-list { max-height:min(480px,max(132px,calc(63dvh - var(--thoughts-top) - 48px))); } .controls { left:24px; right:24px; flex-direction:column; align-items:stretch; gap:13px; bottom:max(20px,env(safe-area-inset-bottom)); } .control-help { font-size:12px; } .control-actions { justify-content:space-between; } .control-actions button { font-size:14px; padding:10px 14px; } .previous[hidden] + .next { margin-left:auto; } .project-heading { top:clamp(94px,15vh,140px); left:24px; } .reader { margin:0; width:100%; max-width:100%; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; border:0; border-radius:0; } .reader-top { padding:18px 18px 8px 24px; } .reader-body { padding:10px 25px 36px; } .reader-body h2 { font-size:22px; } }
@media(max-height:520px) { body { overflow-y:auto; } .copy-panel { top:82px; }  .site-header { top:13px; } h1 { margin-bottom:12px; } .controls { bottom:16px; gap:8px; } .control-help { font-size:12px; } .direction-label { display:none; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; } }

.copy-panel:not([hidden]), .project-heading:not([hidden]) { animation:content-arrive .4s ease both; }
@keyframes content-arrive { from { opacity:0; translate:0 5px; } to { opacity:1; translate:0 0; } }
@media(prefers-reduced-motion:reduce) { .copy-panel, .project-heading { animation:none !important; } }

.header-actions { display:flex; align-items:center; gap:7px; pointer-events:auto; }
.browse-toggle { min-height:44px; padding:9px 6px; border:0; background:transparent; color:var(--soft); font-size:12px; }
.browse-toggle:hover { color:var(--ink); }
.quick-projects { display:inline-block; margin:19px 0 0; padding:9px 0; color:var(--soft); font-size:13px; text-decoration:none; text-underline-offset:4px; }
.quick-projects:hover { color:var(--ink); text-decoration:underline; }
a.entry { color:inherit; text-decoration:none; }
.tag-hit { cursor:pointer; }
.reader-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.copy-link { min-height:44px; padding:8px 4px; border:0; background:transparent; color:var(--soft); font-size:12px; }
.reader-body .reader-meta,.reader-body .copy-status { font-size:13px; color:var(--soft); line-height:1.7; overflow-wrap:anywhere; }
.fallback a { display:inline-block; color:var(--ink); text-decoration:none; }
.simple-browse { overflow-y:auto; }
.world.is-simple { height:auto; min-height:100vh; min-height:100dvh; padding:28px max(24px,8vw) 64px; overflow:visible; }
.is-simple .site-header { position:relative; top:auto; left:auto; right:auto; margin-bottom:64px; }
.is-simple :is(#scene,.landmarks,.controls,.character-label,.charge,.project-links,.fallback) { display:none !important; }
.is-simple :is(.copy-panel,.project-heading) { position:relative; top:auto; left:auto; transform:none; width:min(520px,100%); margin:0 auto 64px; animation:none; scroll-margin-top:28px; pointer-events:auto; }
.is-simple #thoughts-panel { top:auto; }
.is-simple #about-panel { width:min(680px,100%); }
.is-simple .thought-list { max-height:none; overflow:visible; }
.is-simple .simple-projects { margin-top:20px; }
.simple-project { display:block; }
@media(max-width:600px) { .header-actions { gap:2px; } .browse-toggle { font-size:11px; } .about-links { margin-left:80px; } .world.is-simple { padding-top:20px; } .is-simple .site-header { margin-bottom:48px; } }

/* Keep text and controls inside phone safe areas. The existing blue-line
   composition and desktop type sizes stay the same. */
@media(max-width:600px) {
  .site-header { top:calc(20px + env(safe-area-inset-top)); left:max(24px,env(safe-area-inset-left)); right:max(20px,env(safe-area-inset-right)); }
  .copy-panel { --about-top:calc(clamp(94px,16vh,140px) + env(safe-area-inset-top)); top:var(--about-top); }
  #thoughts-panel { --thoughts-top:calc(clamp(76px,9vh,94px) + env(safe-area-inset-top)); }
  .project-heading { top:calc(clamp(94px,15vh,140px) + env(safe-area-inset-top)); }
  .controls { left:max(24px,env(safe-area-inset-left)); right:max(24px,env(safe-area-inset-right)); }
  .reader-top { padding:calc(18px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 8px max(24px,env(safe-area-inset-left)); }
  .reader-body { padding:10px max(25px,env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(25px,env(safe-area-inset-left)); }
  .world.is-simple { padding-top:calc(20px + env(safe-area-inset-top)); padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .is-simple .site-header { top:auto; left:auto; right:auto; }
  .is-simple #thoughts-panel { top:auto; }
}
@media(max-height:520px) {
  #about-panel { --about-top:64px; top:var(--about-top); }
  .is-simple #about-panel { top:auto; }
}

/* A small roadside sign replaces the phone's two-row control panel. */
@media(max-width:600px) {
  .world { --mobile-route-y:min(91dvh,calc(100dvh - 54px)); --mobile-content-bottom:calc(var(--mobile-route-y) - 100px); }
  .world:not(.is-simple) .copy-panel { --about-top:calc(clamp(78px,11dvh,98px) + env(safe-area-inset-top)); top:var(--about-top); width:calc(100% - 40px); }
  .world:not(.is-simple) #about-panel { --about-top:calc(76px + env(safe-area-inset-top)); width:calc(100% - 40px); }
  .world:not(.is-simple) #about-panel h1 { padding-right:66px; margin-bottom:12px; }
  .world:not(.is-simple) #about-panel .intro { display:block; }
  .world:not(.is-simple) #about-panel .avatar { position:absolute; top:0; right:0; width:52px; height:52px; }
  .world:not(.is-simple) #about-panel .intro-copy { font-size:16px; line-height:1.56; }
  .world:not(.is-simple) #about-panel .about-links { margin-left:0; }
  .world:not(.is-simple) #about-panel .socials { gap:6px; margin-top:9px; }
  .world:not(.is-simple) #about-panel .quick-projects { align-self:flex-end; margin:0; padding:7px 0; }
  .world:not(.is-simple) #thoughts-panel { --thoughts-top:calc(clamp(78px,11dvh,98px) + env(safe-area-inset-top)); top:var(--thoughts-top); }
  .world:not(.is-simple) .thought-list { max-height:max(132px,calc(var(--mobile-content-bottom) - var(--thoughts-top) - 49px)); }
  .controls { left:auto; right:max(14px,env(safe-area-inset-right)); bottom:calc(10px + env(safe-area-inset-bottom)); flex-direction:row; align-items:center; gap:0; }
  .control-help { display:contents; }
  .control-help > :is(.control-icon,.desktop-help,.touch-help,.direction-label) { display:none; }
  .asset-status { position:absolute; right:2px; bottom:58px; width:max-content; max-width:calc(100vw - 40px); padding:5px 9px; border-radius:14px; background:rgba(254,253,251,.9); }
  .control-actions { justify-content:flex-end; gap:2px; padding:3px; border:1px solid rgba(165,186,216,.4); border-radius:28px; background:rgba(254,253,251,.74); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 3px 14px rgba(27,57,111,.045); }
  .control-actions button { display:grid; place-items:center; width:44px; height:44px; padding:0; min-height:44px; border:0; border-radius:50%; background:transparent; color:var(--ink); box-shadow:none; }
  .control-actions .action-label { display:none; }
  .control-actions .navigation-icon { display:block; margin:0; }
  .control-actions :is(.previous,.next):hover { background:rgba(27,102,220,.07); }
  .control-actions .help-toggle { display:flex; flex-direction:column; justify-content:center; gap:4px; font:500 19px/1 Georgia,serif; color:var(--soft); }
  .help-toggle[aria-expanded="true"] { background:rgba(27,102,220,.07); }
  .journey-dots { display:flex; gap:3px; margin:0; }
  .journey-dots i { width:3px; height:3px; border-radius:50%; background:#c6cfdd; }
  .journey-dots .is-current { background:var(--blue); }
  .fallback { bottom:80px; }
}

/* Use the available width on shorter screens instead of clipping the profile. */
@media(max-height:700px) and (min-width:601px) {
  .world:not(.is-simple) #about-panel { --about-top:80px; width:min(760px,calc(100% - 64px)); }
  .world:not(.is-simple) #about-panel .intro { gap:20px; }
  .world:not(.is-simple) #about-panel .avatar { width:64px; height:64px; flex-basis:64px; }
  .world:not(.is-simple) #about-panel .intro-copy { columns:2; column-gap:32px; line-height:1.5; }
  .world:not(.is-simple) #about-panel .intro-copy li { break-inside:avoid; }
  .world:not(.is-simple) #about-panel .about-links { flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px 24px; margin:12px 0 0 84px; }
  .world:not(.is-simple) #about-panel .socials { margin-top:0; }
  .world:not(.is-simple) #about-panel .quick-projects { margin:0; }
}
@media(max-height:520px) and (min-width:601px) {
  .world:not(.is-simple) #about-panel { --about-top:64px; }
  .world:not(.is-simple) #about-panel h1 { font-size:22px; margin-bottom:8px; }
}
@media(max-height:700px) and (max-width:600px) {
  .world:not(.is-simple) #about-panel .intro-copy { display:grid; grid-template-columns:max-content max-content minmax(0,1fr); column-gap:20px; }
  .world:not(.is-simple) #about-panel .intro-copy li:nth-child(n+4) { grid-column:1 / -1; }
}