:root { color-scheme: light; --paper: #eeeae4; --ink: #292c2a; --muted: #747770; --line: #d0d0c7; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, canvas:focus-visible { outline: 2px solid #535f53; outline-offset: 5px; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.studio { min-height: 100svh; display: flex; flex-direction: column; max-width: 2200px; margin: 0 auto; }
.masthead { margin: 0 48px; min-height: 95px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.wordmark { display: block; width: 119px; height: auto; filter: invert(1); mix-blend-mode: multiply; }
.edition { display: flex; gap: 22px; align-items: center; font-size: 13px; color: #61675f; }
.edition a { color: inherit; text-decoration: underline; text-decoration-color: #afb3a8; text-underline-offset: 4px; }
.edition a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.edition a:focus-visible { outline: 2px solid #535f53; outline-offset: 5px; }
.experience { flex: 1; min-height: 490px; position: relative; }
.product-intro { position: absolute; left: 48px; top: 32px; z-index: 2; pointer-events: none; }
h1 { font-size: 29px; font-weight: 500; letter-spacing: -1px; line-height: 1; margin: 0 0 10px; }
.product-intro p { margin: 0; color: #747970; font-size: 13px; }
.viewer { position: absolute; inset: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
canvas.is-clickable { cursor: pointer; }
.object-label { position: absolute; bottom: 21px; left: 48px; margin: 0; font-size: 13px; pointer-events: none; color: #535a51; }
.gesture-hint { position: absolute; bottom: 21px; right: 48px; margin: 0; font-size: 12px; color: #73786f; pointer-events: none; }
.gesture-hint span { margin: 0 7px; }
.loading { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); text-align: center; color: var(--muted); font-size: 13px; }
.loading-line { width: 54px; height: 1px; display: block; margin: 0 auto 18px; background: #b2b7ac; animation: breathe 1.5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleX(.35); opacity: .3; } }
.load-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 400px; width: calc(100% - 48px); font-size: 14px; }
#error-detail { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; line-height: 1.6; }
.load-error button { border: 1px solid var(--line); padding: 10px 18px; background: transparent; color: var(--ink); }
.controls-area { display: grid; grid-template-columns: auto 1fr; margin: 0 48px; border-top: 1px solid var(--line); padding: 23px 0 22px; align-items: center; column-gap: 32px; row-gap: 14px; flex-shrink: 0; }
.controls-main { display: flex; align-items: center; gap: 10px; }
.button { height: 43px; padding: 0 20px; border: 1px solid #c4c7bd; border-radius: 3px; background: transparent; color: var(--ink); font-size: 13px; transition: background .18s ease, opacity .18s ease; }
.button:hover { background: #e4e2db; }
.button-primary { min-width: 139px; background: var(--ink); border-color: var(--ink); color: #f6f4ee; display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; }
.button-primary:hover { background: #454b43; }
.button-primary span { font-size: 19px; line-height: 1; }
.button-text { border-color: transparent; color: #646a60; }
.button-text:hover { background: transparent; color: var(--ink); }
.button:disabled { opacity: .34; }
.sachet-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.sachet-label { margin-right: 12px; font-size: 12px; color: #646b60; }
.sachet-button { width: 41px; height: 41px; border: 1px solid #c4c7bd; border-radius: 3px; background: transparent; color: #454d42; font-size: 12px; transition: background .2s ease, opacity .2s ease; }
.sachet-button:hover { background: #e3e3da; }
.sachet-button[aria-pressed="true"] { background: #dde1d7; border-color: #7d8877; }
.sachet-button:disabled { opacity: .34; }
.return-button { margin-left: 10px; padding: 8px 0 8px 12px; border: 0; background: transparent; color: #434d3e; font-size: 12px; }
.return-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.return-button:disabled { opacity: .4; cursor: default; }
.flip-button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
.state-text { grid-column: 1 / -1; margin: 0; min-height: 17px; color: #70786a; font-size: 12px; }
.noscript { position: fixed; inset: 40% 0 auto; text-align: center; }
.gallery { max-width: 1440px; margin: 0 auto; }
.gallery-intro { margin: 39px 48px 30px; }
.gallery-intro h1 { margin-bottom: 20px; }
.gallery-nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; }
.gallery-nav a { color: #636a5f; text-decoration: none; }
.gallery-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.render-figure { margin: 0 48px 48px; scroll-margin-top: 25px; }
.render-figure img { width: 100%; height: auto; display: block; }
.render-figure figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 13px; font-size: 13px; color: #60685c; }
.render-figure figcaption a { color: inherit; text-decoration: none; }
.render-figure figcaption a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 650px) { .edition { gap: 14px; } .gallery-intro { margin: 30px 22px 25px; } .render-figure { margin: 0 0 34px; } .render-figure figcaption { padding: 12px 22px 0; font-size: 12px; } .gallery-nav { gap: 17px; font-size: 12px; } }
@media (min-width: 1500px) { .experience { min-height: 650px; } }
@media (max-width: 850px) { .masthead { min-height: 78px; margin: 0 28px; } .product-intro { left: 28px; top: 27px; } .controls-area { margin: 0 28px; gap: 17px; } .button { padding: 0 15px; } .button-primary { min-width: 125px; } .sachet-label { margin-right: 4px; } .gesture-hint { right: 28px; } .object-label { left: 28px; } .return-button { margin-left: 0; padding-left: 5px; font-size: 11px; } }
@media (max-width: 650px) { .masthead { min-height: 69px; margin: 0 22px; } .wordmark { width: 102px; } .edition { font-size: 11px; } .experience { min-height: 440px; } .product-intro { left: 22px; top: 27px; } h1 { font-size: 26px; margin-bottom: 9px; } .product-intro p { font-size: 11px; } .object-label { left: 22px; bottom: 20px; font-size: 11px; } .gesture-hint { right: 22px; bottom: 20px; font-size: 10px; } .gesture-hint span { margin: 0 3px; } .controls-area { grid-template-columns: 1fr; margin: 0 22px; padding-top: 19px; padding-bottom: 20px; gap: 17px; } .controls-main { justify-content: stretch; gap: 8px; } .button { height: 42px; padding: 0 15px; font-size: 12px; } .button-primary { flex: 1; } .sachet-controls { justify-content: flex-start; } .sachet-label { margin-right: 10px; } .sachet-button { width: 37px; height: 35px; } .return-button { margin-left: 0; padding-left: 5px; font-size: 12px; } .flip-button { margin-left: auto; } .state-text { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.controls-area {grid-template-columns:1fr auto}.drawer-control{display:flex;align-items:center;gap:18px;min-width:200px}.drawer-control label{font-size:12px;color:#646b60}.drawer-control input{width:180px;accent-color:#454b43}.sachet-controls{grid-column:1 / -1;justify-content:flex-start}.sachet-label{margin-left:18px}.experience{min-height:520px}.state-text{line-height:1.5}@media(max-width:650px){.controls-area{grid-template-columns:1fr}.drawer-control{grid-column:1;justify-content:space-between}.drawer-control input{flex:1}.sachet-controls{gap:6px}.sachet-label{margin-left:4px}.sachet-controls .button{padding:0 12px}.experience{min-height:450px}.gesture-hint{display:none}}