/* standalone page: replaces the reset the Claude viewer used to provide */
:root{color-scheme:dark}
html,body{margin:0;height:100%}
body{font-size:14px;font-family:system-ui,-apple-system,sans-serif}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: a full-bleed 3D exhibition room; the HUD floats in the four corners and the viewer overlays everything. */
/* One committed look: a dark museum room, so the photographs carry the light. */
:root{
  --ink:#0f1a17;
  --wall:#21403a;
  --panel:rgba(12,21,19,.84);
  --line:rgba(236,229,214,.16);
  --paper:#ece5d6;
  --muted:#a4b0a8;
  --brass:#d9a85b;
  --danger:#e9907c;
  --display:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --ui:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--ui);font-size:14px;line-height:1.5;overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

#stage{position:relative;height:100%;overflow:hidden}
#stage::before{content:"";position:absolute;inset:0 0 auto;height:170px;background:linear-gradient(rgba(6,11,10,.55),rgba(6,11,10,0));pointer-events:none;z-index:1}
.hud{z-index:2}
#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#scene:active{cursor:grabbing}

.hud{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-rows:auto 1fr auto;gap:10px;
  padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hud > *{min-width:0;min-height:0}
.hud .row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.hud .row.bottom{align-items:flex-end;flex-wrap:nowrap}
.hud .row > *{pointer-events:auto}

.sign h1{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.04em;margin:0;text-wrap:balance;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.sign p{margin:2px 0 0;color:var(--muted);font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.7)}

.side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:min(100%,340px);margin-left:auto}
.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.people li{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 10px;max-width:100%}
.people .dot{width:9px;height:9px;border-radius:50%;flex:none}
.people .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:4px}
.people .what{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}
.btn:hover{border-color:var(--brass)}
.btn.solid{background:var(--brass);border-color:var(--brass);color:#1b1407;font-weight:600}
.btn.small{padding:2px 10px;font-size:12px}
#view3,#snd,#look{background:var(--panel)}
.btn.on{background:rgba(217,168,91,.22);border-color:var(--brass)}
#nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-width:min(100%,420px)}
#nav .btn{background:var(--panel)}
.btn.warn{border-color:var(--danger);color:var(--danger)}
.btn:disabled{opacity:.45;cursor:default}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

#stick{width:112px;height:112px;border-radius:50%;border:1px solid var(--line);background:rgba(12,21,19,.45);position:relative;touch-action:none;display:none;flex:none}
#stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(236,229,214,.5)}
@media (pointer:coarse){#stick{display:block}}
#hint{color:var(--muted);font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.8);align-self:flex-end;transition:opacity .6s}
@media (pointer:coarse),(max-width:760px){#hint{display:none}}

.chatwrap{display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:min(330px,100%);margin-left:auto}
#chat{width:100%;display:flex;flex-direction:column}
#feed{list-style:none;margin:0;padding:10px 12px 4px;max-height:min(34vh,260px);overflow-y:auto;display:flex;flex-direction:column;gap:6px}
#feed li{overflow-wrap:anywhere}
#feed .who{font-weight:600;margin-right:6px}
#feed .empty{color:var(--muted)}
#say{display:flex;gap:6px;padding:8px}
#sayInput{flex:1;min-width:0;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
#chatBtn{position:relative}
#chatBtn .badge{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--brass)}

.center{align-self:center;justify-self:center;pointer-events:auto;text-align:center;max-width:min(92%,380px)}
#entry{padding:20px;box-sizing:border-box;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 32px),380px);max-height:calc(100% - 32px);overflow-y:auto;z-index:15;pointer-events:auto;background:rgba(12,21,19,.95);text-align:center}
#entry h2{font-family:var(--display);font-size:20px;margin:0 0 4px;text-wrap:balance}
#entry p{margin:0 0 14px;color:var(--muted)}
#entry form{display:flex;flex-direction:column;gap:12px;text-align:left}
#entry .who{display:flex;align-items:center;gap:12px}
#pv{width:64px;height:64px;flex:none;border-radius:50%;background:rgba(236,229,214,.12)}
#entry fieldset{border:0;margin:0;padding:0;min-width:0}
#entry legend{padding:0;margin-bottom:6px;color:var(--muted);font-size:12px;letter-spacing:.04em}
#crop{width:200px;height:200px;max-width:100%;border-radius:12px;touch-action:none;cursor:grab;display:block;margin:10px auto 8px;background:#000}
#cropBox label{color:var(--muted);font-size:12px;margin-right:8px}
#zoom{width:calc(100% - 44px);vertical-align:middle;accent-color:var(--brass)}
#cropBox p{margin:6px 0 0;color:var(--muted);font-size:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts .btn[aria-pressed="true"]{background:rgba(217,168,91,.22);border-color:var(--brass)}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);padding:0}
.sw[aria-pressed="true"]{border-color:var(--paper);box-shadow:0 0 0 2px var(--brass)}
#nick{flex:1;min-width:0;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
#notice{padding:12px 16px;color:var(--muted);pointer-events:none}

#toast{position:absolute;left:50%;top:16%;transform:translateX(-50%);padding:8px 16px;max-width:86%;text-align:center;z-index:30}

#viewer{position:absolute;inset:0;margin:0;z-index:20;background:rgba(6,11,10,.93);display:grid;grid-template-rows:auto 1fr auto;gap:10px;
  padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#viewer .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
#vWith{color:var(--muted);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#media{min-height:0;display:flex;align-items:center;justify-content:center}
#media img,#media video{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 12px 60px rgba(0,0,0,.6);background:#000}
#media .gone{color:var(--muted)}
#viewer figcaption{text-align:center;max-width:65ch;margin:0 auto;width:100%}
#vTitle{font-family:var(--display);font-size:20px;margin:0;text-wrap:balance;overflow-wrap:anywhere}
#vCaption{margin:4px 0 0;color:var(--muted);overflow-wrap:anywhere}
#vEdit{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
#vEdit input{flex:1 1 180px;min-width:0;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
@media (prefers-reduced-motion:reduce){#hint{transition:none}}