@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#090911;--paper:#f4f0e9;--hot:#ff603c;--line:#ffffff24}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font:12px 'DM Sans',sans-serif;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,a{color:inherit;cursor:pointer}button{font:inherit;background:none;border:0}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--hot);outline-offset:6px}#universe-canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}.grain{position:fixed;inset:0;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");z-index:2}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#09091166,transparent 40%),linear-gradient(0deg,#090911 1%,transparent 32%,transparent 85%,#090911aa);z-index:1}header{position:fixed;top:0;left:0;right:0;height:100px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;z-index:5;pointer-events:none}header>*{pointer-events:auto}.wordmark{text-decoration:none;font:600 42px 'Space Grotesk';letter-spacing:-7px;display:flex;align-items:center}.wordmark span{font:25px 'DM Sans';color:var(--hot);margin-left:4px;transform:translateY(-10px)}.edition{font-size:9px;letter-spacing:2px;margin-left:8%}#menu{display:flex;gap:15px;align-items:center;font-size:12px}#count{font:10px monospace;color:#88868f}#menu i{font-style:normal;font-size:21px}main{height:100svh;position:relative;pointer-events:none;z-index:3}.topline{position:absolute;top:125px;left:4%;right:4%;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1px;color:#c1bcc5}.live{display:flex;align-items:center;gap:8px}.live i{width:5px;height:5px;background:var(--hot);border-radius:50%;box-shadow:0 0 12px var(--hot);animation:breathe 3s infinite}.hero-copy{position:absolute;top:23%;left:8%}.tiny{font:8px 'DM Sans';letter-spacing:2px;color:#b6aeb8}h1{font:400 clamp(42px,5.4vw,90px)/.97 'Space Grotesk';letter-spacing:-5px;margin:24px 0}h1 em{font-style:normal;color:var(--hot)}.orbit-label{position:absolute;right:8%;top:47%;display:flex;align-items:center;gap:20px}.cross{font:30px 'Space Grotesk';font-weight:300}.orbit-label div>span{font:8px monospace;letter-spacing:1.7px;color:#9992a1}.orbit-label h2{font-size:11px;letter-spacing:2px;font-weight:400;margin:8px 0}.label-line{width:75px;height:1px;background:#ffffff40}.side-mark{position:absolute;right:2.5%;top:63%;font-size:8px;letter-spacing:2px;writing-mode:vertical-rl}.drag-hint{position:absolute;left:8%;top:57%;font-size:8px;letter-spacing:2px;color:#ada4b2;display:flex;gap:12px;align-items:center}.drag-hint>span{font-size:27px;color:var(--hot)}.chapter-select{position:absolute;left:4%;top:31%;display:flex;flex-direction:column;gap:25px;pointer-events:auto}.chapter-select button{display:flex;align-items:center;gap:12px;padding:8px 0;font:9px monospace;color:#706b79}.chapter-select i{height:1px;width:15px;background:#514c58;transition:width .4s}.chapter-select .selected{color:var(--hot)}.chapter-select .selected i{background:var(--hot);width:30px}.giant{position:absolute;bottom:100px;left:3.2%;right:3.2%;font:600 16.6vw/.75 'Space Grotesk';letter-spacing:-1.25vw;white-space:nowrap;mix-blend-mode:screen;transform-origin:bottom;animation:reveal 1.8s cubic-bezier(.19,1,.22,1) both}.giant>span{font:12px 'DM Sans';letter-spacing:0;position:absolute;top:0;margin:0 12px}.bottomline{position:absolute;left:4%;right:4%;bottom:70px;display:flex;justify-content:space-between;align-items:center;font:7px 'DM Sans';letter-spacing:2px}.bottomline>button{pointer-events:auto;background:var(--hot);color:#170c0d;border-radius:100px;padding:16px 23px;font-size:11px;letter-spacing:0;transform:translateY(5px);display:flex;align-items:center;gap:28px;transition:background .3s,transform .3s}.bottomline>button:hover{background:var(--paper);transform:translateY(0)}.bottomline>button span{font-size:20px}footer{position:fixed;bottom:0;height:50px;left:4%;right:4%;z-index:5;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font:8px monospace;letter-spacing:1px}.transport,.utility{display:flex;align-items:center;gap:20px}.transport button{font-size:12px}#time{color:#b4acba}.timeline{display:flex;align-items:center;gap:17px;width:30%;font-size:7px;color:#9a909f}input[type=range]{width:100%;height:2px;accent-color:var(--hot);cursor:pointer}.utility button{font-size:8px;letter-spacing:1px;display:flex;gap:10px;align-items:center}.utility button span{font-size:15px}#fullscreen{font-size:19px}dialog{position:fixed;background:#ede8e1;color:#1c1921;border:0;width:620px;max-width:calc(100% - 32px);padding:46px;z-index:10}dialog::backdrop{background:#05050bbe;backdrop-filter:blur(16px)}dialog h2{font:400 64px/1 'Space Grotesk';letter-spacing:-4px;margin:25px 0 40px}dialog .tiny{color:#76707b}.dismiss{position:absolute;right:20px;top:14px;font-size:30px;font-weight:400}.force-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.force-options button{border:1px solid #21192330;text-align:left;padding:15px;font-size:17px;transition:background .2s}.force-options button>span{display:block;font:9px monospace;margin-bottom:20px}.force-options button.selected{background:#ff603c;border-color:#ff603c}.force-options svg{display:block;margin-top:20px;width:100%;height:80px;fill:none;stroke:currentColor;stroke-width:1}label{display:block;font:9px monospace;letter-spacing:1px;margin:35px 0 18px}output{float:right}#release{background:#16131b;color:#f5efe8;display:flex;justify-content:space-between;width:100%;padding:19px 22px;margin-top:35px;font-size:15px}#archive{max-height:85svh;overflow:auto}#records:empty:after{content:'NO TRACES YET';font:10px monospace;color:#77707a;display:block;padding:20px 0 50px}#records article{padding:20px 0;border-top:1px solid #201b2125;display:grid;grid-template-columns:65px 1fr;gap:15px}#records img{width:65px;height:65px;object-fit:cover;background:#080811}#records small{font:8px monospace;color:#7b717e}#records h3{font:20px 'Space Grotesk';margin:7px 0}#export{margin-top:30px;border-bottom:1px solid #28232a;padding:10px 0}.archive-note{display:block;font:7px monospace;letter-spacing:1px;color:#79717e;margin-top:30px}#toast{position:fixed;top:105px;left:50%;transform:translate(-50%,-10px);background:var(--paper);color:#18131e;border-radius:30px;padding:14px 24px;font-size:11px;z-index:20;opacity:0;pointer-events:none;transition:.4s}#toast.show{opacity:1;transform:translate(-50%,0)}body.focus .hero-copy,body.focus .giant,body.focus .drag-hint,body.focus .side-mark,body.focus .edition{opacity:0;transition:opacity .8s}body:not(.focus) .hero-copy,body:not(.focus) .giant{transition:opacity .8s}.hero-copy{animation:fade 1.7s .2s both}button:hover{color:var(--hot)}#release:hover{background:var(--hot);color:#19121b}.force-options button:hover{color:#19121b;border-color:#ff603c}@keyframes reveal{from{opacity:0;transform:translateY(70px) rotate(3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes fade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{50%{opacity:.35}}@media(max-height:740px) and (min-width:701px){header{height:75px}.topline{top:90px}.hero-copy{top:22%}.hero-copy h1{font-size:55px}.giant{font-size:15vw}.drag-hint{top:54%}}@media(min-width:1800px){h1{font-size:96px}}@media(max-width:700px){header{height:78px;padding:0 6%}.edition{font-size:6px;letter-spacing:1.5px;margin:0}.wordmark{font-size:34px}.wordmark span{font-size:18px}#menu{font-size:10px;gap:8px}.topline{left:6%;right:6%;top:98px;font-size:8px}.hero-copy{top:19%;left:12%}h1{font-size:48px;letter-spacing:-3px}.tiny{font-size:7px;letter-spacing:1.3px}.chapter-select{left:5%;top:25%;gap:16px}.chapter-select button{font-size:7px;gap:6px}.chapter-select i{width:9px}.chapter-select .selected i{width:15px}.orbit-label{top:59%;right:7%;gap:12px}.orbit-label h2{font-size:9px}.orbit-label div>span{font-size:7px}.label-line{width:35px}.side-mark{display:none}.drag-hint{left:12%;top:38%;font-size:6px;letter-spacing:1px}.drag-hint>span{font-size:20px}.giant{left:3%;font-size:16.5vw;bottom:155px;letter-spacing:-1.3vw}.giant>span{font-size:7px;margin-left:7px}.bottomline{bottom:78px;left:6%;right:6%;font-size:6px;letter-spacing:1px}.location{display:none}.bottomline>button{padding:13px 18px;font-size:10px;gap:20px}footer{left:6%;right:6%;height:52px}.transport,.utility{gap:12px}.utility button{font-size:7px;letter-spacing:.5px}#fullscreen{display:none}#time{font-size:7px}dialog{padding:30px 22px}dialog h2{font-size:48px;margin-bottom:30px}.force-options{gap:7px}.force-options button{font-size:14px;padding:11px}.force-options svg{height:60px}.force-options button>span{margin-bottom:13px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Let the expanding city own the view after its brief introduction. */
.giant{font-size:36px;letter-spacing:-2px;bottom:80px;left:4%;right:auto}.giant>span{font-size:8px;margin-left:5px}.hero-copy{top:20%;left:6%}h1{font-size:clamp(36px,4.4vw,72px)}.orbit-label{top:auto;bottom:145px;right:4%}.city-counts{position:absolute;top:150px;right:4%;display:flex;gap:24px;font:9px monospace;letter-spacing:1px;color:#b7c6c5}.city-counts span:first-child{color:#ff986d}.bottomline>span{display:none}.bottomline{justify-content:center}.drag-hint{top:auto;bottom:160px;left:4%}.settled .hero-copy,.settled .side-mark{opacity:0;animation:none;transition:opacity 1.5s}.chapter-select{top:38%}.vignette{background:linear-gradient(0deg,#090911 0%,transparent 24%,transparent 85%,#09091199)}
@media(max-width:700px){.hero-copy{top:18%;left:8%}h1{font-size:36px;letter-spacing:-2px}.giant{font-size:26px;bottom:90px;left:6%;letter-spacing:-1.5px}.city-counts{top:125px;left:6%;right:6%;justify-content:space-between;gap:6px;font-size:7px}.orbit-label{bottom:180px;right:6%}.drag-hint{bottom:175px;left:6%}.bottomline{bottom:78px;justify-content:flex-end}.chapter-select{top:35%}.edition{font-size:6px}.settled .hero-copy{visibility:hidden}}

/* ---- shared-city additions ---- */
.timeline #present{min-width:46px;text-align:right}
@media(max-width:700px){footer{flex-wrap:wrap;height:auto;padding:8px 0 10px;row-gap:8px}.timeline{display:flex;order:-1;width:100%}.transport{gap:8px}#fullscreen{display:none}.edition{display:none}}
.live.history i{background:#8fd3ff;box-shadow:0 0 12px #8fd3ff;animation:none}
body.placing #universe-canvas{cursor:crosshair}
.place-bar{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:8;display:none;align-items:center;gap:16px;background:var(--paper);color:#18131e;border-radius:40px;padding:10px 12px 10px 22px;font-size:12px;white-space:nowrap}
body.placing .place-bar{display:flex}
.place-bar button{background:#16131b;color:#f5efe8;border-radius:30px;padding:12px 18px;min-height:44px}
.place-bar button:hover{background:var(--hot);color:#19121b}
@media(max-width:700px){.place-bar{bottom:150px;max-width:calc(100% - 24px);font-size:11px;padding-left:16px}}
body.placing .hero-copy,body.placing .giant,body.placing .drag-hint,body.placing .bottomline>button{opacity:0;pointer-events:none}
@media(max-width:700px){.utility button,.transport,#menu,.dismiss{min-height:44px}.utility button{font-size:10px;padding:0 6px}#time{font-size:10px}.timeline{font-size:9px}.chapter-select button{min-height:44px;font-size:10px}.bottomline>button{min-height:48px}.tiny{font-size:9px}}

/* ---- phone layout v2: one clean bottom stack, nothing overlapping ---- */
@media(max-width:700px){
  footer{display:grid;grid-template-columns:1fr auto;grid-template-areas:"tl tl" "tr ut";align-items:center;row-gap:0;padding:6px 0 calc(6px + env(safe-area-inset-bottom));height:auto;background:linear-gradient(0deg,#090911f2 60%,#09091100)}
  .timeline{grid-area:tl;order:0;width:100%;min-height:44px}
  .transport{grid-area:tr}.utility{grid-area:ut}
  .utility button,.transport{min-height:44px}
  .utility button{padding:0 10px}
  .bottomline{bottom:calc(122px + env(safe-area-inset-bottom));left:6%;right:6%;justify-content:center}
  .bottomline>button{width:100%;justify-content:space-between;transform:none}
  .giant,.drag-hint,.side-mark,.city-counts .tiny{display:none}
  .chapter-select{top:auto;bottom:calc(188px + env(safe-area-inset-bottom));left:6%;flex-direction:row;gap:6px}
  .chapter-select button{min-width:44px;justify-content:center;padding:0 10px;border:1px solid #ffffff30;border-radius:22px}
  .chapter-select i{display:none}
  .chapter-select .selected{border-color:var(--hot)}
  .orbit-label{bottom:calc(192px + env(safe-area-inset-bottom));right:6%;gap:8px}
  .orbit-label .cross,.label-line{display:none}
  .vignette{background:linear-gradient(0deg,#090911 0%,#090911aa 14%,transparent 34%,transparent 85%,#09091199)}
  .place-bar{bottom:calc(122px + env(safe-area-inset-bottom))}
}
@media(max-width:700px){.chapter-select button{background:#090911d9;font-size:11px;color:#c9c3cf}.chapter-select .selected{color:var(--hot)}.orbit-label div>span{display:none}.orbit-label h2{text-shadow:0 0 8px #090911}#timeline{height:28px}}

/* ---- influence picker (11 options) ---- */
#forces{max-height:90svh;overflow:auto}
#forces .force-options{grid-template-columns:repeat(3,1fr)}
#forces .force-options button{min-height:64px;padding:12px 14px;font-size:15px}
#forces .force-options button>span{margin-bottom:8px}
#forces .force-options svg{height:44px;margin-top:8px}
.force-hint{font:12px 'DM Sans',sans-serif;color:#4a4450;margin:18px 0 0;min-height:18px}
.sign-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.sign-row[hidden]{display:none}
.sign-row button{border:1px solid #21192330;min-height:44px;font-size:14px}
.sign-row button.selected{background:#ff603c;border-color:#ff603c;color:#19121b}
@media(max-width:700px){#forces h2{font-size:38px;margin:14px 0 20px}#forces .force-options{gap:6px}#forces .force-options button{padding:10px;font-size:13px;min-height:60px}#forces .force-options svg{display:none}}

/* HTJ Studio link: small, in the header next to Archive, never over the city controls */
.hdr-right{display:flex;align-items:center;gap:26px}
.studio{font:9px 'DM Sans',sans-serif;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:#b6aeb8;display:flex;align-items:center;gap:6px;min-height:44px;transition:color .3s}
.studio i{font-style:normal;font-size:13px;color:var(--hot)}
.studio:hover,.studio:focus-visible{color:var(--paper)}
@media(max-width:700px){.hdr-right{gap:14px}.studio{font-size:8px;letter-spacing:1.4px}}

/* Header text at least 12px (Helgi 2026-10-28): link, Archive, count, edition line */
.studio{font-size:12px;letter-spacing:1.5px}
.studio i{font-size:15px}
#menu,#count{font-size:12px}
.edition{font-size:12px;letter-spacing:2px}
@media(max-width:700px){.hdr-right{gap:16px}.studio{font-size:12px;letter-spacing:1px}#menu{font-size:12px;gap:8px}#count{font-size:12px}}