*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#38281d;font-family:Arial,sans-serif}#webgl{display:block;width:100%;height:100%;touch-action:none}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #df8134;outline-offset:4px}[hidden]{display:none!important}#status{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;padding:14px 22px;background:#fff8e8;border-radius:16px;font-size:14px;text-align:center}#intro-fade{position:fixed;inset:0;background:#000;opacity:1;pointer-events:none;z-index:5}#intro-enter{position:fixed;bottom:10vh;left:50%;transform:translateX(-50%);padding:18px 48px;border:1px solid #fff7db;border-radius:15px;background:#171411;color:#fff8e9;font-size:14px;font-weight:800;letter-spacing:.18em;box-shadow:0 8px 32px #0003}#intro-enter:disabled{opacity:.35;cursor:wait}#social-menu{position:fixed;top:16px;right:16px;background:#fff7e9ed;padding:10px 14px;border-radius:12px;font-size:12px;max-width:280px}#social-menu summary{cursor:pointer;min-height:24px;align-content:center}#social-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}#social-controls button,#screen-access button,#screen-access a{padding:10px 12px;min-height:44px;border:1px solid #cdb89f;border-radius:8px;background:#fff8eb;color:#38281d;text-decoration:none;font-size:12px}#social-notice{position:fixed;left:50%;bottom:140px;transform:translateX(-50%);padding:12px 18px;max-width:90vw;background:#171411;color:#fff6e4;border-radius:12px;font-size:13px}#screen-access{position:fixed;left:16px;top:16px;font-size:12px;background:#fff7e9f2;border-radius:12px;padding:9px 12px;max-width:min(320px,calc(100vw - 32px))}#screen-access summary{cursor:pointer;min-height:24px;align-content:center}#screen-access p{line-height:1.5}#project-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}#fallback-link{position:fixed;left:16px;bottom:16px;color:#fff8e8;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:650px){#social-menu{top:10px;right:10px}#screen-access{left:10px;top:10px;max-width:calc(100vw - 130px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
#status:has(.loading-brand){margin:0;padding:0;width:min(80vw,520px);background:transparent;border-radius:0;color:#fff}
.loading-brand{
  display:block;color:#e31837;font:italic 900 clamp(56px,14vw,104px)/1 "Arial Black",Arial,sans-serif;
  letter-spacing:-.075em;padding-right:.075em;-webkit-text-stroke:3px #fff;paint-order:stroke fill;
}
.loading-brand::after{
  content:"";display:block;width:88%;height:15px;margin:10px auto 0;transform:skewX(-15deg);
  background:repeating-linear-gradient(to bottom,#005daa 0 3px,transparent 3px 6px);
}
.loading-subtitle{display:block;margin-top:24px;font:500 11px/1.5 Arial,sans-serif;letter-spacing:.3em;color:#d9e7f0}
#intro-enter{
  white-space:nowrap;min-height:48px;border:0;border-radius:8px;
  background:transparent;color:#d9f3ff;box-shadow:none;
  font-weight:500;letter-spacing:.32em;
  text-shadow:0 2px 5px #061d30,0 0 18px #9bdfff66;
  transition:color .25s ease,text-shadow .25s ease;
}
#intro-enter:enabled:hover,#intro-enter:enabled:active,#intro-enter:focus-visible{
  color:#f1fcff;text-shadow:0 2px 5px #061d30,0 0 12px #bcefff,0 0 30px #8fdcff99;
}
#intro-enter:focus-visible{outline:2px solid #bcefff;outline-offset:2px}
#register-chart{position:fixed;pointer-events:none;z-index:1}
#meme-lightbox{border:0;padding:48px 54px 20px;background:#10151aeb;color:white;border-radius:14px;width:max-content;max-width:96vw;max-height:94dvh;overflow:auto}
#meme-lightbox::backdrop{background:#05090de8;backdrop-filter:blur(7px)}
#meme-full{display:block;max-width:min(82vw,1500px);max-height:78dvh;width:auto;height:auto;object-fit:contain;border-radius:4px}
#meme-lightbox button{position:absolute;min-width:44px;min-height:44px;border:0;border-radius:50%;background:#ffffff19;color:#fff;font:32px/1 Arial,sans-serif}
#meme-lightbox button:hover{background:#ffffff35}
#meme-close{top:2px;right:6px}#meme-prev{top:calc(50% - 22px);left:4px}#meme-next{top:calc(50% - 22px);right:4px}
#meme-error{max-width:60vw;padding:24px;font-size:14px}
@media(max-width:650px){#meme-lightbox{padding:48px 8px 58px;max-width:98vw}#meme-full{max-width:90vw;max-height:72dvh}#meme-prev,#meme-next{top:auto;bottom:5px}#meme-prev{left:calc(50% - 54px)}#meme-next{right:calc(50% - 54px)}}
@media(prefers-reduced-motion:reduce){#intro-enter{transition:none}}


/* A compact, lightly bevelled plastic control panel. */
#navigation-dock{
  position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:grid;grid-template-columns:94px minmax(290px,1fr);grid-template-areas:"brand ca" "brand nav";
  align-items:center;column-gap:12px;row-gap:5px;width:max-content;max-width:calc(100vw - 24px);
  padding:9px 10px;border:1px solid #fff8e9;border-bottom-color:#b8ad99;border-radius:15px;
  background:linear-gradient(175deg,#f8f2e5,#e7dece);
  box-shadow:inset 0 1px 0 #ffffff, inset 0 -1px 0 #cfc3af,0 2px 0 #8e8370,0 7px 20px #100c0733;
}
#dock-brand{grid-area:brand;display:flex;align-items:center;justify-content:center;align-self:stretch;padding-right:10px;border-right:1px solid #cbbfa9;box-shadow:1px 0 0 #fff9ed}
#dock-brand img{display:block;width:88px;max-width:100%;height:auto}
#dock-brand{flex-direction:column;gap:5px}
#sound-toggle{display:flex;align-items:center;justify-content:center;gap:4px;min-height:28px;padding:3px 6px;border:1px solid #cbbfa9;border-radius:6px;background:linear-gradient(#fffaf0,#e8dfce);color:#16466e;font:900 9px Arial,sans-serif;box-shadow:inset 0 1px 0 #fff}
#sound-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#sound-toggle .sound-waves{display:none}
#sound-toggle[data-state=playing] .sound-waves{display:block}
#sound-toggle[data-state=playing] .sound-slash{display:none}
#audio-notice{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);max-width:calc(100vw - 24px);padding:10px 14px;border-radius:10px;background:#f3ebdc;font:12px/1.4 Arial,sans-serif;box-shadow:0 4px 15px #0003}
#contract-section{grid-area:ca;display:flex;align-items:center;gap:7px;min-width:0;padding:0 3px 5px;border-bottom:1px solid #d2c6b1;box-shadow:0 1px 0 #fffcf3;font-size:10px;color:#354153}
#contract-section span{flex:none;font-family:"Arial Black",Arial,sans-serif;font-weight:900;font-style:italic;color:#005b9e;font-size:10px}
#contract-address{font:10px/1.4 ui-monospace,Consolas,monospace;min-width:0;overflow-wrap:anywhere;user-select:all}
#scene-nav{grid-area:nav;display:flex;align-items:stretch;gap:4px;min-width:0}
#scene-nav button{
  display:flex;flex:1;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:0 10px;
  border:1px solid transparent;border-radius:8px;background:transparent;color:#16466e;
  font:italic 900 11px/1 "Arial Black",Arial,sans-serif;letter-spacing:-.025em;white-space:nowrap;
  text-shadow:0 1px 0 #ffffffb3;
}
.keyboard-controls:not(:focus-within){clip-path:inset(50%);pointer-events:none}
#scene-nav button:hover{background:linear-gradient(#fffaf0,#e8dfce);border-color:#cbbda5;box-shadow:inset 0 1px 0 #fff}
#scene-nav button[aria-pressed=true]{background:linear-gradient(#e5353c,#c91e29);color:#fffaf0;border-color:#b51c26;border-top-color:#f15b60;text-shadow:0 -1px 0 #8a111b66;box-shadow:inset 0 1px 0 #ffffff29,inset 0 -1px 0 #8c0e2033,0 1px 2px #62201429}
#scene-nav button:active{box-shadow:inset 0 2px 3px #3d1d1833;transform:translateY(1px)}
#scene-nav svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:650px){
  #navigation-dock{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);grid-template-columns:78px minmax(0,1fr);grid-template-areas:"brand ca" "nav nav";padding:8px;gap:7px 10px;border-radius:13px}
  #dock-brand{padding-right:9px}#dock-brand img{width:70px}
  #contract-section{padding:0;border:0;box-shadow:none;gap:6px;min-height:28px}
  #contract-address{font-size:9.5px;line-height:1.3}
  #scene-nav{padding-top:6px;border-top:1px solid #cbbfa9;box-shadow:inset 0 1px 0 #fff9ed;gap:3px}
  #scene-nav button{min-height:44px;min-width:0;flex-direction:column;gap:4px;padding:4px 5px;font-size:10px}
}