@charset "UTF-8";
/* Isolated sculpture layer. Three original local logos; no global reset or perpetual animation. */
#studioScene { min-width: 0; width: 100%; color: #29312f; font: 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei",sans-serif; color-scheme: light; }
#studioScene *, #studioScene *::before, #studioScene *::after { box-sizing: border-box; }
#studioScene[hidden], #studioScene [hidden] { display: none !important; }
#studioScene button, #studioScene input { font: inherit; }
#studioScene button { cursor: pointer; }
#studioScene .studio-scene-stage { height: 410px; position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; }
#studioScene .studio-scene-stage:focus-within { outline: 3px solid var(--studio-ui-ring,#85483e); outline-offset: 4px; }
#studioScene .studio-scene-backlight { position: absolute; inset: 9% 2% 5%; border-radius: 48%; background: radial-gradient(ellipse at center,var(--studio-ui-accent-soft,#ffe8de),transparent 67%); z-index: -1; pointer-events: none; }
#studioScene #studioSceneCanvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; position: relative; z-index: 1; opacity: 0; }
#studioScene #studioSceneCanvas.studio-scene-dragging { cursor: grabbing; }
#studioScene .studio-scene-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
#studioScene .studio-scene-tools button, #studioScene .studio-scene-choices button { width: auto; min-height: 44px; max-width: 100%; padding: 7px 12px; border: 1px solid #d9d7d0; border-radius: 12px; background: #fffdfa; color: #434b45; font-size: 16px; line-height: 1.5; }
#studioScene .studio-scene-tools button:hover, #studioScene .studio-scene-choices button:hover { background: #f4f2ed; border-color: #8e958d; }
#studioScene button[aria-pressed="true"] { background: var(--studio-ui-accent-soft,#ffe8de); color: var(--studio-ui-accent,#a94232); border-color: currentColor; box-shadow: inset 0 -3px currentColor; font-weight: 650; }
#studioScene button:focus-visible, #studioScene input:focus-visible { outline: 3px solid var(--studio-ui-ring,#85483e); outline-offset: 3px; }
#studioScene .studio-scene-hint { margin: 10px 0; color: #5b645d; text-align: center; font-size: 16px; overflow-wrap: anywhere; }
#studioScene .studio-scene-controls { display: grid; gap: 12px; width: 100%; min-width: 0; margin: 0 auto 18px; padding: 16px; border: 1px solid #dedbd5; border-radius: 18px; background: #fffdfa; color: #353b37; font-size: 16px; }
#studioScene .studio-scene-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
#studioScene .studio-scene-label { font-weight: 600; margin-right: 3px; }
#studioScene .studio-scene-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
#studioScene .studio-scene-zoom label { margin: 0; font: inherit; font-weight: 600; color: inherit; }
#studioScene .studio-scene-zoom input { flex: 1 1 100px; min-width: 0; max-width: 100%; width: 120px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--studio-ui-accent,#a94232); cursor: ew-resize; }
#studioScene #studioSceneZoomValue { min-width: 5ch; font: 16px/1.5 ui-monospace,Consolas,monospace; text-align: right; }
#studioScene #studioSceneHelp { margin: 0; color: #5b645d; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
/* Fixed design coordinates scale uniformly. Transparent canvas retains keyboard
   and pointer interaction in CSS fallback. Marks appear only on the logo plate. */
