.in-studio { background: #112820; }
.studio-screen { min-height: 100svh; max-width: 1440px; margin: auto; padding: 0 32px; }
.studio-header { height: 82px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #d3cd9e26; }
.studio-back { display: flex; align-items: center; gap: 8px; min-height: 44px; color: #f0d69d; font-size: 16px; }
.studio-identity { text-align: center; margin: auto; }
.studio-identity>span { color: #a4bda7; font-size: 10px; letter-spacing: 2px; }
.studio-identity h1 { font-size: 22px; margin: 4px 0 0; line-height: 1.2; letter-spacing: -.5px; }
.studio-identity h1:focus { outline: none; }
.motion-toggle { background: #ffffff0b; border: 1px solid #ffffff26; width: 44px; height: 44px; border-radius: 50%; color: #f0d69d; }
.motion-toggle:disabled { opacity: .55; cursor: default; }
.studio-layout { display: grid; grid-template-columns: minmax(170px,1fr) minmax(330px,520px) minmax(220px,1fr); gap: 32px; align-items: center; min-height: calc(100svh - 125px); }
.studio-journal { max-width: 260px; }
.studio-journal h2 { font-size: 32px; font-weight: 500; line-height: 1.5; color: #f0d69d; margin: 24px 0; }
.studio-journal>p { font-size: 16px; line-height: 1.9; color: #b7c7ae; }
.studio-rule { height: 2px; width: 35px; background: #c4a56a; margin: 28px 0; }
.studio-help { font-size: 20px!important; color: #efe7d1!important; }
.studio-demo { display: block; font-size: 12px; color: #a6bba3; line-height: 1.6; }
.studio-stage { width: 100%; display: flex; justify-content: center; padding: 14px 0; }
.studio-scene { position: relative; width: min(100%,calc((100svh - 154px)*2/3)); aspect-ratio: 2/3; overflow: hidden; isolation: isolate; border: 1px solid #d9bf8455; border-radius: 8px; box-shadow: 0 20px 80px #0006; background: #253f30; --sprite-row: 0%; }
#studio-art { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: pixelated; }
.studio-screen[data-ready="true"] #studio-art { animation: studio-arrival .5s ease-out both; }
.worker { position: absolute; left: 22%; top: 43%; width: 56%; aspect-ratio: 1; background: none; border: 0; padding: 0; border-radius: 12%; z-index: 3; }
.worker-sprite { display: block; width: 100%; height: 100%; background-image: url('./assets/workers.png'); background-size: 400% 500%; background-position: 0% var(--sprite-row); image-rendering: pixelated; animation: worker-cycle 1.65s steps(1,end) infinite; filter: drop-shadow(1px 5px 2px #26150644); }
.worker:focus-visible { outline: 3px dashed #ffeab9; outline-offset: 3px; }
.worker-prompt { display: flex; justify-content: center; align-items: center; gap: 6px; width: max-content; max-width: 110%; margin: -4px auto 0; padding: 7px 10px; background: #182f29e8; border: 1px solid #e8c988; color: #f6e8c3; border-radius: 6px; font-size: 12px; box-shadow: 0 3px 0 #0c2219; }
.worker-prompt b { color: #e9c67a; }
.worker-shadow { position: absolute; left: 32%; top: 69%; width: 37%; height: 5%; background: #38240e44; filter: blur(5px); border-radius: 50%; }
.studio-screen[data-department="site"] .worker { left: 23%; top: 42%; }
.studio-screen[data-department="structure"] .worker { top: 42%; }
.work-effect { position: absolute; left: 60%; top: 44%; color: #ffe59a; opacity: 0; font-size: 30px; pointer-events: none; z-index: 4; text-shadow: 0 0 12px #ffcd4b; }
.working .work-effect { animation: work-spark .9s ease-out; }
.working .worker-sprite { animation-duration: .7s; }
.studio-atmosphere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.studio-atmosphere i { position: absolute; width: 3px; height: 3px; background: #fbe6ad; box-shadow: 0 0 7px #ffecb7; opacity: 0; left: 18%; top: 76%; animation: mote-drift 7s ease-in-out infinite; }
.studio-atmosphere i:nth-child(2) { left: 35%; top: 45%; animation-delay: -2s; }
.studio-atmosphere i:nth-child(3) { left: 75%; top: 63%; animation-delay: -5s; }
.studio-atmosphere i:nth-child(4) { left: 64%; top: 33%; animation-delay: -3s; }
.studio-atmosphere i:nth-child(5) { left: 20%; top: 35%; animation-delay: -6s; }
.studio-atmosphere i:nth-child(6) { left: 80%; top: 82%; animation-delay: -4s; }
.studio-screen[data-department="ai"] .studio-atmosphere i { background: #ffad48; box-shadow: 0 0 9px #ff7722; }
.studio-activity { max-width: 300px; justify-self: center; width: 100%; }
.worker-dialogue { padding: 22px; background: #f1e7cd; color: #233d2a; border: 1px solid #fce8b5; border-radius: 3px 16px 16px 16px; box-shadow: 5px 6px 0 #071e1955; min-height: 165px; }
.speaker { color: #6e744f; font-size: 12px; font-weight: 600; }
.worker-dialogue p { font-size: 16px; line-height: 1.85; margin: 12px 0 0; }
.work-progress { display: flex; justify-content: space-between; gap: 8px; margin: 24px 0 10px; font-size: 13px; color: #c2d0b8; }
.activity-track { height: 5px; border-radius: 5px; background: #ffffff15; overflow: hidden; }
.activity-track>span { display: block; height: 100%; width: 0; background: #dcc184; transition: width .25s; }
.studio-action { width: 100%; min-height: 48px; margin-top: 18px; background: #ead099; color: #1d3828; border: 1px solid #ffedb6; border-radius: 7px; font-size: 16px; box-shadow: 0 3px 0 #6b603d; }
.studio-action:hover { background: #ffe6ab; }
.studio-action:disabled { opacity: .5; cursor: progress; }
.studio-tools { display: flex; gap: 8px; margin-top: 14px; }
.studio-tools button { flex: 1; min-height: 44px; border: 1px solid #d3cd9e26; border-radius: 6px; background: #ffffff05; font-size: 13px; }
.mobile-demo { display: none; }
.studio-footer { min-height: 43px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #d3cd9e26; font-size: 10px; letter-spacing: 1.5px; color: #8eab91; }
.studio-loading,.studio-asset-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #233d32; color: #eee1bd; z-index: 5; padding: 20px; }
.studio-asset-error p { font-size: 16px; line-height: 1.7; }
.studio-asset-error button,.studio-asset-error a { min-height: 44px; margin-top: 12px; padding: 12px 18px; background: #e7cf98; color: #203b29; border-radius: 6px; }
.studio-screen[data-paused="true"] *, .studio-screen[data-paused="true"] *::before, .studio-screen[data-paused="true"] *::after { animation-play-state: paused!important; }
@keyframes worker-cycle { 0% { background-position: 0% var(--sprite-row); } 25% { background-position: 33.333333% var(--sprite-row); } 50% { background-position: 66.666667% var(--sprite-row); } 75%,100% { background-position: 100% var(--sprite-row); } }
@keyframes mote-drift { 0%,100% { opacity: 0; transform: translate(0,0); } 30% { opacity: .65; } 70% { opacity: .25; transform: translate(12px,-40px); } }
@keyframes work-spark { 0% { opacity: 0; transform: translateY(10px) scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(1.3); } }
@keyframes studio-arrival { from { opacity: .3; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@media(max-width:899px) {
  .studio-screen { padding: 0 12px 12px; max-width: 600px; }
  .studio-header { height: 65px; gap: 8px; }
  .studio-back { font-size: 22px; width: 44px; }
  .studio-back span { display: none; }
  .studio-identity h1 { font-size: 20px; }
  .studio-identity>span { font-size: 8px; letter-spacing: 1.4px; }
  .studio-layout { display: flex; flex-direction: column; gap: 0; min-height: auto; }
  .studio-journal,.studio-footer { display: none; }
  .studio-stage { padding: 10px 0; }
  .studio-scene { width: min(100%,calc((100svh - 350px)*2/3)); min-width: 180px; }
  .studio-activity { max-width: none; }
  .worker-dialogue { min-height: 70px; padding: 10px 14px; border-radius: 4px 12px 12px 12px; }
  .worker-dialogue p { font-size: 14px; line-height: 1.5; margin-top: 4px; }
  .speaker { font-size: 11px; }
  .work-progress { margin: 12px 0 6px; font-size: 12px; }
  .studio-action { min-height: 44px; margin-top: 10px; font-size: 14px; }
  .studio-tools { margin-top: 8px; gap: 8px; }
  .studio-tools button { min-height: 44px; font-size: 12px; }
  .mobile-demo { display: block; text-align: center; margin-top: 8px; font-size: 10px; }
  .worker-prompt { font-size: 10px; padding: 5px 7px; }
}
@media(prefers-reduced-motion:reduce) { .studio-screen *, .studio-screen *::before,.studio-screen *::after { animation: none!important; transition: none!important; } }