:root{color-scheme:light;--paper:#eeeae1;--ink:#292d2b;--muted:#777a73;--line:#d3cfc4;--olive:#707b67;--gold:#ad8c59;--night:#202b2c}
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}
    button,select{font:inherit}
    button{cursor:pointer}
    button:focus-visible,select:focus-visible{outline:3px solid #c49a5c;outline-offset:4px}
    .shell{max-width:1320px;margin:auto;padding:0 58px}
    .topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:14px}
    .wordmark{display:flex;align-items:center;gap:11px;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
    .symbol{width:23px;height:23px;border:1.5px solid currentColor;border-radius:50%;position:relative;display:inline-block}
    .symbol:before,.symbol:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:currentColor}
    .symbol:before{width:10px;height:10px;opacity:.75}.symbol:after{width:3px;height:3px;background:var(--paper)}
    .topright{display:flex;align-items:center;gap:22px}.edition{color:var(--muted);font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
    .soundtoggle{border:1px solid var(--line);border-radius:100px;padding:11px 15px;background:transparent;display:flex;gap:8px;align-items:center;font-size:11px;white-space:nowrap}
    .sounddot{width:7px;height:7px;background:#b2b1a9;border-radius:50%;transition:background .2s,box-shadow .2s}
    .soundtoggle.on .sounddot{background:var(--olive);box-shadow:0 0 0 4px #707b6721}
    .hero{display:grid;grid-template-columns:1fr 1.05fr;gap:46px;padding:77px 0 66px;min-height:470px;align-items:center}
    .eyebrow{color:#90774d;text-transform:uppercase;letter-spacing:.19em;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;margin:0 0 27px}
    h1{font-size:clamp(32px,4vw,55px);letter-spacing:-.065em;line-height:1.52;margin:0 0 19px;font-weight:500}
    .hero p.lede{font-size:13px;line-height:2.1;color:#686c66;max-width:470px;margin:0}
    .hero .micro{font:10px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;color:#97958c;letter-spacing:.06em;margin-top:32px}
    .constellation{height:315px;position:relative;overflow:hidden;background:linear-gradient(135deg,#263533,#182526 75%);border-radius:5px;box-shadow:0 18px 38px #17212018}
    .constellation:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 53% 55%,#79907a20,transparent 55%),linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:auto,45px 45px,45px 45px}
    .constellation canvas{position:absolute;inset:0;width:100%;height:100%}
    .constellation .overlay{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;color:#c7cabb;letter-spacing:.12em;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none}
    .sectionline{height:1px;background:var(--line)}
    .controlbar{display:flex;align-items:center;justify-content:space-between;padding:29px 0;gap:20px;flex-wrap:wrap}
    .controlgroup{display:flex;gap:17px;align-items:center;flex-wrap:wrap}
    .controlname{font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:#777b72;white-space:nowrap}
    .chord-list{display:flex;gap:6px;flex-wrap:wrap}
    .chord-button{color:#656a62;border:1px solid transparent;background:transparent;padding:10px 12px;border-radius:4px;min-width:62px;font:13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;transition:.2s}
    .chord-button:hover{background:#e3ded4}
    .chord-button.chosen{border-color:#b4b8a8;background:#e2e7dc;color:#334537}
    .mode-list{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#e7e3d9}
    .mode-button{border:0;border-radius:999px;background:transparent;padding:9px 16px;color:#757a72;font-size:12px;transition:.2s}
    .mode-button.chosen{background:#4d5d50;color:#fffdf3;box-shadow:0 2px 8px #3e4a3830}
    [hidden]{display:none!important}
    .world-switch{display:flex;align-items:center;gap:17px;flex-wrap:wrap;margin:6px 0 18px}
    .world-switch .world-hint{margin:0;font-size:11px;color:#7d8278;line-height:1.8;flex:1;min-width:210px}
    .world-switch .world-btn{padding:10px 16px;font-size:12px}
    .world-switch .world-btn[disabled],.world-switch .world-auto-btn[disabled]{opacity:.45;cursor:not-allowed}
    .world-switch .world-btn.live-world:not(.chosen){background:#d6e0d4;color:#36483a;box-shadow:inset 0 0 0 1px #aab9a4}
    .world-remaining{font:10px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;letter-spacing:.03em;color:#798371}
    .harmonic-panel{border:1px solid #c6cec0;background:#e4e8dd;border-radius:5px;padding:25px 30px 19px;margin:1px 0 30px;box-shadow:0 9px 22px #333b2810}
    .harmonic-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
    .harmonic-kicker{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;color:#667967}
    .progression-badges{display:flex;gap:7px;align-items:center}
    .progression-badges span{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;padding:7px 11px;border:1px solid #b9c2b2;border-radius:30px;color:#697769}
    .progression-badges span+span::before{content:''}
    .progression-middle{display:flex;align-items:flex-end;gap:26px;margin:23px 0 17px}
    .harmony-block{min-width:0}
    .harmony-block.current{flex:1}
    .harmony-block.next{flex:1}
    .harmony-small{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:#758074;display:block;margin-bottom:9px}
    .harmony-note{font:clamp(30px,4vw,52px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.07em;font-weight:300;color:#30483b;display:block}
    .harmony-block.next .harmony-note{font-size:clamp(22px,2.9vw,35px);color:#82917f}
    .harmony-arrow{font:25px Georgia,serif;color:#97a292;padding-bottom:5px}
    .harmony-timer{margin-left:auto;text-align:right;white-space:nowrap;color:#647461;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;padding-bottom:5px}
    .harmony-track{height:3px;background:#c5cfc1;overflow:hidden;border-radius:2px}
    .harmony-fill{width:100%;height:100%;background:#6c846c;transform:scaleX(0);transform-origin:left;transition:transform .12s linear}
    .harmony-explain{margin:13px 0 0;color:#687769;font-size:11px;line-height:1.8}
    .manual-panel{padding:8px 0 27px}
    .manual-panel .chord-list{margin-top:7px}
    .manual-panel .chord-button.chosen{background:#d4dfd0}
    .instrument .pitch{transition:color .35s}
    .instrument.retuned .pitch{color:#a27b42}
    .lengthcontrol{display:flex;align-items:center;gap:12px}
    select{background:transparent;border:1px solid var(--line);padding:10px 31px 10px 12px;border-radius:3px;color:#575d56;max-width:175px;font-size:12px}
    .density-status{display:flex;align-items:baseline;gap:12px;color:#748076;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;flex-wrap:wrap}
    .density-status strong{font-size:12px;font-weight:600;color:#405a48}
    .sectionheader{display:flex;align-items:end;justify-content:space-between;margin:28px 0 27px;gap:12px}
    h2{font-size:18px;letter-spacing:-.045em;font-weight:500;margin:0 0 7px}
    .subheading{font-size:12px;color:#85887f;line-height:1.9;margin:0}
    .stream-counter{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
    .countnum{font:32px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:300;font-variant-numeric:tabular-nums}
    .countlabel{font-size:10px;color:#85887f}
    .instruments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:12px 0 42px}
    .instrument{position:relative;border:1px solid #d5cfc2;background:#e9e4da;border-radius:4px;padding:20px;min-width:0;box-shadow:0 4px 0 #d5cfc4,0 8px 22px #473f3510;transition:transform .2s,background .2s,border-color .2s}
    .instrument:nth-child(4n+2){transform:translateY(14px)}
    .instrument:nth-child(4n+3){transform:translateY(-5px)}
    .instrument:nth-child(4n+4){transform:translateY(7px)}
    .instrument.active{background:#e9e9df;border-color:#b3bbab}
    .instrument-head{display:flex;justify-content:space-between;align-items:center;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:#7c8077;margin-bottom:17px}
    .instrument-head .status-led{height:6px;width:6px;border-radius:50%;background:#b6b8ae;transition:.25s}
    .instrument.active .status-led{background:#8ca17e;box-shadow:0 0 0 4px #8ca17e30}
    .keyframe{padding:7px;background:#383b36;border:1px solid #2e302c;border-radius:5px 5px 7px 7px;box-shadow:inset 0 2px 4px #15171570,0 6px 9px #312e2620}
    .key{width:100%;height:137px;display:block;position:relative;overflow:hidden;border:1px solid #c9c4ba;border-bottom:7px solid #bfb9ae;border-radius:2px 2px 5px 5px;background:linear-gradient(92deg,#e5e3dc 0%,#fffdf8 20%,#f9f7f0 82%,#ddd8cb 100%);box-shadow:inset 0 2px 1px #fff,0 3px 2px #171c17a0;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .08s,border-color .08s,background .2s}
    .key:active,.key.just-played{transform:translateY(4px);border-bottom-width:3px;background:linear-gradient(90deg,#e2e3d9,#eceee2 25%,#eeefe3 80%,#d2d4c7)}
    .key::after{content:"";position:absolute;left:17%;right:17%;top:15px;height:1px;background:#d8d4c9}
    .key-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}
    .key-number{font:29px/1 Georgia,'Times New Roman',serif;color:#88887e;font-style:italic}
    .key-note{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:#9a9b8e}
    .instrument-tail{display:flex;align-items:baseline;justify-content:space-between;padding:18px 0 1px;min-height:40px}
    .pitch{font:19px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.035em;color:#454a41}
    .voice-label{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#9b9d94;white-space:nowrap}
    .instrument.active .voice-label{color:#607761}
    .bottom{margin-top:48px;border-top:1px solid var(--line);padding:23px 0 40px;display:flex;gap:24px;align-items:center;justify-content:space-between}
    .bottomnote{font-size:11px;color:#888a82;line-height:1.9;margin:0;max-width:700px}
    .clear{color:#676d62;border:1px solid #bbbeb1;background:transparent;border-radius:40px;padding:13px 19px;font-size:12px;white-space:nowrap;transition:.2s}
    .clear:hover{background:#dedfd6}
    .statusline{margin:13px 0 0;font:11px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8a8c83;min-height:20px}
    .footer{border-top:1px solid var(--line);padding:24px 0 38px;color:#999a91;font:9px/2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;display:flex;justify-content:space-between;gap:12px}
    @media(max-width:1090px){.shell{padding:0 32px}.hero{gap:25px}.instruments{gap:17px}.instrument{padding:13px}.key{height:129px}}
    @media(max-width:760px){.shell{padding:0 20px}.topbar{height:68px}.edition{display:none}.hero{grid-template-columns:1fr;gap:28px;padding:52px 0 30px;min-height:unset}.hero h1{font-size:clamp(32px,8vw,48px)}.constellation{height:245px}.controlbar{align-items:stretch}.controlgroup{gap:9px}.harmonic-panel{padding:20px 18px 16px;margin-bottom:20px}.progression-middle{gap:14px}.harmony-timer{font-size:10px}.progression-badges span{padding:6px 8px}.chord-list{width:100%}.chord-button{min-width:0;padding:10px 13px}.lengthcontrol{margin-top:3px}.sectionheader{margin:26px 0 17px}.instruments{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding-top:0}.instrument:nth-child(n){transform:none}.instrument:nth-child(even){transform:translateY(8px)}.key{height:128px}.instrument{padding:13px}.bottom{margin-top:26px;align-items:start;flex-direction:column}.footer{flex-direction:column}}
    @media(max-width:370px){.instrument{padding:9px}.key{height:112px}.instrument-head{font-size:8px}.pitch{font-size:16px}.voice-label{font-size:9px}.chord-button{padding:9px 10px}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

    /* v1.0.2: the visual itself is the instrument; engine configuration stays hidden. */
    .engine-hidden{display:none!important}
    .point-targets{position:absolute;inset:0;z-index:2;pointer-events:none}
    .point-target{position:absolute;transform:translate(-50%,-50%);width:56px;height:56px;border:0;padding:0;margin:0;background:transparent;border-radius:50%;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
    .point-target:focus-visible{outline:1px solid rgba(236,226,181,.94);outline-offset:1px;background:rgba(205,212,182,.08)}
    .point-target.pressed{background:radial-gradient(circle,rgba(235,218,169,.12),transparent 58%)}
    .hero{padding-bottom:65px}
    .hero p.lede{max-width:490px;line-height:2.25}
    .footer .audio-credit{font-size:9px;letter-spacing:.02em;line-height:1.75}
    .footer .audio-credit a{color:inherit;text-underline-offset:2px}
    @media(max-width:760px){.point-target{width:48px;height:48px}.hero{padding-bottom:52px}.constellation{height:275px}.footer{gap:10px}}

/* v1.0.2 — immersive exhibition layout. Hidden engine DOM remains unchanged. */
html,body{width:100%;height:100%;overflow:hidden}
/* Outside the artwork, including iOS PWA bottom underfill, use a neutral near-black. */
html,body{background:#121212}
.artroom{width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
.gallery-space{position:relative;width:100%;height:100%;min-height:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;
    background:linear-gradient(138deg,#243633 0%,#1b2a29 53%,#142121 100%)}
.gallery-space:before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at 52% 40%,#82987d1a,transparent 62%),
    linear-gradient(#f4f4e804 1px,transparent 1px),linear-gradient(90deg,#f4f4e804 1px,transparent 1px);
    background-size:auto,5.6rem 5.6rem,5.6rem 5.6rem}
.gallery-space canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gallery-space .point-targets{z-index:3}
.gallery-sound{position:absolute;right:max(28px,env(safe-area-inset-right) + 22px);top:max(26px,env(safe-area-inset-top) + 16px);z-index:5;
    color:#e8e9df;border-color:#b1c1af45;background:#12221dc9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:11px 16px;font-size:11px}
.gallery-sound .sounddot{background:#9b9d90}.gallery-sound.on .sounddot{background:#b7d5ab;box-shadow:0 0 0 4px #acdab025}
.gallery-sound:focus-visible,.credit-trigger:focus-visible{outline-color:#d9c8a2}
.museum-plaque{position:absolute;z-index:4;left:max(34px,env(safe-area-inset-left) + 20px);bottom:max(65px,env(safe-area-inset-bottom) + 52px);
    width:min(392px,calc(100% - 68px));padding:22px 25px 24px;max-height:min(70vh,600px);overflow:auto;
    background:#ece9e1;color:#2c302d;border:1px solid #c6c3b9;border-radius:1px;
    box-shadow:0 2px 0 #1b292535,0 12px 32px #101e1a45}
.museum-kicker{font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;color:#8d8b80;margin:0 0 11px}
.museum-plaque h1{font:600 19px/1.4 -apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;letter-spacing:.055em;margin:0 0 5px;color:#2b302d}
.museum-byline{font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#777b70;letter-spacing:.045em}
.museum-rule{height:1px;background:#ccc9bf;margin:18px 0 16px}
.museum-description{font-size:11.5px;line-height:1.83;letter-spacing:.012em;color:#414640}
.museum-description p{margin:0 0 9px}.museum-description p:last-child{margin-bottom:0}
.exhibition-meta{position:absolute;z-index:4;right:max(28px,env(safe-area-inset-right) + 18px);
    bottom:max(26px,env(safe-area-inset-bottom) + 15px);display:flex;gap:17px;align-items:center;
    font:9px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.045em;color:#bbc3b175}
.credit-trigger{color:inherit;font:inherit;letter-spacing:inherit;background:transparent;border:0;padding:4px;text-decoration:underline;text-underline-offset:3px}
.credit-trigger:hover{color:#e7e7d5}
.credits-dialog{border:1px solid #c4bfb4;background:#ece9e1;color:#2c302d;max-width:min(420px,calc(100vw - 42px));width:100%;padding:28px 30px;
    box-shadow:0 25px 90px #0007;font-size:12px;line-height:1.9}
.credits-dialog::backdrop{background:#071411a8;backdrop-filter:blur(5px)}
.credits-dialog h2{font-size:16px;letter-spacing:.06em}.credits-dialog a{color:#4e675e}
.credits-dialog .dialog-close{float:right;border:0;background:transparent;font-size:23px;color:#616a61;line-height:1;padding:0 2px}
@media(max-width:760px){
 .gallery-space{border-radius:0;height:100%}
 .gallery-space:before{background-size:auto,70px 70px,70px 70px}
 .gallery-sound{top:max(15px,env(safe-area-inset-top) + 10px);right:max(16px,env(safe-area-inset-right) + 10px);padding:10px 13px;font-size:10px}
 .museum-plaque{left:max(18px,env(safe-area-inset-left) + 12px);right:max(18px,env(safe-area-inset-right) + 12px);width:auto;
     bottom:max(54px,env(safe-area-inset-bottom) + 42px);padding:16px 19px 17px;max-height:min(48dvh,375px)}
 .museum-kicker{font-size:8px;margin-bottom:7px}
 .museum-plaque h1{font-size:16px;margin-bottom:4px}
 .museum-rule{margin:10px 0 10px}
 .museum-description{font-size:10.6px;line-height:1.66}
 .museum-description p{margin-bottom:6px}
 .exhibition-meta{bottom:max(15px,env(safe-area-inset-bottom) + 5px);left:18px;right:18px;justify-content:space-between;font-size:8px}
 .point-target{width:50px;height:50px}
}
@media(max-width:760px) and (max-height:650px){
 .museum-plaque{max-height:46dvh;padding:12px 15px}.museum-description{font-size:10px;line-height:1.55}
 .museum-description p{margin-bottom:4px}.museum-rule{margin:8px 0}
}


/* v1.0.2: less text, action-based audio labels, quieter gallery placard on mobile */
.exhibition-meta{gap:19px;white-space:nowrap}
.meta-actions{display:flex;align-items:center;gap:18px}
@media(max-width:760px){
  .museum-plaque{
    left:max(16px,env(safe-area-inset-left) + 11px);
    right:auto;
    width:min(84vw,344px);
    bottom:max(63px,env(safe-area-inset-bottom) + 48px);
    padding:13px 15px 14px;
    max-height:min(43dvh,350px);
    border-color:#bdb9ae;
  }
  .museum-plaque h1{font-size:14px;line-height:1.35;letter-spacing:.05em;margin-bottom:3px}
  .museum-byline{font-size:9.7px;line-height:1.45}
  .museum-rule{margin:9px 0 9px}
  .museum-description{font-size:10.5px;line-height:1.62;letter-spacing:0}
  .museum-description p{margin-bottom:4px}
  .exhibition-meta{left:16px;right:16px;gap:8px;justify-content:space-between;font-size:8px;letter-spacing:.005em;white-space:normal}
  .meta-actions{gap:12px;white-space:nowrap}
  .credit-trigger{padding:4px 0}
}
@media(max-width:390px){
  .museum-plaque{width:min(87vw,330px);padding:12px 14px 13px}
  .museum-description{font-size:10.2px;line-height:1.58}
  .exhibition-meta{font-size:7.3px;gap:5px}
  .meta-actions{gap:7px}
}
@media(max-width:760px) and (max-height:650px){
  .museum-plaque{max-height:42dvh;padding:10px 13px 11px}
  .museum-description{font-size:10px;line-height:1.5}
  .museum-rule{margin:6px 0 7px}
}


/* v1.0.2 — one viewport, shared pixel coordinates for drawing and hit testing */
.gallery-space{
 --hue-ambient:225;
 background:linear-gradient(138deg,
  oklch(.255 .029 var(--hue-ambient)) 0%,
  oklch(.203 .029 var(--hue-ambient)) 53%,
  oklch(.157 .029 var(--hue-ambient)) 100%);
}
.gallery-space:before{
 background:radial-gradient(ellipse at 52% 40%,oklch(.63 .035 var(--hue-ambient) / .10),transparent 62%),
 linear-gradient(#f4f4e803 1px,transparent 1px),
 linear-gradient(90deg,#f4f4e803 1px,transparent 1px);
 background-size:auto,2.8rem 2.8rem,2.8rem 2.8rem;
}
@media(max-width:760px){.gallery-space:before{background-size:auto,2.25rem 2.25rem,2.25rem 2.25rem}}
.point-target{width:64px;height:64px;touch-action:none}
.point-targets{width:100%;height:100%;touch-action:manipulation}
@media(max-width:760px){.point-target{width:58px;height:58px}}
/* v1.0.2: the controls share the ambient color temperature. */
.gallery-sound{
 max-width:min(88vw,340px);text-align:center;justify-content:center;
 background:oklch(.213 .029 var(--hue-ambient) / .84);
 border-color:oklch(.57 .035 var(--hue-ambient) / .45);
 color:#e8e9df;
}
.gallery-sound .sounddot{background:oklch(.71 .022 var(--hue-ambient))}
.gallery-sound.on .sounddot{
 background:oklch(.79 .058 var(--hue-ambient));
 box-shadow:0 0 0 4px oklch(.70 .06 var(--hue-ambient) / .17);
}
.exhibition-meta{left:max(24px,env(safe-area-inset-left) + 12px);right:auto;max-width:calc(100% - 48px);flex-wrap:wrap}
.density-notes{position:absolute;right:max(26px,env(safe-area-inset-right) + 15px);bottom:max(55px,env(safe-area-inset-bottom) + 45px);z-index:4;pointer-events:none;font:10px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;color:#bbc5b493;font-variant-numeric:tabular-nums}
@media(max-width:760px){
 .exhibition-meta{left:max(16px,env(safe-area-inset-left) + 8px);right:auto;bottom:max(14px,env(safe-area-inset-bottom) + 7px);font-size:7.8px}
 .density-notes{bottom:max(54px,env(safe-area-inset-bottom) + 43px);right:max(16px,env(safe-area-inset-right) + 8px);font-size:9px}
}
@media(orientation:landscape) and (max-height:570px){
 .gallery-sound{top:max(10px,env(safe-area-inset-top) + 4px);right:max(14px,env(safe-area-inset-right) + 8px);padding:8px 12px;font-size:9px}
 .museum-plaque{left:max(14px,env(safe-area-inset-left) + 8px);right:auto;top:max(12px,env(safe-area-inset-top) + 6px);bottom:auto;
  width:min(32vw,228px);padding:11px 12px 10px;max-height:unset;overflow:visible}
 .museum-plaque h1{font-size:clamp(10px,1.25vw,14px);line-height:1.35;letter-spacing:.03em;margin-bottom:5px}
 .museum-byline{font-size:9px}
 .museum-rule,.museum-description{display:none}
 .plaque-more{display:inline-block!important}
 .density-notes{right:max(18px,env(safe-area-inset-right) + 10px);bottom:max(15px,env(safe-area-inset-bottom) + 8px)}
 .exhibition-meta{bottom:max(13px,env(safe-area-inset-bottom) + 7px);left:max(14px,env(safe-area-inset-left) + 9px);right:auto;font-size:7.5px}
 .point-target{width:56px;height:56px}
}
.plaque-more{display:none;margin-top:8px;color:#526258;border:0;padding:0;background:transparent;text-decoration:underline;text-underline-offset:3px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}
.art-description-dialog{max-width:min(500px,calc(100vw - 42px));background:#ece9e1;color:#2c302d;padding:24px 28px;border:1px solid #c4bfb4;box-shadow:0 25px 80px #0007;font:12px/1.9 -apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif}
.art-description-dialog::backdrop{background:#071411b5}
.art-description-dialog h2{font-size:16px;letter-spacing:.04em}
.art-description-dialog p{margin:9px 0}
.app-dialog{max-width:min(420px,calc(100vw - 40px))}
.app-dialog h3{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;margin:14px 0 5px}
.app-dialog .app-guide{color:#454c45;margin:4px 0 0}
.app-dialog .app-guide p{margin:4px 0}


/* v1.0.2 — iOS notch/Dynamic Island safe touch geometry. */
@media (display-mode:standalone) and (orientation:portrait) and (pointer:coarse){
  .gallery-sound{top:max(82px,calc(env(safe-area-inset-top) + 18px))}
}
@media (orientation:landscape) and (max-height:570px) and (pointer:coarse){
  .gallery-sound{right:max(70px,calc(env(safe-area-inset-right) + 12px));top:max(15px,calc(env(safe-area-inset-top) + 12px))}
  .museum-plaque{left:max(70px,calc(env(safe-area-inset-left) + 12px))}
  .exhibition-meta{left:max(70px,calc(env(safe-area-inset-left) + 12px))}
  .density-notes{right:max(70px,calc(env(safe-area-inset-right) + 12px))}
}

  
/* v1.1.0: discreet language selector with responsive footer and gallery-style dialog. */
.language-trigger{font-weight:600;text-decoration:none;letter-spacing:.07em;color:#d2d8ce}
.language-dialog{max-width:min(350px,calc(100vw - 40px))}
.language-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0 3px}
.language-list a{display:block;padding:11px 12px;border:1px solid #ccc9bf;text-decoration:none;color:#39433d;border-radius:2px;font-size:12px;line-height:1.35}
.language-list a:hover,.language-list a:focus-visible{background:#dfe5db;border-color:#a5b1a4}
.language-list a[aria-current="page"]{border-color:#75877b;background:#e0e5dc;font-weight:650}
.language-hint{position:absolute;right:max(14px,env(safe-area-inset-right) + 8px);bottom:max(50px,env(safe-area-inset-bottom) + 38px);z-index:6;
  max-width:min(300px,calc(100vw - 32px));padding:11px 12px;background:#ece9e1;color:#343b35;border:1px solid #bbbfb1;
  box-shadow:0 8px 24px #07141155;font-size:11px;line-height:1.5;display:flex;align-items:center;gap:10px}
.language-hint a{color:#3e6257;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.language-hint button{border:0;background:transparent;color:#626a61;font-size:17px;padding:2px}
@media(max-width:410px){
 .exhibition-meta{flex-wrap:wrap;row-gap:0}
 .meta-actions{gap:10px;margin-left:auto}
 .language-dialog .language-list{gap:6px}
}