#tw { --ink: #0b0a08; --gold: #d9b779; --gold-hi: #f4dca6; --gold-lo: #8a6d35; --paper: #f3ede2; --muted: #b9b0a0; --ground: 80%; }
  #tw .tw-pixel { font-family: "Press Start 2P", "Space Grotesk", monospace; }
  #tw /* Vertical scroll drives a horizontal world */
  #run { position: relative; }
  #tw .tw-view { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  #tw .tw-sky { position: absolute; inset: 0; }
  #tw .tw-scene { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity 1.1s ease;
           filter: brightness(.8) contrast(1.05); }
  #tw .tw-scene.tw-on { opacity: 1; }
  #tw .tw-sky::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,10,8,.85) 0%, rgba(11,10,8,.25) 30%, rgba(11,10,8,.15) 60%, rgba(11,10,8,.9) var(--ground)),
                radial-gradient(ellipse at 35% 70%, transparent 20%, rgba(11,10,8,.6) 80%); }
  #tw .tw-blueprint { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease;
    background-image: linear-gradient(rgba(217,183,121,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(217,183,121,.08) 1px, transparent 1px);
    background-size: 56px 56px; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 var(--ground), transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 var(--ground), transparent); }
  #tw .tw-blueprint.tw-on { opacity: 1; }
  #tw /* Perspective floor gives the world depth */
  .tw-floor { position: absolute; left: -50%; right: -50%; top: var(--ground); height: 60%; transform-origin: 50% 0; transform: perspective(380px) rotateX(64deg); overflow: hidden;
    background-color: #0d0b08; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
  #tw .tw-tiles { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 90px); will-change: transform;
    background-image: linear-gradient(90deg, rgba(217,183,121,.22) 1px, transparent 1px), linear-gradient(rgba(217,183,121,.14) 1px, transparent 1px); background-size: 90px 90px; }
  #tw .tw-horizon { position: absolute; left: 0; right: 0; top: var(--ground); height: 1px; background: linear-gradient(90deg, transparent, rgba(244,220,166,.6), transparent); box-shadow: 0 0 18px rgba(217,183,121,.5); }
  #tw .tw-far, #tw .tw-world { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
  #tw .tw-numeral { position: absolute; top: 20%; font: 700 clamp(160px, 34vh, 360px)/1 "Space Grotesk"; color: transparent; -webkit-text-stroke: 1px rgba(217,183,121,.16); }
  #tw #thread { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; }
  #tw .tw-orb { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; animation: tw-float 2.6s ease-in-out infinite; transition: transform .5s, opacity .5s; }
  #tw .tw-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--gold-hi), transparent 30%, var(--gold) 50%, transparent 80%, var(--gold-hi)); animation: tw-spin 3s linear infinite;
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%); mask: radial-gradient(circle, transparent 55%, #000 57%); }
  #tw .tw-orb::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 30px 8px rgba(217,183,121,.45); }
  #tw .tw-orb b { position: relative; z-index: 1; font: 700 15px/1 "Space Grotesk"; color: #2a200e; }
  #tw .tw-orb span { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 10px/1 "Space Grotesk"; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 0 8px #000; }
  #tw .tw-orb.tw-got { opacity: 0; transform: scale(2.2); animation: none; }
  @keyframes tw-float { 50% { translate: 0 -10px; } }
  @keyframes tw-spin { to { rotate: 1turn; } }
  #tw /* The Tailor */
  .tw-hero { position: absolute; top: var(--ground); z-index: 6; height: clamp(170px, 35vh, 310px); aspect-ratio: 120 / 250; transform: translate(-50%, -97%); pointer-events: none; }
  #tw .tw-hero svg { width: 100%; height: 100%; overflow: visible; }
  #tw .tw-hero::before { content: ""; position: absolute; inset: -12% -60%; background: radial-gradient(ellipse at 50% 45%, rgba(244,220,166,.22), transparent 62%); }
  #tw .tw-hero.tw-flip svg { transform: scaleX(-1); }
  #tw .tw-shadow { position: absolute; top: var(--ground); z-index: 5; width: clamp(80px, 13vh, 130px); height: 16px; margin: -8px 0 0; transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0,0,0,.85), transparent 70%); }
  #tw .tw-spot { position: absolute; top: calc(var(--ground) - 30vh); z-index: 4; width: 52vh; height: 60vh; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(ellipse at 50% 72%, rgba(244,220,166,.2), transparent 58%); }
  #tw #fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
  #tw /* HUD */
  .tw-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: calc(env(safe-area-inset-top, 0px) + 12px) 4vw 0; }
  #tw .tw-hud-row { display: flex; align-items: center; gap: 14px; }
  #tw .tw-hud .tw-who { font: 700 12px/1 "Space Grotesk"; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); text-decoration: none; white-space: nowrap; }
  #tw .tw-hud .tw-lvl { flex: 1; font-size: 9px; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
  #tw .tw-hud .tw-xp { font-size: 10px; color: var(--gold-hi); white-space: nowrap; }
  #tw .tw-bar { position: relative; height: 6px; margin-top: 10px; background: rgba(217,183,121,.12); border: 1px solid rgba(217,183,121,.35); border-radius: 2px; overflow: hidden; }
  #tw .tw-bar b { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi)); box-shadow: 0 0 12px var(--gold); transition: width .5s; }
  #tw .tw-bar i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(11,10,8,.85); }
  #tw .tw-skills { display: flex; gap: 6px; margin-top: 10px; }
  #tw .tw-slot { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(217,183,121,.3); background: rgba(11,10,8,.7); border-radius: 50%;
    font: 700 11px/1 "Space Grotesk"; color: rgba(217,183,121,.35); transition: all .4s; }
  #tw .tw-slot.tw-on { color: #2a200e; background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold) 60%); border-color: var(--gold-hi); box-shadow: 0 0 14px rgba(217,183,121,.6); animation: tw-pop .5s cubic-bezier(.3,1.6,.5,1); }
  @keyframes tw-pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
  #tw .tw-toast { position: absolute; left: 50%; top: calc(var(--ground) + 26px); z-index: 11; transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
    display: flex; align-items: center; gap: 12px; padding: 9px 15px; white-space: nowrap; border: 1px solid var(--gold); border-radius: 3px; background: rgba(11,10,8,.9);
    box-shadow: 0 0 24px rgba(217,183,121,.35); transition: opacity .3s, transform .35s cubic-bezier(.3,1.5,.5,1); }
  #tw .tw-toast.show { opacity: 1; transform: translate(-50%, 0); }
  #tw .tw-toast .tw-big { font-size: 10px; color: var(--gold-hi); }
  #tw .tw-toast .tw-small { font: 600 11px/1 "Space Grotesk"; letter-spacing: .14em; text-transform: uppercase; }
  #tw /* Chapter card */
  .tw-card { position: absolute; z-index: 9; left: 4vw; top: calc(env(safe-area-inset-top, 0px) + 112px); width: min(27rem, 92vw); padding: 1.3rem 1.4rem 1.4rem;
    background: linear-gradient(160deg, rgba(20,18,14,.92), rgba(11,10,8,.84)); border: 1px solid rgba(217,183,121,.22); border-radius: 4px;
    transition: opacity .45s, transform .45s; }
  #tw .tw-card.tw-enter { animation: tw-enter .5s cubic-bezier(.2,.7,.2,1); }
  @keyframes tw-enter { from { opacity: 0; transform: translateY(14px); } }
  #tw .tw-card.tw-title.tw-enter { animation-name: tw-enterT; }
  @keyframes tw-enterT { from { opacity: 0; transform: translate(-50%, 14px); } }
  #tw .tw-card.tw-out { opacity: 0; transform: translateY(12px); pointer-events: none; }
  #tw .tw-card .tw-tag { font-size: 9px; color: var(--gold); }
  #tw .tw-card h2 { font: 400 clamp(26px, 3.2vw, 38px)/1.08 Newsreader, Georgia, serif; margin: .45em 0 .35em; }
  #tw .tw-card .tw-lead { font: italic 400 19px/1.4 Newsreader, Georgia, serif; color: var(--gold-hi); margin: 0 0 .55em; }
  #tw .tw-card p { margin: 0; color: var(--muted); font-size: 15px; }
  #tw .tw-card.tw-title { left: 50%; transform: translateX(-50%); text-align: center; background: none; border: 0; top: 18%; }
  #tw .tw-card.tw-title.tw-out { transform: translate(-50%, 12px); }
  #tw .tw-card.tw-title h1 { margin: .2em 0 .1em; font: 400 clamp(56px, 10vw, 120px)/.95 Newsreader, serif;
    background: linear-gradient(100deg, var(--gold-lo), var(--gold-hi) 40%, var(--gold) 55%, var(--gold-hi) 70%, var(--gold-lo)); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: tw-sheen 7s ease-in-out infinite; }
  @keyframes tw-sheen { 50% { background-position: 100% 0; } }
  #tw .tw-press { margin-top: 1.2rem; font-size: 10px; color: var(--gold-hi); animation: tw-blink 1.1s steps(2) infinite; }
  @keyframes tw-blink { 50% { opacity: 0; } }
  #tw .tw-btn { display: inline-block; margin-top: 1.1rem; padding: .95rem 1.5rem; color: #2a200e; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); text-decoration: none; border-radius: 3px;
    box-shadow: 0 5px 0 #6b5226, 0 0 30px rgba(217,183,121,.35); font-size: 11px; }
  #tw .tw-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #6b5226; }
  #tw .back { position: fixed; right: 4vw; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 12; font: 500 11px/1 "Space Grotesk"; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
  @media (max-width: 640px) {
  #tw { --ground: 84%; }
  #tw .tw-hud .tw-who { display: none; }
  #tw .tw-hud .tw-lvl { text-align: left; font-size: 8px; }
  #tw .tw-card { padding: 1rem 1.1rem 1.1rem; }
  #tw .tw-card .tw-lead { font-size: 17px; }
  #tw .tw-card p { font-size: 14px; }
  #tw .tw-hero { height: clamp(150px, 27vh, 230px); }
  #tw .tw-orb { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  #tw .tw-orb span { top: 60px; }
}
  @media (prefers-reduced-motion: reduce) {
  #tw .tw-orb, #tw .tw-orb::before, #tw .tw-press, #tw .tw-card.tw-title h1 { animation: none; }
}
  #tw { position: relative; background: var(--ink); color: var(--paper); font: 400 16px/1.6 Inter, system-ui, sans-serif; --navh: var(--nav-height, 72px); }
  #tw *, #tw *::before, #tw *::after { box-sizing: border-box; }
  #tw .tw-hud { padding-top: calc(var(--navh) + 10px); }
  #tw .tw-card { top: calc(var(--navh) + 122px); }
  
  #tw .tw-card h2.tw-h1 { margin: .25em 0 .15em; font: 400 clamp(48px, 8vw, 104px)/.95 Newsreader, Georgia, serif;
    background: linear-gradient(100deg, var(--gold-lo), var(--gold-hi) 40%, var(--gold) 55%, var(--gold-hi) 70%, var(--gold-lo)); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: tw-sheen 7s ease-in-out infinite; }
  #tw .tw-card h2, #tw .tw-card p { letter-spacing: normal; text-transform: none; }
  #tw .tw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  #tw #tl-mute-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important; right: 4vw !important; }

  #tw .tw-card.tw-title { top: calc(var(--navh) + 18vh); }
  @media (max-width: 640px) {
    #tw { --ground: 88%; }
    #tw .tw-hero { height: clamp(120px, 21vh, 180px); }
    #tw .tw-card.tw-title { top: calc(var(--navh) + 128px); }
    #tw .tw-card { padding: .9rem 1rem 1rem; }
    #tw .tw-card p { font-size: 13.5px; }
    #tw .tw-card .tw-lead { font-size: 16px; }
  }
  #tw .tw-card.tw-title { width: min(48rem, 92vw); }
  @media (min-width: 641px) { #tw .tw-card.tw-title { top: calc(var(--navh) + 7vh); } }

  #tw .tw-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #tw .tw-scene.tw-has-video { filter: brightness(1.05) contrast(1.05); }
  #tw .tw-card.tw-peek { opacity: 0; transform: translateY(-16px); pointer-events: none; }