*{box-sizing:border-box}
:root{
  --bg:#e9e4da;
  --ink:#27231f;
  --paper:#f5f1e9;
  --soft:#7a7268;
  --mat-bg:transparent;
  --mat-pad:0px;
  --frame-source:none;
  --s-top:100;
  --s-right:100;
  --s-bottom:100;
  --s-left:100;
  --b-top:56px;
  --b-right:56px;
  --b-bottom:56px;
  --b-left:56px;
}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,"Yu Mincho",serif}
body.exhibiting{overflow:hidden;overscroll-behavior:none}
body.museum-dark #home{color:#f2ede6;text-shadow:0 1px 3px rgba(0,0,0,.55)}
body.museum-dark #home small{color:#e6ddd1}
body.museum-dark #museum nav>span{color:#f2ede3;text-shadow:0 1px 2px rgba(0,0,0,.55)}
button{font:inherit;color:inherit}
img{max-width:100%}
header{position:fixed;z-index:80;left:0;right:0;top:0;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
header button{pointer-events:auto}
#home{border:0;background:transparent;letter-spacing:.42em;text-align:left;font-size:22px}
#home small{display:block;font:6px Arial;margin-top:6px;letter-spacing:.28em}
.head-tools button{font:8px Arial;border:1px solid rgba(82,74,63,.28);background:rgba(247,243,235,.72);backdrop-filter:blur(8px);padding:8px 10px;letter-spacing:.18em}
#intro{min-height:100svh;padding:100px 8vw 45px;display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;align-items:center}
article h1{font-weight:400;font-size:clamp(35px,5vw,68px);line-height:1.3;margin:.15em 0 .25em}
article p{line-height:1.95;color:#68625a}
article>small{font:9px Arial;letter-spacing:.25em}
#drop{width:175px;height:175px;border:1px solid #777;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:8px;background:#f8f5ef;cursor:pointer;margin-top:30px;transition:.3s}
#drop.drag,#drop:hover{transform:scale(1.04);background:#fff}
#drop input{display:none}
#drop b{font:30px Arial;font-weight:200}
#drop span{font:10px Arial;letter-spacing:.12em}
#drop small,.privacy{font:8px Arial!important;color:#888}
.sample{width:min(44vw,650px);justify-self:end}
.sample-frame{width:100%;aspect-ratio:4/3;display:grid;place-items:center;border:26px solid transparent;border-image-source:url("assets/frames/frame_10.webp");border-image-slice:159 162 161 163;border-image-repeat:round;box-shadow:0 28px 70px rgba(0,0,0,.16);background:transparent}
.sample-art{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#b7bbb7,#ddd6ca,#9c988e);color:#fff9;font:10px Arial;letter-spacing:.12em}
.sample small{display:block;margin-top:10px}

#prep{position:fixed;inset:0;z-index:70;background:radial-gradient(circle at 50% 38%,#252525,#090909 58%);display:none;place-items:center;color:#fff;text-align:center}
#prep.on{display:grid}
.prep-card{width:min(82vw,540px)}
#prep small{font:9px Arial;letter-spacing:.5em;color:#d8c39e}
#prep p{font-size:clamp(22px,4vw,42px);margin:.45em 0 .65em}
.prep-bar{height:2px;background:#ffffff24;overflow:hidden}
.prep-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9b7e45,#e4cc8a,#9b7e45);transition:width .6s ease}

#museum{position:fixed;inset:0;visibility:hidden;opacity:0;transition:opacity .55s;background:#141414;overflow:hidden}
#museum.on{visibility:visible;opacity:1}
#museum:not(.on){pointer-events:none}
#openCurtain,#frameFlash{position:absolute;inset:0;pointer-events:none;background:#050505}
#openCurtain{z-index:58;opacity:1}
#frameFlash{z-index:57;opacity:0;transition:opacity .18s ease}
#museum.on #openCurtain{animation:exhibitionCurtain 1.45s .02s cubic-bezier(.2,.72,.2,1) both}
@keyframes exhibitionCurtain{0%{opacity:1}24%{opacity:.94}58%{opacity:.54}100%{opacity:0}}
#museum.frame-changing #frameFlash{opacity:.72}
#museum.frame-changing #frameWrap{opacity:.18;filter:brightness(.45)}
#frameWrap{transition:opacity .3s ease,filter .35s ease}
#museum.light-settled #wall::before{filter:brightness(1.06)}
#wall::before{transition:filter .8s ease}
#room{position:absolute;inset:0;transform:scale(1.035);perspective:1200px;transform-style:preserve-3d;background:#151311;overflow:hidden}
#museum.on #room{animation:roomEnter 2.15s cubic-bezier(.16,.78,.24,1) both}
@keyframes roomEnter{0%{transform:scale(1.035)}55%{transform:scale(1.012)}100%{transform:scale(1)}}
.room-bg{position:absolute;inset:-1.5%;z-index:0;background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:0;transition:opacity .9s ease,filter .8s ease;transform:scale(1.018)}
.room-bg.active{opacity:1}
#museum.room-changing .room-bg{transition-duration:.85s}
.air-grain{position:absolute;inset:-8%;z-index:8;pointer-events:none;opacity:.045;background:repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),repeating-linear-gradient(104deg,rgba(255,255,255,.04) 0 1px,transparent 1px 7px);filter:blur(.7px);mix-blend-mode:soft-light;animation:airDrift 13s ease-in-out infinite alternate}
@keyframes airDrift{0%{transform:translate3d(-1.4%,-.6%,0) scale(1.01);opacity:.032}50%{transform:translate3d(.7%,.8%,0) scale(1.02);opacity:.052}100%{transform:translate3d(1.3%,-.3%,0) scale(1.01);opacity:.036}}

/* Three-layer museum spotlight reveal: broad beam, soft halo, floor reflection. */
#room::before{content:"";position:absolute;z-index:6;left:50%;top:-8%;width:min(92vw,980px);height:92%;transform:translateX(-50%) translateY(-5%) scale(.78);transform-origin:50% 0%;clip-path:polygon(34% 0,66% 0,88% 100%,12% 100%);background:linear-gradient(to bottom,rgba(255,249,230,.52) 0%,rgba(255,245,216,.24) 34%,rgba(255,242,211,.10) 68%,rgba(255,242,211,0) 100%);filter:blur(34px);opacity:0;pointer-events:none;mix-blend-mode:screen}
#room::after{content:"";position:absolute;z-index:7;left:50%;top:8%;width:min(100vw,1060px);height:72%;transform:translateX(-50%) scale(.82);background:radial-gradient(ellipse at 50% 32%,rgba(255,249,228,.34) 0%,rgba(255,246,222,.17) 30%,rgba(255,246,222,.06) 52%,transparent 73%);filter:blur(24px);opacity:0;pointer-events:none;mix-blend-mode:screen}
#museum.on #room::before{animation:spotBeamReveal 1.65s .06s cubic-bezier(.16,.78,.24,1) both}
#museum.on #room::after{animation:spotHaloReveal 1.8s .14s cubic-bezier(.16,.78,.24,1) both}
@keyframes spotBeamReveal{0%{opacity:0;filter:blur(42px);transform:translateX(-50%) translateY(-7%) scale(.72)}48%{opacity:.70;filter:blur(24px);transform:translateX(-50%) translateY(0) scale(1.08)}100%{opacity:.48;filter:blur(30px);transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes spotHaloReveal{0%{opacity:0;filter:blur(38px);transform:translateX(-50%) scale(.78)}58%{opacity:.62;filter:blur(19px);transform:translateX(-50%) scale(1.06)}100%{opacity:.38;filter:blur(25px);transform:translateX(-50%) scale(1)}}
#wall{z-index:10;position:absolute;inset:0 0 22dvh 0;display:grid;place-items:start center;background-size:cover;background-position:center center;overflow:visible;transform:rotateX(calc(var(--py,0)*-.18deg)) rotateY(calc(var(--px,0)*.22deg));transform-origin:50% 55%;transition:background-image .4s ease;padding-top:clamp(72px,10dvh,110px)}
#wall::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 19%,rgba(255,244,219,var(--spot-strength,.38)),transparent 22%),radial-gradient(ellipse at 50% 37%,rgba(255,248,232,.14),transparent 42%),linear-gradient(90deg,rgba(0,0,0,.26),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.26)),linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.08) 28%,rgba(0,0,0,.33));pointer-events:none}
#wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(to top,rgba(0,0,0,.28),transparent 70%);pointer-events:none}
.floor{z-index:12;position:absolute;left:0;right:0;bottom:0;height:22dvh;background:linear-gradient(to top,rgba(26,18,15,.42),rgba(26,18,15,.18) 38%,rgba(255,255,255,.06));filter:saturate(.95);backdrop-filter:blur(1.5px)}
.floor::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 35%),linear-gradient(90deg,transparent 8%,rgba(255,255,255,.10) 50%,transparent 92%);filter:blur(14px);opacity:.55}
 .floor::after{content:"";position:absolute;left:50%;top:-22%;width:min(72vw,760px);height:92%;transform:translateX(-50%) scale(.72);background:radial-gradient(ellipse at 50% 10%,rgba(255,246,220,.34),rgba(255,243,215,.12) 42%,transparent 72%);filter:blur(20px);opacity:0;pointer-events:none}
#museum.on .floor::after{animation:floorGlowReveal 1.8s .28s ease-out both}
@keyframes floorGlowReveal{0%{opacity:0;transform:translateX(-50%) scale(.68)}60%{opacity:.58;transform:translateX(-50%) scale(1.05)}100%{opacity:.30;transform:translateX(-50%) scale(1)}}

.work{position:relative;z-index:25;display:grid;justify-items:center;gap:8px;max-width:calc(100vw - 18px);opacity:0;filter:blur(12px);transform:translateY(12px) scale(.95);transition:1.25s .38s cubic-bezier(.2,.85,.2,1)}
#museum.on .work{opacity:1;filter:none;transform:translateY(0) scale(1)}
#frameWrap{position:relative;display:grid;place-items:center;transform:translate3d(calc(var(--px,0)*3px),calc(var(--py,0)*1px),20px)}
#frameWrap::before{content:"";position:absolute;left:50%;top:-5%;width:148%;height:142%;transform:translateX(-50%) scale(.86);background:radial-gradient(ellipse at 50% 18%,rgba(255,250,232,var(--frame-glow,.30)),rgba(255,244,220,.13) 30%,rgba(255,244,220,.04) 54%,transparent 72%);opacity:0;filter:blur(22px);pointer-events:none}
#museum.on #frameWrap::before{animation:frameGlowReveal 1.55s .28s cubic-bezier(.16,.78,.24,1) both}
@keyframes frameGlowReveal{0%{opacity:0;filter:blur(30px);transform:translateX(-50%) scale(.78)}55%{opacity:1;filter:blur(14px);transform:translateX(-50%) scale(1.07)}100%{opacity:.82;filter:blur(19px);transform:translateX(-50%) scale(1)}}
.frame{position:relative;display:inline-block;box-sizing:content-box;width:auto;height:auto;line-height:0;border-style:solid;border-color:transparent;border-image-source:var(--frame-source);border-image-slice:var(--s-top) var(--s-right) var(--s-bottom) var(--s-left);border-image-repeat:stretch;border-width:var(--b-top) var(--b-right) var(--b-bottom) var(--b-left);box-shadow:0 16px 30px rgba(0,0,0,.10),0 38px 80px rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.08);background:transparent;transition:border-width .24s ease,box-shadow .3s ease}

#museum.on .frame{animation:frameMaterialize 1.65s .96s cubic-bezier(.16,.78,.24,1) both}
@keyframes frameMaterialize{0%{opacity:0;filter:brightness(.45) saturate(.65);transform:scale(.985)}55%{opacity:1;filter:brightness(1.16) saturate(1.02);transform:scale(1.006)}100%{opacity:1;filter:brightness(1) saturate(1);transform:scale(1)}}
.frame::after{content:"";position:absolute;inset:calc(-1 * var(--b-top)) calc(-1 * var(--b-right)) calc(-1 * var(--b-bottom)) calc(-1 * var(--b-left));padding:var(--b-top) var(--b-right) var(--b-bottom) var(--b-left);pointer-events:none;background:linear-gradient(112deg,transparent 22%,rgba(255,250,225,.02) 37%,rgba(255,250,228,.32) 49%,rgba(255,250,228,.05) 60%,transparent 76%);background-size:210% 100%;background-position:var(--shine-pos,25%) 0;mix-blend-mode:screen;opacity:.34;transition:background-position .18s linear;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#museum.special-exhibit #frameWrap::before{filter:blur(16px) brightness(1.22);opacity:1}
#museum.special-exhibit .frame{filter:saturate(1.04) brightness(1.04)}
#matBox{width:var(--frame-inner-width,320px);height:auto;padding:var(--mat-pad);background:var(--mat-bg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);overflow:hidden;line-height:0}
#matBox.mat-none{box-shadow:none}
#art{display:block;width:100%;height:auto;max-width:none;object-fit:unset;background:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.work aside{width:min(78vw,var(--frame-inner-width,320px));max-width:420px;align-self:start;font-family:Arial;transform:translateZ(10px);color:#231f1a;text-shadow:none;background:rgba(248,244,236,.78);backdrop-filter:blur(8px);padding:14px 16px 12px;border:1px solid rgba(57,47,34,.16);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.work aside b{font:clamp(14px,2.2vw,17px) Georgia,serif;font-weight:400;display:block}
.work aside small{font-size:9px;line-height:1.8;letter-spacing:.04em}
.work aside hr{width:34px;margin:10px 0;border:0;border-top:1px solid rgba(28,24,19,.5)}
.work aside em{display:block;font:8px Arial;color:#4a433b;margin-top:8px;letter-spacing:.14em}
#museum[data-theme="dark"] .work aside{color:#eee7dc;background:rgba(28,24,22,.78);border-color:rgba(245,236,222,.16);text-shadow:0 1px 3px rgba(0,0,0,.45)}
#museum[data-theme="dark"] .work aside hr{border-top-color:rgba(238,231,220,.72)}
#museum[data-theme="dark"] .work aside em{color:#d3c8b9}

.side-stack{position:absolute;top:15%;bottom:28%;width:16vw;min-width:110px;z-index:8;pointer-events:none}
#sideLeft{left:4.5vw}
#sideRight{right:4.5vw}
.side-art{position:absolute;display:block;border-radius:1px;box-shadow:0 8px 22px rgba(0,0,0,.12);opacity:.62;filter:saturate(.9);transition:opacity 1.4s ease,filter 1.4s ease}
#museum.on .side-art{animation:sideWorkDim 2.4s 1.15s ease-out both}
@keyframes sideWorkDim{0%{opacity:.62;filter:saturate(.9) brightness(1)}100%{opacity:.34;filter:saturate(.72) brightness(.74)}}
.side-art.left-a{left:12%;top:16%;width:34%}
.side-art.left-b{left:27%;top:57%;width:28%}
.side-art.right-a{right:14%;top:21%;width:32%}
.side-art.right-b{right:28%;top:59%;width:28%}

.crowd-layer{position:absolute;left:0;right:0;pointer-events:none}
.crowd-layer.back{z-index:12;bottom:14.6dvh;opacity:0}
.crowd-layer.mid{z-index:13;bottom:8.3dvh;opacity:0}
.crowd-layer.front{z-index:18;bottom:1.6dvh;opacity:0;transition:1.2s .85s ease}
#museum.on .crowd-layer.front{opacity:1}
.crowd-layer img{position:absolute;bottom:0;transform-origin:50% 100%;filter:saturate(.82) brightness(.92) contrast(.98) drop-shadow(0 10px 18px rgba(0,0,0,.14));opacity:.94;mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0 88%,rgba(0,0,0,.9) 95%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0 88%,rgba(0,0,0,.9) 95%,transparent 100%)}
.crowd-layer.back img{filter:saturate(.68) brightness(.88) contrast(.96) blur(.15px);opacity:.80}
.crowd-layer.mid img{filter:saturate(.76) brightness(.86) contrast(.98) drop-shadow(0 8px 15px rgba(0,0,0,.10));opacity:.88}
.crowd-layer.front img{filter:saturate(.84) brightness(.84) contrast(1) drop-shadow(0 8px 18px rgba(0,0,0,.14));opacity:.96}
.crowd-layer.front img.blur{filter:saturate(.80) brightness(.82) blur(1.0px) drop-shadow(0 8px 16px rgba(0,0,0,.10));opacity:.92}

.crowd-layer.front img{pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* v33 — subtle independent visitor motion. Uses individual transform properties so the existing placement transform stays intact. */
#museum.on .crowd-layer.front img{animation:visitorIdle var(--idle-duration,9.5s) var(--idle-delay,0s) ease-in-out infinite}
@keyframes visitorIdle{
  0%,100%{translate:0 0;rotate:0deg}
  42%{translate:var(--idle-x,1.5px) var(--idle-y,-.5px);rotate:var(--idle-tilt,.18deg)}
  68%{translate:0 -.15px;rotate:0deg}
}
.visitor-speech{position:absolute;z-index:40;max-width:min(220px,68vw);padding:8px 11px;background:rgba(255,253,248,.96);border:1px solid rgba(58,49,39,.24);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.18);color:#29241f;font:12px/1.45 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;letter-spacing:.01em;text-align:left;pointer-events:none;opacity:0;transform:translate(-50%,-100%) translateY(5px) scale(.97);transition:opacity .16s ease,transform .16s ease;white-space:normal}
.visitor-speech::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:inherit;border-right:1px solid rgba(58,49,39,.24);border-bottom:1px solid rgba(58,49,39,.24);transform:translateX(-50%) rotate(45deg)}
.visitor-speech.on{opacity:1;transform:translate(-50%,-100%) translateY(0) scale(1)}
.visitor-speech.auction-bid{background:rgba(28,24,19,.94);border-color:rgba(243,231,212,.24);color:#fbf3e6;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.visitor-speech.auction-bid::after{border-right-color:rgba(243,231,212,.24);border-bottom-color:rgba(243,231,212,.24)}
@media (max-width:520px){.visitor-speech{max-width:min(190px,66vw);padding:7px 10px;font-size:11px;border-radius:9px}}

.detail{position:absolute;pointer-events:none;z-index:9;opacity:.62;filter:saturate(.88)}
.detail.spot{top:13%;left:5%;width:42px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.16))}
.detail.camera{top:15%;right:4%;width:32px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.12))}
.detail.plate-left{left:11.5vw;top:67%;width:56px;opacity:.52}
.detail.plate-right{right:13vw;top:67%;width:48px;opacity:.5}

