/* Real 3D viewport; the homepage retains its own supplied background. */
.desk-background { transition: opacity .6s ease; }
body[data-view="entering"], body[data-view="desk"] { overflow: hidden; }
body[data-view="entering"] .entrance,
body[data-view="desk"] .entrance { opacity: 0; transform: translateY(-12px) scale(.985); pointer-events: none; }
body[data-view="desk"] .desk-background { opacity: 0; }
.desk-experience { position: fixed; inset: 0; z-index: 5; overflow: hidden; background: #f2efe8; opacity: 0; pointer-events: none; transition: opacity .5s ease; outline: none; }
body[data-view="entering"] .desk-experience,
body[data-view="desk"] .desk-experience { opacity: 1; pointer-events: auto; }
.desk-viewport { position: absolute; inset: 0; }
.desk-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline-offset: -4px; }
.desk-toolbar { position: absolute; top: 24px; left: 30px; right: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; opacity: 0; transform: translateY(-8px); transition: opacity .5s .5s, transform .5s .5s; pointer-events: none; }
body[data-view="desk"] .desk-toolbar { opacity: 1; transform: none; }
.desk-control { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(167,154,138,.24); border-radius: 24px; padding: 10px 15px; min-height: 40px; background: rgba(255,255,255,.78); color: var(--muted); font-size: 11px; cursor: pointer; transition: background .2s; pointer-events: auto; }
.desk-control:hover { background: #fff; }
.desk-control svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.desk-back { justify-self: start; }
.desk-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }
.desk-reset { width: 40px; padding: 10px; }
.desk-brand { margin: 0; color: #685e54; font-size: 16px; letter-spacing: .15em; display: flex; align-items: center; gap: 13px; }
.desk-brand span { font-size: 9px; letter-spacing: .2em; opacity: .65; }
.desk-footer { position: absolute; left: 20px; right: 20px; bottom: 25px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .5s .9s; }
body[data-view="desk"] .desk-footer { opacity: 1; }
.desk-footer p { margin: 0; padding: 8px 15px; border: 1px solid rgba(167,154,138,.13); border-radius: 30px; color: #7c7268; background: rgba(255,255,255,.72); font-size: 11px; letter-spacing: .04em; }
.model-controls { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px 5px 15px; border: 1px solid rgba(167,154,138,.22); border-radius: 30px; background: rgba(255,255,255,.93); box-shadow: 0 5px 18px -10px #9b9283; pointer-events: auto; }
.model-controls > span:first-child { color: var(--ink); font-size: 12px; min-width: 48px; padding-right: 6px; }
.model-controls button { border: 0; border-radius: 20px; background: transparent; color: var(--muted); min-width: 38px; min-height: 34px; padding: 7px 11px; font-size: 11px; cursor: pointer; }
.model-controls button:hover { background: #f3f0e8; }
.model-controls button[aria-pressed="true"] { color: var(--ink); background: var(--blue); }
.model-controls #rotate-left, .model-controls #rotate-right { font-size: 22px; padding: 2px 7px; }
.control-divider { width: 1px; height: 18px; background: rgba(167,154,138,.28); margin: 0 3px; }

@media (max-width: 699px) {
  .desk-toolbar { top: 17px; left: 18px; right: 65px; gap: 8px; }
  .desk-control { min-height: 36px; padding: 8px 11px; }
  .desk-actions { gap: 6px; }
  .desk-reset { width: 36px; padding: 8px; }
  .desk-brand { font-size: 14px; gap: 0; }
  .desk-brand span { display: none; }
  .desk-footer { left: 12px; right: 12px; bottom: max(22px, env(safe-area-inset-bottom)); }
  .desk-footer p { font-size: 10px; padding: 8px 12px; }
  .model-controls { padding-left: 11px; gap: 2px; }
  .model-controls button { min-width: 34px; padding-inline: 8px; }
}
@media (max-height: 500px) { .desk-footer { bottom: 12px; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .desk-experience, .desk-toolbar, .desk-footer { transition: none; } }

/* Hand cursor and the object's isolated, transparent WebGL viewport. */
.camera-panel { position: absolute; z-index: 16; left: 24px; bottom: 23px; width: 176px; padding: 5px; border: 1px solid #ffffffb0; border-radius: 15px; background: #ffffffac; box-shadow: 0 5px 24px -15px #80786c; pointer-events: none; }
.camera-picture { position: relative; aspect-ratio: var(--camera-aspect,4/3); overflow: hidden; border-radius: 10px; background: #e8e5de; }
.camera-picture video,.camera-picture canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.camera-picture video { transform: scaleX(-1); }
.camera-picture canvas { z-index: 1; }
.camera-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: #9c948a; }
.camera-panel[data-live="true"] .camera-empty { display: none; }
.camera-panel p { margin: 7px 3px 4px; color: #8f8374; font-size: 9px; letter-spacing: .03em; text-align: center; }
.desk-canvas,.object-canvas { pointer-events: none; cursor: default; }
.hand-target { pointer-events: none; user-select: none; }
.hand-target[data-hovered="true"] { background: #c7d3db; border-color: #a7bac5; color: #3e3630; }
body[data-view="desk"] #sound-toggle,body[data-view="entering"] #sound-toggle { display: none; }
.focus-return-note { margin: 10px 0; font-size: 10px; color: #978a7c; letter-spacing: .04em; }
.hand-status { position: absolute; top: 83px; left: 50%; transform: translateX(-50%); z-index: 12; margin: 0; border: 0; border-radius: 24px; display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: rgba(255,255,255,.6); color: #887f74; max-width: min(500px,calc(100% - 30px)); text-align: center; font-size: 10px; letter-spacing: .06em; pointer-events: none; }
.hand-status i { width: 5px; height: 5px; border-radius: 50%; background: #ad9b85; }
.hand-status[data-state="ready"] i { background: #829aa1; box-shadow: 0 0 0 3px #c7d3db40; }
.hand-status[data-state="loading"] i { animation: hand-ready 1.4s ease-in-out infinite; }
.hand-status[data-state="error"] { background: rgba(255,255,255,.86); }
.hand-cursor { position: fixed; width: 32px; height: 32px; z-index: 15; border: 1px solid #8ba1ae; border-radius: 50%; transform: translate(-50%,-50%); background: #fff9; box-shadow: 0 0 0 5px #c7d3db35; pointer-events: none; transition: width .15s, height .15s, background .2s; }
.hand-cursor span { position: absolute; inset: 12px; border-radius: 50%; background: #728997; }
.hand-cursor[data-ready="true"] { background: #c7d3dbcf; border-color: #fff; box-shadow: 0 0 0 5px #c7d3db65; }
.hand-cursor[data-pose="fist"] { width: 24px; height: 24px; background: #93a8b5; }
.hand-cursor[data-pose="fist"] span { inset: 9px; background: #fff; }
.desk-viewport { transition: filter .4s ease, opacity .4s ease; }
.desk-experience[data-focus] .desk-viewport { filter: blur(14px); opacity: .48; }
.desk-experience[data-focus="returning"] .desk-viewport { filter: blur(0); opacity: 1; }
.desk-experience[data-focus] .desk-toolbar,
.desk-experience[data-focus] .desk-footer { opacity: 0; pointer-events: none; transition: opacity .25s; }
.desk-experience[data-focus="returning"] .desk-toolbar,
.desk-experience[data-focus="returning"] .desk-footer { opacity: 1; }
.model-controls #object-open { background: var(--blue); color: var(--ink); margin-left: 4px; }
.object-focus { position: absolute; inset: 0; z-index: 10; }
.object-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline-offset: -4px; transform-origin: center; transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.desk-experience[data-focus="entering"] .object-canvas,
.desk-experience[data-focus="returning"] .object-canvas { transform: translate(var(--fly-x,0px),var(--fly-y,0px)) scale(var(--fly-scale,.5)); }
.desk-experience[data-focus="returning"] .object-canvas { opacity: 0; }
.focus-header { position: absolute; top: 26px; left: 30px; right: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 20px; pointer-events: none; }
.focus-header button { justify-self: start; }
.focus-title { text-align: center; color: var(--ink); }
.focus-title p { margin: 1px 0 10px; font-size: 8px; letter-spacing: .24em; color: #9c9185; }
.focus-title h2 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: .22em; }
.focus-title h2 #focus-english { margin-left: 13px; font-size: 10px; font-weight: 400; letter-spacing: .18em; color: #9b8e80; }
.focus-guide { position: absolute; left: 20px; right: 20px; bottom: 34px; display: flex; align-items: center; flex-direction: column; gap: 14px; pointer-events: none; }
.object-sounds { display: flex; gap: 12px; pointer-events: auto; }
.object-sounds .sound-gesture { position: relative; display: flex; align-items: center; gap: 17px; min-width: 207px; padding: 17px 24px; border: 1px solid #a79a8a2c; border-radius: 13px; background: #ffffffbf; text-align: left; color: #62594f; transition: background .2s, border-color .2s; }

.object-sounds .sound-gesture.is-playing { background: #eef3f6e8; border-color: #aebfc9; }
.object-sounds .sound-gesture[hidden] { display: none; }
.object-sounds .sound-gesture > span:nth-child(2) { font-size: 12px; letter-spacing: .08em; }
.object-sounds small { display: block; margin-top: 7px; font-size: 9px; color: #a29587; letter-spacing: .14em; }
.sound-symbol { color: #94a8b4; font-size: 12px; letter-spacing: .01em; width: 44px; flex-shrink: 0; white-space: nowrap; text-align: center; }
.index-symbol { font-family: "Segoe UI Symbol", sans-serif; font-size: 28px; }
.clip-playing { display: flex; align-items: center; gap: 2px; height: 16px; width: 14px; margin-left: auto; opacity: 0; }
.clip-playing i { width: 2px; height: 8px; background: #8da4b2; border-radius: 2px; }
.is-playing .clip-playing { opacity: 1; }
.is-playing .clip-playing i { animation: clip-wave .6s ease-in-out infinite alternate; }
.is-playing .clip-playing i:nth-child(2) { animation-delay: -.3s; height: 14px; }
.is-playing .clip-playing i:nth-child(3) { animation-delay: -.15s; height: 5px; }
.focus-exit-hint { margin: 0; color: #918678; font-size: 10px; letter-spacing: .07em; }
.focus-exit-hint::before { content: ""; display: inline-block; width: calc(var(--spread,0)*36px); height: 3px; border-radius: 3px; background: #9fb4c0; vertical-align: middle; margin-right: 5px; transition: width .12s; }
.focus-audio-status { min-height: 12px; margin: -5px 0 0; font-size: 9px; color: #aaa094; letter-spacing: .04em; }
.focus-header, .focus-guide { opacity: 1; transition: opacity .25s .1s; }
.desk-experience[data-focus="entering"] .focus-header,
.desk-experience[data-focus="entering"] .focus-guide,
.desk-experience[data-focus="returning"] .focus-header,
.desk-experience[data-focus="returning"] .focus-guide { opacity: 0; transition-delay: 0s; }
@keyframes clip-wave { to { transform: scaleY(.4); } }
@keyframes hand-ready { 50% { opacity: .35; } }
@media (max-width:699px) {
  .camera-panel { top: 117px; left: 16px; bottom: auto; width: 112px; }
  .camera-panel p { font-size: 8px; }
  .focus-return-note { font-size: 8px; max-width: 120px; line-height: 1.7; }
  .hand-status { top: 72px; font-size: 9px; max-width: calc(100% - 28px); letter-spacing: .01em; }
  .focus-header { top: 20px; left: 18px; right: 65px; gap: 9px; grid-template-columns: 1fr auto; }
  .focus-header .focus-space { display: none; }
  .focus-title p { display: none; }
  .focus-title h2 { font-size: 17px; padding-top: 10px; }
  .focus-title h2 #focus-english { display: none; }
  .focus-guide { bottom: max(24px,env(safe-area-inset-bottom)); left: 14px; right: 14px; gap: 13px; }
  .object-sounds { gap: 8px; width: 100%; max-width: 400px; }
  .object-sounds .sound-gesture { min-width: 0; flex: 1; padding: 14px 12px; gap: 7px; }
  .object-sounds .sound-gesture > span:nth-child(2) { font-size: 11px; letter-spacing: .01em; }
  .sound-symbol { width: 35px; font-size: 11px; }
  .index-symbol { font-size: 25px; }
  .model-controls:has(#object-open:not([hidden])) .control-divider,
  .model-controls:has(#object-open:not([hidden])) #rotate-left,
  .model-controls:has(#object-open:not([hidden])) #rotate-right { display: none; }
}
@media (max-height:500px) {
  .focus-guide { bottom: 10px; gap: 6px; }
  .object-sounds .sound-gesture { padding: 8px 17px; }
  .hand-status { top: 64px; }
}
@media (prefers-reduced-motion:reduce) {
  .desk-viewport,.object-canvas,.focus-header,.focus-guide { transition: none; }
  .hand-status i,.clip-playing i { animation: none!important; }
}