:root { color-scheme: light; --paper: #fff9f0; --ink: #24201b; --muted: #797064; --border: #e6dfd4; --frame: 39,32,23; --glass: 255,249,239; --accent: #93683d; --control-border: #1D1D1F; --control-hover: #1D1D1F; --panel-shadow: 2px 2px 0 rgba(80,65,55,.55); --panel-hover-shadow: 3px 3px 0 rgba(80,65,55,.65); }
:root[data-theme="dark"] { color-scheme: dark; --paper: #1a1714; --ink: #fff9f0; --muted: #bcb3a8; --border: #453d35; --frame: 244,236,222; --accent: #bda078; --glass: 26,23,20; --control-border: #3C3630; --control-hover: #EDE5DA; --panel-shadow: none; --panel-hover-shadow: none; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; transition: background .6s,color .6s; }
button,a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible,a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.page { width: calc(100% - 32px); margin: 16px auto 0; }
.hero { position: relative; height: var(--hero-height,calc(100svh - 32px)); overflow: clip; isolation: isolate; border-radius: 10px; border: 2px solid var(--control-border); background: var(--paper); container-type: inline-size; box-shadow: var(--panel-shadow); transition: border-color .2s,box-shadow .2s; }
.hero:hover { border-color: var(--control-hover); box-shadow: var(--panel-hover-shadow); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 90% 28%; display: block; transition: opacity .65s; pointer-events: none; }
.home-header { position:absolute; inset:clamp(18px,3.2vw,52px) clamp(18px,3.2vw,52px) auto; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:16px; pointer-events:none; }
.home-header > * { pointer-events:auto; }
.brand { position:static; width:clamp(110px,10vw,150px); flex-shrink:0; }
.brand img { display: block; width: 100%; height: auto; }
.utilities { position:relative; display:flex; align-items:center; gap:8px; }
.utilities button { border: 2px solid var(--control-border); border-radius: 9px; height: 44px; padding: 0 16px; background: rgba(var(--glass),.75); color: var(--ink); font-size: 15px; transition: background .2s,border-color .2s; }
.utilities button:hover { background: rgba(var(--glass),.88); border-color: var(--control-hover); }
.utilities #theme-button { background: rgba(var(--glass),.75); }
.utilities #theme-button:hover { background: rgba(var(--glass),.88); }
.theme-button:disabled { opacity: .6; cursor: wait; }
:root[data-theme="dark"] .brand img,:root[data-theme="dark"] .footer-brand img { filter: invert(.97) sepia(.12); }
:root[data-theme="dark"] .term-tooltip { color: var(--ink); text-shadow: 0 0 3px #1a1714; }
:root[data-theme="dark"] .term-category,:root[data-theme="dark"] .term-detail { color: var(--ink); }
.login span { margin-left: 9px; }
.intro { position: absolute; left: 4.5%; top: 26%; width: 37%; z-index: 5; }
h1 { margin: 0; font-size: clamp(36px,3.6cqw,58px); line-height: 1.27; font-weight: 850; letter-spacing: -.04em; white-space: nowrap; }
.actions { position: relative; display: inline-flex; margin-top: 2cqw; }
.entry-options { position: absolute; top: 100%; left: 0; width: 100%; min-width: 100%; padding-top: 8px; display: grid; gap: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s; }
.actions.is-open .entry-options { opacity: 1; visibility: visible; pointer-events: auto; }
.entry-options .entry { justify-content: space-between; gap: 8px; }
.entry { display: inline-flex; justify-content: center; align-items: center; gap: 20px; padding: 13px 18px; border: 2px solid var(--control-border); border-radius: 9px; text-decoration: none; font-size: clamp(14px,1cqw,16px); font-weight: 600; white-space: nowrap; transition: border-color .25s,translate .25s,background .25s; }
.primary { background: rgba(var(--glass),.75); color: var(--ink); }
.secondary { background: rgba(var(--glass),.75); color: var(--ink); }
.entry:hover { translate: 0 -2px; border-color: var(--control-hover); }
#explore-button { gap: 8px; font-size: clamp(16px,1.14cqw,18px); padding: 15px 20px; }
.entry-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; line-height: 1; flex-shrink: 0; }
.entry-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.viewfinder-space { position: absolute; left: 42%; top: 18%; width: 54%; height: 64%; z-index: 2; perspective: 1100px; pointer-events: none; }
.viewfinder { width: 100%; height: 100%; transform-origin: center; transform-style: preserve-3d; }
.viewfinder svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; }
.viewfinder path { vector-effect: non-scaling-stroke; }
.thirds { stroke: rgba(var(--frame),.24); stroke-width: 1.2; }
.frame-edge { stroke: rgba(var(--frame),.14); stroke-width: 2.2; }
.corners { stroke: rgba(var(--frame),.85); stroke-width: 3.4; }
.frame-caption { position: absolute; top: -18px; right: 0; font-size: 9px; letter-spacing: .15em; color: rgba(var(--frame),.62); }
.regions { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.region { position: absolute; border: 0; padding: 0; border-radius: 32%; background: transparent; cursor: crosshair; pointer-events: auto; }
.region:focus-visible { outline: 1px dashed var(--accent); outline-offset: 0; }
[data-region="sketch"] { left: 20%; top: 32%; width: 36%; height: 57%; }
[data-region="castle"] { left: 77%; top: 43%; width: 8.5%; height: 10%; }
[data-region="bridge"] { left: 60.8%; top: 57.5%; width: 18.5%; height: 8.5%; }
[data-region="traveler"] { left: 73.2%; top: 69.5%; width: 4%; height: 13.5%; z-index: 1; }
[data-region="light"] { left: 62%; top: 8%; width: 29%; height: 32%; }
[data-region="tone"] { left: 79%; top: 70%; width: 19%; height: 18%; }
[data-region="lighting"] { left: 48.5%; top: 5%; width: 9%; height: 11%; }
[data-region="layout"] { left: 77.5%; top: 69.5%; width: 4%; height: 13.5%; z-index: 1; }
[data-region="midtone"] { left: 80%; top: 66%; width: 8%; height: 4%; }
[data-region="negative"] { left: 20%; top: 10%; width: 33%; height: 18%; }
[data-region="wasteland"] { left: 79%; top: 53%; width: 6%; height: 10%; z-index: 1; }
[data-region="wide"] { left: 64%; top: 51%; width: 7%; height: 6%; }
[data-region="lens"] { left: 70%; top: 68%; width: 3%; height: 11%; }
[data-region="blue"] { left: 79%; top: 13%; width: 17%; height: 23%; }
[data-region="candle"] { left: 85.5%; top: 46%; width: 3.8%; height: 6%; z-index: 1; }
.region[hidden] { display: none; }
:root[data-theme="dark"] [data-region="light"] { width: 15%; }
[data-region="foreground"] { left: 89%; top: 75.8%; width: 11%; height: 24.2%; }
.term-tooltip { position: absolute; z-index: 8; display: grid; gap: 4px; max-width: 260px; padding: 10px 13px; background: rgba(var(--glass),.6); color: #000; text-shadow: 0 0 3px rgba(255,255,255,.8); border: 2px solid var(--control-hover); border-radius: 9px; box-shadow: var(--panel-shadow); pointer-events: none; animation: label-in .18s ease-out; }
.term-tooltip[hidden] { display: none; }
.term-tooltip { overflow: hidden; isolation: isolate; clip-path: inset(0 round 9px); }
.term-category { font-size: 13px; color: #000; letter-spacing: .09em; line-height: 1.4; }
.term-tooltip strong { font-size: 14px; font-weight: 650; line-height: 1.4; }
.term-detail { font-size: 13px; color: #000; line-height: 1.4; }
.guide { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; opacity: 0; }
.guide.is-active { opacity: 1; }
.guide path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.guide-track { opacity: .28; }
.guide-flow { stroke-dasharray: 1; stroke-dashoffset: 1; }
.guide.is-active .guide-flow { animation: guide-draw 1.1s ease both; }
.guide circle { fill: var(--accent); opacity: .7; }
.entry.is-guided { animation: button-cue 1.8s .8s ease both; }
@keyframes label-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes guide-draw { to { stroke-dashoffset: 0; } }
@keyframes button-cue { 40% { border-color: var(--control-hover); background: rgba(var(--glass),.88); } }
@media (max-width: 1100px) { .actions { gap: 8px; } .entry { padding: 11px 13px; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } .guide.is-active .guide-flow { stroke-dashoffset: 0; } }



.middle-layer { position: absolute; inset: auto; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.fixed-top { z-index: 3; }
.fixed-foreground { z-index: 3; }
.moving-regions { transform-origin: 0 0; }

.fixed-top,.fixed-foreground { height: auto; aspect-ratio: 16/9; }
.fixed-top { inset: 0 0 auto; transform: translateY(var(--top-shift,0px)); }
.fixed-foreground { inset: auto 0 0; transform: translateY(var(--foreground-shift,0px)); }
.fixed-regions { top: auto; height: auto; aspect-ratio: 16/9; transform: translateY(var(--foreground-shift,0px)); }
.lighting-regions { bottom: auto; height: auto; aspect-ratio: 16/9; transform: translateY(var(--top-shift,0px)); z-index: 5; }

@media (min-width: 960px) and (max-width: 1199px) {
  .intro { width: 34%; }
  h1 { font-size: 36px; }
  .utilities { gap: 6px; }
  .utilities button { padding: 0 12px; }
}
@media (max-width: 959px) {
  .home-header { inset:18px 18px auto; gap:12px; }
  .brand { width:clamp(86px,24vw,110px); }
  .utilities { gap:6px; }
  .utilities button { height: 34px; padding: 0 8px; font-size: 12px; border-radius: 7px; }
  .login span { margin-left: 4px; }
  .intro { left: 6%; top: 16%; width: 88%; }
  h1 { font-size: clamp(28px,7.4vw,36px); }
  .actions { margin-top: 18px; }
  .entry { font-size: 14px; padding: 10px 13px; }
  #explore-button { font-size: 16px; padding: 12px 15px; }
  .frame-caption { font-size: 8px; letter-spacing: .1em; }
}