#museum nav{position:absolute;z-index:45;left:14px;right:14px;bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;font:8px Arial;letter-spacing:.18em;padding:0;background:transparent;backdrop-filter:none;border:0;box-shadow:none}
#museum nav>span{color:#f3ece2;max-width:22vw;text-shadow:0 1px 3px rgba(0,0,0,.45)}
#museum nav>span small{display:block;margin-top:4px;color:#e0d5c6;letter-spacing:.14em;font-size:8px;text-shadow:0 1px 3px rgba(0,0,0,.35)}
nav div{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
nav button{border:1px solid #d7cfc377;background:#f7f3ebdf;padding:10px 12px;min-height:36px;font:9px Arial;letter-spacing:.1em}
button:disabled{opacity:.5;pointer-events:none}

#toast{position:absolute;z-index:80;left:50%;bottom:80px;transform:translateX(-50%);background:#111e;color:white;padding:10px 14px;font:10px Arial;opacity:0;transition:.3s}
#toast.on{opacity:1}

dialog{border:0;width:min(960px,94vw);max-height:min(88dvh,840px);overflow:auto;overscroll-behavior:contain;background:#f2eee6;padding:0;box-shadow:0 30px 100px #0007}
dialog::backdrop{background:#1119;backdrop-filter:blur(5px)}
dialog form{padding:24px}
.dh{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.dh h2{font-weight:400;margin:.2em 0 0}.dh small{font:9px Arial;letter-spacing:.2em}.dh button{border:0;background:none;font-size:26px;line-height:1}
#matbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
#matbar button{border:1px solid #aaa;background:#fff;padding:8px 10px;font:9px Arial;letter-spacing:.12em}
#matbar button.sel{outline:2px solid #222}
#frames{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.fc{border:1px solid #bdb4a8;background:#e9e4da;padding:10px;text-align:left}
.fc .thumb{display:grid;place-items:center;aspect-ratio:1;background:#ddd;margin-bottom:8px;overflow:hidden}
.fc .thumb img{width:100%;height:100%;object-fit:contain;background:transparent;content-visibility:auto}
.fc small{display:block;font:8px Arial;letter-spacing:.08em;line-height:1.35}
.fc.sel{outline:2px solid #222}

#rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rc{border:1px solid #bdb4a8;background:#e9e4da;padding:10px;text-align:left}
.room-thumb{display:grid;place-items:center;aspect-ratio:4/3;background:#ddd;margin-bottom:8px;overflow:hidden}
.room-thumb img{width:100%;height:100%;object-fit:cover}
.rc small{display:block;font:8px Arial;letter-spacing:.08em;line-height:1.35}
.rc.sel{outline:2px solid #222}

@media(max-width:860px){
  #intro{grid-template-columns:1fr;padding:90px 20px 30px;gap:25px}
  .sample{order:-1;width:82vw;justify-self:center}.sample-frame{border-width:20px}
  article h1{font-size:35px}#drop{width:145px;height:145px}
  .work{flex-direction:column;gap:8px}
  .work aside{width:auto;align-self:flex-start;margin-left:5vw;color:#1f1b17}
  .side-stack{width:21vw;min-width:100px;top:15%;bottom:27%}
  .detail.spot{left:6%;width:42px}.detail.camera{right:5%;width:34px}.detail.plate-left{left:4vw;top:70%;width:48px}.detail.plate-right{right:4vw;top:70%;width:42px}
  #museum nav div{max-width:69vw}
  nav button{padding:8px;font-size:8px}
  #frames,#rooms{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  #home{font-size:18px}.head-tools button{font-size:8px;padding:7px 9px}
  #wall{inset:0 0 24dvh 0;padding-top:72px}
  .work{gap:6px;max-width:calc(100vw - 12px);transition-delay:1s}
  .crowd-layer.back{bottom:15.4dvh;opacity:0}
  .crowd-layer.mid{bottom:8.9dvh;opacity:0}
  .crowd-layer.front{bottom:1.2dvh}
  .crowd-layer.front img{max-width:18vw}
  .crowd-layer.mid img{max-width:17vw}
  .crowd-layer.back img{max-width:14vw}
  #museum nav{left:10px;right:10px;padding:0}
}
@media(max-width:390px){
  #home{font-size:15px}#home small{font-size:5px}
  header{padding-left:12px;padding-right:12px}
  #museum nav{left:8px;right:8px;align-items:flex-end}
  #museum nav>span{max-width:24vw;font-size:7px}
  nav div{max-width:74vw!important}
  nav button{font-size:7px;padding:7px 6px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

button:focus-visible,#drop:focus-visible,.fc:focus-visible{outline:2px solid #27231f;outline-offset:3px}
#art{-webkit-user-drag:none;user-select:none}
@media(pointer:coarse){nav button,.head-tools button,#matbar button{min-height:40px}}

@media(max-width:520px) and (max-height:650px){
  #museum.on .work{transform:translateY(20px) scale(1)}
  .work aside small{line-height:1.45}
  .work aside hr{margin:8px 0}
  .work aside em{margin-top:6px}
}

/* ROOM selector */
#rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.rc{border:1px solid #bdb4a8;background:#e9e4da;padding:10px;text-align:left}
.rc .room-thumb{display:block;aspect-ratio:4/3;background:#ddd;margin-bottom:8px;overflow:hidden}
.rc .room-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rc small{display:block;font:8px Arial;letter-spacing:.08em;line-height:1.35}
.rc.sel{outline:2px solid #222}
@media(max-width:520px){#rooms{grid-template-columns:1fr;gap:10px}.rc{display:grid;grid-template-columns:112px 1fr;gap:10px;align-items:center}.rc .room-thumb{margin:0}.rc small{font-size:9px}}

#museum .work aside{display:none !important}
.detail.spot,.detail.camera,.detail.plate-left,.detail.plate-right{display:none !important}

.crowd-layer img{will-change:opacity,filter}
.phone-glow{position:absolute;z-index:3;width:7px;height:10px;border-radius:1.5px;background:rgba(220,235,255,.72);box-shadow:0 0 5px rgba(215,235,255,.48),0 0 12px rgba(210,230,255,.22);opacity:0;transform:translateX(-50%) rotate(-6deg);animation:phoneMoment 9s 4.2s ease-in-out infinite}
@keyframes phoneMoment{0%,77%,100%{opacity:0}81%{opacity:.18}84%{opacity:.62}88%{opacity:.24}92%{opacity:0}}

#museum.frame-changing #room::before,#museum.frame-changing #room::after{opacity:.08!important;transition:opacity .18s ease}
#museum.room-changing #wall{filter:brightness(.93)}
#wall{transition:background-image .4s ease,filter .85s ease}
@media(prefers-reduced-motion:reduce){#openCurtain,.frame,.side-art,.air-grain,.phone-glow{animation:none!important}.room-bg{transition:none!important}}

/* v25: make the artwork itself dominate the mobile exhibition view */
@media(max-width:520px){
  #wall{padding-top:64px}
  .work{max-width:calc(100vw - 4px)}
  #frameWrap{max-width:99vw}
}

.crowd-layer.front img.foreground{z-index:3;filter:saturate(.82) brightness(.82) contrast(1) blur(1.2px) drop-shadow(0 10px 18px rgba(0,0,0,.12));opacity:.90}

/* v31 — stronger, unmistakable museum light reveal. Overrides only reveal lighting. */
#museum.on #openCurtain{animation:exhibitionCurtainV31 2.05s .02s cubic-bezier(.2,.72,.2,1) both}
@keyframes exhibitionCurtainV31{
  0%{opacity:1}
  28%{opacity:1}
  52%{opacity:.86}
  76%{opacity:.34}
  100%{opacity:0}
}

/* Keep the room dark at first, then let the ambient exposure rise. */
#museum.on .room-bg.active{animation:roomBaseLightV31 3.15s .12s cubic-bezier(.16,.78,.24,1) both}
@keyframes roomBaseLightV31{
  0%{filter:brightness(.38) saturate(.72) contrast(1.04)}
  24%{filter:brightness(.44) saturate(.76) contrast(1.04)}
  58%{filter:brightness(.67) saturate(.87) contrast(1.02)}
  100%{filter:brightness(.92) saturate(.96) contrast(1)}
}

/* Clearly visible cone of light from above. */
#room::before{
  top:-13%;
  width:min(88vw,900px);
  height:104%;
  clip-path:polygon(41% 0,59% 0,91% 100%,9% 100%);
  background:linear-gradient(to bottom,
    rgba(255,253,239,.96) 0%,
    rgba(255,250,226,.76) 13%,
    rgba(255,247,217,.46) 40%,
    rgba(255,243,211,.20) 68%,
    rgba(255,243,211,0) 100%);
  filter:blur(24px);
  transform:translateX(-50%) translateY(-11%) scale(.48,.62);
  opacity:0;
  mix-blend-mode:screen;
}
#museum.on #room::before{animation:spotBeamRevealV31 3.05s .18s cubic-bezier(.13,.77,.2,1) both}
@keyframes spotBeamRevealV31{
  0%{opacity:0;filter:blur(48px);transform:translateX(-50%) translateY(-15%) scale(.34,.48)}
  18%{opacity:.16;filter:blur(42px);transform:translateX(-50%) translateY(-11%) scale(.42,.56)}
  43%{opacity:.64;filter:blur(27px);transform:translateX(-50%) translateY(-4%) scale(.76,.82)}
  70%{opacity:.95;filter:blur(17px);transform:translateX(-50%) translateY(0) scale(1.05,1.02)}
  100%{opacity:.72;filter:blur(23px);transform:translateX(-50%) translateY(0) scale(1,1)}
}

/* Large bloom around the artwork, arriving just after the visible beam. */
#room::after{
  top:0;
  width:min(108vw,1160px);
  height:82%;
  background:radial-gradient(ellipse at 50% 28%,
    rgba(255,254,244,.82) 0%,
    rgba(255,251,233,.54) 15%,
    rgba(255,247,222,.28) 36%,
    rgba(255,244,215,.10) 57%,
    transparent 78%);
  filter:blur(30px);
  transform:translateX(-50%) scale(.55);
  opacity:0;
  mix-blend-mode:screen;
}
#museum.on #room::after{animation:spotHaloRevealV31 3.25s .42s cubic-bezier(.13,.77,.2,1) both}
@keyframes spotHaloRevealV31{
  0%{opacity:0;filter:blur(48px);transform:translateX(-50%) scale(.48)}
  28%{opacity:.16;filter:blur(42px);transform:translateX(-50%) scale(.62)}
  64%{opacity:.72;filter:blur(22px);transform:translateX(-50%) scale(1.05)}
  100%{opacity:.50;filter:blur(28px);transform:translateX(-50%) scale(1)}
}

/* The wall itself visibly blooms from dark to lit behind the artwork. */
#wall::before{
  opacity:1;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(255,252,238,calc(var(--spot-strength,.38) * 1.75)) 0%,rgba(255,247,225,.30) 15%,rgba(255,245,220,.08) 34%,transparent 53%),
    radial-gradient(ellipse at 50% 39%,rgba(255,250,235,.20),transparent 47%),
    linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.09) 20%,rgba(0,0,0,.09) 80%,rgba(0,0,0,.46)),
    linear-gradient(to bottom,rgba(0,0,0,.37),rgba(0,0,0,.12) 28%,rgba(0,0,0,.38));
  filter:brightness(.48);
}
#museum.on #wall::before{animation:wallLightRevealV31 3.05s .18s ease-out both}
@keyframes wallLightRevealV31{
  0%{filter:brightness(.40);opacity:1}
  25%{filter:brightness(.46);opacity:1}
  58%{filter:brightness(.76);opacity:1}
  78%{filter:brightness(1.14);opacity:1}
  100%{filter:brightness(1);opacity:1}
}
#museum.light-settled #wall::before{filter:brightness(1.03)}

/* Let the artwork appear after the light is already visibly arriving. */
.work{
  transition:opacity 1.35s 1.34s cubic-bezier(.2,.85,.2,1),
             filter 1.55s 1.20s cubic-bezier(.2,.85,.2,1),
             transform 1.45s 1.24s cubic-bezier(.2,.85,.2,1);
}
#frameWrap::before{
  width:158%;height:150%;
  background:radial-gradient(ellipse at 50% 18%,
    rgba(255,255,245,calc(var(--frame-glow,.30) * 2.0)) 0%,
    rgba(255,250,230,.32) 22%,
    rgba(255,246,220,.12) 44%,
    transparent 70%);
  filter:blur(24px);
}
#museum.on #frameWrap::before{animation:frameGlowRevealV31 2.45s .88s cubic-bezier(.16,.78,.24,1) both}
@keyframes frameGlowRevealV31{
  0%{opacity:0;filter:blur(40px);transform:translateX(-50%) scale(.66)}
  35%{opacity:.18;filter:blur(32px);transform:translateX(-50%) scale(.76)}
  69%{opacity:1;filter:blur(13px);transform:translateX(-50%) scale(1.08)}
  100%{opacity:.72;filter:blur(20px);transform:translateX(-50%) scale(1)}
}
#museum.on .frame{animation:frameMaterializeV31 2.05s 1.14s cubic-bezier(.16,.78,.24,1) both}
@keyframes frameMaterializeV31{
  0%{opacity:0;filter:brightness(.24) saturate(.55);transform:scale(.975)}
  30%{opacity:.20;filter:brightness(.45) saturate(.68);transform:scale(.982)}
  66%{opacity:1;filter:brightness(1.28) saturate(1.03);transform:scale(1.008)}
  100%{opacity:1;filter:brightness(1) saturate(1);transform:scale(1)}
}

/* Floor pool becomes more obvious, but remains soft. */
.floor::after{
  width:min(82vw,840px);
  height:106%;
  background:radial-gradient(ellipse at 50% 8%,rgba(255,252,235,.58),rgba(255,246,219,.25) 34%,rgba(255,242,212,.08) 58%,transparent 76%);
  filter:blur(24px);
}
#museum.on .floor::after{animation:floorGlowRevealV31 2.75s .92s ease-out both}
@keyframes floorGlowRevealV31{
  0%{opacity:0;filter:blur(34px);transform:translateX(-50%) scale(.42)}
  36%{opacity:.10;filter:blur(31px);transform:translateX(-50%) scale(.56)}
  72%{opacity:.72;filter:blur(17px);transform:translateX(-50%) scale(1.08)}
  100%{opacity:.40;filter:blur(22px);transform:translateX(-50%) scale(1)}
}

/* Make the dust/light atmosphere catch the beam a little more during reveal. */
#museum.on .air-grain{animation:airLightCatchV31 3.2s .34s ease-out both,airDrift 13s 3.5s ease-in-out infinite alternate}
@keyframes airLightCatchV31{
  0%{opacity:.018;filter:blur(1.2px) brightness(.65)}
  58%{opacity:.105;filter:blur(.5px) brightness(1.35)}
  100%{opacity:.050;filter:blur(.7px) brightness(1)}
}

@media (max-width:520px){
  #room::before{width:104vw;height:96%;clip-path:polygon(38% 0,62% 0,94% 100%,6% 100%)}
  #room::after{width:122vw;height:76%}
  .floor::after{width:96vw}
}

/* v34 — multi-work private exhibition / game loop */
.legacy-frame{
  position:absolute!important;
  left:-9999px!important;
  top:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

#galleryStage{
  position:absolute;
  left:50%;
  top:clamp(78px,10dvh,118px);
  bottom:clamp(10px,2.2dvh,22px);
  width:min(94vw,1120px);
  min-height:280px;
  height:auto;
  z-index:26;
  pointer-events:auto;
  transform:translateX(-50%) translate3d(calc(var(--px,0)*3px),calc(var(--py,0)*1px),20px);
}
.gallery-piece{
  position:absolute;
  left:var(--gx,50%);
  top:var(--gy,48%);
  transform:translate(-50%,-50%);
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  line-height:0;
  cursor:pointer;
  touch-action:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .24s ease,filter .24s ease,opacity .24s ease;
  z-index:2;
}
.gallery-piece:hover{transform:translate(-50%,-50%)}
.gallery-piece:focus,.gallery-piece:focus-visible{outline:none}
.gallery-piece.active{z-index:5}
.gallery-piece.active .gallery-frame{box-shadow:0 14px 30px rgba(0,0,0,.30),0 34px 74px rgba(0,0,0,.42)}
.gallery-piece.dragging{z-index:8;transition:none;cursor:grabbing}
.gallery-piece.dragging .gallery-frame{box-shadow:0 16px 34px rgba(0,0,0,.34),0 38px 82px rgba(0,0,0,.46)}
.gallery-piece.pinching{z-index:9;transition:none}
.gallery-piece.pinching .gallery-frame{box-shadow:0 17px 38px rgba(0,0,0,.34),0 42px 88px rgba(0,0,0,.46)}
.gallery-frame{
  position:relative;
  display:block;
  box-sizing:content-box;
  border-style:solid;
  border-color:transparent;
  border-image-repeat:stretch;
  box-shadow:0 11px 24px rgba(0,0,0,.14),0 28px 58px rgba(0,0,0,.22);
  background:transparent;
  line-height:0;
}
.gallery-frame::after{
  content:"";
  position:absolute;
  inset:-7px;
  background:linear-gradient(112deg,transparent 26%,rgba(255,250,228,.22) 49%,transparent 72%);
  opacity:.20;
  pointer-events:none;
  mix-blend-mode:screen;
}
.gallery-mat{
  display:block;
  box-sizing:content-box;
  background:var(--piece-mat,transparent);
  padding:var(--piece-pad,0px);
  box-shadow:none;
  overflow:hidden;
}
.gallery-mat img{
  display:block;
  width:var(--piece-width,180px);
  height:auto;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  box-shadow:none;
}
.gallery-auction-price{
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%);
  white-space:nowrap;
  color:#f7efe3;
  text-shadow:0 2px 7px rgba(0,0,0,.82);
  font:400 clamp(14px,2.5vw,21px) Georgia,serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  line-height:1;
  pointer-events:none;
}
.gallery-auction-price[hidden]{display:none}
.gallery-auction-price.bid-pulse{animation:auctionPricePulse .28s ease-out}
@keyframes auctionPricePulse{0%{transform:translateX(-50%) scale(.94);opacity:.55}100%{transform:translateX(-50%) scale(1);opacity:1}}

#auctionCenter{
  position:absolute;
  z-index:64;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  justify-items:center;
  gap:5px;
  min-width:min(52vw,360px);
  padding:12px 18px;
  border:1px solid rgba(255,245,230,.16);
  background:linear-gradient(180deg,rgba(18,15,12,.54),rgba(18,15,12,.28));
  backdrop-filter:blur(10px);
  box-shadow:0 18px 48px rgba(0,0,0,.20);
  color:#fbf4e8;
  text-align:center;
  pointer-events:none;
}
#auctionCenter small{font:7px Arial,sans-serif;letter-spacing:.28em;color:#eadcc7}
#auctionCenter strong{font:400 clamp(24px,4.9vw,46px) Georgia,serif;line-height:1;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
#auctionCenter[hidden]{display:none}
#auctionCenter.bid-pulse strong{animation:centerBidPulse .30s ease-out}
@keyframes centerBidPulse{0%{transform:scale(.94);opacity:.6}100%{transform:scale(1);opacity:1}}
#museum.auction-live #crowdFront img{filter:saturate(.92) brightness(.95) contrast(1.02) drop-shadow(0 10px 18px rgba(0,0,0,.18));opacity:1}
#museum.auction-live #crowdFront img.foreground{filter:saturate(.90) brightness(.90) contrast(1.02) blur(.75px) drop-shadow(0 10px 18px rgba(0,0,0,.14));opacity:.94}

#roomNav{
  position:absolute;
  z-index:49;
  left:50%;
  top:max(68px,calc(env(safe-area-inset-top) + 52px));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:7px;
  padding:4px 7px;
  background:rgba(18,16,14,.32);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  color:#f2eadf;
}
#roomNav button{
  width:25px;height:25px;min-height:0;padding:0;border:0;background:rgba(248,244,236,.90);
  color:#302a24;font:20px/1 Georgia,serif;cursor:pointer;
}
#roomNav small{font:7px Arial,sans-serif;letter-spacing:.16em;min-width:76px;text-align:center}

#eventTools{
  position:absolute;
  z-index:62;
  right:max(14px,env(safe-area-inset-right));
  top:max(72px,calc(env(safe-area-inset-top) + 58px));
  display:flex;
  gap:5px;
}
.micro-action{
  min-height:0!important;
  padding:5px 7px!important;
  border:1px solid rgba(239,230,215,.34)!important;
  background:rgba(20,18,16,.52)!important;
  color:#f4ede2!important;
  backdrop-filter:blur(8px);
  font:6.5px Arial,sans-serif!important;
  letter-spacing:.14em!important;
  cursor:pointer;
}

#criticVisit{
  position:absolute;
  z-index:63;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(76px,calc(env(safe-area-inset-bottom) + 68px));
  width:min(330px,82vw);
  display:grid;
  grid-template-columns:48px 1fr;
  gap:10px;
  align-items:end;
  padding:10px 12px 10px 9px;
  background:rgba(246,241,232,.94);
  color:#2a241e;
  border:1px solid rgba(57,47,36,.24);
  box-shadow:0 14px 38px rgba(0,0,0,.28);
  transform:translateY(12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .22s ease;
}
#criticVisit.on{opacity:1;transform:translateY(0)}
#criticPortrait{width:48px;height:82px;object-fit:contain;object-position:center bottom;filter:saturate(.74) brightness(.92)}
#criticVisit small{font:7px Arial,sans-serif;letter-spacing:.22em;color:#7a6d5e}
#criticVisit p{margin:5px 0 0;font:12px/1.65 Georgia,"Yu Mincho",serif}

#closedOverlay{
  position:absolute;
  inset:0;
  z-index:56;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:12px;
  background:rgba(5,6,8,.44);
  backdrop-filter:blur(1.5px);
  color:#eee8de;
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease;
  text-align:center;
}
#closedOverlay small{font:8px Arial,sans-serif;letter-spacing:.42em}
#closedOverlay strong{font:400 clamp(20px,3vw,34px) Georgia,"Yu Mincho",serif}
#closedOverlay button{border:1px solid rgba(255,255,255,.34);background:rgba(12,12,14,.68);color:#f5eee4;padding:9px 14px;font:8px Arial;letter-spacing:.18em}
#museum.museum-closed #closedOverlay{opacity:1;pointer-events:auto}
#museum.museum-closed .crowd-layer{opacity:0!important;transition:opacity 1.15s ease!important}
#museum.museum-closed #galleryStage{filter:brightness(.54) saturate(.78);transition:filter 1.1s ease}
#museum.museum-closed .room-bg{filter:brightness(.47) saturate(.72)!important;transition:filter 1.1s ease}
#museum.museum-closed #room::before,#museum.museum-closed #room::after{opacity:.08!important;transition:opacity 1s ease}
#museum.museum-closed .floor{filter:brightness(.48) saturate(.72)}
#museum.museum-closed #auctionBtn{opacity:.38;pointer-events:none}
#museum.museum-closed #roomNav{opacity:.32;pointer-events:none}


#museum nav{z-index:58}
#museum nav button{white-space:nowrap}

@media(max-width:700px){
  #galleryStage{width:98vw;top:72px;bottom:8px;min-height:250px;height:auto}
  #eventTools{top:max(62px,calc(env(safe-area-inset-top) + 49px));right:8px}
  .micro-action{font-size:6px!important;padding:4px 5px!important}
  #roomNav{top:max(60px,calc(env(safe-area-inset-top) + 47px));padding:3px 5px;gap:4px}
  #roomNav button{width:22px;height:22px;font-size:17px}
  #roomNav small{font-size:6px;min-width:63px}
  #museum nav{left:7px;right:7px;bottom:max(6px,env(safe-area-inset-bottom));gap:5px}
  #museum nav>span{max-width:20vw;font-size:6px;letter-spacing:.09em}
  #museum nav>span small{font-size:6px;line-height:1.35}
  #museum nav div{gap:3px;max-width:78vw!important}
  #museum nav button{min-height:30px;padding:6px 6px;font-size:6.5px;letter-spacing:.07em}
  #criticVisit{right:8px;bottom:max(70px,calc(env(safe-area-inset-bottom) + 62px));grid-template-columns:40px 1fr;padding:8px 9px;width:min(300px,86vw)}
  #criticPortrait{width:40px;height:70px}
  #criticVisit p{font-size:11px;line-height:1.55}
  #auctionCenter{top:46%;min-width:60vw;padding:10px 14px}
  #auctionCenter strong{font-size:clamp(22px,7vw,34px)}
}

@media(max-width:390px){
  #museum nav button{padding:5px 4px;font-size:6px}
  #museum nav>span{max-width:18vw}
  #eventTools{gap:3px}
}

@media(prefers-reduced-motion:reduce){
  .gallery-piece,#criticVisit,#closedOverlay,#galleryStage{transition:none!important}
}

/* v36 — visitor handoff animation is driven by Web Animations; keep idle motion out of the way during the handoff. */
#museum.on .crowd-layer.front img.visitor-swapping{animation:none!important}


/* v39 — unified museum management button */
#eventTools{display:none!important}
#sizeCycle,#chooseRoom,#share,#closeGallery,#another{display:none!important}
#choose{
  min-width:126px;
  padding-inline:16px!important;
  font-size:7.4px!important;
  letter-spacing:.18em!important;
}
#manageDialog .dh{margin-bottom:14px}
.manage-section + .manage-section{margin-top:14px}
.manage-label{display:block;margin-bottom:8px;font:8px Arial,sans-serif;letter-spacing:.26em;color:#7c6d5c}
.manage-hero{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.manage-big{
  min-height:56px;
  border:1px solid rgba(83,67,48,.18);
  background:linear-gradient(180deg,#faf6ef,#ece2d3);
  color:#2f261e;
  font:400 12px Georgia,serif;
  letter-spacing:.18em;
}
.manage-big.primary{
  background:linear-gradient(180deg,#2a221a,#56452f);
  color:#fbf4e6;
  border-color:rgba(255,236,207,.22);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.manage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.manage-grid button{
  min-height:44px;
  border:1px solid rgba(83,67,48,.18);
  background:#f8f2e9;
  color:#2f261e;
  font:400 10px Georgia,serif;
  letter-spacing:.12em;
}
@media(max-width:700px){
  #choose{min-width:118px;font-size:7px!important}
  .manage-big{min-height:52px;font-size:11px}
  .manage-grid button{min-height:41px;font-size:9px}
}

/* v40 — full painting atelier */
.intro-atelier{
  margin-top:12px;border:1px solid rgba(63,54,45,.28);background:transparent;color:#3a332d;
  padding:10px 14px;font:9px Arial,sans-serif;letter-spacing:.18em;cursor:pointer;
}
.manage-atelier{
  width:100%;margin-top:10px;min-height:52px;border:1px solid rgba(83,67,48,.2);
  background:linear-gradient(180deg,#e9dfce,#d8c6ac);color:#2c241d;
  font:400 12px Georgia,serif;letter-spacing:.16em;cursor:pointer;
}
.manage-atelier span{display:block;margin-top:4px;font:8px Arial,sans-serif;letter-spacing:.12em;color:#746452}

#atelier{
  position:fixed;inset:0;z-index:300;background:#1c1b19;color:#eee7dc;display:none;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
#atelier.on{display:grid;grid-template-rows:auto 1fr auto}
body.atelier-open{overflow:hidden!important}
#atelier .atelier-head{
  position:relative;inset:auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:58px;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));
  background:rgba(20,19,18,.96);border-bottom:1px solid rgba(255,255,255,.09);pointer-events:auto;
}
.atelier-head>div:first-child{min-width:0}.atelier-head small{display:block;color:#9e9385;font:7px Arial,sans-serif;letter-spacing:.24em}.atelier-head strong{display:block;margin-top:3px;font:400 12px Georgia,serif;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atelier-head-actions{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.atelier-head-actions button{min-width:34px;min-height:34px;border:1px solid rgba(255,255,255,.13);background:#2a2825;color:#eee7dc;padding:6px 8px;font:9px Arial,sans-serif;letter-spacing:.08em}
.atelier-head-actions .atelier-finish{background:#eee4d4;color:#27211c;border-color:#eee4d4;padding-inline:12px;font-weight:600}

.atelier-body{min-height:0;display:grid;grid-template-columns:210px minmax(0,1fr) 230px;background:#252320}
.atelier-panel{min-height:0;overflow:auto;padding:14px 12px;background:#201f1d;border-color:rgba(255,255,255,.08);overscroll-behavior:contain}
.atelier-tools{border-right:1px solid rgba(255,255,255,.08)}.atelier-layers{border-left:1px solid rgba(255,255,255,.08)}
.atelier-panel-title{display:block;margin:2px 0 9px;color:#9f9487;font:7px Arial,sans-serif;letter-spacing:.26em}
.atelier-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:16px}
.atelier-tool-grid button,.atelier-toggle-row button,.atelier-layer-actions button,.atelier-transform-row button{
  border:1px solid rgba(255,255,255,.11);background:#302e2a;color:#e8e0d5;min-height:35px;padding:6px 5px;font:7px Arial,sans-serif;letter-spacing:.09em;
}
.atelier-tool-grid button.active,.atelier-toggle-row button.active{background:#e7dccb;color:#28221d;border-color:#e7dccb}
.atelier-control{display:block;margin:12px 0}.atelier-control>span{display:flex;justify-content:space-between;margin-bottom:6px;color:#bdb3a7;font:7px Arial,sans-serif;letter-spacing:.1em}.atelier-control b{font-weight:400;color:#eee5d8}
.atelier-control input[type="range"]{width:100%;accent-color:#d8c9b2}
.atelier-toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:14px}

.atelier-viewport{position:relative;min-width:0;min-height:0;overflow:hidden;touch-action:none;background:radial-gradient(circle at 50% 42%,#4a4640,#33302c 56%,#282623 100%);display:grid;place-items:center}
.atelier-sheet{position:absolute;left:50%;top:50%;width:600px;height:750px;visibility:visible;transform-origin:50% 50%;box-shadow:0 22px 64px rgba(0,0,0,.48);touch-action:none;will-change:transform;background:#fff}
.atelier-paper{position:absolute;inset:0;background:#fff;pointer-events:none}
.atelier-canvas-stack{position:absolute;inset:0;overflow:hidden;touch-action:none}
.atelier-layer-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.atelier-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(50,50,50,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(50,50,50,.14) 1px,transparent 1px);background-size:10% 10%}
.atelier-zoom{position:absolute;z-index:8;right:12px;bottom:12px;display:flex;gap:4px;align-items:center;padding:4px;background:rgba(20,19,18,.76);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(8px)}
.atelier-zoom button{width:30px;height:30px;border:0;background:#35322e;color:#eee6da;font:12px Arial}.atelier-zoom span{min-width:46px;text-align:center;font:7px Arial;letter-spacing:.08em;color:#d5cabd}

.atelier-color-row{display:grid;grid-template-columns:46px 1fr;gap:8px;align-items:center}.atelier-color-row input[type="color"]{width:46px;height:38px;padding:0;border:1px solid rgba(255,255,255,.16);background:transparent}.atelier-color-row input[type="text"]{height:38px;border:1px solid rgba(255,255,255,.11);background:#2b2926;color:#ece4d9;padding:0 9px;font:10px monospace;text-transform:uppercase}
.atelier-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:9px 0 16px}.atelier-swatch{aspect-ratio:1;border:1px solid rgba(255,255,255,.18);padding:0;background:var(--swatch)}
.layer-title{margin-top:18px}.atelier-layer-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:8px}.atelier-layer-actions button{min-width:0;padding:4px 2px}
.atelier-layer-list{display:flex;flex-direction:column;gap:5px;max-height:34vh;overflow:auto}.atelier-layer-item{display:grid;grid-template-columns:28px 1fr 30px;align-items:center;gap:5px;min-height:40px;padding:5px;border:1px solid rgba(255,255,255,.08);background:#292724;color:#ddd4c8}.atelier-layer-item.active{border-color:#d9c8ae;background:#35312c}.atelier-layer-item button{border:0;background:transparent;color:inherit;font-size:12px}.atelier-layer-item span{font:8px Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.atelier-layer-thumb{width:28px;height:28px;background:#fff center/cover;border:1px solid rgba(255,255,255,.12)}
.atelier-select{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;margin:12px 0}.atelier-select span{font:7px Arial;letter-spacing:.12em;color:#bdb3a7}.atelier-select select{height:34px;background:#2b2926;color:#eee5da;border:1px solid rgba(255,255,255,.1);font:8px Arial;padding:0 6px}
.atelier-transform-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:12px}

.atelier-mobile-bar{display:none;background:#1d1c1a;border-top:1px solid rgba(255,255,255,.1);padding:5px max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:4px}.atelier-mobile-bar button{flex:1;min-height:36px;border:1px solid rgba(255,255,255,.1);background:#2c2a27;color:#e9e1d6;font:7px Arial;letter-spacing:.1em}
#atelierNewDialog{width:min(540px,92vw);background:#eee7dd;color:#2b251f}.atelier-ratios{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.atelier-ratios button{min-height:64px;border:1px solid #b9aa96;background:#f8f3eb;color:#2e2822;font:18px Georgia}.atelier-ratios small{display:block;margin-top:5px;font:7px Arial;letter-spacing:.08em;color:#7b6e5e}.atelier-paper-choice{display:flex;gap:8px;align-items:center;margin:15px 0;font:10px Arial}.atelier-dialog-actions{display:flex;justify-content:space-between;gap:8px}.atelier-dialog-actions button{border:1px solid #b9aa96;background:#e8dfd2;color:#302820;padding:9px 11px;font:8px Arial;letter-spacing:.08em}

@media(max-width:900px){
  .atelier-body{grid-template-columns:170px minmax(0,1fr) 190px}.atelier-panel{padding:10px 8px}.atelier-tool-grid{grid-template-columns:1fr}.atelier-swatches{grid-template-columns:repeat(6,1fr)}
}
@media(max-width:700px){
  #atelier.on{grid-template-rows:auto 1fr auto}.atelier-head{min-height:52px!important}.atelier-head strong{font-size:10px}.atelier-head-actions{gap:3px}.atelier-head-actions button{min-width:30px;min-height:30px;padding:4px 6px;font-size:7px}.atelier-head-actions .atelier-finish{padding-inline:8px;font-size:6.5px;max-width:92px;line-height:1.25}
  .atelier-body{display:block;position:relative;min-height:0}.atelier-viewport{position:absolute;inset:0}.atelier-panel{position:absolute;z-index:15;left:6px;right:6px;bottom:6px;max-height:min(62vh,480px);border:1px solid rgba(255,255,255,.1);box-shadow:0 -10px 36px rgba(0,0,0,.38);transform:translateY(calc(100% + 16px));transition:transform .22s ease;border-radius:4px}.atelier-panel.mobile-open{transform:translateY(0)}.atelier-tools,.atelier-layers{border:1px solid rgba(255,255,255,.1)}.atelier-tools{max-height:55vh}.atelier-tool-grid{grid-template-columns:repeat(5,1fr)}.atelier-tool-grid button{font-size:6px;min-height:33px}.atelier-layers{max-height:62vh}.atelier-mobile-bar{display:flex;z-index:20}.atelier-swatches{grid-template-columns:repeat(10,1fr)}.atelier-layer-list{max-height:24vh}
  .atelier-zoom{right:8px;bottom:8px}
}
@media(max-width:390px){.atelier-head>div:first-child{max-width:82px}.atelier-head-actions button{padding:3px 5px}.atelier-head-actions .atelier-finish{max-width:76px}.atelier-tool-grid{grid-template-columns:repeat(4,1fr)}.atelier-swatches{grid-template-columns:repeat(8,1fr)}}

/* v41 — use the actual visible wall as the artwork movement area. */
#wall > .work{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  pointer-events:none;
}
#wall > .work #galleryStage{
  position:absolute!important;
  left:1.5vw!important;
  right:1.5vw!important;
  top:10px!important;
  bottom:4px!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-width:none!important;
  transform:translate3d(calc(var(--px,0)*3px),calc(var(--py,0)*1px),20px)!important;
  pointer-events:auto;
}
@media(max-width:700px){
  #wall > .work #galleryStage{
    left:4px!important;
    right:4px!important;
    top:4px!important;
    bottom:2px!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
  }
}

/* v41 — make the canvas stack itself the reliable drawing surface on touch devices. */
#atelierCanvasStack{
  pointer-events:auto!important;
  touch-action:none!important;
  overscroll-behavior:none;
  cursor:crosshair;
  z-index:3;
}
.atelier-layer-canvas{
  display:block;
  pointer-events:none!important;
  touch-action:none!important;
}
#atelierSheet{
  touch-action:none!important;
  -webkit-user-select:none;
  user-select:none;
}
#atelierViewport{
  touch-action:none!important;
  overscroll-behavior:none;
}

/* v42 — start inside the museum, one empty frame, Japanese-first UI */
#intro{display:none!important}
#museum.museum-idle{visibility:visible;opacity:1;pointer-events:auto}
#museum.museum-idle #openCurtain{display:none}
#museum.museum-idle nav,
#museum.museum-idle #roomNav,
#museum.museum-idle #eventTools,
#museum.museum-idle #criticVisit,
#museum.museum-idle #sideLeft,
#museum.museum-idle #sideRight{display:none!important}
#museum.museum-idle #galleryStage{filter:none!important}

.empty-exhibit{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:18px;
  pointer-events:none;
}
.empty-frame-upload{
  pointer-events:auto;
  width:min(54vw,430px);
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  border:clamp(17px,3.2vw,38px) solid transparent;
  border-image-source:url("assets/frames/frame_10.webp");
  border-image-slice:159 162 161 163;
  border-image-repeat:round;
  background:transparent;
  box-shadow:0 18px 40px rgba(0,0,0,.22),0 38px 85px rgba(0,0,0,.24);
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
}
.empty-frame-upload:hover,.empty-frame-upload:focus-visible,.empty-frame-upload.drag{
  transform:scale(1.018);
  filter:brightness(1.05);
  box-shadow:0 18px 44px rgba(0,0,0,.28),0 42px 96px rgba(0,0,0,.30);
  outline:none;
}
.empty-frame-upload input{display:none}
.empty-frame-art{
  width:100%;height:100%;
  display:grid;place-content:center;justify-items:center;gap:12px;
  padding:22px;
  background:linear-gradient(145deg,rgba(234,229,218,.94),rgba(199,196,187,.91));
  color:#4a433a;
  text-align:center;
  box-shadow:inset 0 0 38px rgba(0,0,0,.10);
}
.empty-frame-art strong{font:400 clamp(15px,2.3vw,22px) Georgia,"Yu Mincho",serif;letter-spacing:.08em}
.empty-frame-art small{font:9px -apple-system,BlinkMacSystemFont,"Yu Gothic",sans-serif;letter-spacing:.18em;border-bottom:1px solid rgba(55,48,40,.45);padding-bottom:4px}
.empty-atelier{
  pointer-events:auto;
  border:1px solid rgba(245,235,219,.36);
  background:rgba(22,19,16,.56);
  color:#f4ede2;
  backdrop-filter:blur(8px);
  padding:9px 15px;
  font:9px -apple-system,BlinkMacSystemFont,"Yu Gothic",sans-serif;
  letter-spacing:.12em;
}
#museum.museum-idle #wall::before{filter:brightness(1.08)}
#museum.museum-idle .floor{z-index:11}

/* Japanese controls are intentionally compact. */
#museum nav,#roomNav,.micro-action,.manage-label,.manage-grid button,.manage-big,.head-tools button{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}

/* Simplified Atelier: keep painting essentials, hide specialist controls. */
.atelier-advanced{display:none!important}
#atelierLayerDuplicate,#atelierLayerUp,#atelierLayerDown{display:none!important}
.atelier-layer-actions{grid-template-columns:1fr 1fr!important}
.atelier-layer-actions #atelierLayerAdd::after{content:" レイヤー追加";font-size:7px}
.atelier-layer-actions #atelierLayerDelete::before{content:"レイヤー ";font-size:7px}
.atelier-tool-grid{grid-template-columns:repeat(2,1fr)}
.atelier-tool-grid button,.atelier-transform-row button,.atelier-layer-actions button{font-family:-apple-system,BlinkMacSystemFont,"Yu Gothic",sans-serif}

@media(max-width:700px){
  .empty-exhibit{gap:14px}
  .empty-frame-upload{width:min(78vw,420px);border-width:clamp(18px,5vw,32px)}
  .empty-frame-art{padding:16px}
  .empty-frame-art strong{font-size:15px}
  .empty-frame-art small{font-size:8px}
  .atelier-tool-grid{grid-template-columns:repeat(4,1fr)!important}
}
@media(max-width:390px){
  .empty-frame-upload{width:82vw}
  .atelier-tool-grid{grid-template-columns:repeat(3,1fr)!important}
}


/* v43 atelier simplification */
#atelierLayers .layer-title,
#atelierLayers .atelier-layer-actions,
#atelierLayers .atelier-layer-list,
#atelierLayers #atelierLayerOpacity,
#atelierLayers #atelierLayerOpacityValue,
#atelierLayers .atelier-control:has(#atelierLayerOpacity),
#atelierLayers .atelier-select,
#atelierTools .atelier-advanced,
#atelierTools [data-tool="oil"],
#atelierTools [data-tool="marker"],
#atelierTools [data-tool="airbrush"],
#atelierLayers #atelierFlipV,
#atelierLayers #atelierRotateL,
#atelierLayers #atelierRotateR,
#atelierLayers #atelierGridToggle{display:none!important;}

.atelier-touch-hint{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:8;
  margin:0;
  padding:6px 10px;
  background:rgba(20,19,18,.72);
  color:#ece1d4;
  border:1px solid rgba(255,255,255,.10);
  font:11px/1.5 -apple-system,BlinkMacSystemFont,"Yu Gothic",sans-serif;
  letter-spacing:.02em;
  max-width:min(60vw,320px);
  pointer-events:none;
  backdrop-filter:blur(8px);
}
#atelierLayers{display:block}
#atelierLayers .atelier-panel-title:first-child{margin-bottom:10px}
#atelierLayers{padding-bottom:16px}
#atelierLayers .atelier-transform-row{grid-template-columns:1fr 1fr}
#atelierLayers .atelier-transform-row button{min-height:40px}
@media(max-width:700px){
  .atelier-touch-hint{left:8px;right:70px;bottom:8px;font-size:10px;max-width:none}
}

/* v44 — empty museum starts with visible visitors and a real empty frame */
#museum.museum-idle #crowdBack,
#museum.museum-idle #crowdMid,
#museum.museum-idle #crowdFront{display:block!important}
#museum.museum-idle #crowdBack{opacity:.48!important}
#museum.museum-idle #crowdMid{opacity:.66!important}
#museum.museum-idle #crowdFront{opacity:1!important}
#museum.museum-idle #crowdFront img,
#museum.museum-idle #crowdMid img,
#museum.museum-idle #crowdBack img{opacity:1!important}
#drop.empty-frame-upload{
  width:min(54vw,430px)!important;
  height:auto!important;
  min-height:0!important;
  margin-top:0!important;
  border-radius:0!important;
  border:clamp(17px,3.2vw,38px) solid transparent!important;
  background:transparent!important;
}
#drop.empty-frame-upload:hover,
#drop.empty-frame-upload:focus-visible,
#drop.empty-frame-upload.drag{background:transparent!important}
#drop.empty-frame-upload b,
#drop.empty-frame-upload span,
#drop.empty-frame-upload small{font:inherit!important;color:inherit!important}
@media(max-width:700px){
  #drop.empty-frame-upload{width:min(78vw,420px)!important}
}
@media(max-width:390px){
  #drop.empty-frame-upload{width:82vw!important}
}


/* v46 — reliable iPhone/iPad drawing and two-finger gestures */
#atelierViewport{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  overscroll-behavior:none!important;
}
#atelierCanvasStack{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
.atelier-mobile-bar{grid-template-columns:repeat(3,1fr)}
.atelier-mobile-bar button{min-width:0}

/* v47 — iOS Touch Events fallback */
#atelierViewport,#atelierSheet,#atelierCanvasStack{
  -webkit-touch-callout:none!important;
  touch-action:none!important;
}


/* v48 — dedicated transparent input surface for iPhone/iPad drawing */
.atelier-input-surface{
  position:absolute;
  inset:0;
  z-index:12;
  background:transparent;
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:none;
}
.atelier-zoom{z-index:22!important}
.atelier-touch-hint{z-index:21!important}
.atelier-panel{z-index:30!important}
.atelier-mobile-bar{z-index:40!important}
.atelier-head{z-index:45!important}

/* v50 — one-canvas atelier input engine */
#atelierInputSurface{display:none!important}
.atelier-canvas-stack{z-index:2;pointer-events:none!important}
.atelier-paper{z-index:1}
.atelier-grid{z-index:3}
.atelier-paint-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none!important;user-select:none;-webkit-user-select:none}
.atelier-viewport{touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;overscroll-behavior:none!important}
body.atelier-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none}


/* v51 — canonical ATELIER display/input fix */
#atelierSheet{
  visibility:visible!important;
  pointer-events:none!important;
}
#atelierCanvasStack,
.atelier-paint-canvas{
  pointer-events:none!important;
}
#atelierViewport{
  pointer-events:auto!important;
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  overscroll-behavior:none!important;
}