/* Layout: one fixed WebGL desk scene, a thin brand line on top, a navigation dock at the bottom.
     Deliberately single-theme: a book lying on dark felt under a warm lamp. */
  :root {
    --desk: #1b1916;
    --ink: #ece5d8;
    --muted: #a0978a;
    --line: rgba(236, 229, 216, 0.16);
    --glass: rgba(27, 25, 22, 0.62);
    --accent: #dfb978;
    --font-title: Georgia, "Times New Roman", serif;
    --font-label: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    color-scheme: dark;
  }
  html, body { height: 100%; }
  body {
    margin: 0;
    overflow: hidden;
    background: var(--desk);
    color: var(--ink);
    font-family: var(--font-label);
    -webkit-font-smoothing: antialiased;
  }
  #stage { position: fixed; inset: 0; }
  #stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
  .vignette {
    position: fixed; inset: 0; pointer-events: none;
    background:
      radial-gradient(120% 90% at 42% 38%, transparent 45%, rgba(8, 7, 6, 0.55) 100%);
  }

  .top {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    pointer-events: none;
  }
  .brand { display: flex; align-items: baseline; gap: 12px; }
  .brand .book-title { font-family: var(--font-title); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.2; }
  .brand .en { font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  .top button, .top .menu { pointer-events: auto; }
  .right { display: flex; align-items: flex-start; gap: 10px; }

  .paper { position: relative; }
  .pill {
    height: 40px; border-radius: 20px; padding: 0 16px 0 6px;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line); background: var(--glass); color: var(--ink);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 500 12px/1 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; transition: border-color .2s;
  }
  .pill:hover { border-color: rgba(223, 185, 120, 0.75); }
  .pill:focus-visible, .opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pill .lbl { color: var(--muted); }
  .pill[aria-busy="true"] #paperName { opacity: 0.55; }
  .sw {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    background-size: 260%; background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.4);
    filter: contrast(1.9) brightness(1.04);
  }
  .menu {
    position: absolute; right: 0; top: 48px; z-index: 4;
    width: min(288px, calc(100vw - 32px));
    display: grid; gap: 2px; padding: 6px;
    border-radius: 14px; border: 1px solid var(--line);
    background: rgba(27, 25, 22, 0.94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
  .menu[hidden] { display: none; }
  .opt {
    display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px;
    padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--ink);
    text-align: left; cursor: pointer; font: inherit;
  }
  .opt:hover { background: rgba(236, 229, 216, 0.06); }
  .opt[aria-checked="true"] { background: rgba(223, 185, 120, 0.16); }
  .opt .sw { width: 44px; height: 44px; }
  .opt .txt { display: grid; gap: 4px; min-width: 0; }
  .opt b { font-weight: 500; font-size: 14px; letter-spacing: 0.05em; }
  .opt .spec { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }

  .icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--line); background: var(--glass); color: var(--ink);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    cursor: pointer; padding: 0;
    transition: border-color .2s, color .2s, opacity .2s;
  }
  .icon-btn:hover { border-color: rgba(223, 185, 120, 0.75); }
  .icon-btn:focus-visible, .dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .icon-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--line); }
  .icon-btn svg { width: 18px; height: 18px; }
  #sound[aria-pressed="false"] .wave { display: none; }
  #sound[aria-pressed="true"] .mute { display: none; }

  .dock {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    pointer-events: none;
  }
  .dock > * { pointer-events: auto; }
  .row { display: flex; align-items: center; gap: 14px; }
  .where {
    min-width: 132px; text-align: center;
    font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }
  .dots { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
  .dot {
    width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
  }
  .dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(236, 229, 216, 0.3);
    transition: width .25s, background .25s;
  }
  .dot:hover::before { background: rgba(236, 229, 216, 0.7); }
  .dot[aria-current="true"]::before { width: 16px; background: var(--accent); }

  .hint {
    margin: -4px 0 0; max-width: 100%; text-align: center;
    font-size: 11px; letter-spacing: 0.08em; color: var(--muted);
    pointer-events: none; transition: opacity .8s;
  }
  .hint.gone { opacity: 0; }

  .loader {
    position: fixed; inset: 0; display: grid; place-items: center; background: var(--desk);
    transition: opacity .9s ease; z-index: 5;
  }
  .loader.done { opacity: 0; pointer-events: none; }
  .loader-in { display: grid; justify-items: center; gap: 14px; padding-inline: 16px; text-align: center; }
  .loader .book-title { font-family: var(--font-title); font-style: italic; font-size: 34px; color: var(--ink); }
  .bar { width: 160px; height: 2px; background: var(--line); overflow: hidden; }
  .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; }
  .loader p { margin: 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  @media (max-width: 520px) {
    .brand .en { display: none; }
    .brand { max-width: 42%; }
    .brand .book-title { font-size: 18px; }
    .right { flex-shrink: 0; gap: 6px; }
    .pill { padding-right: 10px; gap: 6px; letter-spacing: 0.06em; }
    #paperName { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pill .lbl { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .loader, .hint, .dot::before { transition: none; }
  }/* V11 media overlays and mobile-friendly playback. */
.sa-media-root{position:fixed;z-index:95;inset:0;pointer-events:none;font-family:inherit}
.sa-music-btn{position:absolute;right:20px;top:83px;padding:9px 15px;border:1px solid #c4ad83;color:#f4e3c9;border-radius:999px;background:rgba(37,27,39,.86);backdrop-filter:blur(9px);cursor:pointer;pointer-events:auto;font-size:13px}
.sa-music-btn[hidden],.sa-media-overlay[hidden]{display:none!important}
.sa-media-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:auto;padding:18px;z-index:100}
.sa-media-backdrop{position:absolute;inset:0;background:rgba(17,12,20,.78);backdrop-filter:blur(6px)}
.sa-media-dialog{position:relative;max-width:min(780px,95vw);width:100%;max-height:90dvh;overflow:auto;padding:22px;background:#211c25;border:1px solid #bba078;color:#f8eee2;border-radius:17px;box-shadow:0 30px 90px #0009;box-sizing:border-box}
.sa-media-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.sa-media-kicker{font:12px Georgia,serif;letter-spacing:.13em;color:#d4b58c}
.sa-media-close{background:transparent;color:#f6ead9;border:1px solid #89745a;border-radius:50%;width:37px;height:37px;cursor:pointer;flex-shrink:0}
.sa-media-slot{display:grid;place-items:center;gap:15px}.sa-media-slot video{width:100%;max-height:60dvh;object-fit:contain;background:#000;border-radius:7px}.sa-media-slot audio{width:100%;max-width:520px}.sa-media-title{font-size:16px;text-align:center;margin-top:14px;line-height:1.6}
.sa-audio-art{width:min(210px,55vw);aspect-ratio:1;display:grid;place-items:center;background:#d8c6a9;color:#4c2d34;font-size:100px;border-radius:15px;box-shadow:inset 0 0 30px #624f3f33}.sa-audio-art.vinyl{border-radius:50%;background:repeating-radial-gradient(circle,#272126 0 5px,#433541 6px 9px);color:#bda077}.sa-audio-art.postcard{background:#e8dcca;border:7px solid #c9b18d;font-size:100px}
body.sa-media-playing #stage{pointer-events:none}
@media(max-width:650px){.sa-music-btn{right:9px;top:66px;font-size:12px;padding:7px 11px}.sa-media-dialog{padding:13px;max-height:calc(100dvh - 26px)}.sa-media-kicker{font-size:10px}.sa-media-slot video{max-height:54dvh}}


/* V12 responsive reading and clear single-page magnification. */
.v12-zoom-btn {font-size:25px;font-weight:300; flex:0 0 40px}
#v12-page-view[hidden] {display:none!important}
#v12-page-view {position:fixed;inset:0;z-index:10000;background:#15130f;color:#f4ead9;display:flex;flex-direction:column;overscroll-behavior:contain}
.v12-view-head{min-height:56px;padding:calc(8px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #ffffff24;font-size:14px}
.v12-view-head>div{display:flex;gap:8px}.v12-view-head button{padding:9px 12px;min-height:40px;border-radius:20px;border:1px solid #ffffff40;background:#29231f;color:inherit;cursor:pointer}
.v12-view-scroll {flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:18px 12px 26px;overscroll-behavior:contain}
.v12-view-scroll img{display:block;width:auto;height:auto;max-width:100%;max-height:none;object-fit:contain;box-shadow:0 16px 40px #0008;}
.v12-view-help{font-size:11px;text-align:center;color:#b1a799;margin:0;padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px))}
body.v12-reading{overflow:hidden}
@media(max-width:740px){
 .top{padding-top:calc(9px + env(safe-area-inset-top,0px));gap:4px}
 .brand .book-title{font-size:18px}.brand .en{display:none}
 .right{gap:6px}.top .pill{height:36px;padding:0 9px 0 4px;gap:5px;font-size:10px}.top .pill .sw{width:24px;height:24px}
 .top .icon-btn{height:36px;width:36px}
 .dock{bottom:env(safe-area-inset-bottom,0px)}
 .dock .row{gap:10px}.dock .where{max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .dock .dots{max-width:90vw;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
 .dock .dots::-webkit-scrollbar{display:none}
 .dock .hint{font-size:10px;max-width:90vw;margin-inline:auto}
 .v12-view-scroll img{width:min(100%,520px)}
 #openStudio{display:none!important}
}
@media(max-width:390px){.top .pill .lbl{display:none}.dock .row{gap:6px}}
@media(orientation:landscape) and (max-height:520px){.v12-view-head{min-height:40px}.v12-view-scroll{padding:8px 12px}.v12-view-help{display:none}}

/* V12.1 — two camera framings of the SAME curved 3D book (no 2D page replacement). */
.v121-view-switch { display:none; align-items:center; gap:3px; padding:4px;
  border:1px solid rgba(223,185,120,.36); border-radius:999px;
  background:rgba(22,19,17,.9); backdrop-filter:blur(9px); pointer-events:auto; }
.v121-view-switch button { border:0; border-radius:999px; padding:9px 14px;
  background:transparent; color:#bfb1a0; min-height:38px; cursor:pointer;
  letter-spacing:.04em; font-size:12px; font-family:inherit; }
.v121-view-switch button[aria-pressed="true"] { background:#d8b98b; color:#211a17; font-weight:700; }
.v121-view-switch button:focus-visible { outline:2px solid #ffdfaa; outline-offset:2px; }
.v121-status { display:none; white-space:nowrap; text-align:center; font-size:13px;
  color:#e2c99f; font-variant-numeric:tabular-nums; min-width:74px; }
@media (max-width:740px), (pointer:coarse) {
  body.v121-mobile .v121-view-switch { display:flex; }
  body.v121-mobile .dock { bottom:0; gap:9px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
  body.v121-mobile .dock .dots, body.v121-mobile .dock .hint { display:none; }
  body.v121-mobile .dock .row { gap:12px; background:rgba(25,22,20,.82);
    padding:5px 9px; border-radius:999px; border:1px solid var(--line); }
  body.v121-mobile .dock .where { display:none; }
  body.v121-mobile .v121-status { display:block; }
  body.v121-mobile .dock .icon-btn { width:39px; height:39px; flex:0 0 39px; }
  body.v121-mobile .v12-zoom-btn { font-size:23px; }
}
@media (max-height:440px) and (orientation:landscape) {
  body.v121-mobile .dock { gap:4px; padding-bottom:calc(4px + env(safe-area-inset-bottom,0px)); }
  body.v121-mobile .v121-view-switch button { min-height:30px; padding:5px 13px; }
  body.v121-mobile .dock .icon-btn { width:34px; height:34px; flex-basis:34px; }
}