#studioScene #studioSceneFallback { position: absolute; inset: auto; left: 50%; top: 50%; width: 400px; height: 340px; margin: 0; perspective: 900px; transform: translate(-50%,-50%) scale(.65); transform-origin: center; pointer-events: none; --studio-scene-assembly: 0; --studio-scene-color: #cf4936; --studio-scene-highlight: .55; --studio-scene-shade: .24; }
#studioScene #studioSceneFallback[data-light="1"] { --studio-scene-light-x: 78%; --studio-scene-light-y: 20%; }
#studioScene #studioSceneFallback[data-light="0"] { --studio-scene-light-x: 24%; --studio-scene-light-y: 18%; }
#studioScene #studioSceneFallback[data-material="matte"] { --studio-scene-highlight: .13; --studio-scene-shade: .15; }
#studioScene #studioSceneFallback[data-material="metal"] { --studio-scene-highlight: .85; --studio-scene-shade: .42; }
#studioScene .studio-scene-fallback-orbit, #studioScene .studio-scene-fallback-planet, #studioScene .studio-scene-fallback-blocks { position: absolute; inset: 0; display: none; }
#studioScene #studioSceneFallback[data-shape="orbit"] > .studio-scene-fallback-orbit, #studioScene #studioSceneFallback[data-shape="planet"] > .studio-scene-fallback-planet, #studioScene #studioSceneFallback[data-shape="blocks"] > .studio-scene-fallback-blocks { display: block; }
#studioScene .studio-scene-fallback-ring, #studioScene .studio-scene-fallback-ticket, #studioScene .studio-scene-fallback-ball { display: none; }
#studioScene #studioSceneFallback[data-shape="ticket"] > .studio-scene-fallback-ring, #studioScene #studioSceneFallback[data-shape="ticket"] > .studio-scene-fallback-ball, #studioScene #studioSceneFallback[data-shape="ticket"] > .studio-scene-fallback-ticket { display: block; }
#studioScene .studio-scene-fallback-ring { position: absolute; width: 266px; height: 266px; left: 59px; top: 27px; border: 27px solid var(--studio-scene-color); border-radius: 50%; transform: translate(calc(-28px * var(--studio-scene-assembly)),calc(-12px * var(--studio-scene-assembly))) rotateX(22deg) rotateY(-32deg); box-shadow: inset -8px -6px 10px rgb(0 0 0 / var(--studio-scene-shade)),inset 7px 6px 7px rgb(255 255 255 / var(--studio-scene-highlight)),5px 13px 18px #51483d22; }
#studioScene .studio-scene-fallback-ticket { position: absolute; left: 153px; top: 59px; width: 166px; height: 247px; background: #fff9ef; border: 1px solid #d8cfc1; border-left: 7px solid var(--studio-scene-color); border-radius: 15px; box-shadow: 7px 8px 0 #ead5ca,17px 21px 22px #51483d22; transform: translate(calc(24px * var(--studio-scene-assembly)),calc(9px * var(--studio-scene-assembly))) rotateY(-21deg) rotateZ(calc(15deg - 10deg * var(--studio-scene-assembly))); }
#studioScene .studio-scene-fallback-ticket::before, #studioScene .studio-scene-fallback-ticket::after { content: ''; position: absolute; top: 67%; width: 14px; height: 14px; border-radius: 50%; background: #f7f4ed; }
#studioScene .studio-scene-fallback-ticket::before { left: -10px; }
#studioScene .studio-scene-fallback-ticket::after { right: -8px; }
#studioScene .studio-scene-relief-circle { position: absolute; left: 37px; top: 37px; width: 76px; height: 76px; border: 10px solid #f3e5d4; border-radius: 50%; box-shadow: inset 2px 3px 4px #987b5826,2px 3px 3px #987b5833; }
#studioScene .studio-scene-relief-bar { position: absolute; left: 33px; top: 142px; width: 84px; height: 14px; background: #f3e5d4; border-radius: 8px; box-shadow: 2px 3px 3px #987b5833; }
#studioScene .studio-scene-fallback-ball { position: absolute; width: 47px; height: 47px; left: 48px; top: 243px; transform: translate(calc(-14px * var(--studio-scene-assembly)),calc(-42px * var(--studio-scene-assembly))); }
#studioScene .studio-scene-fallback-ball, #studioScene .studio-scene-orbit-core, #studioScene .studio-scene-planet-half, #studioScene .studio-scene-planet-moon, #studioScene .studio-scene-block { border: 1px solid #59564c33; background-color: var(--studio-scene-color); background-image: radial-gradient(circle at var(--studio-scene-light-x,24%) var(--studio-scene-light-y,18%),rgb(255 255 255 / var(--studio-scene-highlight)),transparent 47%),linear-gradient(135deg,transparent 34%,rgb(0 0 0 / var(--studio-scene-shade))); box-shadow: 7px 12px 19px #51483d22; }
#studioScene .studio-scene-fallback-ball, #studioScene .studio-scene-orbit-core, #studioScene .studio-scene-planet-half, #studioScene .studio-scene-planet-moon { border-radius: 50%; }
#studioScene #studioSceneFallback[data-material="metal"] .studio-scene-fallback-ball, #studioScene #studioSceneFallback[data-material="metal"] .studio-scene-orbit-core, #studioScene #studioSceneFallback[data-material="metal"] .studio-scene-planet-half, #studioScene #studioSceneFallback[data-material="metal"] .studio-scene-planet-moon, #studioScene #studioSceneFallback[data-material="metal"] .studio-scene-block { background-image: linear-gradient(115deg,#ffffff99,transparent 22%,#161b224d 40%,#ffffffcc 47%,transparent 56%,#161b2266 82%,#ffffffaa); }
#studioScene #studioSceneFallback[data-material="metal"][data-light="1"] .studio-scene-fallback-ball, #studioScene #studioSceneFallback[data-material="metal"][data-light="1"] .studio-scene-orbit-core, #studioScene #studioSceneFallback[data-material="metal"][data-light="1"] .studio-scene-planet-half, #studioScene #studioSceneFallback[data-material="metal"][data-light="1"] .studio-scene-planet-moon, #studioScene #studioSceneFallback[data-material="metal"][data-light="1"] .studio-scene-block { background-image: linear-gradient(65deg,#ffffffaa,transparent 24%,#161b2266 39%,#ffffffcc 58%,transparent 68%,#ffffff99); }
/* Orbit: open intersecting hoops, not a ticket reskin. */
#studioScene .studio-scene-orbit-hoop { position: absolute; width: 277px; height: 277px; top: 32px; left: 61px; border: 17px solid var(--studio-scene-color); border-radius: 50%; box-shadow: inset -5px -4px 6px rgb(0 0 0 / var(--studio-scene-shade)),inset 4px 4px 5px rgb(255 255 255 / var(--studio-scene-highlight)),3px 5px 8px #51483d22; }
#studioScene .studio-scene-hoop-one { transform: translate(calc(-28px * var(--studio-scene-assembly)),calc(-24px * var(--studio-scene-assembly))) rotateZ(-26deg) rotateX(30deg); }
#studioScene .studio-scene-hoop-two { border-width: 14px; transform: translate(calc(32px * var(--studio-scene-assembly)),calc(18px * var(--studio-scene-assembly))) rotateZ(33deg) rotateY(64deg); }
#studioScene .studio-scene-hoop-three { border-width: 11px; transform: translateY(calc(-38px * var(--studio-scene-assembly))) rotateZ(-15deg) rotateX(68deg); }
#studioScene .studio-scene-orbit-core { position: absolute; left: 173px; top: 143px; width: 56px; height: 56px; transform: translateY(calc(29px * var(--studio-scene-assembly))); }
/* Planet: separated solid hemispheres with equatorial ring and moon. */
#studioScene .studio-scene-planet-half { position: absolute; left: 103px; top: 71px; width: 194px; height: 194px; }
#studioScene .studio-scene-planet-north { clip-path: inset(0 0 51% 0); transform: translateY(calc(-34px * var(--studio-scene-assembly))); }
#studioScene .studio-scene-planet-south { clip-path: inset(51% 0 0 0); transform: translateY(calc(34px * var(--studio-scene-assembly))); }
#studioScene .studio-scene-planet-belt { position: absolute; left: 48px; top: 127px; width: 304px; height: 82px; border: 12px solid var(--studio-scene-color); border-radius: 50%; box-shadow: 0 5px 0 #51483d22,inset 0 -4px 4px rgb(255 255 255 / var(--studio-scene-highlight)); transform: rotate(-13deg) scaleX(calc(1 + .10 * var(--studio-scene-assembly))); }
#studioScene .studio-scene-planet-moon { position: absolute; left: 309px; top: 46px; width: 43px; height: 43px; transform: translate(calc(17px * var(--studio-scene-assembly)),calc(-14px * var(--studio-scene-assembly))); }
/* Blocks: independently displaced bevelled solids. */
#studioScene .studio-scene-block { position: absolute; border-radius: 10px; box-shadow: inset -13px -9px 0 rgb(0 0 0 / var(--studio-scene-shade)),inset 5px 5px 0 rgb(255 255 255 / var(--studio-scene-highlight)),7px 10px 0 #80796f,13px 22px 20px #51483d22; }
#studioScene .studio-scene-block-one { left: 89px; top: 175px; width: 71px; height: 117px; transform: translate(calc(-28px * var(--studio-scene-assembly)),calc(18px * var(--studio-scene-assembly))) skewY(-8deg); }
#studioScene .studio-scene-block-two { left: 227px; top: 207px; width: 79px; height: 85px; transform: translate(calc(30px * var(--studio-scene-assembly)),calc(12px * var(--studio-scene-assembly))) skewY(7deg); }
#studioScene .studio-scene-block-three { left: 76px; top: 132px; width: 238px; height: 57px; transform: translateY(calc(-18px * var(--studio-scene-assembly))) rotate(calc(-3deg - 7deg * var(--studio-scene-assembly))); }
#studioScene .studio-scene-block-four { left: 108px; top: 53px; width: 80px; height: 79px; transform: translate(calc(-18px * var(--studio-scene-assembly)),calc(-42px * var(--studio-scene-assembly))) rotate(-7deg); }
#studioScene .studio-scene-block-five { left: 236px; top: 65px; width: 59px; height: 59px; transform: translate(calc(23px * var(--studio-scene-assembly)),calc(-25px * var(--studio-scene-assembly))) rotate(calc(22deg + 18deg * var(--studio-scene-assembly))); }
/* The logo itself is the 3D object: the unmodified official image is extruded
   into a relief whose silhouette follows the mark. Companion base is separate. */
