:root {
  --bg: #070a13;
  --bg-2: #0b1020;
  --panel: rgba(18, 25, 45, .78);
  --panel-solid: #11182b;
  --line: rgba(154, 181, 219, .18);
  --line-hot: rgba(92, 229, 203, .52);
  --text: #f3f5f9;
  --muted: #a7b1c4;
  --orange: #ff9655;
  --mint: #5ce5cb;
  --blue: #77a7ff;
  --max: 1240px;
  --radius: 8px;
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); background:
    radial-gradient(circle at var(--mx, 75%) var(--my, 12%), rgba(65, 111, 189, .12), transparent 26rem),
    linear-gradient(180deg, #070a13 0%, #090d18 55%, #070a13 100%);
  font-family: var(--body); line-height: 1.6; min-height: 100vh; overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .24;
  background-image: linear-gradient(rgba(119,167,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(119,167,255,.09) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 76%);
}
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:20; box-shadow:inset 0 0 90px rgba(0,0,0,.4); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; width: 100%; }
em { color: var(--orange); font-style: normal; }

.section-shell { width: min(var(--max), calc(100% - 64px)); margin-inline: auto; }
.section-block { padding-block: 130px; }
.page-main { padding-top: 170px; min-height: 75vh; }
.eyebrow { margin: 0 0 18px; color: var(--mint); font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow::before { content: "//"; margin-right: .75em; color: var(--orange); }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--display); letter-spacing: -.035em; line-height: 1.05; }
h1 { font-size: clamp(3.35rem, 7vw, 7rem); }
h2 { font-size: clamp(2.25rem, 4.5vw, 4.65rem); }
h3 { font-size: 1.45rem; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between;
  height: 86px; padding: 0 max(32px, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid transparent; transition: .25s ease;
}
.site-header.scrolled { height: 68px; background: rgba(7,10,19,.86); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { display: inline-flex; gap: 12px; align-items: center; font-size: .82rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.brand > span { display: grid; place-items: center; width: 32px; aspect-ratio: 1; color: #081119; background: var(--mint); border-radius: 3px 10px 3px 3px; font-weight: 950; box-shadow: 0 0 24px rgba(92,229,203,.22); }
.site-nav { display: flex; gap: 8px; align-items: center; }
.site-nav a { padding: 10px 13px; color: var(--muted); font-size: .79rem; font-weight: 700; letter-spacing: .04em; border: 1px solid transparent; }
.site-nav a:hover,.site-nav a.active { color: var(--text); border-color: var(--line); background: rgba(255,255,255,.025); }
.site-nav .nav-contact { min-width:auto; margin-left:8px; padding-right:16px; color:#031013; border-color:var(--mint); background:var(--mint); box-shadow:3px 3px 0 rgba(184,55,255,.55),0 0 16px rgba(32,224,225,.18); }
.site-nav .nav-contact::before { color:#174147; }
.site-nav .nav-contact:hover,.site-nav .nav-contact:focus-visible { color:#031013; border-color:#a8ffff; background:#7affff; box-shadow:3px 3px 0 rgba(184,55,255,.78),0 0 20px rgba(32,224,225,.4); }
.nav-toggle { display:none; border:0; background:none; padding:12px; }

.hero { padding-top: 190px; }
.hero-grid { min-height: 590px; display: grid; grid-template-columns: 1.4fr .72fr; gap: clamp(50px, 8vw, 130px); align-items: center; }
.hero h1 { margin-bottom: 30px; max-width: 900px; }
.hero-intro { max-width: 660px; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.22rem); }
.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:36px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding: 0 22px; border:1px solid var(--line); font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; transition:.2s ease; }
.button span { margin-left: 18px; }
.button-primary { color:#07110f; background:var(--mint); border-color:var(--mint); box-shadow: 5px 5px 0 rgba(92,229,203,.15); }
.button-primary:hover { transform:translate(-2px,-2px); box-shadow: 8px 8px 0 rgba(92,229,203,.14); }
.button-quiet:hover,.button-outline:hover { border-color:var(--mint); color:var(--mint); }

.hero-panel { position:relative; min-height: 420px; padding: 42px; overflow:hidden; border:1px solid var(--line-hot); border-radius: var(--radius); background:linear-gradient(145deg, rgba(18,28,48,.92), rgba(9,15,29,.72)); box-shadow: 0 30px 90px rgba(0,0,0,.38); transform-style:preserve-3d; transition:transform .15s ease-out; }
.hero-panel::before,.hero-panel::after { content:""; position:absolute; width:18px; height:18px; border-color:var(--mint); }
.hero-panel::before { left:9px; top:9px; border-left:2px solid; border-top:2px solid; }
.hero-panel::after { right:9px; bottom:9px; border-right:2px solid; border-bottom:2px solid; }
.hero-panel > * { position:relative; z-index:1; transform:translateZ(12px); }
.hero-panel h2 { max-width:440px; margin-top:70px; font-size:clamp(2rem,3vw,3.25rem); }
.hero-panel p:not(.panel-label) { color:var(--muted); }
.panel-label { display:flex; justify-content:space-between; color:var(--mint); font-size:.67rem; text-transform:uppercase; letter-spacing:.18em; }
.panel-label i { color:var(--orange); animation:blink 1.8s infinite; }
.panel-orbit { position:absolute; right:-120px; top:-130px; width:300px; height:300px; opacity:.42; border:1px solid var(--line-hot); border-radius:50%; animation:spin 24s linear infinite; }
.panel-orbit span { position:absolute; width:9px; height:9px; background:var(--mint); border-radius:50%; }
.panel-orbit span:nth-child(1){top:28px;left:72px}.panel-orbit span:nth-child(2){right:-4px;top:140px}.panel-orbit span:nth-child(3){bottom:14px;left:90px;background:var(--orange)}
.text-link { display:inline-flex; gap:14px; align-items:center; color:var(--text); font-size:.82rem; font-weight:800; }
.text-link span { color:var(--mint); transition:.2s; }.text-link:hover span { transform:translateX(5px); }
.proof-strip { display:grid; grid-template-columns:repeat(4,1fr); margin-top:72px; border-block:1px solid var(--line); }
.proof-strip div { display:flex; flex-direction:column; min-height:105px; justify-content:center; padding:18px 28px; border-right:1px solid var(--line); }
.proof-strip div:last-child { border:0; }.proof-strip strong { font-size:1.12rem; }.proof-strip span { color:var(--muted); font-size:.74rem; }

.section-heading { display:grid; grid-template-columns:1fr .48fr; align-items:end; gap:50px; margin-bottom:58px; }
.section-heading h2 { margin:0; }.section-heading > p { margin:0; color:var(--muted); }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.project-grid-featured .project-card:first-child { grid-column:1/-1; }
.project-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--line); background:rgba(12,17,31,.84); border-radius:var(--radius); transition:.25s ease; }
.project-card::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg,var(--mint),var(--orange)); transform:scaleX(0); transform-origin:left; transition:.3s; }
.project-card:hover { transform:translateY(-5px); border-color:rgba(92,229,203,.4); box-shadow:0 24px 70px rgba(0,0,0,.3); }.project-card:hover::after { transform:scaleX(1); }
.project-image { position:relative; aspect-ratio:16/9; overflow:hidden; background:#101729; }
.project-image img { height:100%; object-fit:cover; transition:transform .6s ease, filter .4s; }.project-card:hover img { transform:scale(1.035); }
.project-image::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(7,10,19,.3),transparent 50%); pointer-events:none; }
.project-body { padding:26px 28px 30px; }.project-meta { display:flex; justify-content:space-between; gap:20px; color:var(--mint); font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.project-body h3 { margin:16px 0 8px; font-size:clamp(1.45rem,2.6vw,2.1rem); }.project-subtitle { margin-bottom:12px; color:var(--text); font-size:.9rem; font-weight:650; }.project-summary { margin:0; color:var(--muted); font-size:.88rem; }
.project-arrow { position:absolute; right:24px; top:24px; z-index:2; display:grid; place-items:center; width:38px; aspect-ratio:1; color:#07110f; background:var(--mint); clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); opacity:0; transform:translate(-6px,6px); transition:.2s; }.project-card:hover .project-arrow { opacity:1; transform:none; }
.section-action { display:flex; justify-content:center; padding-top:52px; }

.capability-band { padding-block:110px; border-block:1px solid var(--line); background:rgba(12,17,31,.58); }
.capability-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:45px; border:1px solid var(--line); }
.capability-grid article { position:relative; padding:42px 34px; border-right:1px solid var(--line); }.capability-grid article:last-child { border:0; }.capability-grid article > span { color:var(--orange); font-family:monospace; font-size:.72rem; }.capability-grid h3 { margin:55px 0 15px; }.capability-grid p { color:var(--muted); font-size:.9rem; }
.contact-cta { padding-block:150px; }.contact-cta h2 { max-width:950px; }

.page-intro { display:grid; grid-template-columns:1fr .42fr; gap:60px; align-items:end; margin-bottom:90px; }.page-intro .eyebrow { grid-column:1/-1; margin-bottom:-30px; }.page-intro h1 { margin:0; font-size:clamp(3.4rem,6vw,6.5rem); }.page-intro > p:last-child { color:var(--muted); }
.filter-bar { position:sticky; top:68px; z-index:8; display:flex; gap:8px; padding:13px; margin-bottom:35px; overflow:auto; border:1px solid var(--line); background:rgba(7,10,19,.88); backdrop-filter:blur(18px); }
.filter-button { flex:0 0 auto; padding:10px 16px; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.filter-button:hover,.filter-button.active { color:#07110f; background:var(--mint); }
.project-count { padding:30px 0 100px; color:var(--muted); font-family:monospace; font-size:.75rem; text-align:right; }

.case-hero { width:min(var(--max),calc(100% - 64px)); margin:0 auto; }
.case-breadcrumb { display:flex; gap:14px; align-items:center; margin-bottom:55px; color:var(--muted); font-size:.73rem; text-transform:uppercase; letter-spacing:.12em; }.case-breadcrumb span { color:var(--mint); }
.case-title-grid { display:grid; grid-template-columns:1fr .42fr; gap:70px; align-items:end; }.case-title-grid h1 { margin:0; font-size:clamp(3.3rem,7vw,7rem); }.case-title-grid h1 small { display:block; margin-top:20px; color:var(--muted); font-family:var(--body); font-size:clamp(1rem,1.5vw,1.25rem); letter-spacing:0; line-height:1.4; }.case-role { border-left:1px solid var(--mint); padding-left:25px; color:var(--muted); }.case-role strong { display:block; margin-bottom:8px; color:var(--text); }
.case-media { position:relative; width:min(1440px,calc(100% - 32px)); margin:80px auto 0; overflow:hidden; border:1px solid var(--line); background:#0e1526; }.case-media img { max-height:760px; aspect-ratio:16/8.5; object-fit:cover; }.case-media::before { content:"CASE FILE / 01"; position:absolute; left:18px; top:18px; z-index:2; padding:7px 10px; color:#07110f; background:var(--mint); font:700 .64rem monospace; }
.case-facts { display:grid; grid-template-columns:repeat(4,1fr); width:min(var(--max),calc(100% - 64px)); margin:0 auto; border:1px solid var(--line); border-top:0; }.case-fact { padding:24px; border-right:1px solid var(--line); }.case-fact:last-child{border:0}.case-fact span{display:block;color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}.case-fact strong{font-size:.95rem}
.case-layout { display:grid; grid-template-columns:220px minmax(0,760px); gap:clamp(50px,9vw,130px); width:min(1100px,calc(100% - 64px)); margin:120px auto; }.case-side { position:sticky; top:110px; align-self:start; }.case-side p { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; }.case-tools { display:flex; flex-wrap:wrap; gap:8px; }.case-tools span { padding:6px 9px; color:var(--muted); border:1px solid var(--line); font-size:.68rem; }
.case-intro { margin-bottom:110px; font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.45; }.case-section { position:relative; padding:0 0 95px 35px; border-left:1px solid var(--line); }.case-section::before { content:""; position:absolute; left:-5px; top:4px; width:9px; aspect-ratio:1; background:var(--mint); box-shadow:0 0 18px rgba(92,229,203,.6); }.case-section h2 { font-size:clamp(2rem,3.3vw,3.3rem); }.case-section p,.case-section li { color:var(--muted); }.case-section ul { margin:28px 0 0; padding-left:18px; }.case-section li { margin:10px 0; }.case-section.missing { margin-bottom:90px; padding:30px 35px 34px; border:1px dashed var(--orange); background:rgba(255,150,85,.055); }.case-section.missing::before { left:-5px; top:35px; background:var(--orange); }.case-section.missing .eyebrow { color:var(--orange); }.case-section.missing h2 { font-size:2rem; }
.case-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }.case-next { padding:90px 32px; border-top:1px solid var(--line); text-align:center; }.case-next h2 { margin-bottom:30px; }
.not-found { width:min(700px,calc(100% - 64px)); margin:80px auto; text-align:center; }

.about-hero { display:grid; grid-template-columns:1.1fr .65fr; gap:100px; align-items:end; }.about-hero h1 { margin:0; font-size:clamp(3.3rem,6vw,6rem); }.about-summary { color:var(--muted); font-size:1.05rem; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; }.plain-list,.timeline { margin:35px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }.plain-list li { display:grid; grid-template-columns:.65fr 1fr; gap:25px; padding:23px 0; border-bottom:1px solid var(--line); }.plain-list span,.timeline p { color:var(--muted); font-size:.86rem; }.timeline li { display:grid; grid-template-columns:80px 1fr; gap:20px; padding:23px 0; border-bottom:1px solid var(--line); }.timeline > li > span { color:var(--orange); font-family:monospace; }.timeline p { margin:5px 0 0; }
.cv-panel { display:grid; grid-template-columns:.7fr 1fr; gap:80px; padding:60px; border:1px solid var(--line-hot); background:linear-gradient(135deg,rgba(16,28,47,.92),rgba(8,13,25,.82)); }.cv-panel p { color:var(--muted); }.cv-options { display:grid; gap:14px; }.cv-card { display:grid; grid-template-columns:55px 1fr; padding:20px; border:1px solid var(--line); transition:.2s; }.cv-card > span { grid-row:1/3; display:grid; place-items:center; width:40px; height:48px; color:#07110f; background:var(--mint); font-size:.65rem; font-weight:900; }.cv-card strong { align-self:end; }.cv-card small { color:var(--muted); }.cv-card:hover { border-color:var(--mint); transform:translateX(5px); }
.contact-panel { padding:150px 0; }.contact-panel > p { max-width:600px; color:var(--muted); }.contact-links { display:flex; flex-wrap:wrap; gap:13px; margin-top:35px; }.contact-links a { padding:12px 17px; border:1px solid var(--line); font-size:.8rem; }.contact-links a:hover { color:var(--mint); border-color:var(--mint); }

.site-footer { display:flex; justify-content:space-between; gap:30px; padding:35px max(32px,calc((100vw - var(--max))/2)); border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; }.site-footer div { display:flex; gap:22px; }.site-footer a:hover { color:var(--mint); }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }.reveal.visible { opacity:1; transform:none; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes blink { 50%{opacity:.25} }

/* Interactive game-profile layer */
body[data-role-theme="profile"] { --role-accent:#39d9ee; --role-rgb:57,217,238; }
body[data-role-theme="game"] { --role-accent:#5ce5cb; --role-rgb:92,229,203; }
body[data-role-theme="technical"] { --role-accent:#bf85ff; --role-rgb:191,133,255; }
body[data-role-theme="ui"] { --role-accent:#ff9655; --role-rgb:255,150,85; }
body[data-role-theme="art"] { --role-accent:#ff79bd; --role-rgb:255,121,189; }
.loadout-hero { padding-top:118px; }
.hud-top { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; padding:11px 15px; color:var(--muted); border:1px solid var(--line); background:rgba(8,14,26,.72); font:700 .62rem/1.2 monospace; letter-spacing:.1em; }
.hud-top span:last-child { text-align:right; }.hud-status { color:var(--mint); }.hud-status i { display:inline-block; width:6px; aspect-ratio:1; margin-right:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 12px var(--mint); animation:blink 1.8s infinite; }
.loadout-title { display:grid; grid-template-columns:1fr .5fr; gap:70px; align-items:end; padding:58px 0 38px; }
.loadout-title h1 { margin:0; font-size:clamp(3.6rem,7.5vw,7.2rem); line-height:.83; letter-spacing:-.055em; }.loadout-title > p { max-width:530px; margin:0 0 5px; color:var(--muted); }
.loadout-screen { position:relative; display:grid; grid-template-columns:255px minmax(360px,1fr) 350px; min-height:590px; overflow:hidden; border:1px solid rgba(var(--role-rgb),.6); background:linear-gradient(135deg,rgba(11,18,33,.97),rgba(7,10,19,.9)); box-shadow:0 35px 100px rgba(0,0,0,.35),inset 0 0 70px rgba(var(--role-rgb),.035); transition:border-color .35s,box-shadow .35s; }
.loadout-screen::before,.loadout-screen::after { content:""; position:absolute; z-index:3; width:24px; height:24px; border-color:var(--role-accent); pointer-events:none; transition:border-color .35s; }.loadout-screen::before { top:10px; left:10px; border-top:2px solid;border-left:2px solid }.loadout-screen::after { right:10px;bottom:10px;border-right:2px solid;border-bottom:2px solid }
.hud-label { color:var(--muted); font:700 .62rem/1 monospace; letter-spacing:.15em; text-transform:uppercase; }
.class-select { position:relative; z-index:2; padding:34px 16px; border-right:1px solid var(--line); background:rgba(5,9,18,.76); }
.class-select > .hud-label { padding-left:12px; margin-bottom:25px; }.class-option { position:relative; display:grid; grid-template-columns:30px 38px 1fr; gap:9px; align-items:center; width:100%; padding:16px 10px; margin-bottom:8px; overflow:hidden; border:1px solid transparent; background:transparent; color:var(--muted); text-align:left; cursor:pointer; transition:.2s ease; }
.class-option::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(var(--role-rgb),.16),transparent); transform:translateX(-101%); transition:.25s; }.class-option:hover::before,.class-option.active::before { transform:none; }
.class-option:hover,.class-option.active { color:var(--text); border-color:rgba(var(--role-rgb),.55); }.class-option.active { clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%); }
.class-option > * { position:relative; z-index:1; }.class-key { color:var(--role-accent); font:700 .62rem monospace; }.class-icon { color:var(--role-accent); font-style:normal; font-size:1.4rem; text-align:center; filter:drop-shadow(0 0 8px rgba(var(--role-rgb),.35)); }.class-option strong,.class-option small { display:block; }.class-option strong { font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }.class-option small { color:var(--muted); font-size:.63rem; }
.key-hint { position:absolute; bottom:25px; left:25px; right:18px; margin:0; color:#69758c; font:600 .55rem monospace; letter-spacing:.06em; }.key-hint kbd { display:inline-grid; place-items:center; min-width:18px; height:18px; margin:0 2px; border:1px solid var(--line); background:#101729; color:var(--muted); font:inherit; }
.character-stage { position:relative; min-height:590px; overflow:clip; perspective:900px; transition:background .35s; }.character-stage::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,rgba(var(--role-rgb),.11),transparent 50%); pointer-events:none; transition:background .35s; }
.stage-grid { position:absolute; inset:0; opacity:.38; background-image:linear-gradient(rgba(var(--role-rgb),.15) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--role-rgb),.15) 1px,transparent 1px); background-size:32px 32px; transform:perspective(500px) rotateX(68deg) scale(1.55) translateY(28%); transform-origin:bottom; mask-image:linear-gradient(to top,#000,transparent 85%); }
.scan-line { position:absolute; z-index:4; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,var(--role-accent),transparent); box-shadow:0 0 18px var(--role-accent); opacity:.65; animation:scan 4.8s ease-in-out infinite; }
.stage-code { position:absolute; z-index:5; top:24px; left:28px; color:var(--role-accent); font:700 .6rem monospace; letter-spacing:.13em; transition:color .35s; }
.avatar-holo { position:absolute; z-index:2; left:50%; top:50%; width:270px; height:410px; transform:translate(-50%,-45%); filter:drop-shadow(0 0 28px rgba(var(--role-rgb),.23)); }
.avatar-ring { position:absolute; left:50%; border:1px solid rgba(var(--role-rgb),.55); border-radius:50%; transform:translateX(-50%); transition:border-color .35s; }.ring-one { bottom:25px; width:260px; height:80px; animation:orbitPulse 3s ease-in-out infinite; }
.avatar-head { position:absolute; left:50%; top:60px; display:grid; place-items:center; width:104px; height:120px; color:var(--role-accent); border:1px solid rgba(var(--role-rgb),.75); background:linear-gradient(150deg,rgba(var(--role-rgb),.2),rgba(8,14,26,.85)); clip-path:polygon(22% 0,78% 0,100% 24%,85% 86%,50% 100%,15% 86%,0 24%); transform:translateX(-50%); transition:color .35s,border-color .35s,background .35s; }.avatar-head::before { content:""; position:absolute; inset:12px; border:1px solid rgba(var(--role-rgb),.35); clip-path:inherit; }.avatar-head span { font:900 3rem var(--display); text-shadow:0 0 18px rgba(var(--role-rgb),.7); }
.avatar-body { position:absolute; left:50%; top:168px; width:240px; height:190px; border:1px solid rgba(var(--role-rgb),.65); background:linear-gradient(160deg,rgba(var(--role-rgb),.2),rgba(8,14,26,.82) 60%); clip-path:polygon(27% 0,73% 0,100% 28%,92% 100%,8% 100%,0 28%); transform:translateX(-50%); transition:border-color .35s,background .35s; }.avatar-body::before { content:""; position:absolute; left:50%; top:24px; bottom:15px; border-left:1px solid rgba(var(--role-rgb),.45); }.avatar-body i { position:absolute; height:1px; background:rgba(var(--role-rgb),.5); }.avatar-body i:nth-child(1){left:8%;right:8%;top:50px}.avatar-body i:nth-child(2){left:18%;right:50%;top:100px;transform:rotate(-24deg)}.avatar-body i:nth-child(3){left:50%;right:18%;top:100px;transform:rotate(24deg)}
.avatar-base { position:absolute; z-index:2; left:50%; bottom:1px; width:230px; padding:8px; color:#07110f; background:var(--role-accent); text-align:center; font:900 .6rem monospace; letter-spacing:.1em; transform:translateX(-50%); transition:background .35s; }
.avatar-holo[data-avatar-preview] { top:49%; width:320px; height:430px; transform:translate(-50%,-50%); pointer-events:none; }
.avatar-holo[data-avatar-preview] .ring-one { bottom:78px; width:280px; height:82px; }
.avatar-sprite-frame { position:absolute; z-index:2; inset:0 0 86px; display:grid; place-items:center; }
.avatar-sprite { position:relative; z-index:2; width:320px; height:320px; object-fit:contain; image-rendering:pixelated; image-rendering:crisp-edges; filter:drop-shadow(0 10px 0 rgba(0,0,0,.18)) drop-shadow(0 0 12px rgba(var(--role-rgb),.18)); user-select:none; }
.avatar-ground-shadow { position:absolute; z-index:1; left:50%; bottom:17px; width:106px; height:22px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.48),rgba(var(--role-rgb),.14) 55%,transparent 72%); transform:translateX(-50%); }
.avatar-holo[data-avatar-preview] .avatar-base { bottom:48px; width:auto; min-width:238px; padding:7px 12px; color:#041213; box-shadow:5px 5px 0 rgba(175,50,255,.34); white-space:nowrap; }
.avatar-controls { position:absolute; z-index:8; left:50%; bottom:17px; width:310px; transform:translateX(-50%); }
.avatar-controls.has-turn { display:grid; grid-template-columns:74px minmax(0,1fr) 74px; gap:6px; }
.avatar-controls button { min-height:35px; padding:6px 8px; color:#91a3b9; border:1px solid rgba(var(--role-rgb),.36); background:rgba(6,11,22,.92); font:800 .56rem monospace; letter-spacing:.08em; cursor:pointer; transition:color .18s,border-color .18s,background .18s,box-shadow .18s,transform .18s; }
.avatar-controls button:hover,.avatar-controls button:focus-visible { color:#fff; border-color:var(--role-accent); box-shadow:0 0 16px rgba(var(--role-rgb),.2); outline:0; transform:translateY(-1px); }
.avatar-turn { display:flex; align-items:center; justify-content:center; gap:7px; }
.avatar-turn[hidden] { display:none; }
.avatar-turn span { color:var(--role-accent); font-size:.7rem; }
.avatar-turn small { font:inherit; }
.avatar-motion-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.avatar-motion-tabs.single { grid-template-columns:1fr; }
.avatar-motion-tabs button { border-color:rgba(var(--role-rgb),.24); }
.avatar-motion-tabs button+button { border-left:0; }
.avatar-motion-tabs button.active { color:#041213; border-color:var(--role-accent); background:var(--role-accent); box-shadow:0 0 14px rgba(var(--role-rgb),.26); }
.avatar-motion-tabs.planned,.avatar-motion-tabs.has-planned { gap:6px; }
.avatar-motion-tabs.planned button+button,.avatar-motion-tabs.has-planned button+button { border-left:1px dashed rgba(var(--role-rgb),.36); }
.avatar-motion-tabs button:disabled { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; color:rgba(210,220,236,.7); border-style:dashed; cursor:default; opacity:1; }
.avatar-motion-tabs button:disabled:hover { color:rgba(210,220,236,.7); border-color:rgba(var(--role-rgb),.36); box-shadow:none; transform:none; }
.avatar-motion-tabs button small { padding:2px 4px; color:var(--role-accent); border:1px solid rgba(var(--role-rgb),.38); font:800 .46rem/1 monospace; letter-spacing:.08em; }
.avatar-holo[data-avatar-preview].is-role-scene { width:460px; height:460px; }
.avatar-holo[data-avatar-preview].is-role-scene .avatar-sprite-frame { inset:-8px 0 62px; }
.avatar-holo[data-avatar-preview].is-role-scene .avatar-sprite { width:440px; height:440px; filter:drop-shadow(0 12px 0 rgba(0,0,0,.16)) drop-shadow(0 0 14px rgba(var(--role-rgb),.2)); }
.avatar-holo[data-avatar-preview].is-role-scene .avatar-ground-shadow,
.avatar-holo[data-avatar-preview].is-role-scene .ring-one { display:none; }
.avatar-holo[data-avatar-preview].is-role-scene .avatar-base { bottom:28px; }
.character-stage .portrait-note { top:46px; bottom:auto; left:28px; }
.gear-slot { position:absolute; z-index:5; display:flex; gap:7px; align-items:center; min-width:110px; padding:7px; color:var(--muted); border-bottom:1px solid rgba(var(--role-rgb),.45); font:600 .6rem monospace; text-transform:uppercase; }.gear-slot span { display:grid; place-items:center; width:22px; aspect-ratio:1; color:#07110f; background:var(--role-accent); font-weight:900; transition:background .35s; }.gear-slot b { font-weight:600; }.gear-a{left:7%;top:22%}.gear-b{right:6%;top:25%}.gear-c{left:5%;bottom:23%}.gear-d{right:5%;bottom:20%}
.portrait-note { position:absolute; z-index:5; bottom:13px; left:20px; margin:0; color:#59657a; font:600 .52rem monospace; letter-spacing:.08em; }
.character-stage { display:grid; grid-template-columns:minmax(110px,1fr) minmax(280px,320px) minmax(110px,1fr); grid-template-rows:minmax(470px,1fr) auto; perspective:none; }
.character-stage .stage-code { position:static; z-index:5; grid-column:1/-1; grid-row:1; align-self:start; justify-self:start; margin:24px 28px; }
.character-stage .avatar-holo[data-avatar-preview] { position:static; inset:auto; grid-column:1/-1; grid-row:1; align-self:center; justify-self:center; transform:translateZ(0); }
.character-stage .avatar-controls { position:static; grid-column:1/-1; grid-row:2; align-self:end; justify-self:center; margin:0 0 17px; transform:none; }
.character-stage .gear-slot { position:static; grid-row:1; align-self:center; justify-self:stretch; min-width:0; margin-inline:14px; }
.character-stage .gear-a { grid-column:1; align-self:start; margin-top:108px; }
.character-stage .gear-b { grid-column:3; align-self:start; margin-top:126px; }
.character-stage .gear-c { grid-column:1; align-self:end; margin-bottom:104px; }
.character-stage .gear-d { grid-column:3; align-self:end; margin-bottom:86px; }
.character-stage .portrait-note { position:static; grid-column:1; grid-row:2; align-self:center; justify-self:start; margin:0 0 17px 20px; }
.loadout-info { position:relative; z-index:2; padding:35px 30px; border-left:1px solid var(--line); background:linear-gradient(180deg,rgba(12,18,34,.92),rgba(6,10,20,.88)); }.role-index { display:flex; justify-content:space-between; margin-bottom:38px; color:var(--role-accent); font:700 .58rem monospace; letter-spacing:.1em; transition:color .35s; }.role-index b { color:var(--orange); }.loadout-info h2 { margin:17px 0 22px; font-size:clamp(2.3rem,3vw,3.5rem); }.role-description { min-height:100px; color:var(--muted); font-size:.88rem; }
.evidence-panel { padding:20px 0; margin:24px 0; border-block:1px solid var(--line); }.evidence-panel > div { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.evidence-panel span { color:var(--muted); font-size:.58rem; line-height:1.25; text-transform:uppercase; }.evidence-panel strong { display:block; margin-bottom:3px; color:var(--role-accent); font-size:.95rem; transition:color .35s; }
.equipped-project { display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:center; margin-bottom:20px; }.project-thumb { position:relative; height:58px; overflow:hidden; border:1px solid rgba(var(--role-rgb),.5); }.project-thumb::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 20px rgba(var(--role-rgb),.25); }.project-thumb img { height:100%; object-fit:cover; }.equipped-project small,.equipped-project strong { display:block; }.equipped-project small { color:var(--role-accent); font:700 .52rem monospace; letter-spacing:.1em; }.equipped-project strong { font-size:.72rem; line-height:1.3; }
.role-action { width:100%; background:var(--role-accent); border-color:var(--role-accent); transition:background .35s,border-color .35s,transform .2s,box-shadow .2s; }.role-swap .character-stage,.role-swap .loadout-info { animation:roleSwap .32s ease both; }
.hud-proof { margin-top:0; border-top:0; }.hud-proof div { min-height:84px; }.hud-proof span { order:-1; color:#66728a; font:700 .55rem monospace; letter-spacing:.11em; }.hud-proof strong { font-size:.85rem; }
.mission-section { position:relative; }.mission-section::before { content:"MISSION BOARD // ACTIVE QUESTS"; position:absolute; top:92px; right:0; color:#465168; font:700 .55rem monospace; letter-spacing:.12em; }
.project-card .project-body::before { content:"MISSION FILE"; display:inline-block; margin-bottom:10px; color:var(--orange); font:700 .53rem monospace; letter-spacing:.12em; }
.game-loop .capability-grid article > span { color:var(--mint); font-size:.62rem; letter-spacing:.1em; }
.mission-board .hud-top,.player-profile .hud-top { margin-bottom:12px; }
.filter-button span { margin-right:7px; color:var(--mint); font:700 .59rem monospace; }.filter-button.active span { color:#07110f; }
.quest-log .case-media::before { content:"MISSION VISUAL / 01"; }.quest-log .case-section::after { content:"CHECKPOINT"; position:absolute; left:-2px; top:20px; color:#566178; font:700 .5rem monospace; letter-spacing:.1em; transform:translateX(-100%) rotate(-90deg); transform-origin:right top; }.quest-log .case-section.missing::after { content:"OBJECTIVE LOCKED"; color:var(--orange); }
.profile-screen { display:grid; grid-template-columns:260px minmax(0,1fr) 330px; min-height:560px; margin-top:38px; overflow:hidden; border:1px solid var(--line-hot); background:linear-gradient(135deg,rgba(13,21,39,.96),rgba(7,11,21,.88)); }
.profile-id { position:relative; padding:32px 24px; border-right:1px solid var(--line); background:rgba(5,9,18,.65); }.profile-avatar { position:absolute; left:24px; right:24px; top:110px; bottom:80px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(92,229,203,.45); background:radial-gradient(circle,rgba(92,229,203,.12),transparent 55%); }.profile-avatar > span { position:relative; z-index:2; display:grid; place-items:center; width:120px; aspect-ratio:1; color:var(--mint); border:1px solid var(--mint); clip-path:polygon(25% 0,75% 0,100% 25%,85% 85%,50% 100%,15% 85%,0 25%); font:900 4.5rem var(--display); text-shadow:0 0 25px rgba(92,229,203,.6); }.profile-avatar small { position:absolute; bottom:15px; color:var(--muted); font:700 .57rem monospace; letter-spacing:.12em; }.profile-radar { position:absolute; width:250px; aspect-ratio:1; border:1px solid rgba(92,229,203,.25); border-radius:50%; animation:spin 18s linear infinite; }.profile-radar::before,.profile-radar::after { content:""; position:absolute; inset:18%; border:1px dashed rgba(92,229,203,.2); border-radius:50%; }.profile-radar::after { inset:35%; }
.profile-status { position:absolute; left:24px; right:24px; bottom:25px; display:flex; gap:8px; align-items:center; color:var(--mint); font:700 .54rem monospace; }.profile-status i { width:7px; aspect-ratio:1; background:var(--mint); border-radius:50%; box-shadow:0 0 12px var(--mint); }
.profile-copy { padding:55px 45px; }.profile-copy h1 { margin-bottom:25px; font-size:clamp(3.8rem,6vw,6rem); line-height:.82; }.profile-copy > p:not(.eyebrow):not(.profile-class) { max-width:620px; color:var(--muted); }.profile-class { display:inline-block; margin-bottom:32px; padding:7px 10px; color:#07110f; background:var(--mint); font:900 .59rem monospace; letter-spacing:.1em; }
.profile-loadout { padding:34px 24px; border-left:1px solid var(--line); background:rgba(7,12,23,.72); }.profile-loadout ul { margin:30px 0 0; padding:0; list-style:none; }.profile-loadout li { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:center; padding:21px 0; border-bottom:1px solid var(--line); }.profile-loadout li > span { display:grid; place-items:center; width:28px; aspect-ratio:1; color:var(--mint); border:1px solid var(--line-hot); font:700 .58rem monospace; }.profile-loadout strong,.profile-loadout small { display:block; }.profile-loadout strong { font-size:.8rem; }.profile-loadout small { color:var(--muted); font-size:.67rem; }
.achievement-list { border-top:1px solid var(--line); }.achievement-list article { display:grid; grid-template-columns:110px 120px 1fr; gap:25px; align-items:center; padding:28px 20px; border-bottom:1px solid var(--line); transition:.2s; }.achievement-list article:hover { padding-left:28px; background:linear-gradient(90deg,rgba(92,229,203,.06),transparent); }.achievement-year { color:var(--orange); font:900 1.15rem monospace; }.achievement-list i { color:var(--mint); font:700 .55rem monospace; letter-spacing:.1em; }.achievement-list h3 { margin:0 0 4px; }.achievement-list p { margin:0; color:var(--muted); font-size:.84rem; }
/* Game menu controls and page transitions */
.site-nav a { position:relative; min-width:88px; padding:11px 13px 11px 34px; overflow:hidden; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); transition:color .18s,border-color .18s,background .18s,transform .18s; }
.site-nav a::before { content:attr(data-menu-key); position:absolute; left:10px; top:50%; color:#5a667c; font:700 .55rem monospace; transform:translateY(-50%); transition:color .18s; }.site-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--mint); box-shadow:0 0 12px var(--mint); transition:right .22s; }
.site-nav a:hover,.site-nav a.active,.site-nav a:focus-visible { transform:translateY(-1px); outline:0; }.site-nav a:hover::before,.site-nav a.active::before { color:var(--mint); }.site-nav a:hover::after,.site-nav a.active::after { right:0; }.site-nav a.active { color:var(--text); border-color:rgba(92,229,203,.4); background:linear-gradient(90deg,rgba(92,229,203,.1),rgba(92,229,203,.02)); }
.button { position:relative; overflow:hidden; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); cursor:pointer; }.button::before { content:""; position:absolute; top:-30%; bottom:-30%; left:-40%; width:24%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent); transform:skewX(-20deg); transition:left .38s ease; }.button:hover::before,.button:focus-visible::before { left:120%; }.button:active { transform:translate(2px,2px)!important; box-shadow:2px 2px 0 rgba(92,229,203,.12)!important; }.button:focus-visible,.filter-button:focus-visible,.class-option:focus-visible,.project-card:focus-visible,.cv-card:focus-visible,.contact-links a:focus-visible { outline:1px solid var(--mint); outline-offset:4px; }
.filter-button { position:relative; min-height:43px; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); transition:background .18s,color .18s,transform .18s; }.filter-button::after { content:""; position:absolute; right:7px; top:7px; width:4px; aspect-ratio:1; background:var(--mint); opacity:0; box-shadow:0 0 8px var(--mint); }.filter-button:hover { transform:translateY(-2px); border-color:rgba(92,229,203,.4); }.filter-button:hover::after,.filter-button.active::after { opacity:1; animation:blink 1.6s infinite; }.filter-button:active { transform:translateY(1px); }
.class-option:focus-visible { outline:1px solid var(--role-accent); outline-offset:2px; }.class-option:active { transform:translateX(3px); }
.project-card::before { content:"SELECT MISSION"; position:absolute; z-index:4; left:18px; top:18px; padding:6px 9px; color:#07110f; background:var(--mint); font:900 .52rem monospace; letter-spacing:.11em; opacity:0; transform:translateY(-8px); transition:opacity .2s,transform .2s; clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }.project-card:hover::before,.project-card:focus-visible::before { opacity:1; transform:none; }.project-card:focus-visible { outline:0; border-color:var(--mint); }.project-card:active { transform:translateY(-1px) scale(.995); }
.project-card .project-image::before { content:""; position:absolute; z-index:2; inset:11px; border:1px solid transparent; pointer-events:none; transition:border-color .2s; }.project-card:hover .project-image::before { border-color:rgba(92,229,203,.38); }
.sfx-toggle { position:fixed; z-index:30; left:18px; bottom:18px; display:grid; grid-template-columns:8px auto auto; gap:7px; align-items:center; min-height:32px; padding:0 10px; color:#6b768b; border:1px solid var(--line); background:rgba(7,10,19,.88); backdrop-filter:blur(12px); cursor:pointer; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); font:700 .55rem monospace; letter-spacing:.08em; }.sfx-toggle i { width:6px; aspect-ratio:1; border-radius:50%; background:#485367; }.sfx-toggle b { color:#59657a; }.sfx-toggle:hover { color:var(--text); border-color:rgba(92,229,203,.4); }.sfx-toggle.active { color:var(--mint); }.sfx-toggle.active i { background:var(--mint); box-shadow:0 0 9px var(--mint); }.sfx-toggle.active b { color:var(--mint); }
.theme-toggle { position:fixed; z-index:30; left:102px; bottom:18px; display:grid; grid-template-columns:10px auto auto; gap:7px; align-items:center; min-height:32px; padding:0 10px; color:#6b768b; border:1px solid var(--line); background:rgba(7,10,19,.88); backdrop-filter:blur(12px); cursor:pointer; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); font:700 .55rem monospace; letter-spacing:.08em; }.theme-toggle i { width:8px; aspect-ratio:1; border-radius:50%; background:#75819a; box-shadow:inset -3px -1px 0 #202c44; }.theme-toggle.active { color:#8a4f20; background:rgba(255,248,218,.94); border-color:rgba(111,83,44,.28); }.theme-toggle.active i { background:#ffc850; box-shadow:0 0 10px rgba(255,178,54,.65); }.theme-toggle.active b { color:#c4672f; }
.page-transition { position:fixed; z-index:100; inset:0; display:grid; place-items:center; visibility:hidden; pointer-events:none; }.transition-panel { position:absolute; top:0; bottom:0; width:52%; background:#080d19; transition:transform .28s cubic-bezier(.7,0,.3,1); }.transition-a { left:0; transform:translateX(-101%); border-right:1px solid var(--mint); }.transition-b { right:0; transform:translateX(101%); border-left:1px solid var(--mint); }.transition-core { position:relative; z-index:2; width:min(370px,calc(100% - 50px)); padding:28px; color:var(--text); border:1px solid rgba(92,229,203,.45); background:rgba(10,17,31,.96); opacity:0; transform:scale(.94); transition:opacity .16s .19s,transform .16s .19s; text-align:center; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }.transition-core span,.transition-core small { display:block; color:#647087; font:700 .55rem monospace; letter-spacing:.15em; }.transition-core strong { display:block; margin:18px 0; color:var(--mint); font:900 1rem monospace; letter-spacing:.08em; }.transition-core > div { height:3px; overflow:hidden; background:#1b2538; }.transition-core > div i { display:block; width:45%; height:100%; background:var(--mint); box-shadow:0 0 10px var(--mint); animation:loadBar .65s ease-in-out infinite; }
.page-transition.active { visibility:visible; }.page-transition.active .transition-a,.page-transition.active .transition-b { transform:none; }.page-transition.active .transition-core { opacity:1; transform:none; }.page-leaving main,.page-leaving .site-header,.page-leaving footer { filter:blur(3px); transform:scale(.995); transition:.3s; }

/* Bright adventure-guild theme: default world state */
body.adventure-ui { --bg:#f7f0d2; --bg-2:#fff9e7; --panel:rgba(255,252,231,.9); --panel-solid:#fff9e7; --line:rgba(83,72,46,.2); --line-hot:rgba(30,145,126,.48); --text:#28363a; --muted:#687572; --mint:#189b83; --orange:#ee7742; --blue:#3b7fc4; color:var(--text); background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.9) 0 4rem,transparent 4.2rem),radial-gradient(circle at 82% 15%,rgba(255,255,255,.72) 0 6rem,transparent 6.2rem),linear-gradient(180deg,#cfecea 0,#e8f2ce 38rem,#f7f0d2 75rem,#f7f0d2 100%); }
body.adventure-ui::before { opacity:.35; background-image:linear-gradient(rgba(76,109,93,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(76,109,93,.1) 1px,transparent 1px); mask-image:linear-gradient(to bottom,#000,transparent 70%); }
body.adventure-ui::after { box-shadow:inset 0 0 70px rgba(96,84,45,.1); }
.adventure-ui .site-header.scrolled { background:rgba(255,249,226,.9); border-color:rgba(83,72,46,.17); box-shadow:0 5px 0 rgba(112,96,57,.08); }
.adventure-ui .brand > span { color:#fff9e7; background:var(--mint); box-shadow:3px 3px 0 #a7cba7; }
.adventure-ui .site-nav a { color:#586765; }.adventure-ui .site-nav a.active,.adventure-ui .site-nav a:hover { color:#233538; background:linear-gradient(90deg,rgba(24,155,131,.13),rgba(255,255,255,.22)); border-color:rgba(24,155,131,.3); }
.adventure-ui .hud-top { color:#6c735f; border:2px solid rgba(102,85,49,.2); background:rgba(255,250,226,.82); box-shadow:0 4px 0 rgba(115,99,61,.1); }.adventure-ui .hud-status { color:var(--mint); }
.adventure-ui .loadout-title > p,.adventure-ui .page-intro > p:last-child { color:#5f6e6b; }
.adventure-ui .loadout-screen { border:2px solid rgba(var(--role-rgb),.55); background:#fff9e7; box-shadow:0 9px 0 #c7b983,0 24px 60px rgba(86,76,46,.17),inset 0 0 50px rgba(var(--role-rgb),.04); }
.adventure-ui .class-select { background:#f6ecca; border-color:rgba(88,71,39,.18); }.adventure-ui .class-option { color:#68706a; }.adventure-ui .class-option:hover,.adventure-ui .class-option.active { color:#26383a; background:rgba(255,255,255,.35); }.adventure-ui .class-option small { color:#7c8276; }
.adventure-ui .character-stage { background:linear-gradient(180deg,#bfe6e3 0 55%,#96c47d 55% 59%,#ddca8d 59% 100%); }.adventure-ui .character-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 18% 18%,rgba(255,255,255,.84) 0 7%,transparent 7.4%),radial-gradient(ellipse at 26% 17%,rgba(255,255,255,.8) 0 5%,transparent 5.4%),radial-gradient(ellipse at 78% 27%,rgba(255,255,255,.72) 0 8%,transparent 8.4%),linear-gradient(155deg,transparent 0 57%,rgba(70,134,78,.22) 57% 63%,transparent 63%); }.adventure-ui .character-stage::after { background:radial-gradient(circle at center,rgba(var(--role-rgb),.14),transparent 48%); }
.adventure-ui .stage-grid { opacity:.22; }.adventure-ui .gear-slot { color:#425754; background:rgba(255,250,224,.58); border-color:rgba(var(--role-rgb),.45); }.adventure-ui .portrait-note { color:#776e54; }
.adventure-ui .avatar-head,.adventure-ui .avatar-body { background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(var(--role-rgb),.2)); }.adventure-ui .avatar-base { color:#fffdf0; }.adventure-ui .avatar-body::before,.adventure-ui .avatar-body i { opacity:.55; }
.adventure-ui .loadout-info { background:#fffaf0; border-color:rgba(87,73,43,.18); }.adventure-ui .role-description,.adventure-ui .equipped-project small+strong { color:#687572; }.adventure-ui .evidence-panel { border-color:rgba(88,71,39,.18); }.adventure-ui .project-thumb { box-shadow:3px 3px 0 rgba(95,81,51,.14); }
.adventure-ui .hud-proof { background:rgba(255,250,226,.68); }.adventure-ui .proof-strip { border-color:rgba(87,73,43,.2); }.adventure-ui .proof-strip div { border-color:rgba(87,73,43,.18); }.adventure-ui .hud-proof span { color:#7f775f; }
.adventure-ui .project-card { border:2px solid rgba(95,76,42,.22); background:#fffaf0; box-shadow:0 7px 0 #cabd8e,0 18px 32px rgba(96,80,45,.12); }.adventure-ui .project-card:hover { border-color:rgba(24,155,131,.55); box-shadow:0 10px 0 #9fc6a1,0 24px 45px rgba(69,98,70,.16); }.adventure-ui .project-image { background:#e7ddb8; }.adventure-ui .project-meta { color:#198873; }.adventure-ui .project-summary { color:#65716e; }
.adventure-ui .capability-band { border-color:rgba(87,73,43,.2); background:rgba(225,237,197,.65); }.adventure-ui .capability-grid { border:2px solid rgba(87,73,43,.18); background:rgba(255,250,226,.58); box-shadow:0 6px 0 rgba(133,118,76,.12); }.adventure-ui .capability-grid article { border-color:rgba(87,73,43,.17); }.adventure-ui .capability-grid p { color:#66736f; }
.adventure-ui .filter-bar { border:2px solid rgba(91,75,43,.2); background:rgba(255,249,225,.9); box-shadow:0 5px 0 rgba(117,101,59,.1); }.adventure-ui .filter-button { color:#60706c; }.adventure-ui .filter-button:hover { color:#243638; }.adventure-ui .filter-button.active { color:#fffdf0; background:var(--mint); }
.adventure-ui .case-role { color:#66736f; }.adventure-ui .case-media { border:3px solid #fff7da; outline:2px solid rgba(91,75,43,.24); background:#e7ddb8; box-shadow:0 8px 0 #c8b882; }.adventure-ui .case-facts { border-color:rgba(91,75,43,.2); background:#fff9e7; box-shadow:0 6px 0 rgba(117,101,59,.1); }.adventure-ui .case-fact { border-color:rgba(91,75,43,.17); }.adventure-ui .case-fact span,.adventure-ui .case-section p,.adventure-ui .case-section li { color:#687572; }.adventure-ui .case-tools span { color:#52625f; background:#fff9e7; border-color:rgba(91,75,43,.2); }.adventure-ui .case-section { border-color:rgba(91,75,43,.2); }.adventure-ui .case-section.missing { background:rgba(238,119,66,.08); }
.adventure-ui .profile-screen { border:2px solid rgba(24,155,131,.42); background:#fff9e7; box-shadow:0 8px 0 #c8ba87,0 26px 50px rgba(87,73,40,.13); }.adventure-ui .profile-id,.adventure-ui .profile-loadout { background:#f5ebc9; border-color:rgba(91,75,43,.18); }.adventure-ui .profile-copy > p:not(.eyebrow):not(.profile-class),.adventure-ui .profile-loadout small,.adventure-ui .achievement-list p { color:#687572; }.adventure-ui .profile-avatar { background:radial-gradient(circle,rgba(24,155,131,.14),rgba(255,255,255,.35) 55%); }.adventure-ui .achievement-list,.adventure-ui .achievement-list article { border-color:rgba(91,75,43,.2); }.adventure-ui .achievement-list article:hover { background:linear-gradient(90deg,rgba(24,155,131,.09),transparent); }
.adventure-ui .cv-panel { border:2px solid rgba(24,155,131,.38); background:linear-gradient(135deg,#fff9e7,#e9f0ce); box-shadow:0 8px 0 #c7b983; }.adventure-ui .cv-panel p,.adventure-ui .cv-card small,.adventure-ui .contact-panel > p { color:#687572; }.adventure-ui .cv-card,.adventure-ui .contact-links a { border-color:rgba(91,75,43,.22); background:rgba(255,253,239,.72); }.adventure-ui .cv-card:hover { border-color:var(--mint); background:#fffdf0; }
.adventure-ui .site-footer { color:#65716e; border-color:rgba(91,75,43,.2); background:rgba(255,249,225,.55); }
.adventure-ui .sfx-toggle { color:#6c735f; border-color:rgba(91,75,43,.24); background:rgba(255,249,225,.92); }.adventure-ui .sfx-toggle b { color:#7a745f; }.adventure-ui .page-transition .transition-panel { background:#efe5bb; }.adventure-ui .transition-core { color:#26383a; border-color:rgba(24,155,131,.48); background:#fff9e7; box-shadow:0 8px 0 #c1b17c; }
@media (max-width:900px) { .adventure-ui .site-nav { background:rgba(255,249,226,.98); }.adventure-ui .site-nav a { color:#52615e; } }
.sfx-toggle { left:210px; top:20px; bottom:auto; }
.theme-toggle { left:294px; top:20px; bottom:auto; }
@media (max-width:900px) { .sfx-toggle { left:16px; top:auto; bottom:16px; }.theme-toggle { left:100px; top:auto; bottom:16px; } }
@keyframes loadBar { from{transform:translateX(-110%)}to{transform:translateX(235%)} }
@keyframes scan { 0%,100%{top:12%;opacity:0} 20%{opacity:.8} 80%{opacity:.8} 90%{top:88%;opacity:0} }
@keyframes orbitPulse { 50%{transform:translateX(-50%) scale(1.08);opacity:.5} }
@keyframes spinFlat { from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)} }
@keyframes roleSwap { from{opacity:.35;filter:blur(5px);transform:translateX(7px)}to{opacity:1;filter:none;transform:none} }

@media (max-width: 900px) {
  .section-shell,.case-hero,.case-facts,.case-layout { width:min(100% - 36px,var(--max)); }
  .site-header { padding-inline:18px; }.nav-toggle { display:block; position:relative; z-index:2; }.nav-toggle span { display:block; width:24px; height:1px; margin:6px; background:var(--text); transition:.2s; }
  .site-nav { position:fixed; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:70px 32px; background:rgba(7,10,19,.97); transform:translateX(100%); transition:.3s; }.site-nav.open { transform:none; }.site-nav a { width:100%; padding:18px 18px 18px 58px; font-size:1.45rem; }.site-nav a::before { left:20px;font-size:.7rem }.site-nav a::after { height:1px }
  .hero { padding-top:130px; }.hero-grid,.section-heading,.page-intro,.case-title-grid,.about-hero,.about-grid,.cv-panel { grid-template-columns:1fr; }.hero-grid { gap:60px; }.hero-panel { min-height:380px; }.proof-strip { grid-template-columns:1fr 1fr; }.proof-strip div:nth-child(2){border-right:0}.proof-strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .page-intro .eyebrow { margin:0; }.page-intro { gap:25px; }.case-layout { grid-template-columns:1fr; }.case-side { position:static; }.case-facts { grid-template-columns:1fr 1fr; }.case-fact:nth-child(2){border-right:0}.case-fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .capability-grid { grid-template-columns:1fr; }.capability-grid article { border-right:0; border-bottom:1px solid var(--line); }.cv-panel { padding:34px; gap:35px; }
  .hud-top { grid-template-columns:1fr 1fr; }.hud-top span:nth-child(2){display:none}.loadout-title { grid-template-columns:1fr; gap:22px; }.loadout-screen { grid-template-columns:180px 1fr; }.loadout-info { grid-column:1/-1; border-left:0;border-top:1px solid var(--line); }.class-option { grid-template-columns:24px 30px 1fr; padding-inline:6px; }.character-stage { min-height:530px; }.key-hint { display:none; }
  .profile-screen { grid-template-columns:220px 1fr; }.profile-loadout { grid-column:1/-1;border-left:0;border-top:1px solid var(--line); }.profile-loadout ul { display:grid; grid-template-columns:1fr 1fr; gap:0 25px; }
}
@media (max-width: 620px) {
  h1 { font-size:3.25rem; }.section-block { padding-block:90px; }.page-main { padding-top:125px; }.hero h1 br { display:none; }
  .project-grid { grid-template-columns:1fr; }.project-grid-featured .project-card:first-child { grid-column:auto; }.project-body { padding:22px; }.proof-strip div { padding:16px; }.section-heading { gap:20px; }.section-heading > p { font-size:.88rem; }
  .hero-panel { padding:30px; }.hero-panel h2 { margin-top:55px; }.case-media { width:calc(100% - 18px); margin-top:50px; }.case-media img { aspect-ratio:4/3; }.case-facts { grid-template-columns:1fr; }.case-fact { border-right:0; border-bottom:1px solid var(--line); }.case-section { padding-left:25px; }.case-section.missing { padding:25px; }.plain-list li { grid-template-columns:1fr; gap:6px; }.site-footer { flex-direction:column; }.site-footer div { flex-wrap:wrap; }
  .loadout-hero { padding-top:105px; }.hud-top { display:flex;justify-content:space-between }.hud-top span:last-child{display:none}.loadout-title { padding-top:45px; }.loadout-title h1 { font-size:3.7rem; }.loadout-screen { display:grid;grid-template-columns:1fr }.class-select { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:15px; border-right:0;border-bottom:1px solid var(--line); }.class-select > .hud-label { grid-column:1/-1;margin:5px 0 8px;padding:0 }.class-option[data-role="profile"] { grid-column:1/-1 }.class-option { grid-template-columns:22px 1fr;margin:0;padding:12px 8px }.class-icon { display:none }.class-option small { display:none }.character-stage { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:460px;padding:18px 0 }.character-stage .stage-code,.character-stage .gear-slot { display:none }.character-stage .avatar-holo[data-avatar-preview] { position:static;left:auto;top:auto;bottom:auto;margin:0;transform:translateZ(0) }.character-stage .avatar-controls { position:static;left:auto;top:auto;bottom:auto;flex:0 0 auto;width:278px;margin-top:6px;transform:none }.portrait-note{display:none}.loadout-info { padding:28px 22px }.role-description{min-height:auto}.evidence-panel > div { gap:12px }.mission-section::before{display:none}
  .profile-screen { display:block; }.profile-id { min-height:400px;border-right:0;border-bottom:1px solid var(--line); }.profile-copy { padding:40px 24px; }.profile-copy h1 { font-size:4rem; }.profile-loadout ul { display:block; }.achievement-list article { grid-template-columns:70px 1fr; gap:12px }.achievement-list article i { grid-column:2 }.achievement-list article div { grid-column:2 }
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.hero-panel{transform:none!important} }

/* Cyber studio homepage */
body.cyber-home { --bg:#070b16; --bg-2:#0b1120; --panel:rgba(10,17,32,.9); --panel-solid:#0b1222; --line:rgba(101,224,237,.18); --line-hot:rgba(32,224,225,.55); --text:#ecfaff; --muted:#8ca3b5; --mint:#20e0e1; --orange:#ff9e45; --blue:#778cff; color:var(--text); background:radial-gradient(circle at 82% 9%,rgba(178,45,255,.12),transparent 26rem),linear-gradient(180deg,#050812,#090f1e 55%,#070b16); }
body.cyber-home::before { opacity:.25; background-image:linear-gradient(rgba(32,224,225,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(32,224,225,.09) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(#000,transparent 75%); }
.cyber-home .site-header { z-index:30; }
.cyber-home .site-header.scrolled { background:rgba(5,8,18,.9); border-color:rgba(32,224,225,.2); backdrop-filter:blur(18px); }
.cyber-home .brand > span { color:#031013; background:var(--mint); box-shadow:3px 3px 0 #a72bff; }
.cyber-home .theme-toggle { display:none; }
.cyber-studio-hero { position:relative; width:min(100% - 36px,1680px); margin:0 auto; padding:116px 0 78px; }
.cyber-studio-copy { position:relative; z-index:4; display:grid; grid-template-columns:minmax(480px,1.2fr) minmax(300px,.55fr); align-items:end; gap:20px 60px; padding:0 clamp(0px,2.5vw,38px) 32px; }
.cyber-studio-copy h1 { margin:0; font-size:clamp(3.6rem,7vw,8.5rem); line-height:.78; letter-spacing:-.065em; text-shadow:0 0 34px rgba(32,224,225,.16); }
.cyber-studio-copy h1 small { display:block; margin-top:24px; color:var(--mint); font:800 clamp(.64rem,1vw,.9rem)/1.2 monospace; letter-spacing:.18em; }
.cyber-studio-copy > p:not(.cyber-kicker) { max-width:610px; margin:0; color:#a7b9c7; font-size:clamp(.94rem,1.2vw,1.12rem); }
.cyber-studio-copy .button-row { grid-column:1/-1; justify-content:flex-end; flex-wrap:nowrap; width:100%; margin-top:8px; }
.cyber-kicker { grid-column:1/-1; display:flex; align-items:center; gap:10px; margin:0 0 8px; color:#b36cff; font:800 .66rem monospace; letter-spacing:.16em; }
.cyber-kicker span { width:28px; height:2px; background:var(--mint); box-shadow:0 0 10px var(--mint); }
.cyber-studio-map { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(32,224,225,.42); background:#050812; box-shadow:0 0 0 1px rgba(169,45,255,.18),0 35px 100px rgba(0,0,0,.58),inset 0 0 70px rgba(9,16,33,.3); clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); scroll-margin-top:90px; }
.cyber-studio-map::before,.cyber-studio-map::after { content:""; position:absolute; z-index:8; pointer-events:none; }
.cyber-studio-map::before { inset:0; border:1px solid rgba(255,255,255,.06); box-shadow:inset 0 0 80px rgba(0,0,0,.28); }
.cyber-studio-map::after { inset:0; opacity:.09; background:repeating-linear-gradient(0deg,transparent 0 3px,#80faff 4px); mix-blend-mode:screen; }
.cyber-studio-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:auto; transition:opacity .48s ease; }
.cyber-studio-night-bg { opacity:1; }
.cyber-studio-day-bg { opacity:1; }
.cyber-studio-map.scene-day .cyber-studio-night-bg { opacity:0; }
.day-scene-visuals { position:absolute; z-index:1; inset:0; opacity:0; transform:translate(-.299%,.106%) scale(.998); transform-origin:50% 50%; transition:opacity .48s ease; pointer-events:none; }
.cyber-studio-map.scene-day .day-scene-visuals { opacity:1; }
.studio-scene-toggle { width:154px; min-width:154px; flex:0 0 154px; color:#eaffff; border-color:rgba(126,244,255,.58); background:rgba(6,17,31,.92); }
.studio-scene-toggle[aria-pressed="true"] { color:#07110f; border-color:#c6f8ff; background:#c6f8ff; box-shadow:4px 4px 0 rgba(184,55,255,.45); }
.cabinet-open-overlay { position:absolute; z-index:6; left:79.066%; top:41.552%; width:20.933%; height:58.448%; opacity:0; object-fit:fill; pointer-events:none; }
.cyber-studio-map:has(.hotspot-tools:hover) .cabinet-open-overlay,.cyber-studio-map:has(.hotspot-tools:focus-visible) .cabinet-open-overlay { opacity:1; filter:drop-shadow(1px 0 0 #7affff) drop-shadow(-1px 0 0 #7affff) drop-shadow(0 1px 0 #7affff) drop-shadow(0 -1px 0 #7affff) drop-shadow(0 0 7px rgba(32,224,225,.95)) drop-shadow(0 0 13px rgba(191,61,255,.72)); animation:cabinetOutlinePulse 1.25s ease-in-out infinite alternate; }
.slime-monitor-overlay { position:absolute; z-index:6; left:65.969%; top:30.074%; width:21.711%; height:30.818%; opacity:0; object-fit:fill; pointer-events:none; }
.cyber-studio-map:has(.hotspot-slime:hover) .slime-monitor-overlay,.cyber-studio-map:has(.hotspot-slime:focus-visible) .slime-monitor-overlay { opacity:1; filter:drop-shadow(1px 0 0 #7affff) drop-shadow(-1px 0 0 #7affff) drop-shadow(0 1px 0 #7affff) drop-shadow(0 -1px 0 #7affff) drop-shadow(0 0 8px rgba(32,224,225,.98)) drop-shadow(0 0 15px rgba(191,61,255,.75)); animation:cabinetOutlinePulse 1.25s ease-in-out infinite alternate; }
.code-monitor-layer { position:absolute; z-index:6; left:47.010%; top:25.824%; width:20.335%; height:35.600%; opacity:0; pointer-events:none; }
.code-monitor-layer > img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.cyber-studio-map:has(.hotspot-code:hover) .code-monitor-layer,.cyber-studio-map:has(.hotspot-code:focus-visible) .code-monitor-layer { opacity:1; filter:drop-shadow(1px 0 0 #7affff) drop-shadow(-1px 0 0 #7affff) drop-shadow(0 1px 0 #7affff) drop-shadow(0 -1px 0 #7affff) drop-shadow(0 0 8px rgba(32,224,225,.98)) drop-shadow(0 0 15px rgba(191,61,255,.75)); animation:cabinetOutlinePulse 1.25s ease-in-out infinite alternate; }
.boardgames-overlay { position:absolute; z-index:6; left:0; top:40.383%; width:36.065%; height:45.696%; opacity:0; object-fit:fill; pointer-events:none; }
.cyber-studio-map:has(.hotspot-tabletop:hover) .boardgames-overlay,.cyber-studio-map:has(.hotspot-tabletop:focus-visible) .boardgames-overlay { opacity:1; filter:drop-shadow(1px 0 0 #7affff) drop-shadow(-1px 0 0 #7affff) drop-shadow(0 1px 0 #7affff) drop-shadow(0 -1px 0 #7affff) drop-shadow(0 0 8px rgba(32,224,225,.98)) drop-shadow(0 0 15px rgba(191,61,255,.75)); animation:cabinetOutlinePulse 1.25s ease-in-out infinite alternate; }
.event-overlay { position:absolute; z-index:6; left:22.548%; top:.956%; width:22.129%; height:42.083%; opacity:0; object-fit:fill; pointer-events:none; }
.cyber-studio-map:has(.hotspot-expo:hover) .event-overlay,.cyber-studio-map:has(.hotspot-expo:focus-visible) .event-overlay { opacity:1; filter:drop-shadow(1px 0 0 #7affff) drop-shadow(-1px 0 0 #7affff) drop-shadow(0 1px 0 #7affff) drop-shadow(0 -1px 0 #7affff) drop-shadow(0 0 8px rgba(32,224,225,.98)) drop-shadow(0 0 15px rgba(191,61,255,.75)); animation:cabinetOutlinePulse 1.25s ease-in-out infinite alternate; }
.tablet-overlay { position:absolute; z-index:6; left:54.306%; top:60.893%; width:21.053%; height:18.810%; opacity:0; object-fit:fill; pointer-events:none; }
.cyber-studio-map:has(.hotspot-ui:hover) .tablet-overlay,.cyber-studio-map:has(.hotspot-ui:focus-visible) .tablet-overlay { opacity:1; filter:drop-shadow(1px 0 0 #7affff) drop-shadow(-1px 0 0 #7affff) drop-shadow(0 1px 0 #7affff) drop-shadow(0 -1px 0 #7affff) drop-shadow(0 0 8px rgba(32,224,225,.98)) drop-shadow(0 0 15px rgba(191,61,255,.75)); animation:cabinetOutlinePulse 1.25s ease-in-out infinite alternate; }
.painting-overlay { position:absolute; z-index:6; left:50.359%; top:16.897%; width:14.833%; height:11.371%; opacity:0; object-fit:fill; pointer-events:none; }
.cyber-studio-map:has(.hotspot-art:hover) .painting-overlay,.cyber-studio-map:has(.hotspot-art:focus-visible) .painting-overlay { opacity:1; filter:drop-shadow(1px 0 0 #7affff) drop-shadow(-1px 0 0 #7affff) drop-shadow(0 1px 0 #7affff) drop-shadow(0 -1px 0 #7affff) drop-shadow(0 0 8px rgba(32,224,225,.98)) drop-shadow(0 0 15px rgba(191,61,255,.75)); animation:cabinetOutlinePulse 1.25s ease-in-out infinite alternate; }
.scene-layer-day { display:none; }
.cyber-studio-map.scene-day .scene-layer-night { display:none; }
.cyber-studio-map.scene-day .scene-layer-day { display:block; }
.day-scene-overlay { position:absolute; z-index:6; opacity:0; object-fit:fill; pointer-events:none; }
.day-cabinet-overlay { left:80.921%; top:42.933%; width:19.019%; height:56.960%; }
.day-slime-overlay { left:66.328%; top:29.862%; width:21.830%; height:32.200%; }
.day-code-overlay { left:47.787%; top:25.930%; width:19.258%; height:35.282%; }
.day-boardgames-overlay { left:0; top:40.808%; width:36.124%; height:44.633%; }
.day-event-overlay { left:23.146%; top:.850%; width:21.651%; height:41.658%; }
.day-tablet-overlay { left:54.665%; top:61.105%; width:21.232%; height:18.597%; }
.day-painting-overlay { left:51.316%; top:16.684%; width:13.995%; height:11.690%; }
.cyber-studio-map.scene-day:has(.hotspot-tools:hover) .day-cabinet-overlay,
.cyber-studio-map.scene-day:has(.hotspot-tools:focus-visible) .day-cabinet-overlay,
.cyber-studio-map.scene-day:has(.hotspot-slime:hover) .day-slime-overlay,
.cyber-studio-map.scene-day:has(.hotspot-slime:focus-visible) .day-slime-overlay,
.cyber-studio-map.scene-day:has(.hotspot-code:hover) .day-code-overlay,
.cyber-studio-map.scene-day:has(.hotspot-code:focus-visible) .day-code-overlay,
.cyber-studio-map.scene-day:has(.hotspot-tabletop:hover) .day-boardgames-overlay,
.cyber-studio-map.scene-day:has(.hotspot-tabletop:focus-visible) .day-boardgames-overlay,
.cyber-studio-map.scene-day:has(.hotspot-expo:hover) .day-event-overlay,
.cyber-studio-map.scene-day:has(.hotspot-expo:focus-visible) .day-event-overlay,
.cyber-studio-map.scene-day:has(.hotspot-ui:hover) .day-tablet-overlay,
.cyber-studio-map.scene-day:has(.hotspot-ui:focus-visible) .day-tablet-overlay,
.cyber-studio-map.scene-day:has(.hotspot-art:hover) .day-painting-overlay,
.cyber-studio-map.scene-day:has(.hotspot-art:focus-visible) .day-painting-overlay {
  opacity:1;
  filter:drop-shadow(1px 0 0 #fff0bd) drop-shadow(-1px 0 0 #fff0bd) drop-shadow(0 1px 0 #fff0bd) drop-shadow(0 -1px 0 #fff0bd) drop-shadow(0 0 8px rgba(255,197,92,.82)) drop-shadow(0 0 13px rgba(89,205,174,.58));
  animation:dayOutlinePulse 1.25s ease-in-out infinite alternate;
}
.studio-scan { position:absolute; z-index:3; left:0; right:0; top:-10%; height:12%; opacity:.16; background:linear-gradient(transparent,rgba(76,246,255,.5),transparent); animation:studioScan 7s linear infinite; pointer-events:none; }
.cyber-hotspot { position:absolute; z-index:10; display:block; color:#eefdff; border:1px solid transparent; outline:0; }
.cyber-hotspot::after { content:attr(data-index); position:absolute; z-index:6; right:-2px; top:-2px; display:grid; place-items:center; width:28px; height:24px; color:#031013; border:1px solid #9cffff; background:var(--mint); box-shadow:3px 3px 0 rgba(184,55,255,.78),0 0 18px rgba(32,224,225,.72); font:900 .56rem monospace; letter-spacing:.03em; clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); animation:nodeMarker 1.8s ease-in-out infinite; }
.cyber-hotspot::before { content:""; position:absolute; inset:0; opacity:0; border:1px solid rgba(32,224,225,.78); background:rgba(17,235,235,.06); box-shadow:inset 0 0 34px rgba(32,224,225,.1),0 0 24px rgba(32,224,225,.2); transition:opacity .2s; }
.cyber-hotspot:hover::before,.cyber-hotspot:focus-visible::before { opacity:1; animation:hotspotBracket 1s steps(2,end) infinite; }
.hotspot-tools::before,.hotspot-slime::before,.hotspot-code::before,.hotspot-tabletop::before,.hotspot-expo::before,.hotspot-ui::before,.hotspot-art::before { display:none; }
.hotspot-ping { position:absolute; right:2px; top:2px; width:30px; aspect-ratio:1; border:1px solid rgba(32,224,225,.7); border-radius:50%; box-shadow:0 0 0 5px rgba(32,224,225,.12),0 0 18px rgba(32,224,225,.65); animation:hotspotPing 1.6s ease-in-out infinite; }
.hotspot-label { position:absolute; z-index:4; left:50%; bottom:calc(100% + 8px); min-width:max-content; padding:8px 11px; opacity:0; color:#edfaff; border:1px solid var(--mint); background:rgba(4,10,20,.94); box-shadow:4px 4px 0 rgba(179,46,255,.42),0 0 25px rgba(32,224,225,.18); font:800 .64rem monospace; letter-spacing:.04em; transform:translate(-50%,8px); transition:opacity .18s,transform .18s; pointer-events:none; }
.hotspot-label small { display:block; margin-bottom:3px; color:var(--mint); font-size:.5rem; letter-spacing:.12em; }
.cyber-hotspot:hover .hotspot-label,.cyber-hotspot:focus-visible .hotspot-label { opacity:1; transform:translate(-50%,0); }
.hotspot-expo .hotspot-label { top:calc(100% + 8px); bottom:auto; }
.hotspot-art .hotspot-label { top:calc(100% + 8px); bottom:auto; }
.hotspot-profile .hotspot-label { left:auto; right:0; top:calc(100% + 8px); bottom:auto; transform:translate(0,8px); }
.hotspot-profile:hover .hotspot-label,.hotspot-profile:focus-visible .hotspot-label { transform:translate(0,0); }
.hotspot-slime .hotspot-label,.hotspot-tools .hotspot-label { left:auto; right:0; transform:translate(0,8px); }
.hotspot-slime:hover .hotspot-label,.hotspot-slime:focus-visible .hotspot-label,.hotspot-tools:hover .hotspot-label,.hotspot-tools:focus-visible .hotspot-label { transform:translate(0,0); }
.hotspot-expo { left:22.548%; top:.956%; width:22.129%; height:42.083%; }
.hotspot-tabletop { left:0; top:40.383%; width:36.065%; height:45.696%; }
.hotspot-tabletop::after { left:43%; right:auto; top:1%; }
.hotspot-tabletop .hotspot-ping { left:43%; right:auto; top:1%; }
.hotspot-code { left:47.010%; top:25.824%; width:20.335%; height:35.600%; }
.hotspot-code::after { right:3%; top:1%; }
.hotspot-code .hotspot-ping { right:3%; top:1%; }
.hotspot-slime { left:65.969%; top:30.074%; width:21.711%; height:30.818%; }
.hotspot-slime::after { right:1%; top:1%; }
.hotspot-slime .hotspot-ping { right:1%; top:1%; }
.hotspot-ui { left:54.306%; top:60.893%; width:21.053%; height:18.810%; }
.hotspot-ui::after { right:14%; top:5%; }
.hotspot-ui .hotspot-ping { right:14%; top:5%; }
.hotspot-tools { left:79.066%; top:41.552%; width:20.933%; height:58.448%; }
.hotspot-tools::after { left:26%; right:auto; top:35%; }
.hotspot-tools .hotspot-ping { left:26%; right:auto; top:35%; }
.hotspot-art { left:50.359%; top:16.897%; width:14.833%; height:11.371%; }
.hotspot-art::after { right:2%; top:8%; }
.hotspot-art .hotspot-ping { right:2%; top:8%; }
.hotspot-profile { left:76%; top:1%; width:18%; height:24%; }
.cyber-studio-map.scene-day .hotspot-expo { left:22.901%; top:1.054%; width:21.608%; height:41.575%; }
.cyber-studio-map.scene-day .hotspot-tabletop { left:-.199%; top:40.932%; width:36.052%; height:44.544%; }
.cyber-studio-map.scene-day .hotspot-code { left:47.492%; top:26.084%; width:19.219%; height:35.211%; }
.cyber-studio-map.scene-day .hotspot-slime { left:65.996%; top:30.008%; width:21.786%; height:32.136%; }
.cyber-studio-map.scene-day .hotspot-ui { left:54.357%; top:61.189%; width:21.190%; height:18.560%; }
.cyber-studio-map.scene-day .hotspot-tools { left:80.560%; top:43.053%; width:18.981%; height:56.846%; }
.cyber-studio-map.scene-day .hotspot-art { left:51.014%; top:16.857%; width:13.967%; height:11.667%; }
.cyber-hotspot::after,.hotspot-ping { display:none; }
.studio-object-marker { position:absolute; z-index:9; width:28px; height:24px; pointer-events:none; }
.studio-object-marker::after { content:attr(data-index); position:absolute; inset:0; display:grid; place-items:center; color:#031013; border:1px solid #9cffff; background:var(--mint); box-shadow:3px 3px 0 rgba(184,55,255,.78),0 0 18px rgba(32,224,225,.72); font:900 .56rem monospace; letter-spacing:.03em; clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); animation:nodeMarker 1.8s ease-in-out infinite; }
.studio-object-marker::before { content:""; position:absolute; z-index:-1; left:-1px; top:-1px; width:30px; aspect-ratio:1; border:1px solid rgba(32,224,225,.7); border-radius:50%; box-shadow:0 0 0 5px rgba(32,224,225,.12),0 0 18px rgba(32,224,225,.65); animation:hotspotPing 1.6s ease-in-out infinite; }
.marker-expo { left:calc(44.677% - 26px); top:calc(.956% - 2px); }
.marker-tabletop { left:15.508%; top:40.840%; }
.marker-code { left:calc(66.735% - 28px); top:26.180%; }
.marker-slime { left:calc(87.463% - 28px); top:30.382%; }
.marker-ui { left:calc(72.412% - 28px); top:61.834%; }
.marker-tools { left:84.509%; top:62.009%; }
.marker-art { left:calc(64.895% - 28px); top:17.807%; }
.monitor-sweep { display:none; position:absolute; z-index:3; inset:4% 3%; opacity:0; background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(32,224,225,.42) 9px 10px); transform:translateY(-20%); }
.hotspot-code:hover .monitor-sweep,.hotspot-code:focus-visible .monitor-sweep { opacity:.55; animation:monitorCode 1s steps(5,end) infinite; }
.tablet-grid { position:absolute; inset:12% 9%; opacity:0; background:linear-gradient(90deg,transparent 48%,rgba(32,224,225,.55) 49% 51%,transparent 52%),linear-gradient(0deg,transparent 48%,rgba(183,65,255,.55) 49% 51%,transparent 52%); background-size:22px 22px; }
.hotspot-ui .tablet-grid { display:none; }
.hotspot-ui:hover .tablet-grid,.hotspot-ui:focus-visible .tablet-grid { opacity:.65; animation:tabletBuild .7s steps(3,end) infinite alternate; }
.hotspot-tabletop:hover,.hotspot-tabletop:focus-visible { animation:tabletopNudge .42s steps(2,end) infinite alternate; }
.cyber-studio-hud { position:absolute; z-index:12; left:15px; right:15px; bottom:12px; display:grid; grid-template-columns:1fr auto 1fr; padding:8px 12px; color:#7993a7; border:1px solid rgba(32,224,225,.24); background:rgba(4,9,18,.78); backdrop-filter:blur(5px); font:700 .55rem monospace; letter-spacing:.1em; }
.cyber-studio-hud strong { color:var(--mint); }.cyber-studio-hud span:last-child { color:#b960ff; text-align:right; }
.studio-mobile-menu { display:none; }
.cyber-home .loadout-hero { padding-top:105px; }
.cyber-home .loadout-title h1 em { color:var(--mint); }
.cyber-home .loadout-screen { border-color:rgba(var(--role-rgb),.65); background:linear-gradient(135deg,#0a1121,#070b15); box-shadow:0 0 0 1px rgba(175,50,255,.14),0 32px 100px rgba(0,0,0,.45); }
.cyber-home .character-stage { background:radial-gradient(circle at 50% 44%,rgba(var(--role-rgb),.14),transparent 34%),linear-gradient(180deg,#0b1528,#070c18); }
.cyber-home .character-stage::before { content:""; position:absolute; inset:0; opacity:.35; background:linear-gradient(rgba(var(--role-rgb),.18) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--role-rgb),.18) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(transparent,#000 25%,#000 80%,transparent); }
.cyber-home .class-select,.cyber-home .loadout-info { background:rgba(7,12,24,.9); }
.cyber-home .proof-strip { border-color:rgba(32,224,225,.18); background:rgba(8,15,28,.7); }
@keyframes studioScan { to{transform:translateY(920%)} }
@keyframes hotspotPing { 50%{opacity:.45;transform:scale(.72);box-shadow:0 0 0 8px rgba(213,81,255,.04),0 0 8px #d551ff} }
@keyframes nodeMarker { 50%{filter:brightness(1.25);box-shadow:3px 3px 0 rgba(184,55,255,.92),0 0 27px rgba(32,224,225,.92)} }
@keyframes cabinetOutlinePulse { to{filter:drop-shadow(1px 0 0 #b9ffff) drop-shadow(-1px 0 0 #b9ffff) drop-shadow(0 1px 0 #b9ffff) drop-shadow(0 -1px 0 #b9ffff) drop-shadow(0 0 10px rgba(32,224,225,1)) drop-shadow(0 0 18px rgba(191,61,255,.88))} }
@keyframes dayOutlinePulse { to{filter:drop-shadow(1px 0 0 #fff8dc) drop-shadow(-1px 0 0 #fff8dc) drop-shadow(0 1px 0 #fff8dc) drop-shadow(0 -1px 0 #fff8dc) drop-shadow(0 0 11px rgba(255,188,70,.94)) drop-shadow(0 0 17px rgba(72,190,163,.7))} }
@keyframes hotspotBracket { 50%{border-color:#c348ff;box-shadow:inset 0 0 36px rgba(195,72,255,.12),0 0 28px rgba(32,224,225,.28)} }
@keyframes monitorCode { to{transform:translateY(20%)} }
@keyframes tabletBuild { to{filter:hue-rotate(35deg);transform:scale(.98)} }
@keyframes tabletopNudge { to{filter:brightness(1.1) drop-shadow(0 0 7px rgba(32,224,225,.35))} }
@media (max-width:900px) { .cyber-studio-copy{grid-template-columns:1fr}.cyber-studio-copy>p:not(.cyber-kicker),.cyber-studio-copy .button-row{grid-column:1}.cyber-studio-map{height:auto;overflow:hidden;aspect-ratio:16/9}.cyber-studio-bg{width:100%;height:100%;max-width:100%;object-position:center}.cyber-studio-hud,.studio-scan{display:none}.cyber-hotspot{display:block}.cyber-hotspot::before,.hotspot-label{display:none}.cyber-hotspot::after{width:24px;height:21px;font-size:.5rem;transform:scale(.9);transform-origin:top right}.hotspot-ping{width:25px}.studio-mobile-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.studio-mobile-menu a{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:13px;color:var(--text);border:1px solid var(--line);background:#0a1222}.studio-mobile-menu b{color:var(--mint);font:800 .65rem monospace}.studio-mobile-menu span,.studio-mobile-menu small{display:block}.studio-mobile-menu span{font-size:.74rem;font-weight:800}.studio-mobile-menu small{margin-top:2px;color:var(--muted);font:600 .55rem monospace}.cyber-studio-hero{padding-top:105px}.cyber-studio-copy h1{font-size:clamp(3.5rem,13vw,6rem)} }
@media (max-width:560px) { .cyber-studio-hero{width:calc(100% - 22px)}.cyber-studio-copy{padding-inline:0}.cyber-studio-copy h1{line-height:.84}.cyber-hotspot::after{width:20px;height:18px;font-size:.44rem}.hotspot-ping{width:21px}.studio-mobile-menu{grid-template-columns:1fr}.cyber-studio-copy .button-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cyber-studio-copy .button{min-width:0;width:auto;padding-inline:8px;font-size:.56rem;white-space:nowrap} }

/* Full case-study migration */
.case-warning { margin:0 0 42px; padding:15px 18px; color:#ffd8c5; border:1px solid rgba(255,150,85,.7); background:rgba(255,150,85,.08); font-size:.82rem; }
.case-warning strong { display:block; margin-bottom:5px; color:var(--orange); font:800 .62rem monospace; letter-spacing:.12em; text-transform:uppercase; }
.case-note { margin:32px 0 0; padding:18px 20px; border:1px solid rgba(255,150,85,.45); background:rgba(255,150,85,.055); }
.case-note strong { color:var(--orange); font:800 .62rem monospace; letter-spacing:.1em; text-transform:uppercase; }
.case-note p { margin:8px 0 0; }
.case-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:34px; }
.case-gallery-item { position:relative; min-width:0; padding:0; overflow:hidden; color:var(--text); border:1px solid var(--line); background:#0a1020; text-align:left; cursor:zoom-in; }
.case-gallery-item::before { content:"VIEW"; position:absolute; z-index:2; right:10px; top:10px; padding:5px 7px; color:#041013; background:var(--mint); font:900 .5rem monospace; letter-spacing:.1em; opacity:0; transform:translateY(-5px); transition:.2s; }
.case-gallery-item:hover::before,.case-gallery-item:focus-visible::before { opacity:1; transform:none; }
.case-gallery-item:focus-visible { outline:1px solid var(--mint); outline-offset:3px; }
.case-gallery-item img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:#11182a; transition:transform .35s ease,filter .35s ease; }
.case-gallery-item:hover img { transform:scale(1.025); filter:brightness(1.06); }
.case-gallery-item span { display:flex; gap:10px; min-height:46px; align-items:center; padding:10px 12px; color:#c9d6e7; font-size:.7rem; }
.case-gallery-item span b { color:var(--mint); font:800 .55rem monospace; }
.case-video-grid { display:grid; gap:18px; margin-top:34px; }
.case-video-grid figure { margin:0; overflow:hidden; border:1px solid var(--line); background:#080e1a; box-shadow:0 20px 60px rgba(0,0,0,.22); }
.case-video-grid video,.case-video-grid iframe { display:block; width:100%; aspect-ratio:16/9; border:0; background:#02050a; }
.case-video-grid video { max-height:620px; }
.case-video-grid figcaption { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:13px 15px; color:var(--muted); font-size:.72rem; }
.case-video-grid figcaption a { flex:0 0 auto; color:var(--mint); font:800 .58rem monospace; letter-spacing:.08em; text-transform:uppercase; }
.case-library { width:min(1240px,calc(100% - 64px)); margin:20px auto 130px; }
.case-library-heading { display:grid; grid-template-columns:.35fr 1fr .65fr; gap:42px; align-items:end; margin-bottom:38px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.case-library-heading h2 { margin:0; font-size:clamp(2.4rem,5vw,5.2rem); line-height:.95; }
.case-library-heading>p:last-child { margin:0; color:var(--muted); }
.case-collection { border:1px solid var(--line); border-bottom:0; background:rgba(8,13,25,.72); }
.case-collection:last-child { border-bottom:1px solid var(--line); }
.case-collection summary { display:grid; grid-template-columns:44px 1fr auto; gap:16px; align-items:center; padding:20px 22px; cursor:pointer; list-style:none; }
.case-collection summary::-webkit-details-marker { display:none; }
.case-collection summary span,.case-collection summary em { color:var(--mint); font:800 .58rem monospace; font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.case-collection summary strong { font-size:1rem; }
.case-collection[open] summary { border-bottom:1px solid var(--line); background:rgba(32,224,225,.035); }
.case-collection-body { padding:26px; }
.case-collection-body>p { max-width:740px; margin:0 0 25px; color:var(--muted); }
.case-collection-body>.case-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0; }
.media-lightbox { width:min(1200px,calc(100% - 32px)); max-width:none; max-height:calc(100vh - 32px); padding:0; color:var(--text); border:1px solid var(--mint); background:#040814; box-shadow:0 0 80px rgba(0,0,0,.8),0 0 28px rgba(32,224,225,.22); }
.media-lightbox::backdrop { background:rgba(0,3,10,.88); backdrop-filter:blur(8px); }
.media-lightbox>button { position:sticky; z-index:3; left:100%; top:0; margin:12px; padding:8px 11px; color:#061013; border:0; background:var(--mint); font:900 .58rem monospace; text-transform:uppercase; cursor:pointer; }
.media-lightbox figure { display:grid; place-items:center; margin:0; min-height:240px; }
.media-lightbox img { width:auto; max-width:100%; max-height:calc(100vh - 120px); object-fit:contain; }
.media-lightbox figcaption { width:100%; padding:12px 18px 18px; color:var(--muted); text-align:center; font-size:.75rem; }

@media (max-width:900px) {
  .case-library { width:min(100% - 36px,1240px); }
  .case-library-heading { grid-template-columns:1fr; gap:15px; }
  .case-collection-body>.case-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .case-gallery,.case-collection-body>.case-gallery { grid-template-columns:1fr; }
  .case-video-grid figcaption { align-items:flex-start; flex-direction:column; gap:8px; }
  .case-collection summary { grid-template-columns:30px 1fr; padding:17px 15px; }
  .case-collection summary em { grid-column:2; }
  .case-collection-body { padding:14px; }
  .case-library { margin-bottom:85px; }
}

/* Interactive creative desk */
.studio-section::before { content:"WORKSPACE MAP // CLICK OBJECTS TO INSPECT"; }
.studio-frame { overflow:hidden; border:2px solid rgba(89,73,42,.25); background:#fff9e7; box-shadow:0 9px 0 #c7b983,0 28px 60px rgba(82,70,39,.16); }
.studio-toolbar { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; padding:12px 16px; color:#6c735f; border-bottom:1px solid rgba(89,73,42,.2); background:#f6ecca; font:700 .6rem monospace; letter-spacing:.09em; }.studio-toolbar strong { color:var(--mint); }.studio-toolbar span:last-child { text-align:right; }
.studio-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; min-height:650px; }
.studio-viewport { min-width:0; overflow:hidden; border-right:1px solid rgba(89,73,42,.2); }
.studio-desk { --token-x:24%; --token-y:50%; position:relative; width:100%; min-width:760px; min-height:650px; overflow:hidden; background:repeating-linear-gradient(90deg,transparent 0 120px,rgba(99,62,31,.11) 121px 123px),linear-gradient(165deg,#d7a66a,#bd7e48 55%,#aa6e3e); box-shadow:inset 0 0 90px rgba(70,38,16,.16); }
.studio-desk::before { content:""; position:absolute; inset:0; opacity:.2; background-image:radial-gradient(rgba(69,38,18,.45) .8px,transparent .8px); background-size:9px 9px; pointer-events:none; }.studio-desk::after { content:"DESK 01 / ACTIVE WORKSPACE"; position:absolute; left:16px; bottom:12px; color:rgba(74,44,25,.5); font:700 .55rem monospace; letter-spacing:.11em; }
.desk-light { position:absolute; right:-90px; top:-120px; width:430px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,250,207,.52),transparent 68%); pointer-events:none; }.desk-mat { position:absolute; left:31%; top:24%; width:42%; height:55%; border:2px solid rgba(27,92,85,.2); background:rgba(43,118,107,.18); border-radius:8px; box-shadow:inset 0 0 30px rgba(25,81,76,.12); transform:rotate(-1deg); }.desk-cable { position:absolute; width:250px; height:120px; border:5px solid rgba(42,45,38,.42); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; pointer-events:none; }.cable-a{right:-70px;top:33%;transform:rotate(20deg)}.cable-b{left:34%;bottom:-85px;transform:rotate(-40deg)}
.studio-object { position:absolute; z-index:3; padding:0; border:0; background:transparent; color:#27373a; cursor:pointer; filter:drop-shadow(0 8px 6px rgba(56,31,13,.24)); transition:filter .22s,transform .22s; }.studio-object::before { content:""; position:absolute; z-index:-1; inset:-12px; border:2px dashed transparent; border-radius:12px; transition:border-color .2s,background .2s; }.studio-object:hover,.studio-object:focus-visible,.studio-object.active { z-index:6; filter:drop-shadow(0 13px 8px rgba(50,31,14,.28)); transform:translateY(-6px) scale(1.025); outline:0; }.studio-object:hover::before,.studio-object:focus-visible::before,.studio-object.active::before { border-color:#fff7c9; background:rgba(255,251,208,.18); animation:objectPulse 1.5s ease-in-out infinite; }.studio-object.visited::after { content:"✓"; position:absolute; right:-16px; top:-18px; display:grid; place-items:center; width:24px; aspect-ratio:1; color:#fff; background:var(--mint); border:2px solid #fff9e7; border-radius:50%; font:900 .7rem monospace; box-shadow:0 3px 0 rgba(73,54,28,.2); }
.object-label { position:absolute; z-index:4; left:50%; top:calc(100% + 12px); min-width:155px; padding:8px 10px; color:#2b3d3d; border:1px solid rgba(71,57,31,.28); background:rgba(255,249,224,.94); box-shadow:0 4px 0 rgba(84,63,31,.16); transform:translateX(-50%); pointer-events:none; transition:background .2s,border-color .2s; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }.object-label small,.object-label strong { display:block; }.object-label small { color:#b66032; font:800 .5rem monospace; letter-spacing:.09em; }.object-label strong { margin-top:2px; font:900 .64rem var(--body); letter-spacing:.03em; white-space:nowrap; }.studio-object:hover .object-label,.studio-object.active .object-label { color:#fff; border-color:var(--mint); background:var(--mint); }.studio-object:hover .object-label small,.studio-object.active .object-label small { color:#d7fff4; }
.object-profile { left:6%;top:7%;width:120px;height:125px }.object-tabletop{left:7%;top:35%;width:190px;height:150px}.object-bga{left:36%;top:6%;width:220px;height:150px}.object-slime{right:7%;top:8%;width:125px;height:150px}.object-tools{right:6%;bottom:11%;width:190px;height:120px}.object-ui{left:41%;bottom:8%;width:180px;height:140px}.object-prototypes{left:8%;bottom:8%;width:155px;height:115px}
.card-stack { position:absolute; inset:10px 20px; }.card-stack i { position:absolute; left:30px; top:5px; width:88px; height:125px; border:3px solid #f4d384; border-radius:8px; background:linear-gradient(145deg,#6f2734,#3b1925); box-shadow:0 4px 0 #5c382b; }.card-stack i:nth-child(1){transform:rotate(-14deg);left:4px}.card-stack i:nth-child(2){transform:rotate(13deg);left:65px;background:linear-gradient(145deg,#234e58,#132f38)}.card-stack i:nth-child(3){transform:rotate(1deg);left:36px;background:radial-gradient(circle,#d6a54c 0 8%,transparent 9%),linear-gradient(145deg,#793342,#381922)}.card-stack b { position:absolute; z-index:2; left:63px; top:53px; color:#f7d998; font:900 1rem Georgia,serif; }
.desk-monitor { position:absolute; left:10px; right:10px; top:0; height:115px; border:8px solid #d8ded9; border-bottom-width:13px; border-radius:8px; background:linear-gradient(135deg,#122d3b,#275267); box-shadow:0 5px 0 #7e8a86; }.desk-monitor::before { content:""; position:absolute; left:50%; bottom:-30px; width:14px; height:20px; background:#858f8b; transform:translateX(-50%); }.desk-monitor::after { content:""; position:absolute; left:50%; bottom:-36px; width:70px; height:9px; border-radius:50%; background:#707b77; transform:translateX(-50%); }.desk-monitor i { position:absolute; inset:16px; display:grid; place-items:center; color:#77ead0; border:1px solid rgba(119,234,208,.5); background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(107,213,190,.12) 9px); font:900 1.3rem monospace; font-style:normal; }.desk-monitor b { position:absolute; left:18px; right:18px; bottom:8px; height:2px; background:#66cfb8; box-shadow:0 0 8px #66cfb8; }
.slime-pod { position:absolute; left:16px; top:0; width:95px; height:125px; border:5px solid rgba(235,249,239,.8); border-radius:48% 48% 42% 42%; background:linear-gradient(180deg,rgba(221,247,238,.55),rgba(60,190,122,.45)); box-shadow:inset 8px 5px 14px rgba(255,255,255,.55),0 7px 0 rgba(58,91,65,.25); overflow:hidden; }.slime-pod i { position:absolute; left:15px; right:15px; bottom:10px; height:65px; border-radius:50% 48% 38% 40%; background:radial-gradient(circle at 65% 30%,#caff68 0 5px,transparent 6px),linear-gradient(145deg,#91f44d,#2ab765); animation:slimeBob 2.4s ease-in-out infinite; }.slime-pod b { position:absolute; z-index:2; left:50%; top:17px; color:#17694a; font:900 .6rem monospace; transform:translateX(-50%); }
.file-tray { position:absolute; inset:10px 8px; padding:14px; border:5px solid #566573; border-top-width:9px; border-radius:5px; background:#dbe2df; box-shadow:0 7px 0 #39454f; transform:rotate(2deg); }.file-tray i { display:block; margin:4px 0; padding:4px 6px; color:#42515b; background:#fff8d8; border-left:7px solid #e69a4d; font:700 .53rem monospace; font-style:normal; }.file-tray b { position:absolute; right:12px; bottom:10px; color:#2b695d; font:900 1rem monospace; }
.drawing-tablet { position:absolute; inset:5px 14px; border:7px solid #303b45; border-radius:10px; background:linear-gradient(145deg,#e8fbf0,#b9dfd3); box-shadow:0 7px 0 #1f2a31; transform:rotate(-4deg); }.drawing-tablet i { position:absolute; inset:15px; background:linear-gradient(90deg,transparent 48%,rgba(38,105,93,.2) 49% 51%,transparent 52%),linear-gradient(0deg,transparent 48%,rgba(38,105,93,.2) 49% 51%,transparent 52%); }.drawing-tablet b { position:absolute; left:50%; top:50%; color:#228c79; font:900 1.5rem var(--display); transform:translate(-50%,-50%); }.drawing-tablet em { position:absolute; right:-16px; bottom:-20px; width:8px; height:95px; border-radius:5px; background:#27343d; transform:rotate(18deg); box-shadow:0 3px 0 rgba(0,0,0,.2); }
.game-pad { position:absolute; inset:12px 8px; border:5px solid #e7e4d4; border-radius:42% 42% 34% 34%; background:#5666a0; box-shadow:0 7px 0 #2f385f; transform:rotate(3deg); }.game-pad::before,.game-pad::after { content:""; position:absolute; bottom:-20px; width:45px; height:48px; border-radius:0 0 30px 30px; background:#5666a0; box-shadow:0 7px 0 #2f385f; }.game-pad::before{left:7px;transform:rotate(12deg)}.game-pad::after{right:7px;transform:rotate(-12deg)}.game-pad b { position:absolute; left:23px; top:38px; color:#e7e4d4; font:900 1.4rem monospace; }.game-pad i,.game-pad em { position:absolute; width:14px; aspect-ratio:1; border-radius:50%; background:#f0b04c; }.game-pad i{right:29px;top:33px}.game-pad em{right:12px;top:48px;background:#67c5a7}
.cv-paper { position:absolute; inset:4px 18px 8px; padding:14px; color:#354747; border:1px solid #d4c49b; background:#fff9df; box-shadow:7px 8px 0 rgba(66,43,20,.18); transform:rotate(-5deg); }.cv-paper::before { content:""; position:absolute; left:15px; right:15px; top:48px; height:36px; background:repeating-linear-gradient(0deg,#aab6ad 0 2px,transparent 2px 9px); }.cv-paper i,.cv-paper b { display:block; font-style:normal; }.cv-paper i { color:#218c78; font:900 1rem var(--display); }.cv-paper b { margin-top:4px; color:#e57640; font:900 .7rem monospace; }.cv-paper em { position:absolute; right:-15px; top:-12px; width:25px; height:50px; border:4px solid #59717a; border-bottom:0; border-radius:13px 13px 0 0; transform:rotate(8deg); }
.studio-token { position:absolute; z-index:10; left:var(--token-x); top:var(--token-y); width:42px; height:42px; border:3px solid #fff8c5; border-radius:50%; background:rgba(26,155,131,.9); box-shadow:0 0 0 7px rgba(255,248,197,.25),0 6px 0 rgba(69,49,25,.2); transform:translate(-50%,-50%); pointer-events:none; transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1); }.studio-token::before,.studio-token::after { content:""; position:absolute; background:#fff8c5; }.studio-token::before{left:50%;top:-12px;width:2px;height:66px}.studio-token::after{top:50%;left:-12px;width:66px;height:2px}.studio-token span { position:absolute; inset:6px; z-index:2; display:grid; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.7); border-radius:50%; font:900 .72rem monospace; }.studio-token i { position:absolute; left:50%; bottom:-17px; width:0; height:0; border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #fff8c5;transform:translateX(-50%)}
.studio-drawer { position:relative; padding:32px 26px; background:#fffaf0; }.drawer-status { display:flex; justify-content:space-between; color:var(--mint); font:800 .58rem monospace; letter-spacing:.1em; }.drawer-status b { color:var(--orange); }.studio-drawer h3 { margin:20px 0 14px; font-size:2rem; }.studio-drawer > p:not(.hud-label) { min-height:105px; color:#687572; font-size:.86rem; }.drawer-evidence { display:flex; flex-wrap:wrap; gap:7px; padding:18px 0; margin:18px 0; border-block:1px solid rgba(89,73,42,.18); }.drawer-evidence span { padding:6px 8px; color:#46615c; border:1px solid rgba(24,155,131,.25); background:#eef4d8; font:700 .57rem monospace; text-transform:uppercase; }.drawer-project { position:relative; margin-bottom:20px; overflow:hidden; border:1px solid rgba(89,73,42,.22); background:#e7ddb8; }.drawer-project img { width:100%; height:145px; object-fit:cover; }.drawer-project small,.drawer-project strong { display:block; padding-inline:12px; }.drawer-project small { padding-top:10px; color:var(--orange); font:800 .52rem monospace; letter-spacing:.1em; }.drawer-project strong { padding-bottom:12px; font-size:.8rem; }.studio-drawer .button { width:100%; }
.studio-fast-travel { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:12px 15px; border-top:1px solid rgba(89,73,42,.2); background:#f6ecca; }.studio-fast-travel > span { margin-right:10px; color:#7b725b; font:800 .55rem monospace; letter-spacing:.1em; }.studio-fast-travel button { padding:8px 11px; color:#64716d; border:1px solid rgba(89,73,42,.18); background:#fff9e7; cursor:pointer; font:800 .58rem monospace; text-transform:uppercase; }.studio-fast-travel button:hover,.studio-fast-travel button.active { color:#fff; border-color:var(--mint); background:var(--mint); }.studio-selecting .studio-drawer { animation:drawerRefresh .32s ease both; }
body:not(.adventure-ui) .studio-frame { background:#11182b; border-color:var(--line-hot); box-shadow:0 25px 70px rgba(0,0,0,.35); } body:not(.adventure-ui) .studio-toolbar,body:not(.adventure-ui) .studio-fast-travel { color:var(--muted); background:#0d1425;border-color:var(--line) } body:not(.adventure-ui) .studio-drawer { background:#0b1120 } body:not(.adventure-ui) .studio-drawer>p:not(.hud-label){color:var(--muted)}
@keyframes objectPulse { 50%{box-shadow:0 0 0 7px rgba(255,248,197,.12)} } @keyframes slimeBob { 50%{transform:scaleY(.9) scaleX(1.06);bottom:7px} } @keyframes drawerRefresh { from{opacity:.45;transform:translateX(8px)}to{opacity:1;transform:none} }
@media (max-width:900px) { .studio-layout{grid-template-columns:1fr}.studio-viewport{overflow-x:auto;border-right:0;border-bottom:1px solid rgba(89,73,42,.2)}.studio-desk{width:800px;min-height:600px}.studio-drawer{display:grid;grid-template-columns:1fr 280px;gap:0 25px}.drawer-status,.studio-drawer>.hud-label,.studio-drawer h3,.studio-drawer>p,.drawer-evidence{grid-column:1}.drawer-project{grid-column:2;grid-row:1/6}.studio-drawer>.button{grid-column:2}.studio-drag-hint{font-size:0}.studio-drag-hint::after{content:"DRAG DESK TO EXPLORE";font-size:.6rem}}
@media (max-width:620px) { .studio-frame{display:flex;flex-direction:column;margin-inline:-9px}.studio-toolbar{order:0;display:flex;justify-content:space-between}.studio-toolbar span:first-child{display:none}.studio-fast-travel{order:1;overflow-x:auto;flex-wrap:nowrap;border-top:0;border-bottom:1px solid rgba(89,73,42,.2)}.studio-fast-travel>span{display:none}.studio-fast-travel button{flex:0 0 auto}.studio-layout{order:2;display:block}.studio-desk{width:760px;min-height:560px;transform-origin:top left}.studio-drawer{display:block;padding:27px 22px}.studio-drawer>p:not(.hud-label){min-height:auto}.drawer-project img{height:180px}}

@media (max-width:720px) {
  .avatar-holo[data-avatar-preview] { top:48%; width:280px; height:365px; }
  .avatar-sprite-frame { bottom:82px; }
  .avatar-sprite { width:275px; height:275px; }
  .avatar-holo[data-avatar-preview] .ring-one { bottom:76px; width:238px; height:70px; }
  .avatar-holo[data-avatar-preview] .avatar-base { bottom:46px; min-width:218px; font-size:.54rem; }
  .avatar-controls { bottom:14px; width:278px; }
  .avatar-controls.has-turn { grid-template-columns:66px minmax(0,1fr) 66px; }
  .character-stage .portrait-note { top:45px; right:18px; left:auto; max-width:150px; text-align:right; }
  .avatar-holo[data-avatar-preview].is-role-scene { width:330px; height:380px; }
  .avatar-holo[data-avatar-preview].is-role-scene .avatar-sprite-frame { inset:0 0 58px; }
  .avatar-holo[data-avatar-preview].is-role-scene .avatar-sprite { width:330px; height:330px; }
  .avatar-holo[data-avatar-preview].is-role-scene .avatar-base { bottom:30px; }
}
@media (max-width:430px) {
  .avatar-holo[data-avatar-preview] { transform:translate(-50%,-48%) scale(.92); }
  .avatar-controls { width:260px; }
  .avatar-controls.has-turn { grid-template-columns:58px minmax(0,1fr) 58px; }
  .avatar-turn small { display:none; }
  .gear-c { bottom:34%; }
  .gear-d { bottom:31%; }
}