:root { color-scheme: dark; }
  * { margin:0; padding:0; box-sizing:border-box; }
  [hidden] { display:none !important; }
  html,body { width:100%; height:100%; min-height:100dvh; background:#000; overflow:hidden;
              font-family: ui-serif, Georgia, "Times New Roman", serif; }
  #wrap { position:fixed; inset:0; display:grid; place-items:center; background:#000; }
  canvas { display:block; image-rendering:auto; touch-action:none; }
  #scene { position:absolute; opacity:0; pointer-events:none; }
  #out   { position:relative; }
  #out:focus { outline:none; }
  #hint  { position:fixed; left:50%; bottom:5vh; transform:translateX(-50%);
           color:#d3ceca; font-size:13px; letter-spacing:.13em; text-transform:uppercase;
           opacity:0; transition:opacity 1.2s ease; pointer-events:none; text-align:center;
           text-shadow:0 0 18px #000; white-space:pre-line; line-height:2; }
  #hint.on { opacity:1; }
  /* Title card. Single visual world by intent — this is a dark cinema, so it
     commits to one theme rather than answering the viewer's light mode. */
  #boot { position:fixed; inset:0; display:grid; place-items:center;
          z-index:10; transition:opacity .6s ease; padding:64px 22px 36px; overflow:auto;
          background:radial-gradient(ellipse at 50% 44%,rgba(8,9,12,.43),rgba(1,2,3,.78) 80%); }
  #boot .card { display:flex; flex-direction:column; align-items:center; gap:0; width:100%; }
  #boot .t { font-size:clamp(30px,7.2vw,68px); letter-spacing:.3em; color:#e8e4e0;
             text-indent:.3em; font-weight:400; line-height:1.1;
             text-shadow:0 0 44px rgba(200,50,63,.16); }
  /* the thread unspools — the game's only verb, stated before you play */
  #boot .thr { width:min(60vw,440px); height:2px; margin:30px 0 26px; transform-origin:50% 50%;
               background:linear-gradient(90deg,transparent,#8c1f2a 18%,#c8323f 50%,#8c1f2a 82%,transparent);
               box-shadow:0 0 14px rgba(200,50,63,.5);
               animation:draw 1.9s cubic-bezier(.22,.61,.36,1) .35s both; }
  @keyframes draw { from { transform:scaleX(0); opacity:0 } to { transform:scaleX(1); opacity:1 } }
  #boot .s { max-width:310px; font-size:17px; line-height:1.55; color:#c7c2be;
             text-align:center; animation:rise .8s ease .35s both; }
  #boot .k { font:13px/1.9 ui-sans-serif,system-ui,sans-serif; color:#b3b3b7;
             margin-top:38px; text-align:center; animation:rise .8s ease .55s both; }
  #boot .k b { color:#eee9e4; font-weight:500; }
  #boot .controller-copy { display:block; font-size:11px; margin-top:8px; color:#96979c; }
  @keyframes rise { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
  @media (prefers-reduced-motion:reduce) {
    #boot .thr, #boot .s, #boot .k { animation-duration:.01ms; animation-delay:0s; }
  }
  #boot.hide { opacity:0; pointer-events:none; }
  button,a,input { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; }
  button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #e7616d; outline-offset:5px; }
  .controller-focus { outline:2px solid #e7616d; outline-offset:5px; }
  button:disabled { cursor:default; opacity:.4; }
  .journey-actions { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:25px; }
  .menu-action { min-height:46px; padding:12px 18px; border:0; background:transparent;
                 color:#d5d0cc; font:12px/1.4 ui-sans-serif,system-ui,sans-serif;
                 text-decoration:none; letter-spacing:.12em; transition:color .18s ease; }
  .menu-action:hover { color:#fff; }
  .primary-action { position:relative; min-width:180px; color:#f1ebe5;
                    font-size:13px; letter-spacing:.2em; text-transform:uppercase; }
  .primary-action::after { content:""; position:absolute; bottom:4px; left:18px; right:18px;
                            height:1px; background:#aa3944; transform:scaleX(.72);
                            transition:transform .25s ease,background .25s ease; }
  .primary-action:hover::after,.primary-action:focus-visible::after { transform:scaleX(1); background:#e7616d; }
  .secondary-action { color:#a6a5aa; font-size:11px; }
  .save-copy { color:#96979c; font:11px/1.6 ui-sans-serif,system-ui,sans-serif; text-align:center; }
  #title-save { min-height:18px; margin-top:13px; }
  .new-confirm { margin-top:12px; color:#c7c2be; text-align:center; font:12px/1.6 ui-sans-serif,system-ui,sans-serif; }
  .confirm-actions { display:flex; justify-content:center; gap:12px; margin-top:5px; }
  #pause-btn { position:fixed; z-index:8; top:max(14px,env(safe-area-inset-top));
               right:max(14px,env(safe-area-inset-right)); min-height:42px; padding:10px 14px;
               color:#ded8d3; border:1px solid rgba(220,226,232,.25); background:rgba(4,5,7,.62);
               font:11px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.12em; }
  #pause-btn .pause-symbol { display:inline-block; width:7px; height:10px; margin-right:9px;
                            border-left:2px solid currentColor; border-right:2px solid currentColor; }
  .overlay { position:fixed; z-index:12; inset:0; display:grid; place-items:center;
              padding:52px 24px 32px; overflow:auto; background:rgba(3,4,6,.9); }
  .overlay:not([hidden]) .menu-content { animation:rise .35s ease both; }
  .menu-content { width:min(100%,460px); text-align:center; }
  .eyebrow { color:#a5a1a1; font:10px/1.7 ui-sans-serif,system-ui,sans-serif;
              letter-spacing:.25em; text-transform:uppercase; }
  .menu-title { font-size:44px; font-weight:400; line-height:1.15; letter-spacing:.05em;
                color:#eee8e1; margin:12px 0 15px; }
  .pause-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
  .preferences { border:0; border-top:1px solid rgba(220,226,232,.16); margin:26px 0 20px; padding-top:18px; }
  .preferences legend { padding:0 14px; color:#bcb6b1; font:10px/1.4 ui-sans-serif,system-ui,sans-serif;
                        letter-spacing:.18em; text-transform:uppercase; }
  .option-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; text-align:left; }
  .option-grid label { display:flex; align-items:center; gap:12px; min-height:44px;
                       color:#d4cfcb; cursor:pointer; font:13px/1.4 ui-sans-serif,system-ui,sans-serif; }
  .option-grid input { width:17px; height:17px; accent-color:#ad3946; cursor:pointer; flex:none; }
  .pause-controls { color:#a6a7ac; font:12px/1.9 ui-sans-serif,system-ui,sans-serif; margin:12px 0 18px; }
  .pause-controls b { color:#e1dcd6; font-weight:500; }
  .pause-arcade { display:inline-flex; align-items:center; margin-top:14px; }
  #ending { background:linear-gradient(rgba(3,4,6,.52),rgba(3,4,6,.93)); }
  #ending .ending-thread { width:1px; height:90px; background:linear-gradient(transparent,#bd4350);
                           margin:0 auto 30px; transform-origin:top;
                           animation:unspool 1.8s ease both; }
  @keyframes unspool { from { transform:scaleY(0); opacity:0; } to { transform:scaleY(1); opacity:1; } }
  #ending .menu-title { max-width:440px; margin:20px auto 28px; font-size:clamp(28px,4vw,40px); line-height:1.45; }
  #ending .journey-actions { margin-top:20px; }
  body[data-overlay] #touch-ui,body[data-overlay] #pause-btn { display:none !important; }
  body[data-overlay] #hint { opacity:0; }
  #arcade-back { position:fixed; top:max(14px,env(safe-area-inset-top));
                 left:max(14px,env(safe-area-inset-left)); z-index:8;
                 padding:10px 12px 9px; border:1px solid rgba(220,226,232,.22);
                 border-radius:999px; color:rgba(224,228,233,.68);
                 background:rgba(5,6,8,.42); text-decoration:none;
                 font:9px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.2em;
                 text-transform:uppercase; backdrop-filter:blur(7px);
                 -webkit-tap-highlight-color:transparent; }
  #arcade-back:focus-visible { outline:2px solid rgba(239,102,114,.8); outline-offset:3px; }

  /* Touch controls belong to the game's material language: smoked glass,
     silver wear, and one red thread control. They remain quiet until touched. */
  #touch-ui { position:fixed; inset:0; z-index:7; display:none; pointer-events:none;
              user-select:none; -webkit-user-select:none; touch-action:none; }
  #touch-ui.on { display:block; }
  .touch-control { position:absolute; pointer-events:auto; touch-action:none;
                   -webkit-tap-highlight-color:transparent; }
  #move-pad { left:max(18px,env(safe-area-inset-left));
              bottom:max(20px,calc(env(safe-area-inset-bottom) + 14px));
              width:118px; height:118px; border-radius:50%;
              border:1px solid rgba(220,226,232,.18);
              background:radial-gradient(circle,rgba(210,218,226,.075),rgba(6,7,9,.16) 66%,rgba(0,0,0,.05));
              box-shadow:inset 0 0 24px rgba(220,228,238,.035),0 5px 28px rgba(0,0,0,.25); }
  #move-pad::before,#move-pad::after { content:""; position:absolute; opacity:.24; }
  #move-pad::before { left:19px; right:19px; top:50%; height:1px; background:#b8bec5; }
  #move-pad::after { top:19px; bottom:19px; left:50%; width:1px; background:#b8bec5; }
  #move-knob { position:absolute; width:48px; height:48px; left:35px; top:35px; border-radius:50%;
               border:1px solid rgba(231,235,239,.42);
               background:radial-gradient(circle at 40% 35%,rgba(230,235,241,.2),rgba(15,17,20,.7));
               box-shadow:0 5px 15px rgba(0,0,0,.45); will-change:transform; }
  .touch-action { width:70px; height:70px; border-radius:50%; border:1px solid rgba(220,226,232,.26);
                  color:rgba(224,228,233,.74); background:rgba(7,8,10,.43);
                  box-shadow:inset 0 0 20px rgba(216,224,232,.04),0 5px 22px rgba(0,0,0,.28);
                  font:10px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.18em;
                  transition:transform .12s ease,background .18s ease,border-color .18s ease; }
  .touch-action.active { transform:scale(.92); background:rgba(225,230,235,.14); border-color:rgba(235,239,242,.55); }
  #jump-btn { right:max(104px,calc(env(safe-area-inset-right) + 98px));
              bottom:max(27px,calc(env(safe-area-inset-bottom) + 21px)); }
  #jump-btn::before { content:""; position:absolute; left:25px; top:20px; width:18px; height:22px;
                     border-left:2px solid currentColor; border-top:2px solid currentColor;
                     transform:rotate(45deg); }
  #thread-btn { right:max(20px,env(safe-area-inset-right));
                bottom:max(68px,calc(env(safe-area-inset-bottom) + 62px));
                width:78px; height:78px; border-color:rgba(202,50,63,.5);
                color:rgba(239,102,114,.9); box-shadow:inset 0 0 23px rgba(200,50,63,.08),0 0 19px rgba(200,50,63,.08); }
  #thread-btn::before { content:""; position:absolute; left:22px; top:37px; width:34px; height:2px;
                       background:#c8323f; box-shadow:0 0 8px rgba(230,72,84,.65);
                       transform:rotate(-42deg); transform-origin:center; }
  #thread-btn::after { content:""; position:absolute; left:46px; top:17px; width:8px; height:8px;
                      border:2px solid #e7616d; border-radius:50%; box-shadow:0 0 8px rgba(230,72,84,.55); }
  #thread-btn.attached { background:rgba(112,22,32,.3); border-color:rgba(239,102,114,.75); }
  #restart-btn { display:none; top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right));
                 width:42px; height:42px; border-radius:50%; font-size:19px; letter-spacing:0;
                 color:rgba(220,225,230,.58); }
  #touch-ui.idle .touch-control { opacity:.48; }
  #touch-ui .touch-control { opacity:.76; transition:opacity .45s ease,transform .12s ease; }
  #touch-ui .touch-control.active { opacity:1; }
  .touch-copy { display:none; }

  @media (max-width:560px) and (orientation:portrait) {
    #boot { padding:70px 22px 38px; }
    #boot .t { font-size:clamp(24px,7.4vw,40px); letter-spacing:.19em; text-indent:.19em; }
    #boot .thr { width:74vw; margin:24px 0; }
    #boot .s { font-size:16px; max-width:270px; }
    #boot .k { max-width:335px; margin-top:30px; font-size:12px; line-height:1.95; }
    .overlay { padding:48px 28px 32px; }
    .menu-title { font-size:38px; }
    .option-grid { gap:4px 14px; }
    #move-pad { width:108px; height:108px; }
    #move-knob { left:32px; top:32px; width:44px; height:44px; }
    #jump-btn { right:max(94px,calc(env(safe-area-inset-right) + 88px)); bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px)); }
    #thread-btn { right:max(16px,env(safe-area-inset-right)); bottom:max(91px,calc(env(safe-area-inset-bottom) + 84px)); }
  }
  @media (pointer:coarse) {
    #boot .desktop-copy { display:none; }
    #boot .touch-copy { display:block; }
    .pause-controls .desktop-copy { display:none; }
    .pause-controls .touch-copy { display:block; }
  }
  html.force-touch #boot .desktop-copy { display:none; }
  html.force-touch #boot .touch-copy { display:block; }
  html.force-touch .pause-controls .desktop-copy { display:none; }
  html.force-touch .pause-controls .touch-copy { display:block; }
  html.force-touch #hint { bottom:auto; top:max(70px,calc(env(safe-area-inset-top) + 60px));
                           font-size:11px; width:84vw; max-width:480px; }
  @media (max-height:560px) {
    #boot { padding:34px 22px 20px; }
    #boot .t { font-size:36px; }
    #boot .thr { margin:15px 0; }
    #boot .s { font-size:14px; max-width:none; }
    #boot .k { margin-top:16px; font-size:11px; line-height:1.65; }
    .journey-actions { margin-top:12px; }
    .overlay { display:block; padding:30px 22px; }
    .menu-content { margin:0 auto; }
    .menu-title { font-size:30px; }
  }
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  }