:root { color-scheme: dark; --ink: #24231f; --ivory: #f2efe7; --muted: #d2cec5; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--ink); color: var(--ivory); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .45; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--ivory); outline-offset: 5px; }
button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#app, #viewport { width: 100%; height: 100%; position: relative; }
#viewport { position: absolute; inset: 0; background: var(--ink); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#app::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #181815c7 0, #18181587 18%, transparent 46%), linear-gradient(0deg, #1818157a, transparent 22%, transparent 82%, #18181570); }
.topbar { position: absolute; z-index: 3; left: 48px; right: 48px; top: 33px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: block; width: 200px; line-height: 0; }
.brand img { display: block; width: 100%; height: auto; }
.header-actions { display: flex; align-items: center; gap: 19px; }
.icon-button { border: 0; background: transparent; color: var(--ivory); width: 36px; height: 36px; display: grid; place-items: center; }
.icon-button:hover { color: #fff; background: #ffffff0d; }
.icon-button svg { width: 20px; height: 20px; }
.project-panel { position: absolute; z-index: 2; left: 56px; top: 29%; width: 200px; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 34px; line-height: 1.15; font-weight: 400; letter-spacing: -.7px; margin: 0 0 28px; }
.viewpoints { display: flex; flex-direction: column; gap: 3px; width: 184px; max-height: calc(100dvh - 350px); overflow: auto; scrollbar-width: thin; scrollbar-color: #ffffff30 transparent; }
.viewpoint { display: block; flex-shrink: 0; width: 100%; padding: 12px 0 12px 15px; border: 0; border-left: 1px solid transparent; background: transparent; color: #d2cec5c9; font-size: 12px; font-weight: 400; text-align: left; letter-spacing: .15px; transition: color .2s, border-color .2s; }
.viewpoint:hover { color: #fff; }
.viewpoint.active { border-left-color: var(--ivory); color: var(--ivory); }
.partition-button { display: flex; align-items: center; gap: 10px; width: 184px; min-height: 42px; margin-top: 23px; padding: 10px 12px; border: 1px solid #f2efe74d; background: #24231f9c; color: var(--ivory); font-size: 11px; text-align: left; }
.partition-button:hover { background: #24231fdb; border-color: #f2efe799; }
.partition-button[aria-pressed="true"] { background: #f2efe7; color: var(--ink); }
.partition-button svg { flex-shrink: 0; }
.bottom-area { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 3; }
.toolbar { display: flex; align-items: center; gap: 6px; padding: 7px; background: #24231feb; border: 1px solid #ffffff1a; border-radius: 2px; backdrop-filter: blur(12px); }
.mode-switch { display: flex; gap: 2px; }
.mode-switch > button, .toolbar-button, .vr-button { height: 40px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 0; font-size: 11px; font-weight: 400; padding: 0 17px; white-space: nowrap; }
.mode-switch > button, .toolbar-button { color: var(--muted); background: transparent; }
.mode-switch > button.active { color: var(--ivory); background: #ffffff0e; }
.mode-switch > button:hover, .toolbar-button:hover { color: #fff; background: #ffffff12; }
.toolbar-button { margin-right: 8px; }
.vr-button { background: var(--ivory); color: var(--ink); padding: 0 20px; }
.vr-button:hover { background: #fff; }
.loading { position: absolute; inset: 0; background: var(--ink); z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .6s; }
.loading.complete { opacity: 0; pointer-events: none; }
.loading-wordmark { width: 260px; height: auto; margin-bottom: 43px; }
.progress-track { width: 150px; height: 1px; background: #ffffff20; }
.progress-track > div { height: 100%; width: 0; background: var(--ivory); transition: width .25s; }
.loading p { color: #d2cec5b3; font-size: 10px; letter-spacing: .6px; margin-top: 18px; }
.touch-controls { display: none; position: absolute; right: 20px; bottom: 118px; z-index: 3; text-align: center; }
.touch-controls button { background: #24231fb3; color: var(--ivory); border: 1px solid #ffffff40; width: 38px; height: 38px; margin: 2px; touch-action: none; }
#toast { position: absolute; z-index: 10; bottom: 110px; left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 1.6; max-width: 420px; width: max-content; padding: 16px 22px; border: 1px solid #ffffff20; background: var(--ink); }
dialog { background: var(--ink); color: var(--ivory); border: 1px solid #ffffff25; border-radius: 0; padding: 38px; width: 480px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 40px); }
dialog::backdrop { background: #151512a6; backdrop-filter: blur(4px); }
dialog h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -.5px; margin: 0 0 27px; }
dialog dt { font-size: 12px; color: var(--ivory); margin-top: 18px; }
dialog dd { font-size: 12px; color: #c5c1b8; line-height: 1.7; margin: 5px 0 0; }
.close-dialog { position: absolute; right: 12px; top: 8px; background: none; color: var(--muted); border: 0; font-size: 25px; font-weight: 300; }
.guide-done { border: 0; background: var(--ivory); color: var(--ink); padding: 13px 18px; width: 100%; margin-top: 22px; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-height: 680px) and (min-width: 761px) {
  .topbar { top: 25px; }
  .project-panel { top: 24%; }
  h1 { font-size: 30px; margin-bottom: 17px; }
  .viewpoints { max-height: calc(100dvh - 350px); }
  .viewpoint { padding-top: 9px; padding-bottom: 9px; }
  .bottom-area { bottom: 25px; }
}
@media (max-width: 760px) {
  .topbar { left: 23px; right: 18px; top: 25px; }
  .brand { width: 155px; }
  .header-actions { gap: 5px; }
  .icon-button { width: 32px; height: 32px; }
  .icon-button svg { width: 18px; height: 18px; }
  .project-panel { left: 28px; top: 160px; width: 165px; }
  h1 { font-size: 29px; margin-bottom: 22px; }
  .viewpoints { width: 160px; max-height: min(280px, calc(100dvh - 350px)); }
  .viewpoint { font-size: 11px; padding: 11px 0 11px 12px; }
  .partition-button { width: 160px; margin-top: 18px; font-size: 10px; }
  .bottom-area { bottom: max(23px, env(safe-area-inset-bottom)); max-width: calc(100% - 30px); }
  .toolbar { gap: 4px; padding: 6px; }
  .mode-switch > button { padding: 0 10px; font-size: 10px; gap: 7px; }
  .toolbar-button { padding: 0 10px; margin-right: 1px; }
  .toolbar-button > span { display: none; }
  .vr-button { font-size: 10px; padding: 0 12px; gap: 7px; }
  .toolbar svg { width: 16px; height: 16px; }
  #toast { max-width: calc(100vw - 36px); font-size: 11px; }
  #app::after { background: linear-gradient(90deg, #181815a6, transparent 95%), linear-gradient(0deg, #1818155c, transparent 20%, transparent 80%, #18181580); }
  dialog { padding: 32px 25px; }
}
@media (max-width: 760px) and (max-height: 550px) {
  .project-panel { top: 112px; }
  h1 { font-size: 25px; margin-bottom: 12px; }
  .viewpoints { max-height: calc(100dvh - 300px); }
  .viewpoint { padding-top: 8px; padding-bottom: 8px; }
}
@media (pointer: coarse) { .touch-controls.visible { display: block; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }