:root{color-scheme:dark;--gold:#d6a84b;--ivory:#f4efe5;--black:#050505}
*{box-sizing:border-box}html{background:#000}body{margin:0;background:#000;color:var(--ivory);font-family:Georgia,'Times New Roman',serif}button{font:inherit;cursor:pointer}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.prototype-note{position:absolute;z-index:5;top:8px;left:14px;margin:0;color:#e7d2a4;font:10px/1.6 Arial,sans-serif;letter-spacing:.19em;text-shadow:0 1px 5px #000}
.desktop-foyer{display:block;background:#000;overflow:hidden}.scene{position:relative;width:max(100%, 1200px);max-width:none;margin-left:50%;transform:translateX(-50%);isolation:isolate;aspect-ratio:3/2;background:#000}.scene-image{display:block;width:100%;height:100%;object-fit:contain}
/* This vignette shades the side returns while retaining the central emblem and portals. */
.edge-vignette,.lower-vignette{position:absolute;inset:0;pointer-events:none;z-index:1}
.edge-vignette{background:linear-gradient(90deg,rgba(0,0,0,.56) 0%,rgba(0,0,0,.15) 7%,transparent 21%,transparent 79%,rgba(0,0,0,.15) 93%,rgba(0,0,0,.56) 100%)}
/* Curved edge rise rather than a straight black bar; the source image already includes the bottom portrait. */
.lower-vignette{background:radial-gradient(ellipse 50% 24% at 1% 77%,rgba(0,0,0,.71),transparent 100%),radial-gradient(ellipse 50% 24% at 99% 77%,rgba(0,0,0,.71),transparent 100%)}
.energy{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.energy path{fill:none;stroke:transparent}.pulse{fill:#b4ff71;filter:drop-shadow(0 0 4px #86ff3c);opacity:.85}
.hotspot{position:absolute;z-index:3;background:transparent;border:1px solid transparent;color:transparent;border-radius:46% 46% 8px 8px/19% 19% 8px 8px;transition:box-shadow .3s,border-color .3s,background .3s}
/* Portal illumination — color-matched hover effects */

.hotspot:hover,
.hotspot:focus-visible {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* Goblin's Forge — purple */
.hotspot-forge:hover,
.hotspot-forge:focus-visible {
    box-shadow: 0 0 24px 5px rgba(195, 55, 245, 0.45);
}

/* Education — blue */
.hotspot-education:hover,
.hotspot-education:focus-visible {
    box-shadow: 0 0 24px 5px rgba(55, 145, 255, 0.45);
}

/* Moonapali — pink */
.hotspot-moonapali:hover,
.hotspot-moonapali:focus-visible {
    box-shadow: 0 0 24px 5px rgba(255, 65, 165, 0.45);
}

/* Preserve keyboard focus visibility */
.hotspot:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}
.hotspot-forge{left:22.1%;top:26.3%;width:12.6%;height:29.1%}.hotspot-education{left:43.7%;top:27.5%;width:12.9%;height:29.5%}.hotspot-moonapali{left:65.7%;top:27.1%;width:12.7%;height:29.3%}.hotspot-about{left:44.3%;top:90.6%;width:17.4%;height:5%;border-radius:2px}
.mobile-foyer{display:none}
dialog{max-width:min(92vw,440px);background:#101010;color:var(--ivory);border:1px solid var(--gold);padding:0;box-shadow:0 15px 70px #000}dialog::backdrop{background:rgba(0,0,0,.78)}.dialog-inner{padding:26px 30px}.dialog-inner h2{color:var(--gold);font-weight:400;font-size:30px}.dialog-inner p{line-height:1.6}.kicker{font:11px Arial,sans-serif;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}#close-dialog,.about-link{background:transparent;color:var(--gold);padding:10px 15px;border:1px solid var(--gold)}#close-dialog:focus-visible,.about-link:focus-visible,.mobile-portal:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:760px){.desktop-foyer{display:none}.mobile-foyer{display:block;padding:40px 18px 65px;background:radial-gradient(ellipse at 50% 0%,#142039 0,#07090d 50%,#000 80%)}.prototype-note{position:relative;top:auto;left:auto;padding:10px 15px;text-align:center}.mobile-identity{text-align:center;padding:8px 0 36px}.mobile-symbol{font:38px Arial,sans-serif;letter-spacing:5px;color:#74ff52}.mobile-symbol span:nth-child(2){color:#ff3434}.mobile-identity h2{font-size:clamp(34px,9vw,52px);font-weight:400;color:var(--gold);margin:12px 0}.mobile-identity p{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#e6c986}.mobile-portals{display:grid;gap:22px;max-width:400px;margin:0 auto}.mobile-portal{position:relative;display:block;width:100%;padding:0;border:1px solid var(--gold);background:#000;color:#fff;overflow:hidden;border-radius:48% 48% 7px 7px/10% 10% 7px 7px}.mobile-portal img{display:block;width:100%;height:280px;object-fit:cover;object-position:center 35%;filter:brightness(.83);transition:filter .2s}.mobile-portal:hover img{filter:brightness(1.03)}.mobile-portal span{display:block;padding:13px 10px;background:#080808;font-size:20px;letter-spacing:.03em;color:#f0cb73}.mobile-about{border-top:1px solid #44351f;margin:45px auto 0;max-width:550px;padding-top:36px}.mobile-about h2{font-size:34px;color:var(--gold);font-weight:400}.mobile-about p:not(.kicker){font:15px/1.85 Georgia,serif;color:#e4dfd5}.about-link{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.pulse{display:none}}

/* V2 desktop presentation: scene fills the browser instead of stopping at
   1536 CSS pixels, which looked undersized at reduced Chrome zoom.
   At narrower desktop widths, crop only outer architectural margins.
   Interactive overlays remain in the image coordinate system. */
@media (min-width:761px) {
  .desktop-foyer { width:100%; overflow:hidden; }
  .scene { width:max(100%,1200px); }
}
/* Optional comparison: preserve the entire composition at any desktop width. */
@media (min-width:761px) {
  body.full-composition .scene { width:100%; }
}
.preview-tools { position:fixed; right:16px; bottom:16px; z-index:10; display:flex; gap:8px; }
.preview-tools button { background:rgba(8,8,8,.92); border:1px solid #a5813a; color:#f0cb73; padding:10px 12px; border-radius:2px; font:12px Arial,sans-serif; }
.preview-tools button:hover,.preview-tools button:focus-visible { outline:2px solid #f0cb73; outline-offset:2px; }
@media(max-width:760px){.preview-tools{display:none}}

/* V3: keep the approved artwork at exactly the V2 scale and coordinate system.
   Only conceal the bottom portion containing baked-in biography/portrait. */
@media (min-width:761px) {
  .desktop-foyer .scene { aspect-ratio:1536/754; overflow:hidden; }
  .scene-art { position:absolute;inset:0 auto auto 0;width:100%;aspect-ratio:3/2; }
  .scene-art::after { content:"";position:absolute;z-index:3;pointer-events:none;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.56) 40%,#000 86%); }
  .desktop-foyer .scene-art .lower-vignette { background:radial-gradient(ellipse 44% 31% at 0 70%,rgba(0,0,0,.8),transparent 100%),radial-gradient(ellipse 44% 31% at 100% 70%,rgba(0,0,0,.8),transparent 100%); }
  .about-section { margin-top:-10px;position:relative;z-index:4; }
}
/* V3 real About content: composed like the approved lower vignette but not in the bitmap. */
.about-section { background:#000; padding:clamp(24px,3vw,46px) 24px clamp(72px,7vw,116px); }
.about-inner { margin:0 auto;max-width:850px;display:grid;grid-template-columns:minmax(165px,210px) minmax(0,1fr);gap:clamp(26px,3vw,48px);align-items:start; }
.portrait-frame { border:1px solid #c99a39;padding:2px;background:#050505; }
.portrait-frame img { width:100%;height:auto;display:block;aspect-ratio:208/231;object-fit:cover; }
.about-copy .kicker {margin:4px 0 9px;font:11px/1.5 Arial,sans-serif;letter-spacing:.29em;color:#e4b952}
.about-copy h2 {font:400 clamp(32px,3.25vw,49px)/1.14 Georgia,serif;color:#e0b251;margin:0 0 7px}
.about-rule {height:18px;position:relative;max-width:255px;margin:0 0 16px;color:#d6a84b;text-align:center;font:16px/18px Georgia,serif}
.about-rule::before {content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,#b78732,transparent)}
.about-rule span {position:relative;background:#000;padding:0 7px}
.about-copy p:not(.kicker) {font:clamp(15px,1.22vw,17px)/1.65 Georgia,serif;color:#e4ded4;margin:0 0 14px}
.about-link {display:inline-flex;align-items:center;gap:15px;text-transform:uppercase;letter-spacing:.11em;font:13px/1.4 Georgia,serif;padding:11px 20px;margin-top:8px}
.about-link:hover {color:#f3db9c;background:rgba(214,168,75,.10)}
@media(max-width:760px){
 .about-section{padding:34px 20px 82px}
 .about-inner{max-width:550px;grid-template-columns:1fr;gap:26px}
 .portrait-frame{width:min(220px,70vw);margin:0 auto}
 .about-copy h2{font-size:clamp(32px,9vw,43px)}
 .about-copy p:not(.kicker){font-size:16px;line-height:1.75}
}
/* Fade at the actual clipped scene boundary, not at the bottom of the full bitmap. */
@media (min-width:761px) {
  .desktop-foyer .scene::after {content:"";position:absolute;z-index:4;left:0;right:0;bottom:0;height:15%;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.15) 26%,rgba(0,0,0,.78) 78%,#000 100%)}
}

/* V4 mobile-only study; all desktop rules from approved V3 remain unchanged.
   On narrow screens treat portals as individual architectural gateways,
   with their own existing neon light instead of additional gold outlines. */
@media (max-width:760px) {
  .mobile-foyer { padding:24px 20px 40px; background:radial-gradient(ellipse 70% 30% at 50% 0%,#12213a 0%,#070a11 70%,#000 100%); }
  .prototype-note {font-size:9px;letter-spacing:.12em;padding:10px 5px;opacity:.75}
  .mobile-identity {padding:22px 0 25px;}
  .mobile-symbol {font-size:clamp(38px,10vw,54px);line-height:1.1;text-shadow:0 0 12px rgba(94,255,76,.3);}
  .mobile-symbol span:nth-child(2){text-shadow:0 0 10px rgba(255,33,56,.4)}
  .mobile-identity h2{margin:14px 0 8px;font-size:clamp(37px,10vw,54px);line-height:1.1;}
  .mobile-identity p {font-size:clamp(10px,2.6vw,12px);line-height:1.6;letter-spacing:.16em;margin:10px auto 0}
  .mobile-invite {max-width:420px;margin:0 auto 24px;text-align:center;color:#c9c0b1;font:14px/1.5 Georgia,serif}
  .mobile-portals{max-width:400px;gap:28px}
  .mobile-portal {width:min(100%,320px);justify-self:center;background:transparent;border:0;border-radius:0;overflow:visible;padding:0 0 3px;}
  .mobile-portal img{width:100%;height:auto;max-height:none;aspect-ratio:230/297;object-fit:contain;object-position:center;filter:brightness(.94);border-radius:0;transition:filter .26s ease,transform .26s ease;}
  .mobile-portal:hover img,.mobile-portal:focus-visible img{filter:brightness(1.14) saturate(1.08);transform:translateY(-2px)}
  .mobile-portal span{background:transparent;padding:10px 2px 0;font:400 clamp(20px,5vw,25px)/1.3 Georgia,serif;text-align:center;color:#edc773;}
  .mobile-portal b{font:normal 17px Arial,sans-serif;margin-left:6px;color:#d6a84b}
  .mobile-about{display:none;}
  .about-section{padding:36px 22px 68px;border-top:0;background:#000;}
  .about-inner{gap:22px;max-width:520px;}
  .portrait-frame{width:min(208px,60vw);}
  .about-copy .kicker{margin:4px 0 10px;font-size:10px;}
  .about-copy h2{font-size:clamp(34px,8vw,44px)}
  .about-copy p:not(.kicker){font-size:16px;line-height:1.76;margin-bottom:16px;}
  .about-link{min-height:46px;}
  .mobile-portal:focus-visible{outline:3px solid #f4efe5;outline-offset:7px;}
}
@media(min-width:530px) and (max-width:760px){
  .mobile-portals{grid-template-columns:repeat(2,minmax(0,1fr));max-width:660px;gap:24px;}
  .mobile-portal{width:100%;max-width:275px;}
  .mobile-portal:last-child{grid-column:1/-1;width:min(100%,275px)}
}

/* Integration preparation: development controls removed; approved one-column mobile layout. */
.prototype-note,.preview-tools{display:none!important}
@media(min-width:530px) and (max-width:760px){.mobile-portals{grid-template-columns:1fr;max-width:400px}.mobile-portal:last-child{grid-column:auto;width:min(100%,320px)}.mobile-portal{max-width:320px;width:min(100%,320px)}}
.hotspot,.mobile-portal,.about-link{cursor:pointer;text-decoration:none}
.hotspot[aria-disabled="true"],.mobile-portal[aria-disabled="true"],.about-link[aria-disabled="true"]{cursor:default}
/* Coding Roses — Soft Energy Breathing */

.energy path {
    fill: none;
    stroke: transparent;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .energy path {
        animation: none;
    }
}