#studioScene .studio-scene-logo-status { margin: 0; color: #5b645d; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
#studioScene .studio-scene-fallback-logo { display: none; position: absolute; inset: 0; transform-style: preserve-3d; }
#studioScene #studioSceneFallback[data-shape="logo"] > .studio-scene-fallback-logo { display: block; }
#studioScene .studio-scene-logo-extrude {
  position: absolute; left: 60px; top: 52px;
  transform: translateY(calc(-20px * var(--studio-scene-assembly)));
  transform-style: preserve-3d;
}
#studioScene .studio-scene-logo-extrude img.studio-scene-logo-slab {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; object-fit: contain; display: block;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  filter: none; opacity: 1; mix-blend-mode: normal;
}
#studioScene #studioSceneLogoPlaceholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #444a43; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
#studioScene #studioSceneFallback[data-logo-status="ready"] #studioSceneLogoPlaceholder { display: none !important; }
#studioScene #studioSceneFallback[data-logo-status="error"] #studioSceneLogoPlaceholder { display: flex; }
#studioScene .studio-scene-logo-extrude img:nth-child(n+2) { filter: brightness(.78) saturate(.9); }
#studioScene .studio-scene-logo-base { position: absolute; left: 95px; top: 248px; width: 210px; height: 78px; border-radius: 34px; background-color: var(--studio-scene-color); background-image: radial-gradient(ellipse at var(--studio-scene-light-x,24%) var(--studio-scene-light-y,18%),rgb(255 255 255 / var(--studio-scene-highlight)),transparent 65%),linear-gradient(135deg,transparent 40%,rgb(0 0 0 / var(--studio-scene-shade))); box-shadow: inset 0 5px 7px #ffffff55,3px 7px 0 #8f8372,8px 19px 22px #51483d22; transform: translateY(calc(16px * var(--studio-scene-assembly))); }
#studioScene .studio-scene-face { position: absolute; left: 47px; top: 11px; width: 116px; height: 53px; border-radius: 19px; background: #fff7e6; }
#studioScene .studio-scene-eye { position: absolute; top: 14px; width: 8px; height: 9px; border-radius: 50%; background: #29312f; }
#studioScene .studio-scene-eye-left { left: 25px; }
#studioScene .studio-scene-eye-right { right: 25px; }
#studioScene .studio-scene-mouth { position: absolute; left: 48px; top: 34px; width: 20px; height: 3px; border-radius: 2px; background: #29312f; }
#studioScene #studioSceneFallback[data-mood="happy"] .studio-scene-eye { top: 13px; width: 14px; height: 9px; background: transparent; border-top: 3px solid #29312f; border-radius: 50% 50% 0 0; }
#studioScene #studioSceneFallback[data-mood="happy"] .studio-scene-mouth { left: 42px; top: 29px; width: 32px; height: 15px; background: transparent; border-bottom: 4px solid #29312f; border-radius: 0 0 50% 50%; }
#studioScene #studioSceneFallback[data-mood="focused"] .studio-scene-eye { top: 21px; width: 13px; height: 4px; border-radius: 2px; }
#studioScene #studioSceneFallback[data-mood="focused"] .studio-scene-eye::before { content: ''; position: absolute; top: -9px; left: -2px; width: 17px; height: 3px; background: #29312f; transform: rotate(12deg); }
#studioScene #studioSceneFallback[data-mood="focused"] .studio-scene-eye-right::before { transform: rotate(-12deg); }
#studioScene #studioSceneFallback[data-mood="focused"] .studio-scene-mouth { left: 50px; width: 16px; height: 4px; }
#studioScene #studioSceneFallback[data-mood="tired"] .studio-scene-eye { top: 21px; width: 14px; height: 3px; border-radius: 2px; }
#studioScene #studioSceneFallback[data-mood="tired"] .studio-scene-mouth { left: 53px; top: 32px; width: 10px; height: 12px; background: transparent; border: 2px solid #29312f; border-radius: 50%; }
#studioScene #studioSceneFallback[data-mood="playful"] .studio-scene-eye-right { top: 18px; width: 14px; height: 3px; transform: rotate(-14deg); border-radius: 2px; }
#studioScene #studioSceneFallback[data-mood="playful"] .studio-scene-mouth { left: 45px; top: 28px; width: 30px; height: 15px; background: transparent; border-bottom: 4px solid #29312f; border-radius: 0 0 50% 50%; transform: rotate(-12deg); }
#studioScene #studioSceneFallback[data-mood="off"] .studio-scene-face > * { display: none; }
@media (max-width: 1100px) { #studioScene .studio-scene-stage { height: 370px; } }
@media (max-width: 760px) { #studioScene .studio-scene-stage { height: 310px; } }
@media (max-width: 480px) {
  #studioScene .studio-scene-controls { padding: 12px; gap: 10px; }
  #studioScene .studio-scene-label { flex: 0 0 100%; }
  #studioScene .studio-scene-choices { gap: 8px; }
  #studioScene .studio-scene-choices button { flex: 1 1 auto; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) { #studioScene *, #studioScene *::before, #studioScene *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  #studioScene button[aria-pressed="true"] { outline: 2px solid Highlight; }
  #studioScene #studioSceneFallback { forced-color-adjust: none; }
}
@media print { #studioScene { display: none !important; } }
