:root {
  --void: #07060a;
  --black: #0c0a10;
  --panel: #121019;
  --panel-2: #18131f;
  --paper: #eee8dd;
  --white: #fffdf8;
  --muted: #aaa1b2;
  --line: rgba(255, 255, 255, .14);
  --pink: #ff2bd6;
  --pink-soft: #ff84e9;
  --cyan: #42f5f2;
  --acid: #c8ff36;
  --gold: #e9bd65;
  --violet: #7a45ff;
  --danger: #ff617d;
  --display: "Unbounded", "Arial Black", sans-serif;
  --serif: "Italiana", Didot, "Bodoni MT", serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scrollbar-color: var(--pink) var(--black); }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(122, 69, 255, .2), transparent 27rem),
    radial-gradient(circle at 90% 34%, rgba(255, 43, 214, .12), transparent 29rem),
    var(--void);
  color: var(--white);
  font-family: var(--mono);
  font-size: 14px;
}
body.viewer-open { overflow: hidden; }
button, textarea, input { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible, label:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.crt, .noise { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.crt {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .14) 3px 4px);
  mix-blend-mode: multiply;
  opacity: .46;
}
.noise {
  z-index: 89;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

/* Navigation */
.topbar {
  position: relative;
  z-index: 20;
  min-height: 92px;
  padding: 0 clamp(20px, 4vw, 70px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  background: rgba(7, 6, 10, .78);
  backdrop-filter: blur(18px);
}
.topbar:before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--cyan), transparent);
  box-shadow: 0 0 14px var(--pink);
}
.brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; color: inherit; text-decoration: none; }
.mark {
  position: relative;
  width: 51px; height: 51px;
  display: grid; place-items: center;
  border: 1px solid var(--pink-soft);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #563270, #160d20 58%);
  box-shadow: 0 0 0 4px #0a0810, 0 0 0 5px rgba(66, 245, 242, .38), 0 0 24px rgba(255, 43, 214, .35);
}
.mark:before, .mark:after { content: ""; position: absolute; width: 11px; height: 11px; border-top: 1px solid var(--cyan); }
.mark:before { left: -7px; border-left: 1px solid var(--cyan); transform: rotate(-45deg); }
.mark:after { right: -7px; border-right: 1px solid var(--cyan); transform: rotate(45deg); }
.mark i { font: italic 20px var(--serif); text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan); }
.mark b { position: absolute; top: -8px; right: -5px; color: var(--gold); font-size: 12px; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy small { color: var(--cyan); font: 8px var(--mono); letter-spacing: .18em; }
.brand-copy strong { font: 600 13px var(--display); letter-spacing: -.04em; }
.brand-copy strong i { color: var(--pink-soft); font-family: var(--serif); font-size: 18px; font-weight: 400; }
.rail-nav { display: flex; height: 92px; }
.rail-nav a {
  min-width: 118px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-left: 1px solid var(--line);
  color: var(--muted); text-decoration: none; font: 9px var(--display); letter-spacing: .08em;
  transition: color .2s, background .2s;
}
.rail-nav a:last-child { border-right: 1px solid var(--line); }
.rail-nav a span { color: var(--pink); font: 9px var(--mono); }
.rail-nav a:hover { color: var(--white); background: rgba(255, 43, 214, .08); }
.status { justify-self: end; display: flex; align-items: center; gap: 11px; }
.status > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.status b { color: var(--gold); font: 9px var(--display); letter-spacing: .08em; }
.status small { color: #716b79; font-size: 8px; letter-spacing: .14em; }
.status #dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(233, 189, 101, .1), 0 0 15px var(--gold);
  animation: pulse 1.8s ease-in-out infinite;
}
.status.ready b { color: var(--acid); }
.status.ready #dot { background: var(--acid); box-shadow: 0 0 0 5px rgba(200, 255, 54, .1), 0 0 18px var(--acid); }
.ticker {
  position: relative; z-index: 19; overflow: hidden;
  height: 27px; display: flex; align-items: center;
  background: var(--pink); color: #100511;
  border-bottom: 1px solid #ff9cec;
  font: 700 9px var(--display); white-space: nowrap; letter-spacing: .1em;
}
.ticker div { min-width: max-content; animation: marquee 28s linear infinite; }

/* Project boundary */
.project-bar {
  position: relative; z-index: 18;
  min-height: 64px; padding: 0 clamp(20px, 4vw, 70px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch;
  border-bottom: 1px solid var(--line); background: rgba(10, 8, 14, .94);
}
.project-label { min-width: 158px; padding-right: 24px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-right: 1px solid var(--line); }
.project-label span { color: var(--pink-soft); font: 500 8px var(--display); letter-spacing: .08em; }
.project-label small { color: #5e5763; font-size: 7px; letter-spacing: .12em; }
.project-tabs { min-width: 0; padding: 0 10px; display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.project-tabs::-webkit-scrollbar { display: none; }
.project-tab { flex: none; height: 38px; max-width: 230px; padding: 0 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); color: #8c8491; font: 500 8px var(--display); text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.project-tab:before { content: "◇"; margin-right: 8px; color: #5f5865; font-family: var(--mono); }
.project-tab:hover { border-color: rgba(66,245,242,.4); color: var(--white); }
.project-tab.active { border-color: var(--cyan); background: rgba(66,245,242,.07); color: var(--cyan); box-shadow: inset 0 -2px var(--cyan), 0 0 18px rgba(66,245,242,.08); }
.project-tab.active:before { content: "◆"; color: var(--cyan); }
.project-placeholder { margin: auto 10px; color: #56505b; font-size: 7px; letter-spacing: .12em; }
.project-actions { display: flex; align-items: center; border-left: 1px solid var(--line); }
.project-actions button { height: 38px; min-width: 39px; margin-left: 5px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.035); color: #9a929f; font-size: 13px; cursor: pointer; }
.project-actions button em { margin-left: 7px; font: 500 6px var(--display); letter-spacing: .06em; font-style: normal; }
.project-actions #project-rename, .project-actions #project-delete { padding: 0 10px; }
.project-actions #project-new { padding: 0 13px; border-color: rgba(255,43,214,.5); color: var(--pink-soft); font: 500 7px var(--display); letter-spacing: .06em; }
.project-actions #project-new span { margin-right: 6px; font: 14px var(--mono); }
.project-actions button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.project-actions #project-delete:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.project-actions button:disabled { opacity: .22; cursor: not-allowed; }
.project-gate { min-height: calc(100vh - 183px); padding: 80px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-image: radial-gradient(circle at center, rgba(122,69,255,.12), transparent 35%), linear-gradient(rgba(66,245,242,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(66,245,242,.035) 1px, transparent 1px); background-size: auto, 54px 54px, 54px 54px; }
.project-gate[hidden] { display: none; }
.project-gate > p { margin: 26px 0 5px; color: #847c89; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.project-gate h1 { margin: 0; font: 600 clamp(44px, 8vw, 104px)/.83 var(--display); letter-spacing: -.085em; }
.project-gate h1 i { color: var(--pink-soft); font: 400 italic 1.18em var(--serif); text-shadow: 3px 3px 0 #6d184f; }
.project-gate > small { max-width: 520px; margin: 28px 0; color: #77707c; font-size: 9px; line-height: 1.7; }
.project-gate > button { min-width: 220px; height: 54px; padding: 0 10px 0 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--pink); background: rgba(255,43,214,.1); color: white; font: 500 8px var(--display); letter-spacing: .07em; cursor: pointer; }
.project-gate > button b { width: 34px; height: 34px; display: grid; place-items: center; background: var(--pink); color: var(--void); font-size: 18px; }
body.project-required main > section:not(#project-gate) { display: none; }
body.project-required .site-footer { margin-top: 0; }

/* Hero */
main { width: min(1600px, 100%); margin: auto; }
.intro {
  position: relative;
  min-height: min(820px, calc(100vh - 119px));
  padding: clamp(76px, 10vh, 130px) clamp(24px, 7vw, 112px) 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  align-items: center;
  isolation: isolate;
}
.intro:before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(66, 245, 242, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 245, 242, .045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.intro:after {
  content: "1998"; position: absolute; right: -2vw; bottom: -4vw; z-index: -1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .055);
  font: 800 clamp(150px, 25vw, 420px)/.75 var(--display);
  letter-spacing: -.13em;
}
.hero-copy { position: relative; z-index: 2; max-width: 990px; }
.eyebrow { margin: 0 0 26px; color: var(--cyan); font: 500 10px var(--mono); letter-spacing: .17em; }
.eyebrow span { margin-right: 14px; padding: 5px 8px; color: var(--void); background: var(--cyan); font-weight: 600; }
.hero-copy h1 { margin: 0; display: flex; flex-direction: column; font-family: var(--display); font-size: clamp(54px, 7vw, 118px); line-height: .82; letter-spacing: -.085em; }
.hero-copy h1 > span:first-child { position: relative; z-index: 2; }
.hero-copy h1 em {
  position: relative; z-index: 3;
  width: max-content; margin: -.04em 0 -.08em clamp(22px, 10vw, 170px);
  color: var(--pink-soft); font: 400 italic 1.22em/.8 var(--serif); letter-spacing: -.04em;
  text-shadow: 4px 3px 0 #6d184f, -2px -1px 0 #ffd0f6, 0 0 35px rgba(255, 43, 214, .55);
  transform: rotate(-4deg);
}
.hero-copy h1 em:before, .hero-copy h1 em:after { content: "✦"; position: absolute; color: var(--gold); font: 20px var(--mono); text-shadow: 0 0 15px var(--gold); }
.hero-copy h1 em:before { left: -28px; top: 0; }
.hero-copy h1 em:after { right: -28px; bottom: 4px; }
.hero-copy h1 .outline { color: transparent; -webkit-text-stroke: clamp(1px, .13vw, 2px) var(--white); text-shadow: 5px 5px 0 rgba(122, 69, 255, .7); }
.hero-deck { max-width: 690px; margin: 35px 0 28px; padding-left: 17px; border-left: 2px solid var(--pink); color: #bdb5c5; font-size: 13px; line-height: 1.8; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 22px;
  padding: 9px 10px 9px 18px; border: 1px solid rgba(255, 255, 255, .25);
  color: var(--white); text-decoration: none; font: 9px var(--display); letter-spacing: .07em;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,43,214,.1));
}
.hero-cta b { width: 39px; height: 39px; display: grid; place-items: center; background: var(--acid); color: var(--black); font-size: 18px; transition: transform .2s; }
.hero-cta:hover b { transform: rotate(45deg); }
.hero-sigil { position: relative; justify-self: center; width: clamp(300px, 31vw, 500px); aspect-ratio: 1; display: grid; place-items: center; }
.hero-sigil:before, .hero-sigil:after { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(255, 255, 255, .22); transform: rotate(45deg); }
.hero-sigil:after { inset: 22%; border-color: rgba(255, 43, 214, .48); transform: rotate(0); box-shadow: inset 0 0 40px rgba(122, 69, 255, .2), 0 0 30px rgba(255, 43, 214, .12); }
.sigil-core {
  position: relative; z-index: 2; width: 42%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--gold);
  background: radial-gradient(circle at 50% 35%, #533664, #120e18 64%);
  box-shadow: 0 0 0 7px #0b0810, 0 0 0 8px var(--pink), 0 0 65px rgba(255, 43, 214, .4);
}
.sigil-core span { font: italic clamp(55px, 7vw, 100px)/.7 var(--serif); text-shadow: 4px 0 var(--pink), -4px 0 var(--cyan); }
.sigil-core small { margin-top: 18px; color: var(--gold); font-size: 9px; letter-spacing: .16em; }
.orbit { position: absolute; inset: 3%; border: 1px dashed rgba(66, 245, 242, .45); border-radius: 50%; animation: rotate 18s linear infinite; }
.orbit i { position: absolute; color: var(--cyan); font-style: normal; text-shadow: 0 0 10px currentColor; }
.orbit i:first-child { left: 7%; top: 19%; }
.orbit i:last-child { right: 7%; bottom: 19%; }
.orbit-b { inset: 16%; border-color: rgba(255, 43, 214, .65); animation-direction: reverse; animation-duration: 10s; }
.orbit-b i { color: var(--pink-soft); }
.hero-sigil > p { position: absolute; right: 0; bottom: 9%; margin: 0; color: var(--acid); font: 600 9px/1.4 var(--display); letter-spacing: .12em; transform: rotate(90deg); }
.hero-meta { position: absolute; left: clamp(24px, 7vw, 112px); bottom: 28px; display: flex; align-items: center; gap: 12px; color: #66616c; font-size: 8px; letter-spacing: .12em; }
.hero-meta i { display: block; width: 28px; border-top: 1px solid #4c4850; }

/* Section language */
.studio-heading, .history, .results { scroll-margin-top: 20px; }
.section-title {
  position: relative;
  margin: 0 clamp(20px, 4vw, 70px) 28px;
  padding: 28px 0 18px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 20px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.section-title:after { content: ""; position: absolute; left: 0; bottom: -1px; width: min(27%, 310px); border-bottom: 2px solid var(--pink); box-shadow: 0 0 12px var(--pink); }
.section-title .step { align-self: start; margin-top: 3px; }
.step { color: var(--pink-soft); font: 500 9px var(--mono); letter-spacing: .12em; }
.kicker { margin: 0 0 7px !important; color: var(--cyan) !important; font: 8px var(--mono) !important; letter-spacing: .16em; }
.section-title h2 { margin: 0; font: 600 clamp(27px, 3.3vw, 52px)/1 var(--display); letter-spacing: -.07em; }
.section-title h2 i { color: var(--gold); font: 400 italic 1.16em var(--serif); text-shadow: 2px 2px 0 #714721; }
.section-title > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.title-code { color: #6f6874; text-align: right; font-size: 8px; line-height: 1.6; letter-spacing: .12em; }

/* Main workbench */
.workspace {
  margin: 0 clamp(20px, 4vw, 70px);
  display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(390px, .72fr); gap: 18px; align-items: start;
}
.panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 25%),
    rgba(15, 12, 20, .92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45), inset 0 0 45px rgba(122, 69, 255, .035);
}
.panel-corners i { position: absolute; z-index: 2; width: 12px; height: 12px; pointer-events: none; }
.panel-corners i:nth-child(1) { left: -1px; top: -1px; border-left: 2px solid var(--cyan); border-top: 2px solid var(--cyan); }
.panel-corners i:nth-child(2) { right: -1px; top: -1px; border-right: 2px solid var(--pink); border-top: 2px solid var(--pink); }
.panel-corners i:nth-child(3) { right: -1px; bottom: -1px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }
.panel-corners i:nth-child(4) { left: -1px; bottom: -1px; border-left: 2px solid var(--pink); border-bottom: 2px solid var(--pink); }
.panel-head { min-height: 108px; padding: 24px 27px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.panel-head > div { min-width: 0; }
.panel-head h2 { margin: 5px 0 0; font: 500 clamp(22px, 2.4vw, 34px) var(--serif); letter-spacing: .01em; }
.panel-head p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }
.upload {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 14px; border: 1px solid var(--pink); color: var(--white);
  background: rgba(255, 43, 214, .12); box-shadow: inset 0 0 18px rgba(255, 43, 214, .08);
  font: 500 8px var(--display); letter-spacing: .08em; cursor: pointer; transition: .2s;
}
.upload span { color: var(--pink-soft); font-size: 18px; font-family: var(--mono); }
.upload:hover { background: var(--pink); color: var(--void); box-shadow: 0 0 25px rgba(255, 43, 214, .35); }
.upload:hover span { color: inherit; }
.upload input, #file { display: none; }
.gallery {
  min-height: 440px; padding: 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 12px;
  background-image: radial-gradient(rgba(255, 255, 255, .095) .7px, transparent .7px);
  background-size: 13px 13px;
}
.empty-upload {
  grid-column: 1 / -1; min-height: 400px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  border: 1px dashed rgba(66, 245, 242, .32);
  background: radial-gradient(circle, rgba(122, 69, 255, .14), transparent 46%);
  color: var(--muted); text-align: center; cursor: pointer; transition: .25s;
}
.empty-upload:hover { border-color: var(--pink); background-color: rgba(255, 43, 214, .04); }
.upload-halo { width: 82px; height: 82px; margin-bottom: 8px; display: grid; place-items: center; border: 1px solid rgba(255, 43, 214, .5); border-radius: 50%; box-shadow: 0 0 0 9px rgba(255, 43, 214, .035), 0 0 35px rgba(255, 43, 214, .16); }
.upload-halo b { color: var(--pink-soft); font-size: 38px; font-weight: 300; animation: pulse 2.4s infinite; }
.empty-upload strong { color: var(--white); font: 500 12px var(--display); letter-spacing: .1em; }
.empty-upload > span:not(.upload-halo) { font-size: 10px; }
.empty-upload small { color: #625d68; font-size: 8px; letter-spacing: .12em; }
.photo { position: relative; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: #201925; cursor: pointer; isolation: isolate; }
.photo:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(4, 3, 6, .9)); pointer-events: none; }
.photo:after { content: ""; position: absolute; inset: 0; z-index: 4; border: 0 solid var(--pink); pointer-events: none; transition: .15s; }
.photo:hover:after { border-width: 1px; box-shadow: inset 0 0 20px rgba(255, 43, 214, .25); }
.photo.selected:after { border-width: 3px; box-shadow: inset 0 0 25px rgba(255, 43, 214, .32), 0 0 18px rgba(255, 43, 214, .2); }
.photo img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.82) contrast(1.04); transition: transform .4s, filter .4s; }
.photo:hover img { transform: scale(1.035); filter: saturate(1.05) contrast(1.06); }
.photo .label { position: absolute; left: 10px; right: 47px; bottom: 9px; z-index: 2; overflow: hidden; color: white; font: 500 9px var(--display); text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 5px #000; }
.photo .label:before { content: "IMG // "; color: var(--cyan); font: 8px var(--mono); }
.photo .check { display: none; position: absolute; right: 8px; top: 8px; z-index: 5; width: 27px; height: 27px; place-items: center; background: var(--pink); color: var(--void); font-weight: 800; box-shadow: 0 0 16px var(--pink); }
.photo.selected .check { display: grid; }
.photo-more { position: absolute; right: 7px; bottom: 6px; z-index: 5; width: 35px; height: 27px; border: 1px solid rgba(255,255,255,.25); background: rgba(8,6,10,.78); color: white; cursor: pointer; font-weight: 700; letter-spacing: 1px; }
.photo-more:hover { border-color: var(--cyan); color: var(--cyan); }
.generated { position: absolute; left: 8px; top: 8px; z-index: 3; padding: 4px 6px; border: 1px solid var(--acid); background: rgba(8, 10, 5, .78); color: var(--acid); font: 7px var(--display); letter-spacing: .1em; box-shadow: 0 0 12px rgba(200,255,54,.2); }
.panel-footer { min-height: 36px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #625c68; font-size: 7px; letter-spacing: .12em; }

/* Composer */
.composer { position: sticky; top: 18px; overflow: hidden; }
.composer:before { content: ""; position: absolute; inset: -40% 60% 50% -40%; background: radial-gradient(circle, rgba(255,43,214,.16), transparent 65%); pointer-events: none; }
.composer-flare { position: absolute; right: 16px; top: 74px; z-index: 3; color: var(--gold); font-size: 13px; text-shadow: 0 0 12px currentColor; }
.live-tag { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid rgba(200,255,54,.3); color: var(--acid); font-size: 7px; letter-spacing: .1em; }
.live-tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 7px var(--acid); }
.hint { margin: 0; padding: 17px 23px; border-bottom: 1px solid var(--line); color: #9a929f; font-size: 9px; line-height: 1.7; }
.selection-label, .mode-title { padding: 17px 23px 8px; display: flex; justify-content: space-between; color: #766f7b; font-size: 7px; letter-spacing: .13em; }
.selection-label b { color: var(--pink-soft); font-weight: 400; }
.chips { min-height: 36px; margin: 0 23px 15px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 8px 9px 8px 10px; border: 1px solid rgba(66,245,242,.35); background: rgba(66,245,242,.06); color: var(--cyan); font-size: 8px; cursor: pointer; }
.chip:before { content: "◆"; margin-right: 7px; font-size: 6px; }
.chip b { margin-left: 9px; color: var(--pink-soft); font-size: 11px; font-weight: 400; }
.chip:hover { border-color: var(--pink); color: var(--white); }
.chip-placeholder { color: #514b56; font-size: 8px; line-height: 34px; }
.prompt { margin: 0 23px; border: 1px solid rgba(255,255,255,.2); background: #09070c; box-shadow: inset 0 0 35px rgba(122,69,255,.06); transition: border-color .2s, box-shadow .2s; }
.prompt:focus-within { border-color: var(--cyan); box-shadow: inset 0 0 35px rgba(66,245,242,.05), 0 0 15px rgba(66,245,242,.08); }
.prompt-bar, .prompt-bottom { min-height: 30px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; color: #5f5965; font-size: 7px; letter-spacing: .1em; }
.prompt-bar { border-bottom: 1px solid rgba(255,255,255,.1); }
.prompt-bar span { color: var(--acid); }
.prompt-bar i { font-style: normal; }
.prompt-bottom { border-top: 1px solid rgba(255,255,255,.1); }
#count { color: var(--pink-soft); }
textarea { display: block; width: 100%; min-height: 158px; padding: 15px 13px; resize: vertical; border: 0; outline: 0; background: transparent; color: #e6e0e9; font: 11px/1.7 var(--mono); caret-color: var(--pink); }
textarea::placeholder { color: #514a57; font-style: italic; }
.mode-title { padding-top: 15px; }
.mode-title i { color: var(--gold); font-style: normal; }
.mode-picker { margin: 0 23px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mode-picker button { position: relative; min-width: 0; padding: 11px 10px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.025); color: #746d79; text-align: left; cursor: pointer; transition: .2s; }
.mode-picker button > span { position: absolute; right: 7px; top: 7px; font-size: 7px; color: #514b56; }
.mode-picker button b, .mode-picker button small { display: block; }
.mode-picker button b { color: #a69fab; font: 500 9px var(--display); letter-spacing: .05em; }
.mode-picker button small { margin-top: 5px; overflow: hidden; font-size: 6px; letter-spacing: .06em; white-space: nowrap; }
.mode-picker button.active { border-color: var(--pink); background: rgba(255,43,214,.09); box-shadow: inset 0 0 20px rgba(255,43,214,.05); }
.mode-picker button.active b { color: var(--pink-soft); }
.mode-picker button.active > span { color: var(--pink-soft); }
#create { width: calc(100% - 46px); min-height: 68px; margin: 17px 23px 0; padding: 0 15px 0 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #ff9cec; background: linear-gradient(105deg, #a41784, var(--pink) 45%, #7d2bff); color: white; text-align: left; cursor: pointer; box-shadow: 0 0 25px rgba(255,43,214,.18); transition: filter .2s, transform .2s, opacity .2s; }
#create span { display: flex; flex-direction: column; gap: 4px; font: 600 12px var(--display); letter-spacing: -.02em; }
#create small { font: 7px var(--mono); letter-spacing: .1em; opacity: .75; }
#create b { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.16); font-size: 17px; }
#create:not(:disabled):hover { filter: brightness(1.14); transform: translateY(-2px); box-shadow: 0 9px 35px rgba(255,43,214,.28); }
#create:disabled { opacity: .25; filter: grayscale(.8); cursor: not-allowed; box-shadow: none; }
#create.busy b { animation: rotate 1s linear infinite; }
.photos.dragging { border-color: var(--cyan); box-shadow: inset 0 0 55px rgba(66,245,242,.09), 0 0 30px rgba(66,245,242,.12); }
.photos.dragging .gallery { background-color: rgba(66,245,242,.04); }
.examples { padding: 18px 23px 23px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.examples > span { margin-bottom: 3px; color: #5f5965; font-size: 7px; letter-spacing: .11em; }
.examples button { padding: 0 0 0 12px; border: 0; border-left: 1px solid rgba(200,255,54,.38); background: transparent; color: #aaa1af; font-size: 8px; line-height: 1.55; text-align: left; cursor: pointer; }
.examples button:before { content: "> "; color: var(--acid); }
.examples button:hover { color: var(--acid); }

/* History map */
.history, .results { margin-top: 118px; }
.graph-shell { position: relative; height: min(76vh, 760px); min-height: 520px; margin: 0 clamp(20px, 4vw, 70px); overflow: hidden; border: 1px solid rgba(66,245,242,.24); background-color: #0a080e; background-image: radial-gradient(rgba(66,245,242,.18) .8px, transparent .8px); background-size: 22px 22px; box-shadow: inset 0 0 90px #000, 0 28px 90px rgba(0,0,0,.38); }
.graph-shell:before, .graph-shell:after { content: ""; position: absolute; z-index: 2; pointer-events: none; }
.graph-shell:before { inset: 0; background: linear-gradient(90deg, rgba(255,43,214,.08), transparent 12%, transparent 88%, rgba(66,245,242,.06)); }
.graph-shell:after { left: 18px; top: 18px; width: 28px; height: 28px; border-left: 1px solid var(--pink); border-top: 1px solid var(--pink); }
.graph-scan { position: absolute; left: 0; right: 0; top: -12%; height: 12%; z-index: 3; pointer-events: none; background: linear-gradient(transparent, rgba(66,245,242,.06), transparent); animation: scan 7s linear infinite; }
.version-tree { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.version-tree.panning { cursor: grabbing; }
.version-tree > .no-results { margin: 0; padding: 45px; }
#tree-canvas { position: absolute; left: 0; top: 0; width: max-content; display: flex; gap: 26px; transform-origin: 0 0; will-change: transform; }
.tree-branch { position: relative; flex: none; }
.tree-children { display: flex; gap: 20px; margin: 25px 0 0 42px; padding-left: 30px; border-left: 1px solid rgba(255,43,214,.42); }
.tree-children > .tree-branch:before { content: ""; position: absolute; left: -30px; top: 100px; width: 30px; border-top: 1px solid rgba(66,245,242,.42); }
.version-card { position: relative; width: 310px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: rgba(17,13,22,.97); box-shadow: 8px 8px 0 rgba(122,69,255,.09), 0 12px 35px rgba(0,0,0,.45); cursor: default; }
.version-card:before { content: "MEM_NODE"; position: absolute; right: 7px; top: 6px; z-index: 3; padding: 3px 5px; background: rgba(5,4,7,.8); color: var(--cyan); font-size: 6px; letter-spacing: .1em; }
.version-card.is-generated { border-color: rgba(200,255,54,.38); }
.version-card.is-generated:before { content: "GEN_NODE"; color: var(--acid); }
.version-card.is-archived { opacity: .62; border-style: dashed; filter: saturate(.45); }
.version-card > img { display: block; width: 100%; height: 168px; object-fit: cover; filter: saturate(.76) contrast(1.08); border-bottom: 1px solid var(--line); }
.version-info { padding: 15px; }
.version-info > div:first-child { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.version-info strong { font: 500 10px var(--display); }
.version-info span { color: var(--pink-soft); font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.version-info > p { margin: 11px 0; padding: 9px; border-left: 1px solid var(--violet); background: rgba(122,69,255,.06); color: #a8a0ad; font-size: 8px; line-height: 1.55; }
.version-info > small { display: block; margin: 0 0 11px; color: #746d79; font-size: 7px; line-height: 1.5; }
.resume { width: 100%; padding: 10px; border: 1px solid rgba(66,245,242,.25); background: rgba(66,245,242,.05); color: var(--cyan); text-align: left; font: 500 8px var(--display); letter-spacing: .03em; cursor: pointer; }
.resume b { float: right; font-size: 13px; }
.resume:hover { border-color: var(--cyan); background: rgba(66,245,242,.12); }
.restore { border-color: rgba(233,189,101,.3); color: var(--gold); background: rgba(233,189,101,.06); }
.graph-toolbar { position: absolute; right: 16px; top: 16px; z-index: 10; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid rgba(255,255,255,.2); background: rgba(10,8,14,.86); box-shadow: 0 12px 35px rgba(0,0,0,.45); backdrop-filter: blur(14px); }
.toolbar-label { padding: 0 8px; color: #625b67; font-size: 7px; letter-spacing: .1em; }
.graph-toolbar button { min-width: 37px; height: 35px; padding: 0 9px; border: 0; border-left: 1px solid rgba(255,255,255,.08); background: transparent; color: var(--white); font-size: 12px; cursor: pointer; }
.graph-toolbar button:hover { background: var(--pink); color: var(--void); }
.graph-toolbar #graph-fit { font-size: 7px; letter-spacing: .08em; }
#graph-zoom { min-width: 47px; color: var(--cyan); text-align: center; font-size: 8px; }
.graph-hint { position: absolute; left: 17px; bottom: 15px; z-index: 6; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(7,6,10,.8); color: #6d6671; font-size: 7px; letter-spacing: .08em; pointer-events: none; }
.graph-hint b { color: var(--pink-soft); font-weight: 400; }
.graph-hint i { color: #3e3942; font-style: normal; }
.map-index { position: absolute; right: 17px; bottom: 15px; z-index: 5; color: #4a454e; text-align: right; font-size: 7px; line-height: 1.5; letter-spacing: .12em; pointer-events: none; }

/* Jobs and trace */
.job-grid { margin: 0 clamp(20px, 4vw, 70px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.no-results { grid-column: 1 / -1; padding: 35px; border: 1px dashed rgba(255,255,255,.15); color: #68616d; font-size: 8px; letter-spacing: .1em; }
.job { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: var(--panel); box-shadow: 8px 8px 0 rgba(255,43,214,.055); }
.job-image { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, #21162b, #09070d 68%); }
.job-image:after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.06); box-shadow: inset 0 0 40px rgba(0,0,0,.45); pointer-events: none; }
.job-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.job-mode { position: absolute; right: 9px; top: 9px; z-index: 2; padding: 5px 7px; border: 1px solid var(--acid); background: rgba(7,9,4,.78); color: var(--acid); font: 7px var(--display); letter-spacing: .08em; box-shadow: 0 0 14px rgba(200,255,54,.15); }
.loader { position: relative; width: 58px; height: 58px; border: 1px solid rgba(255,43,214,.28); border-radius: 50%; animation: rotate 2s linear infinite; }
.loader:before, .loader:after { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--cyan); border-radius: 50%; }
.loader:after { inset: 18px; background: var(--pink); border: 0; box-shadow: 0 0 17px var(--pink); }
.job-body { padding: 17px; }
.job-index { margin: -2px 0 11px; display: flex; justify-content: space-between; gap: 8px; color: #5d5662; font-size: 6px; letter-spacing: .1em; }
.job-index b { color: var(--pink-soft); font-weight: 400; }
.job-body > p { min-height: 38px; margin: 0 0 11px; color: #d4cdd8; font-size: 9px; line-height: 1.6; }
.job-body > small { color: #817987; font-size: 8px; }
.bar { height: 3px; margin-top: 13px; overflow: hidden; background: #27222c; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--pink), var(--cyan)); box-shadow: 0 0 10px var(--pink); }
.download { color: var(--acid); font-size: 8px; font-weight: 500; }
.debug-trace { margin-top: 14px; overflow: hidden; border: 1px solid rgba(122,69,255,.27); background: #0b0910; }
.debug-trace summary { display: flex; justify-content: space-between; gap: 10px; padding: 11px; cursor: pointer; list-style: none; }
.debug-trace summary::-webkit-details-marker { display: none; }
.debug-trace summary span { color: var(--cyan); font: 500 8px var(--display); letter-spacing: .04em; }
.debug-trace summary span:before { content: "◇ "; color: var(--pink); }
.debug-trace summary b { max-width: 48%; color: #746c7a; text-align: right; font-size: 7px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }
.debug-trace[open] summary { border-bottom: 1px solid rgba(122,69,255,.25); }
.trace-content { padding: 0 10px 10px; }
.trace-items { margin: 0 -10px 8px; padding: 9px 9px 9px 29px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(122,69,255,.07); }
.trace-items li { padding: 3px 0; color: #817987; font-size: 7px; line-height: 1.4; }
.trace-items li b { color: var(--pink-soft); }
.trace-note { margin: 0 -10px 10px; padding: 9px 10px; border-bottom: 1px solid rgba(200,255,54,.15); background: rgba(200,255,54,.045); color: #83975b !important; font-size: 7px !important; line-height: 1.5 !important; }
.trace-content section { display: block; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1); }
.trace-content section:first-of-type { border-top: 0; }
.trace-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 0 0 9px; padding: 0; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #18131f; cursor: zoom-in; }
.trace-preview img, .version-card .trace-preview img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .2s, filter .2s; }
.trace-preview:hover img { transform: scale(1.025); filter: saturate(1.15); }
.trace-preview > span { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 6px; background: rgba(7,6,10,.82); color: var(--cyan) !important; text-align: center; font-size: 6px !important; font-weight: 500; letter-spacing: .07em; backdrop-filter: blur(7px); }
.trace-content small, .trace-content strong { display: block; }
.trace-content small { color: var(--pink-soft); font-size: 6px; letter-spacing: .07em; }
.trace-content strong { margin: 5px 0 7px; color: #c9c0cf; font-size: 8px; }
.trace-content pre { max-height: 130px; margin: 0; padding: 9px; overflow: auto; border-left: 1px solid var(--cyan); background: #060508; color: #91899a; white-space: pre-wrap; word-break: break-word; font: 7px/1.55 var(--mono); }
.debug-trace.compact .trace-preview { aspect-ratio: 16 / 10; }
.debug-trace.compact .trace-content pre { max-height: 95px; }

/* Voice control */
.voice-console { position: fixed; left: 18px; bottom: 18px; z-index: 82; width: min(370px, calc(100vw - 36px)); filter: drop-shadow(0 18px 38px #000b); }
.voice-toggle { position: relative; z-index: 2; min-width: 190px; height: 58px; padding: 0 15px 0 9px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(66,245,242,.38); background: rgba(9,7,13,.96); color: white; text-align: left; cursor: pointer; backdrop-filter: blur(16px); }
.voice-toggle > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.voice-toggle b { color: var(--cyan); font: 500 8px var(--display); letter-spacing: .08em; }
.voice-toggle small { color: #645e69; font-size: 6px; letter-spacing: .11em; }
.voice-icon { position: relative; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,43,214,.5); border-radius: 50%; background: rgba(255,43,214,.08); }
.voice-icon:before { content: ""; width: 9px; height: 16px; border: 1px solid var(--pink-soft); border-radius: 7px; }
.voice-icon:after { content: ""; position: absolute; width: 17px; height: 12px; bottom: 7px; border: solid var(--pink-soft); border-width: 0 1px 1px; border-radius: 0 0 10px 10px; }
.voice-icon i { position: absolute; width: 1px; height: 6px; bottom: 2px; background: var(--pink-soft); }
.voice-readout { display: none; margin-top: -1px; border: 1px solid rgba(66,245,242,.35); background: rgba(8,6,11,.97); box-shadow: 8px 8px 0 rgba(255,43,214,.13); backdrop-filter: blur(18px); }
.voice-console.active .voice-readout { display: block; }
.voice-console.active .voice-toggle { width: 100%; border-color: var(--pink); }
.voice-readout > header { height: 35px; padding-left: 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: #706976; font-size: 6px; letter-spacing: .12em; }
.voice-readout > header em { margin-left: auto; padding: 4px 7px; color: var(--cyan); border: 1px solid rgba(66,245,242,.2); background: rgba(66,245,242,.04); font: 500 5px var(--mono); font-style: normal; letter-spacing: .08em; }
.voice-readout > header button { width: 35px; align-self: stretch; border: 0; border-left: 1px solid var(--line); background: transparent; color: #aaa2af; font-size: 16px; cursor: pointer; }
.voice-spectrum-head { height: 24px; padding: 0 11px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.07); color: #5f5965; font-size: 5px; letter-spacing: .11em; }
.voice-spectrum-head b { color: #77717c; font-weight: 500; }
.voice-spectrum-head output { min-width: 42px; color: var(--cyan); text-align: right; font: 500 6px var(--mono); }
.voice-meter { position: relative; height: 76px; overflow: hidden; border-bottom: 1px solid var(--line); background: #05060a; }
.voice-meter:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.045) 18px 19px), repeating-linear-gradient(90deg, transparent 0 42px, rgba(66,245,242,.035) 42px 43px); box-shadow: inset 0 0 28px #0009; }
.voice-meter canvas { width: 100%; height: 100%; display: block; image-rendering: auto; }
.voice-frequency { position: absolute; z-index: 2; inset: 4px 5px 4px auto; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.voice-frequency i { color: rgba(255,255,255,.28); font: 4px var(--mono); font-style: normal; text-shadow: 0 1px 2px #000; }
.voice-meter[data-signal="voice"] { box-shadow: inset 3px 0 0 var(--pink); }
.voice-meter[data-signal="signal"] { box-shadow: inset 3px 0 0 var(--cyan); }
.voice-meter[data-signal="hold"] { box-shadow: inset 3px 0 0 #6c6570; }
.voice-meter[data-signal="muted"] { box-shadow: inset 3px 0 0 var(--acid); }
.voice-console[data-mic="voice"] .voice-spectrum-head b { color: var(--pink-soft); }
.voice-console[data-mic="signal"] .voice-spectrum-head b { color: var(--cyan); }
.voice-console[data-mic="muted"] .voice-spectrum-head b { color: var(--acid); }
.voice-copy { min-height: 79px; padding: 13px; }
.voice-copy small { color: var(--pink-soft); font-size: 6px; letter-spacing: .12em; }
.voice-copy p { margin: 8px 0 0; color: #bbb3c0; font-size: 9px; line-height: 1.55; }
.voice-readout > footer { height: 38px; display: flex; border-top: 1px solid var(--line); }
.voice-readout > footer button { flex: 1; border: 0; border-right: 1px solid var(--line); background: transparent; color: #756e7a; font-size: 6px; letter-spacing: .08em; cursor: pointer; }
.voice-readout > footer button:last-child { border-right: 0; }
.voice-readout > footer button:hover { color: var(--cyan); background: rgba(66,245,242,.05); }
.voice-console.listening .voice-toggle b { color: var(--pink-soft); }
.voice-console.listening .voice-icon { box-shadow: 0 0 22px rgba(255,43,214,.35); animation: pulse 1s infinite; }
.voice-console.speaking .voice-toggle b { color: var(--acid); }
.voice-help-dialog { width: min(680px, calc(100vw - 28px)); }
.voice-help-dialog form > button { position: absolute; right: 12px; top: 12px; z-index: 2; width: 34px; height: 34px; border: 1px solid var(--line); background: #14101a; color: white; font-size: 18px; cursor: pointer; }
.voice-command-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.voice-command-list section { padding: 13px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.025); }
.voice-command-list b, .voice-command-list span { display: block; }
.voice-command-list b { margin-bottom: 9px; color: var(--cyan); font: 500 7px var(--display); letter-spacing: .08em; }
.voice-command-list span { margin-top: 5px; color: #8e8693; font-size: 7px; line-height: 1.45; }

/* Context menu and image viewer */
.context-menu { position: fixed; z-index: 100; width: 278px; padding: 5px; border: 1px solid rgba(66,245,242,.45); background: rgba(10,8,14,.96); box-shadow: 7px 7px 0 rgba(255,43,214,.18), 0 20px 60px #000b; opacity: 0; transform: scale(.97) translateY(-4px); transform-origin: top right; transition: .12s; backdrop-filter: blur(18px); }
.context-menu.open { opacity: 1; transform: none; }
.context-menu > header { height: 30px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: #69616e; font-size: 7px; letter-spacing: .12em; }
.context-menu > header b { color: var(--pink); }
.context-menu button, .context-menu a { width: 100%; padding: 10px; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--white); text-decoration: none; text-align: left; cursor: pointer; }
.context-menu button:hover, .context-menu a:hover { background: rgba(255,43,214,.1); }
.context-menu > * > span { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); color: var(--cyan); }
.context-menu div { display: flex; flex-direction: column; gap: 3px; }
.context-menu div b { font: 500 8px var(--display); letter-spacing: .04em; }
.context-menu div small { color: #7f7785; font-size: 7px; }
.archive-action { margin-top: 4px; border-top: 1px solid var(--line) !important; color: #ff9caf !important; }
.archive-action > span { color: var(--danger) !important; }
.rename-dialog { width: min(520px, calc(100vw - 28px)); max-width: none; padding: 0; overflow: visible; border: 1px solid var(--pink); background: #0d0a12; color: white; box-shadow: 12px 12px 0 rgba(255,43,214,.17), 0 30px 100px #000d; }
.rename-dialog::backdrop { background: rgba(4,3,6,.82); backdrop-filter: blur(9px); }
.rename-dialog form { position: relative; padding: 43px 42px 38px; overflow: hidden; background-image: linear-gradient(rgba(66,245,242,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(66,245,242,.035) 1px, transparent 1px); background-size: 24px 24px; }
.rename-dialog form:before { content: ""; position: absolute; width: 250px; height: 250px; right: -120px; top: -120px; border: 1px solid rgba(255,43,214,.25); border-radius: 50%; box-shadow: 0 0 0 14px rgba(255,43,214,.025), 0 0 0 32px rgba(66,245,242,.02); }
.modal-code { color: var(--cyan); font-size: 7px; letter-spacing: .12em; }
#rename-close, #project-dialog-close, #project-delete-close { position: absolute; right: 12px; top: 12px; z-index: 2; width: 34px; height: 34px; border: 1px solid var(--line); background: #14101a; color: white; font-size: 18px; cursor: pointer; }
.modal-star { position: absolute; right: 53px; top: 47px; color: var(--gold); text-shadow: 0 0 14px currentColor; }
.rename-dialog p { margin: 27px 0 4px; color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.rename-dialog h2 { margin: 0 0 30px; font: 600 clamp(28px, 6vw, 43px)/.92 var(--display); letter-spacing: -.07em; }
.rename-dialog h2 i { color: var(--pink-soft); font: 400 italic 1.2em var(--serif); text-shadow: 2px 2px 0 #6d184f; }
.rename-dialog label { display: block; margin-bottom: 8px; color: #756d7a; font-size: 7px; letter-spacing: .12em; }
.rename-dialog input { width: 100%; height: 52px; padding: 0 13px; border: 1px solid rgba(66,245,242,.35); outline: 0; background: #08060b; color: white; caret-color: var(--pink); font-size: 11px; }
.rename-dialog input:focus { border-color: var(--cyan); box-shadow: 0 0 16px rgba(66,245,242,.1); }
.modal-actions { margin-top: 15px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 7px; }
.modal-actions button { height: 48px; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #928a97; font: 500 8px var(--display); letter-spacing: .05em; cursor: pointer; }
.modal-actions button[type="submit"] { border-color: var(--pink); background: linear-gradient(100deg, #951675, var(--pink)); color: white; }
.modal-actions button b { float: right; margin-right: 10px; }
.modal-actions button:hover { filter: brightness(1.17); }
.modal-actions button:disabled { opacity: .4; cursor: wait; }
.delete-dialog { border-color: var(--danger); box-shadow: 12px 12px 0 rgba(255,97,125,.12), 0 30px 100px #000d; }
.user-dialog { border-color: var(--cyan); box-shadow: 12px 12px 0 rgba(66,245,242,.12), 0 30px 100px #000d; }
.identity-note { margin: -14px 0 25px; padding: 12px 14px; border-left: 2px solid var(--cyan); background: rgba(66,245,242,.055); color: #aaa4af; font-size: 9px; line-height: 1.7; }
.user-dialog .modal-actions { justify-content: flex-end; }
.danger-code { color: var(--danger); }
.delete-dialog h2 i { max-width: 100%; display: block; overflow: hidden; color: #ff8ca0; text-overflow: ellipsis; white-space: nowrap; text-shadow: 2px 2px 0 #5c1622; }
.delete-warning { margin: -8px 0 24px; padding: 12px; border-left: 2px solid var(--danger); background: rgba(255,97,125,.06); color: #b4a4aa; font-size: 8px; line-height: 1.65; }
.modal-actions .danger-submit { border-color: var(--danger); background: linear-gradient(100deg, #7d182b, #dc3653); color: white; }
.modal-actions .danger-submit:disabled { filter: grayscale(.8); opacity: .28; cursor: not-allowed; }
#viewer { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: #050407; color: white; }
#viewer::backdrop { background: #050407; }
#viewer[open] { display: flex; flex-direction: column; }
.viewer-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(66,245,242,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(66,245,242,.035) 1px, transparent 1px); background-size: 42px 42px; }
.viewer-top { position: relative; z-index: 3; min-height: 76px; flex: none; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(66,245,242,.2); background: rgba(8,6,11,.82); backdrop-filter: blur(18px); }
.viewer-top > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.viewer-top > div:first-child small { color: var(--pink-soft); font-size: 7px; letter-spacing: .1em; }
.viewer-top strong { overflow: hidden; font: 500 11px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.viewer-top span { color: #817a85; font-size: 8px; }
.viewer-actions { flex: none; display: flex; gap: 6px; }
.viewer-actions button, .viewer-actions a { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: white; text-decoration: none; font-size: 17px; cursor: pointer; }
.viewer-actions button:hover, .viewer-actions a:hover { border-color: var(--pink); color: var(--pink-soft); }
#viewer-stage { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(122,69,255,.13), transparent 55%); cursor: grab; touch-action: none; }
#viewer-stage:active { cursor: grabbing; }
.focus-frame { position: absolute; left: 50%; top: 50%; width: min(78vw, 900px); height: min(67vh, 650px); transform: translate(-50%, -50%); border: 1px solid rgba(255,43,214,.13); pointer-events: none; }
.focus-frame:before, .focus-frame:after { content: ""; position: absolute; width: 32px; height: 32px; }
.focus-frame:before { left: -1px; top: -1px; border-left: 1px solid var(--pink); border-top: 1px solid var(--pink); }
.focus-frame:after { right: -1px; bottom: -1px; border-right: 1px solid var(--cyan); border-bottom: 1px solid var(--cyan); }
#viewer-image { position: relative; z-index: 2; display: block; max-width: calc(100vw - 80px); max-height: calc(100vh - 175px); object-fit: contain; transform-origin: center; will-change: transform; user-select: none; box-shadow: 0 18px 80px #000b, 8px 8px 0 rgba(255,43,214,.08); }
.zoom-bar { position: fixed; left: 50%; bottom: 18px; z-index: 4; transform: translateX(-50%); display: flex; padding: 4px; border: 1px solid rgba(66,245,242,.3); background: rgba(8,6,11,.88); backdrop-filter: blur(14px); }
.zoom-bar button { min-width: 44px; height: 41px; border: 0; border-left: 1px solid rgba(255,255,255,.1); background: transparent; color: white; font-size: 16px; cursor: pointer; }
.zoom-bar button:first-child { border-left: 0; }
.zoom-bar button:hover { background: rgba(66,245,242,.12); color: var(--cyan); }
#zoom-reset { min-width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9px; }
.zoom-bar small { color: #716a76; font-size: 6px; letter-spacing: .09em; }

/* Footer and notifications */
.site-footer { position: relative; min-height: 320px; margin-top: 130px; padding: 60px 30px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px solid var(--line); background: radial-gradient(circle at 50% 120%, rgba(255,43,214,.24), transparent 50%); text-align: center; }
.site-footer:before { content: "ARREDO FANTASTICO"; position: absolute; bottom: -2vw; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); font: 800 clamp(55px, 10vw, 170px)/.8 var(--display); letter-spacing: -.09em; white-space: nowrap; }
.footer-star { color: var(--gold); font-size: 30px; text-shadow: 0 0 25px currentColor; }
.site-footer p { position: relative; margin: 14px 0 5px; font: 500 clamp(28px, 4vw, 58px) var(--display); letter-spacing: -.07em; }
.site-footer p i { color: var(--pink-soft); font-family: var(--serif); font-weight: 400; }
.site-footer > span { position: relative; color: var(--cyan); font-size: 8px; letter-spacing: .16em; }
.site-footer > small { position: relative; margin-top: 36px; color: #5b555f; font-size: 7px; letter-spacing: .14em; }
#toast { position: fixed; right: 20px; bottom: 20px; z-index: 110; max-width: min(390px, calc(100vw - 40px)); padding: 14px 17px; border: 1px solid var(--pink); background: rgba(11,8,14,.96); color: white; box-shadow: 5px 5px 0 rgba(255,43,214,.19), 0 18px 50px #000a; opacity: 0; transform: translateY(13px); transition: .2s; pointer-events: none; font-size: 9px; line-height: 1.5; }
#toast:before { content: "SYSTEM // "; color: var(--cyan); }
#toast.show { opacity: 1; transform: none; }

@keyframes pulse { 0%, 100% { opacity: .65; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes scan { to { top: 100%; } }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 1100px) {
  .rail-nav { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
  .intro { grid-template-columns: 1fr minmax(280px, .55fr); }
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .topbar { min-height: 76px; }
  .brand-copy small { display: none; }
  .intro { min-height: auto; padding-top: 80px; grid-template-columns: 1fr; }
  .hero-copy { z-index: 3; }
  .hero-sigil { position: absolute; right: -80px; top: 120px; z-index: 0; width: 390px; opacity: .34; }
  .hero-copy h1 { font-size: clamp(50px, 12vw, 86px); }
  .hero-deck { max-width: 590px; }
  .workspace { grid-template-columns: 1fr; }
  .composer { position: relative; top: auto; }
  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-bar { grid-template-columns: 1fr auto; padding-left: 18px; }
  .project-label { display: none; }
}

@media (max-width: 560px) {
  .crt { opacity: .28; }
  .topbar { padding: 0 16px; }
  .mark { width: 42px; height: 42px; }
  .brand-copy strong { font-size: 10px; }
  .brand-copy strong i { font-size: 14px; }
  .status small { display: none; }
  .status b { max-width: 90px; text-align: right; font-size: 7px; }
  .ticker { height: 23px; font-size: 7px; }
  .project-bar { min-height: 104px; padding: 0; grid-template-columns: 1fr; grid-template-rows: 52px 52px; }
  .project-tabs { grid-row: 1; padding-inline: 10px; border-bottom: 1px solid var(--line); }
  .project-tab { max-width: 190px; height: 34px; }
  .project-actions { grid-row: 2; padding: 0 10px; justify-content: flex-end; border-left: 0; }
  .project-actions #project-new { margin-left: 0; margin-right: auto; }
  .project-actions button em { display: none; }
  .project-actions #project-rename, .project-actions #project-delete { padding: 0; }
  .project-gate { min-height: calc(100vh - 203px); }
  .intro { padding: 62px 18px 70px; }
  .eyebrow { font-size: 7px; }
  .eyebrow span { display: inline-block; margin-bottom: 8px; }
  .hero-copy h1 { font-size: clamp(42px, 14.5vw, 69px); }
  .hero-copy h1 em { margin-left: 14vw; }
  .hero-copy h1 em:before, .hero-copy h1 em:after { font-size: 11px; }
  .hero-deck { font-size: 10px; }
  .hero-sigil { right: -135px; top: 105px; width: 340px; }
  .hero-meta { left: 18px; bottom: 18px; font-size: 6px; }
  .hero-meta span:last-child, .hero-meta i:last-of-type { display: none; }
  .section-title { margin-inline: 14px; padding-top: 22px; grid-template-columns: auto 1fr; gap: 10px; }
  .section-title h2 { font-size: 25px; }
  .title-code { display: none; }
  .workspace, .graph-shell, .job-grid { margin-inline: 14px; }
  .panel-head { min-height: 94px; padding: 18px 15px; }
  .panel-head h2 { font-size: 24px; }
  .panel-head p { display: none; }
  .upload { padding: 9px; font-size: 0; }
  .upload span { font-size: 20px; }
  .gallery { min-height: 310px; padding: 10px; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .empty-upload { min-height: 286px; }
  .photo .label { font-size: 7px; }
  .photo .label:before { display: none; }
  .panel-footer { display: none; }
  .hint, .selection-label, .mode-title { padding-inline: 15px; }
  .chips, .prompt, .mode-picker { margin-inline: 15px; }
  #create { width: calc(100% - 30px); margin-inline: 15px; }
  .examples { padding-inline: 15px; }
  .history, .results { margin-top: 82px; }
  .graph-shell { height: 560px; min-height: 560px; }
  .toolbar-label { display: none; }
  .graph-toolbar { right: 8px; top: 8px; }
  .graph-hint, .map-index { display: none; }
  .version-card { width: 260px; }
  .tree-children { margin-left: 25px; padding-left: 20px; }
  .tree-children > .tree-branch:before { left: -20px; width: 20px; }
  .job-grid { grid-template-columns: 1fr; }
  .context-menu { left: 10px !important; right: 10px !important; top: auto !important; bottom: 10px; width: auto; transform: translateY(15px); transform-origin: bottom; }
  .context-menu.open { transform: none; }
  .voice-console { left: 10px; bottom: 10px; width: calc(100vw - 20px); }
  .voice-toggle { height: 53px; }
  .voice-command-list { grid-template-columns: 1fr; }
  .rename-dialog form { padding: 36px 20px 24px; }
  .rename-dialog h2 { margin-bottom: 24px; }
  .viewer-top { min-height: 66px; padding: 0 10px; }
  .viewer-top > div:first-child small { display: none; }
  .viewer-actions button, .viewer-actions a { width: 34px; height: 34px; }
  #viewer-image { max-width: 100vw; max-height: calc(100vh - 145px); }
  .site-footer { min-height: 250px; margin-top: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}