:root{--primary:#d8b67a;--secondary:#8e6840;--accent:#f7e7bd;--background:#0b0806;--surface:#1a120d;--text:#fff8e9;--muted:#c7bba9;--icon-scale:1;--orbit-duration:26s;--headline:'Archivo Black';--body:'Inter';--hero-size:92px;--profile-title-size:72px;--body-size:17px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--background);color:var(--text);font-family:var(--body),sans-serif;overflow-x:hidden}.background-stage,.background-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}.background-stage{z-index:-4;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 42%),linear-gradient(180deg,var(--background),#020202)}.background-stage img,.background-stage video,.intro-media img,.intro-media video{width:100%;height:100%;object-fit:cover}.background-overlay{z-index:-3;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.72));backdrop-filter:blur(1px)}#particleCanvas{z-index:-2}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px max(24px,calc((100vw - 1180px)/2));background:linear-gradient(180deg,rgba(5,5,5,.92),rgba(5,5,5,.2));backdrop-filter:blur(18px)}.wordmark{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:900;letter-spacing:.16em;font-size:.78rem}.wordmark-mark,.intro-logo{display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,var(--surface),#050505);border:1px solid color-mix(in srgb,var(--primary) 55%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--primary) 28%,transparent);color:var(--accent);font-weight:900}.wordmark-mark{width:40px;height:40px}.top-actions{display:flex;gap:10px}.pill-button,.primary-button,.icon-button{border:1px solid color-mix(in srgb,var(--primary) 55%,transparent);background:color-mix(in srgb,var(--surface) 84%,transparent);color:var(--text);border-radius:999px;padding:11px 16px;font-weight:800;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.24)}.icon-button{width:42px;height:42px;padding:0}.page-shell{width:min(1180px,calc(100% - 28px));margin:0 auto 80px}.hero-panel{position:relative;min-height:690px;border:1px solid color-mix(in srgb,var(--primary) 34%,transparent);border-radius:34px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,transparent),rgba(0,0,0,.45));overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.38);display:grid;grid-template-columns:.9fr 1.25fr;align-items:center;padding:54px;gap:28px}.hero-panel[data-layout=reverse]{grid-template-columns:1.25fr .9fr}.hero-panel[data-layout=reverse] .hero-copy{order:2}.hero-panel[data-layout=reverse] .orbit-system{order:1}.hero-panel[data-layout=stacked]{grid-template-columns:1fr;text-align:center}.hero-panel[data-layout=stacked] .hero-copy{margin:auto;max-width:800px}.hero-copy{position:relative;z-index:5;max-width:520px;min-width:0}.eyebrow{margin:0 0 10px;color:var(--primary);font-size:.74rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.hero-copy h2{font-family:var(--headline),sans-serif;font-size:clamp(2.8rem,var(--hero-size),8.2rem);line-height:.9;letter-spacing:-.055em;margin:0;overflow-wrap:normal;word-break:normal;hyphens:none;max-width:100%}.hero-description{font-size:var(--body-size);color:var(--muted);line-height:1.7;max-width:560px}.orbit-system{position:relative;min-height:600px;display:grid;place-items:center;perspective:1200px;min-width:0}.orbit-core{position:absolute;width:190px;height:190px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--accent),var(--primary) 35%,transparent 72%);filter:drop-shadow(0 0 42px color-mix(in srgb,var(--primary) 70%,transparent));animation:pulse 3.4s ease-in-out infinite}.orbit-core::after{content:'∞';font-family:serif;font-size:8rem;color:var(--surface);text-shadow:0 0 15px var(--accent)}.orbit-ring{position:absolute;width:480px;height:480px;border:1px solid color-mix(in srgb,var(--primary) 48%,transparent);border-radius:50%;transform:rotateX(63deg) rotateZ(-8deg);box-shadow:0 0 35px color-mix(in srgb,var(--primary) 20%,transparent)}.world-node{position:absolute;width:calc(110px * var(--icon-scale));height:calc(110px * var(--icon-scale));margin:calc(-55px * var(--icon-scale));border-radius:28%;border:1px solid color-mix(in srgb,var(--primary) 60%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),rgba(0,0,0,.88));box-shadow:0 18px 45px rgba(0,0,0,.5),inset 0 0 26px rgba(255,255,255,.04),0 0 22px color-mix(in srgb,var(--primary) 24%,transparent);display:grid;place-items:center;cursor:pointer;transform-style:preserve-3d;animation:orbit var(--orbit-duration) linear infinite;animation-delay:calc(var(--i) * (var(--orbit-duration) / -3));transition:filter .25s ease,box-shadow .25s ease,scale .25s ease}@media(hover:hover){.world-node:hover{animation-play-state:paused;filter:brightness(1.28);scale:1.1;box-shadow:0 25px 60px rgba(0,0,0,.55),0 0 42px color-mix(in srgb,var(--primary) 68%,transparent)}}.world-icon{width:62%;height:62%;display:grid;place-items:center;font-size:calc(45px * var(--icon-scale));transform:translateZ(24px);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--primary) 70%,transparent))}.world-icon img{width:100%;height:100%;object-fit:contain}.world-label{position:absolute;top:112%;font-weight:900;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;text-shadow:0 2px 6px #000}.profile-stage{margin-top:24px}.profile-card{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:30px;overflow:hidden;border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(22px);animation:reveal .45s ease}.profile-card[data-layout=reverse]{grid-template-columns:1.1fr .9fr}.profile-card[data-layout=reverse] .profile-art{order:2}.profile-card[data-layout=reverse] .profile-info{order:1}.profile-card[data-layout=stacked]{grid-template-columns:1fr}.profile-art{min-height:360px;padding:40px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--primary) 24%,transparent),transparent 50%),linear-gradient(145deg,var(--surface),#070707);font-size:9rem}.profile-art img{max-width:72%;max-height:72%;object-fit:contain;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--primary) 55%,transparent))}.profile-info{padding:50px;display:flex;flex-direction:column;justify-content:center;min-width:0}.profile-title{font-family:var(--headline);font-size:clamp(2.2rem,var(--profile-title-size),6.3rem);line-height:.94;margin:0 0 18px;overflow-wrap:normal;word-break:normal;hyphens:none;max-width:100%}.profile-description{color:var(--muted);line-height:1.75;font-size:var(--body-size)}.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:12px;margin-top:22px}.social-link{display:flex;align-items:center;justify-content:center;gap:9px;min-height:76px;border-radius:20px;border:1px solid color-mix(in srgb,var(--primary) 36%,transparent);color:var(--text);text-decoration:none;font-size:.72rem;font-weight:900;text-transform:uppercase;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 80%,transparent),rgba(0,0,0,.34));transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,border-color .22s ease}.social-link:hover{transform:translateY(-7px) scale(1.05);filter:brightness(1.22);border-color:var(--accent);box-shadow:0 16px 34px rgba(0,0,0,.4),0 0 26px color-mix(in srgb,var(--primary) 65%,transparent)}.social-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;font-size:1.35rem;color:var(--accent);text-shadow:0 0 12px color-mix(in srgb,var(--primary) 90%,transparent)}.social-label{font-size:.68rem;letter-spacing:.05em}.social-grid[data-style=icons]{grid-template-columns:repeat(auto-fit,minmax(72px,92px))}.social-grid[data-style=icons] .social-link{min-height:82px}.social-grid[data-style=icons] .social-label{display:none}.social-grid[data-style=icons] .social-icon{font-size:1.8rem}.social-grid[data-style=labels] .social-icon{display:none}.customizer{position:fixed;z-index:40;top:0;right:0;width:min(440px,100%);height:100vh;overflow-y:auto;padding:24px;background:rgba(9,7,6,.97);border-left:1px solid color-mix(in srgb,var(--primary) 35%,transparent);backdrop-filter:blur(25px);transform:translateX(100%);transition:.3s ease}.customizer.open{transform:translateX(0)}.customizer-head{display:flex;justify-content:space-between;align-items:flex-start}.customizer-head h3{margin:0;font-size:1.4rem}.control-group{padding:22px 0;border-top:1px solid rgba(255,255,255,.08)}.control-group h4{margin:0 0 14px}.full-row{grid-column:1/-1}.control-group label{display:grid;gap:7px;margin:0 0 13px;color:var(--muted);font-size:.78rem;font-weight:700}.control-group input,.control-group textarea,.control-group select{width:100%;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#120e0b;color:var(--text)}.control-group input[type=color]{height:44px;padding:4px}.two-column-controls,.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.theme-button{padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#15100c;color:var(--text);font-weight:800;cursor:pointer}.drop-zone{min-height:118px;border:1px dashed color-mix(in srgb,var(--primary) 56%,transparent);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:16px;cursor:pointer;background:color-mix(in srgb,var(--surface) 72%,transparent)}.drop-zone.dragover{background:color-mix(in srgb,var(--primary) 18%,var(--surface));box-shadow:0 0 30px color-mix(in srgb,var(--primary) 30%,transparent)}.drop-zone span{color:var(--muted);font-size:.8rem}.media-history{display:flex;gap:9px;overflow-x:auto;margin-top:12px;padding-bottom:4px}.history-item{min-width:86px;height:72px;border-radius:12px;border:1px solid rgba(255,255,255,.12);overflow:hidden;background:#090909;position:relative;cursor:pointer}.history-item img,.history-item video{width:100%;height:100%;object-fit:cover}.history-item button{position:absolute;top:3px;right:3px;border:0;border-radius:50%;width:20px;height:20px;background:rgba(0,0,0,.72);color:#fff;cursor:pointer}.audio-history-icon{display:grid;place-items:center;height:100%;font-size:1.7rem}.save-status{position:sticky;bottom:0;padding:12px;border-radius:14px;background:#13100d;color:var(--muted);font-size:.78rem;text-align:center}.intro-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#050403;transition:opacity .7s ease,visibility .7s ease}.intro-screen.hidden{opacity:0;visibility:hidden}.intro-media,.intro-shade{position:absolute;inset:0}.intro-media{background:radial-gradient(circle at center,color-mix(in srgb,var(--primary) 35%,transparent),transparent 46%)}.intro-shade{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.72))}.intro-content{position:relative;z-index:2;text-align:center;padding:24px}.intro-logo{width:100px;height:100px;margin:0 auto 20px;font-size:1.6rem;animation:assemble 1.6s ease both}.intro-content h1{font-family:var(--headline);font-size:clamp(3rem,9vw,8rem);margin:0 0 22px;line-height:.9;max-width:min(1000px,92vw);overflow-wrap:normal}.intro-content p{letter-spacing:.35em;font-weight:900;color:var(--accent)}details summary{cursor:pointer;font-weight:900;padding:10px 0}
@keyframes orbit{from{transform:rotate(0deg) translateX(245px) rotateY(-18deg) rotate(0deg)}to{transform:rotate(360deg) translateX(245px) rotateY(-18deg) rotate(-360deg)}}@keyframes pulse{50%{transform:scale(1.07);filter:drop-shadow(0 0 60px color-mix(in srgb,var(--primary) 90%,transparent))}}@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes assemble{from{opacity:0;transform:scale(.2) rotate(-35deg);filter:blur(15px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:900px){.hero-panel,.hero-panel[data-layout=reverse]{grid-template-columns:1fr;padding:36px;min-height:900px}.hero-panel[data-layout=reverse] .hero-copy,.hero-panel[data-layout=reverse] .orbit-system{order:initial}.hero-copy{text-align:center;margin:auto}.hero-copy h2{font-size:min(var(--hero-size),12vw)}.profile-title{font-size:min(var(--profile-title-size),11vw)}.orbit-system{min-height:580px}.profile-card,.profile-card[data-layout=reverse]{grid-template-columns:1fr}.profile-card[data-layout=reverse] .profile-art,.profile-card[data-layout=reverse] .profile-info{order:initial}.social-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topbar{padding:12px}.wordmark span:last-child{display:none}.page-shell{width:calc(100% - 14px)}.hero-panel{padding:25px 14px;min-height:820px}.hero-copy h2{font-size:min(var(--hero-size),15vw);line-height:.95;overflow-wrap:anywhere}.profile-title{font-size:min(var(--profile-title-size),11vw);overflow-wrap:anywhere}.orbit-ring{width:300px;height:300px}.orbit-core{width:130px;height:130px}.orbit-core::after{font-size:5rem}@keyframes orbit{from{transform:rotate(0deg) translateX(155px) rotate(0deg)}to{transform:rotate(360deg) translateX(155px) rotate(-360deg)}}.world-node{width:calc(68px * var(--icon-scale));height:calc(68px * var(--icon-scale));margin:calc(-34px * var(--icon-scale))}.world-label{font-size:.58rem;white-space:normal;max-width:84px;text-align:center;top:106%}.profile-info{padding:28px}.profile-art{min-height:260px}.customizer{padding:18px}.two-column-controls,.color-grid{grid-template-columns:1fr}.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* iOS Safari performance: a full-viewport position:fixed backdrop-filter sitting over
   a continuously-playing position:fixed video is one of the most expensive compositing
   patterns on mobile Safari. The blur is subtle (1px) and mostly redundant with the
   darkening gradient it's paired with, so drop it on touch devices; the gradient alone
   preserves nearly the same look for a fraction of the compositing cost. Also trims the
   world-node box-shadow from three stacked layers to one -- it's animating continuously
   (orbit) and repainting three heavy shadow stacks per frame adds up on iPhone's GPU. */
@media(hover:none) and (pointer:coarse){.background-overlay{backdrop-filter:none}.world-node{box-shadow:0 14px 32px rgba(0,0,0,.48)}.orbit-system[data-node-style="glass"] .world-node{backdrop-filter:none;background:color-mix(in srgb,var(--surface) 55%,transparent)}
/* The orbit ring still runs inside a full perspective/preserve-3d 3D compositing
   context on every device, plus each icon carries its own translateZ + drop-shadow
   filter -- all three continuously animating, all three still expensive to composite
   on iPhone even after removing the backdrop-filter/box-shadow costs above. Flattening
   to a 2D transform context (transform-style:flat is the default -- this just removes
   the preserve-3d opt-in) keeps the exact same orbit motion and icon appearance while
   letting the compositor treat it as a normal 2D layer instead of true 3D, which is
   substantially cheaper and also removes a class of WebKit 3D-hit-testing flakiness
   that can make an element visually present but miss taps mid-animation. */
.orbit-system{perspective:none}.world-node{transform-style:flat}.world-icon{transform:none;filter:none}}
/* iOS only (Android is already fine here) -- .is-ios is set by a tiny inline UA check
   in index.html's <head>, since the CSS-only iOS detection technique
   (@supports(-webkit-touch-callout:none)) isn't verifiable in this repo's test tooling
   and a correctness fix isn't the place to ship an unverified technique. The orbit's
   circular path can carry icons through positions outside the visible/tappable area on
   a hero-panel taller than a typical phone viewport -- during any stutter a node freezes
   wherever it was, and if that's an out-of-reach spot it looks stuck. Shrinking the
   orbit radius keeps the same motion, just closer to center, so it stays reachable. */
html.is-ios .orbit-ring{width:220px;height:220px}
html.is-ios .world-node{animation-name:orbit-ios}
@keyframes orbit-ios{from{transform:rotate(0deg) translateX(110px) rotate(0deg)}to{transform:rotate(360deg) translateX(110px) rotate(-360deg)}}