:root{--bg:#f3f0e8;--ink:#161616;--muted:#747168;--pad:clamp(18px,4vw,72px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;min-height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}body{overscroll-behavior:none}button{font:inherit;color:inherit}button:focus-visible{outline:1px solid currentColor;outline-offset:5px}#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none}#ui{position:fixed;inset:0;pointer-events:none;padding:max(var(--pad),env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right)) max(var(--pad),env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left))}#copy{position:absolute;left:clamp(24px,7vw,110px);top:50%;transform:translateY(-50%);width:min(470px,calc(100vw - 48px));pointer-events:none;transition:opacity .45s,transform .45s}#copy.changing{opacity:0;transform:translateY(calc(-50% + 8px))}#eyebrow{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);min-height:14px;margin:0}h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(31px,4.2vw,64px);line-height:1.02;letter-spacing:-.035em;margin:12px 0 14px;max-width:680px}#subhead,#detail{font-size:12px;line-height:1.7;color:var(--muted);max-width:405px}#subhead{min-height:20px}#actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:18px;pointer-events:auto}#actions button,#detail button,#next,#seed,#hint{border:0;background:none;padding:0;cursor:pointer;border-bottom:1px solid transparent}#actions button:hover,#detail button:hover,#next:hover,#seed:hover,#hint:hover{border-color:currentColor}#detail{margin-top:20px;color:var(--ink);pointer-events:auto;max-height:36vh;overflow:auto}#detail .muted{color:var(--muted)}#next{position:absolute;right:clamp(24px,5vw,72px);bottom:clamp(54px,8vh,90px);pointer-events:auto;opacity:0;transition:opacity .8s,transform .2s}#next:hover{transform:translateX(3px)}#next.visible{opacity:1}#seed{position:absolute;right:clamp(24px,5vw,72px);top:clamp(24px,5vh,52px);font-size:10px;letter-spacing:.08em;pointer-events:auto;color:var(--muted)}#signature{position:absolute;left:clamp(24px,5vw,72px);bottom:clamp(24px,4vh,42px);font-size:10px;letter-spacing:.055em;color:var(--muted);white-space:nowrap}#hint{position:absolute;left:50%;bottom:clamp(24px,4vh,42px);transform:translateX(-50%);pointer-events:auto;font-size:10px;color:var(--muted);opacity:0;transition:opacity .7s;white-space:nowrap}#hint.visible{opacity:1}.noscript{position:fixed;inset:0;display:grid;place-items:center;padding:30px;background:var(--bg);font:12px/1.6 ui-monospace,monospace;color:var(--muted)}
@media (pointer:coarse),(max-width:700px){:root{--pad:18px}#copy{left:20px;top:38%;width:calc(100vw - 40px)}h2{font-size:clamp(30px,10vw,46px);max-width:92vw}#subhead,#detail{font-size:12px;max-width:min(88vw,390px)}#actions{gap:22px;margin-top:18px}#actions button,#detail button,#next,#seed,#hint{min-height:44px;display:inline-flex;align-items:center}#seed{right:20px;top:max(14px,env(safe-area-inset-top));padding:0 4px}#next{right:20px;bottom:max(62px,calc(env(safe-area-inset-bottom) + 52px));padding:0 2px}#signature{left:20px;bottom:max(14px,env(safe-area-inset-bottom));max-width:calc(100vw - 40px);font-size:9px;letter-spacing:.035em}#hint{bottom:max(62px,calc(env(safe-area-inset-bottom) + 52px));min-width:96px;justify-content:center}#detail{max-height:27vh}}
@media (max-width:430px){#copy{top:34%}h2{font-size:clamp(29px,10vw,42px)}#next{bottom:max(58px,calc(env(safe-area-inset-bottom) + 48px))}#hint{bottom:max(58px,calc(env(safe-area-inset-bottom) + 48px))}}
@media (orientation:landscape) and (max-height:560px){#copy{top:45%;left:24px;width:min(430px,55vw)}h2{font-size:clamp(27px,6vh,40px);margin:8px 0 8px}#subhead,#detail{line-height:1.45}#detail{max-height:22vh}#next{right:24px;bottom:42px}#signature{left:24px;bottom:14px}#hint{bottom:42px}}
@media (min-width:1200px){#copy{width:520px}#subhead,#detail{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}#hint{display:none}}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Mobile production refinements: protect explanatory copy and separate footer controls */
@media (pointer:coarse),(max-width:700px){
  /* Keep the interaction hint and next control on separate rows. */
  #hint{
    bottom:max(104px,calc(env(safe-area-inset-bottom) + 94px));
    max-width:calc(100vw - 40px);
  }
  #next{
    bottom:max(58px,calc(env(safe-area-inset-bottom) + 48px));
  }

  /* Expanded explanations get a subtle background veil so moving canvas marks
     cannot compete with the text, while preserving the page's visual language. */
  #detail:not(:empty){
    position:relative;
    padding:12px 14px;
    margin-left:-14px;
    width:calc(100% + 28px);
    max-width:min(calc(88vw + 28px),418px);
    background:rgba(243,240,232,.92);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    border-radius:2px;
    max-height:30vh;
    overscroll-behavior:contain;
  }
}

@media (max-width:430px){
  #hint{
    bottom:max(102px,calc(env(safe-area-inset-bottom) + 92px));
  }
}

@media (orientation:landscape) and (max-height:560px){
  #hint{bottom:82px}
  #next{bottom:34px}
  #detail:not(:empty){max-height:28vh}
}