:root {
  color-scheme: dark;
  --ink: #08070c;
  --paper: #f3f0ff;
  --purple: #8b5cf6;
  --purple-hot: #b99cff;
  --chrome-a: #f4f0ff;
  --chrome-b: #9b95ac;
  --line: rgba(220, 211, 255, .36);
  --mono: "DM Mono", ui-monospace, monospace;
  --blackletter: "UnifrakturMaguntia", Georgia, serif;
  --display: "Syne", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #050409;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 16px;
}
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: #050409;
  transition: opacity .45s ease, visibility .45s ease;
}
.boot.done { opacity: 0; visibility: hidden; }
.boot-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid #8c72c3;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(139, 92, 246, .45), inset 0 0 25px rgba(139, 92, 246, .3);
  font-weight: 500;
  letter-spacing: -.12em;
}
.boot p { margin: 0; color: #aaa0bf; font-size: .78rem; letter-spacing: .15em; }
.boot-line { width: 220px; height: 2px; overflow: hidden; background: #23202c; }
.boot-line i { display: block; width: 100%; height: 100%; background: #a785ff; transform-origin: left; animation: load 1.1s ease both; }
@keyframes load { from { transform: scaleX(0); } }

.desktop {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 63% 38%, rgba(103, 60, 178, .24), transparent 24%),
    radial-gradient(circle at 17% 83%, rgba(47, 30, 82, .35), transparent 26%),
    linear-gradient(145deg, #09080e 0%, #020205 68%, #0e0a17 100%);
}
.desktop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 82%);
}
.desktop.distorted { animation: page-glitch .2s steps(2) 3; }
@keyframes page-glitch { 35% { filter: hue-rotate(50deg); transform: translateX(3px); } 70% { transform: translateX(-2px); } }
.noise {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 80;
  opacity: .045;
  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='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.system-strip {
  position: absolute;
  inset: 0 0 auto;
  z-index: 90;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  background: rgba(5,4,9,.72);
  backdrop-filter: blur(10px);
  color: #c7c1d4;
  font-size: .72rem;
  letter-spacing: .09em;
}
.system-message b { color: var(--purple-hot); font-weight: 400; }

.icon-grid {
  position: absolute;
  top: 66px;
  left: 24px;
  z-index: 5;
  display: grid;
  gap: 17px;
}
.desktop-icon {
  width: 88px;
  min-height: 82px;
  padding: 5px 2px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: #dad5e7;
  text-shadow: 0 1px 4px #000;
  font-size: .7rem;
  line-height: 1.25;
  letter-spacing: .05em;
}
.desktop-icon:hover { border-color: rgba(183,154,255,.38); background: rgba(111,77,177,.13); }
.icon { position: relative; display: grid; place-items: center; width: 46px; height: 42px; margin: 0 auto 7px; }
.icon-folder { border: 1px solid #b1aabe; border-radius: 2px; background: linear-gradient(150deg,#dad4e0 0 48%,#8a8396 49% 100%); box-shadow: 4px 5px 0 rgba(42,33,55,.9); transform: skewY(-3deg); }
.icon-folder::before { content:""; position:absolute; top:-7px; left:3px; width:20px; height:8px; border:1px solid #aca4b9; background:#c8c1d1; }
.icon-folder i { width: 20px; height: 1px; background: #6b6178; box-shadow: 0 5px #6b6178; }
.icon-disc { border: 1px solid #cbc5d5; border-radius: 50%; background: repeating-radial-gradient(circle,#d8d3df 0 2px,#7a7483 3px 4px,#c8c2ce 5px 7px); box-shadow: 0 0 18px rgba(166,130,255,.32); }
.icon-disc i { width: 11px; height: 11px; border: 2px solid #675282; border-radius: 50%; background:#0b0910; }
.icon-cube { width: 39px; height: 39px; border: 1px solid #b28cff; transform: rotate(30deg) skew(-4deg); box-shadow: inset 0 0 20px #7654b733, 8px 7px 0 #8a5bea1c; }
.icon-cube::before,.icon-cube::after { content:""; position:absolute; background:#a57cff; opacity:.7; }
.icon-cube::before { width:1px; height:100%; left:50%; }
.icon-cube::after { height:1px; width:100%; top:50%; }
.icon-shirt { clip-path: polygon(0 18%,23% 0,38% 11%,62% 11%,77% 0,100% 18%,86% 40%,77% 33%,77% 100%,23% 100%,23% 33%,14% 40%); background: linear-gradient(145deg,#24202d,#0a080e); border:1px solid #eee; color:#a77cff; font-family:var(--blackletter); font-size:1.3rem; }
.icon-file { width: 36px; height: 43px; border:1px solid #bcb5c6; background:linear-gradient(140deg,#e4dfea,#8d8696); clip-path:polygon(0 0,70% 0,100% 25%,100% 100%,0 100%); color:#30273c; font-weight:500; }

.window {
  --x: 50%;
  --y: 50%;
  position: absolute;
  z-index: 10;
  width: min(760px, calc(100vw - 270px));
  border: 1px solid #b6afc1;
  border-radius: 7px 7px 2px 2px;
  background: rgba(11,9,16,.94);
  box-shadow: 0 32px 90px rgba(0,0,0,.72), 0 0 0 1px #211c2c, inset 0 0 40px rgba(120,85,190,.05);
  backdrop-filter: blur(16px);
}
.window[hidden] { display: none; }
.window.active { z-index: 40; }
.titlebar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px 0 12px;
  border-bottom: 1px solid #51495e;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(#ded9e4,#81798a 48%,#5b5364 52%,#a79fac);
  color: #151119;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-shadow: 0 1px rgba(255,255,255,.55);
  user-select: none;
}
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.window-controls { display:flex; gap:5px; }
.window-controls i, .close { width:14px; height:14px; border:1px solid #4c4653; background:linear-gradient(#eae7ed,#77717e); box-shadow:inset 0 0 0 1px #c9c4ce; }
.close { display:grid; place-items:center; padding:0; font-size:.8rem; line-height:1; color:#1a151d; cursor:pointer; }

.portal-window { left: 52%; top: 48%; width: min(760px, calc(100vw - 270px)); transform: translate(-50%,-50%); }
.portal-content { position:relative; min-height:490px; overflow:hidden; display:grid; place-items:center; background: radial-gradient(circle at 50% 50%,rgba(113,72,189,.21),transparent 33%), linear-gradient(120deg,rgba(255,255,255,.015),transparent); }
.portal-content::before { content:""; position:absolute; inset:8%; border:1px solid rgba(180,158,226,.12); transform:perspective(600px) rotateX(60deg) rotateZ(-12deg); box-shadow:0 0 70px rgba(130,91,210,.09); }
.title-lockup { position:relative; z-index:2; text-align:center; }
.tiny-label,.eyebrow { display:block; color:#aaa1b8; font-size:.72rem; letter-spacing:.17em; }
.title-lockup h1 { position:relative; margin:0; font-family:var(--blackletter); font-size:clamp(7rem,14vw,11rem); line-height:.8; font-weight:400; letter-spacing:-.06em; text-shadow: 4px 0 #7149c7, -3px 0 rgba(222,214,238,.35), 0 0 42px rgba(133,82,227,.32); }
.title-lockup h1::after { content:attr(data-text); position:absolute; inset:0; clip-path:inset(43% 0 36% 0); transform:translateX(5px); color:#9f7cf1; opacity:.7; }
.title-lockup p { margin: 16px 0 27px; letter-spacing:.7em; padding-left:.7em; color:#bdb5ca; }
.chrome-button { min-height:39px; padding:9px 16px; border:1px solid #bfb7ca; border-radius:2px; background:linear-gradient(#e6e1ea 0 42%,#7e7687 45% 52%,#c9c3cf 55% 100%); color:#17131b; font-size:.74rem; font-weight:500; letter-spacing:.08em; cursor:pointer; box-shadow:0 0 0 1px #474050,0 8px 24px rgba(0,0,0,.35); }
.chrome-button:hover { filter:brightness(1.13) saturate(1.2); }
.code-column { position:absolute; top:40px; left:24px; color:#81778e; font-size:.63rem; line-height:2.1; letter-spacing:.12em; opacity:.58; }
.orbit { position:absolute; top:35px; right:32px; width:82px; height:82px; border:1px solid rgba(177,141,255,.35); border-radius:50%; cursor:pointer; animation:orbit 9s linear infinite; }
.orbit::before,.orbit::after { content:""; position:absolute; inset:13px; border:1px solid rgba(224,214,244,.25); border-radius:50%; transform:rotateX(65deg); }
.orbit::after { transform:rotateY(65deg); }
.orbit span { position:absolute; width:7px; height:7px; left:6px; top:32px; border-radius:50%; background:#d7c9ff; box-shadow:0 0 14px #a06dff; }
@keyframes orbit { to { transform:rotate(360deg); } }
.portal-status { position:absolute; inset:auto 15px 12px; display:flex; justify-content:space-between; color:#696173; font-size:.65rem; letter-spacing:.08em; }

.mini-player { position:absolute; right:22px; bottom:66px; z-index:9; width:270px; min-height:92px; display:grid; grid-template-columns:62px 1fr 40px; align-items:center; gap:10px; padding:12px; border:1px solid #4d4658; border-radius:3px; background:rgba(12,10,17,.85); box-shadow:0 15px 45px #000; backdrop-filter:blur(12px); }
.mini-cover { width:62px; height:62px; display:grid; place-items:center; border:1px solid #655878; background:radial-gradient(circle,#6133ad 0 2px,#09070d 3px 18%,#2b1b3a 19% 20%,#0b0910 21%); }
.mini-cover span { transform:rotate(-12deg); font-family:var(--blackletter); font-size:1rem; text-shadow:2px 0 #8359cd; }
.mini-copy { display:flex; flex-direction:column; min-width:0; }
.mini-copy small { color:#7e7589; font-size:.6rem; }
.mini-copy strong { margin:4px 0 1px; font-size:.9rem; }
.mini-copy span { color:#9c93a7; font-size:.68rem; }
.mini-player > button { width:38px; height:38px; padding:0; border:1px solid #696171; border-radius:50%; background:linear-gradient(145deg,#c9c3cf,#5c5663); color:#17121c; cursor:pointer; }
.player-meter { grid-column:2 / 4; display:flex; align-items:end; gap:3px; height:10px; }
.player-meter i { width:4px; height:35%; background:#8d68d4; animation:meter .7s ease-in-out infinite alternate; animation-play-state:paused; }
.mini-player.playing .player-meter i { animation-play-state:running; }
.player-meter i:nth-child(2n) { animation-delay:-.3s; height:80%; }
.player-meter i:nth-child(3n) { animation-delay:-.55s; height:55%; }
@keyframes meter { to { height:100%; background:#d2c4ef; } }

.album-window { left:18%; top:10%; width:min(780px,calc(100vw - 60px)); }
.album-inner { display:grid; grid-template-columns:1.05fr .95fr; min-height:430px; }
.album-art { position:relative; overflow:hidden; display:grid; place-items:center; min-height:430px; border-right:1px solid #34303b; background:radial-gradient(circle at 55% 45%,rgba(128,72,218,.31),transparent 30%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),#08070b; }
.album-art::before { content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(167,124,255,.35); border-radius:50%; box-shadow:0 0 70px rgba(120,75,205,.22),inset 0 0 60px rgba(120,75,205,.14); }
.album-art strong { z-index:2; font-family:var(--blackletter); font-size:6.4rem; font-weight:400; text-shadow:4px 0 #734ebd,-3px 0 #c4b5db66; }
.album-art em { position:absolute; bottom:32px; font-style:normal; letter-spacing:.6em; padding-left:.6em; font-size:.72rem; }
.album-code { position:absolute; inset:15px auto auto 15px; color:#796c89; font-size:.57rem; line-height:1.8; }
.tracklist { padding:40px 28px; }
.tracklist h2,.merch-content h2,.about-content h2 { margin:8px 0 24px; font-size:2rem; font-weight:400; letter-spacing:-.04em; }
.track,.locked-track { width:100%; display:grid; grid-template-columns:30px 1fr auto; gap:9px; align-items:center; padding:12px 4px; border:0; border-bottom:1px solid #2e2935; background:transparent; text-align:left; color:#dcd7e5; cursor:pointer; }
.track:hover,.track.active { color:#b791ff; background:linear-gradient(90deg,rgba(143,92,236,.12),transparent); }
.track b,.locked-track b { color:#6f667a; font-size:.72rem; font-weight:400; }
.track i,.locked-track i { font-style:normal; font-size:.65rem; color:#81778c; }
.locked-track { color:#58515f; cursor:not-allowed; }
.tracklist p { margin-top:28px; color:#81778d; font-size:.76rem; line-height:1.65; }

.archive-window { left:14%; top:12%; width:min(820px,calc(100vw - 60px)); }
.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }
.visual-card { min-height:260px; position:relative; overflow:hidden; display:block; border:1px solid #393340; background:#0b0910; color:#fff; text-decoration:none; cursor:pointer; }
.visual-card img { width:100%; height:100%; min-height:260px; object-fit:cover; filter:grayscale(1) contrast(1.18) brightness(.62); transition:.3s ease; }
.visual-card:hover img { filter:grayscale(.15) contrast(1.08) brightness(.82); transform:scale(1.035); }
.visual-card > span:last-child { position:absolute; inset:auto 0 0; display:flex; flex-direction:column; gap:4px; padding:36px 14px 14px; background:linear-gradient(transparent,rgba(0,0,0,.92)); text-align:left; }
.visual-card small { color:#aba2b7; font-size:.62rem; letter-spacing:.06em; }
.text-card { padding:0; color:inherit; font:inherit; }
.text-card .wire-orb { position:absolute; width:130px; height:130px; left:50%; top:45%; transform:translate(-50%,-50%); border:1px solid #7e5db9; border-radius:50%; box-shadow:inset 0 0 40px #5d3a962e,0 0 40px #5d3a962e; }
.wire-orb::before,.wire-orb::after { content:""; position:absolute; inset:12px; border:1px solid #6f568f; border-radius:50%; }
.wire-orb::before { transform:rotateX(65deg); }.wire-orb::after { transform:rotateY(65deg); }

.music-window { right:7%; top:17%; width:min(430px,calc(100vw - 50px)); }
.music-interface { padding:18px; background:linear-gradient(145deg,#17131d,#09080c); }
.lcd { padding:16px; border:1px solid #51475f; background:#0a0710; box-shadow:inset 0 0 24px rgba(125,82,204,.18); }
.lcd > span { color:#726580; font-size:.65rem; letter-spacing:.12em; }
.lcd > strong { display:block; margin:5px 0 14px; color:#b993ff; font-size:1.35rem; font-weight:400; }
.equalizer { height:36px; display:flex; align-items:end; gap:6px; }
.equalizer i { flex:1; height:30%; background:linear-gradient(#d6c4ff,#7449c4); animation:meter .65s ease-in-out infinite alternate; }
.equalizer i:nth-child(2n) { height:80%; animation-delay:-.2s; }.equalizer i:nth-child(3n) { height:50%; animation-delay:-.4s; }
.transport { display:flex; justify-content:center; align-items:center; gap:13px; padding:18px 0; }
.transport button { min-width:52px; height:38px; border:1px solid #6d6574; background:linear-gradient(#bbb5c0,#615b67); color:#151119; cursor:pointer; }
.transport .play-main { min-width:88px; background:linear-gradient(#e1dbe6,#857b90); }
.playlist-item { width:100%; display:flex; justify-content:space-between; padding:11px; border:0; border-top:1px solid #332d3a; background:transparent; color:#aea6b9; cursor:pointer; }
.playlist-item.active { color:#c5a8ff; background:#8d5cdf12; }
.playlist-item b { color:#655d70; font-weight:400; }

.lab-window { left:20%; top:16%; width:min(650px,calc(100vw - 60px)); }
.lab-content,.about-content { padding:38px; }
.pipeline { margin:25px 0; display:flex; align-items:center; gap:12px; padding:20px; border:1px solid #393240; background:#0a080e; }
.pipeline b { display:grid; place-items:center; width:30px; height:30px; border:1px solid #7854ad; border-radius:50%; color:#b997ed; font-size:.68rem; }
.pipeline span { font-size:.78rem; }.pipeline i { color:#655b70; font-style:normal; }
.lab-content p,.about-content p,.merch-content p { max-width:580px; color:#aaa1b4; line-height:1.7; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.tag-cloud span { padding:7px 10px; border:1px solid #453b51; color:#8f829c; font-size:.68rem; }

.merch-window { right:8%; top:13%; width:min(650px,calc(100vw - 60px)); }
.merch-content { display:grid; grid-template-columns:220px 1fr; gap:34px; align-items:center; padding:28px; }
.shirt-preview { position:relative; height:260px; display:grid; place-items:center; clip-path:polygon(0 16%,22% 0,36% 11%,64% 11%,78% 0,100% 16%,86% 38%,78% 31%,78% 100%,22% 100%,22% 31%,14% 38%); background:linear-gradient(145deg,#24202b,#050407); box-shadow:inset 0 0 60px #6e47a621; }
.shirt-preview span { font-size:1.25rem; letter-spacing:.16em; text-shadow:2px 0 #7e57c0; }.shirt-preview b { position:absolute; bottom:42px; font-size:.57rem; color:#756b7e; }

.about-window { left:23%; top:18%; width:min(570px,calc(100vw - 60px)); }
.about-content a { display:inline-block; margin-top:16px; color:#c7aaff; text-decoration:none; border-bottom:1px solid #6e4ca8; }

.taskbar { position:absolute; inset:auto 0 0; z-index:90; height:42px; display:flex; align-items:center; gap:9px; padding:5px 8px; border-top:1px solid #aaa4b0; background:linear-gradient(#7b7481,#403a46 54%,#1d1a21 55%); box-shadow:0 -8px 30px rgba(0,0,0,.35); }
.start-button,.task-shortcuts button { height:30px; border:1px solid #2d2931; background:linear-gradient(#d1cbd5,#77707c); color:#151219; font-size:.7rem; cursor:pointer; }
.start-button { padding:0 12px 0 5px; font-weight:500; }
.start-button span { display:inline-grid; place-items:center; width:23px; height:22px; margin-right:7px; background:#18141c; color:#b895ff; font-size:.55rem; }
.task-shortcuts { display:flex; gap:4px; }.task-shortcuts button { min-width:75px; background:linear-gradient(#5c5563,#2e2934); color:#d7d1df; }
.task-status { margin-left:auto; padding-right:7px; color:#a9a1b0; font-size:.63rem; }
.toast { position:fixed; left:50%; bottom:62px; z-index:100; transform:translate(-50%,20px); padding:12px 16px; border:1px solid #8b6bc0; background:#130f19; color:#dcd3e9; box-shadow:0 10px 40px #000; font-size:.75rem; opacity:0; pointer-events:none; transition:.25s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 920px) {
  body { overflow:auto; }
  .desktop { min-height:100dvh; overflow:visible; padding:50px 14px 95px; }
  .desktop::before { position:fixed; }
  .system-strip { position:fixed; }
  .icon-grid { position:relative; top:auto; left:auto; display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin:0 auto 18px; max-width:720px; }
  .desktop-icon { width:auto; min-width:0; }
  .portal-window { position:relative; left:auto; top:auto; width:min(720px,100%); margin:0 auto; transform:none; }
  .portal-content { min-height:460px; }
  .mini-player { position:relative; right:auto; bottom:auto; width:min(720px,100%); margin:14px auto 0; }
  .window:not(.portal-window) { position:fixed; inset:45px 12px 60px; width:auto; max-height:calc(100dvh - 110px); overflow:auto; transform:none!important; }
  .drag-handle { cursor:default; }
  .taskbar { position:fixed; }
}

@media (max-width: 620px) {
  .system-message { display:none; }
  .icon-grid { grid-template-columns:repeat(5,1fr); }
  .desktop-icon { min-height:72px; font-size:.58rem; }
  .icon { transform:scale(.82); margin-bottom:2px; }
  .portal-content { min-height:420px; }
  .title-lockup h1 { font-size:6.4rem; }
  .code-column { opacity:.34; }
  .orbit { width:55px; height:55px; right:15px; }
  .portal-status { font-size:.54rem; }
  .archive-grid,.album-inner,.merch-content { grid-template-columns:1fr; }
  .visual-card,.visual-card img { min-height:190px; }
  .album-art { min-height:320px; border-right:0; border-bottom:1px solid #34303b; }
  .album-art strong { font-size:5rem; }
  .shirt-preview { width:220px; margin:auto; }
  .pipeline { flex-wrap:wrap; }
  .task-shortcuts { display:none; }
  .task-status { font-size:.55rem; }
}

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

/* 1999 interface refinement */
.desktop {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 64% 38%, rgba(123, 71, 224, .23), transparent 25%),
    radial-gradient(ellipse at 22% 87%, rgba(91, 46, 170, .15), transparent 30%),
    linear-gradient(138deg, #09070f 0%, #020205 53%, #0b0712 100%);
}
.desktop::after {
  content: "";
  position: absolute;
  inset: 31px 0 42px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 46%, rgba(219, 203, 255, .035) 46.2% 46.35%, transparent 46.55% 100%);
}
.ambient-world { position: absolute; inset: 31px 0 42px; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora { position: absolute; border-radius: 50%; filter: blur(62px); mix-blend-mode: screen; opacity: .34; }
.aurora-one { width: 38vw; height: 22vw; left: 31%; top: 23%; background: #5e21c3; transform: rotate(-25deg); animation: breathe 7s ease-in-out infinite alternate; }
.aurora-two { width: 24vw; height: 18vw; right: 4%; bottom: 4%; background: #1b52b1; opacity: .13; animation: breathe 9s -3s ease-in-out infinite alternate-reverse; }
@keyframes breathe { to { transform: translate3d(2vw,-1vw,0) scale(1.14) rotate(-17deg); opacity: .48; } }
.ghost-logo { position: absolute; left: 11%; bottom: -4%; color: transparent; -webkit-text-stroke: 1px rgba(222,213,241,.055); font-family: var(--display); font-size: clamp(8rem,20vw,20rem); font-weight: 700; letter-spacing: -.1em; line-height: .8; transform: skewX(-8deg); }
.world-ring { position: absolute; border: 1px solid rgba(195, 166, 255, .13); border-radius: 50%; box-shadow: 0 0 100px rgba(126, 70, 218, .06), inset 0 0 80px rgba(126, 70, 218, .05); }
.ring-one { width: 62vw; height: 62vw; min-width: 720px; min-height: 720px; left: 27%; top: -36%; }
.ring-two { width: 45vw; height: 18vw; left: 35%; top: 34%; transform: rotate(-19deg); }
.edge-copy { position: absolute; right: 7px; top: 50%; color: rgba(208,198,222,.26); font-size: .72rem; letter-spacing: .16em; writing-mode: vertical-rl; transform: translateY(-50%); }

.system-strip {
  height: 34px;
  padding: 0 18px;
  border-bottom-color: rgba(231,225,239,.22);
  background: linear-gradient(90deg,rgba(12,9,17,.93),rgba(22,14,32,.78),rgba(5,4,8,.94));
  box-shadow: 0 7px 30px rgba(0,0,0,.28);
  font-size: .75rem;
}
.system-strip > span:first-child { font-family: var(--display); font-weight: 700; letter-spacing: .16em; color: #f2edf8; }

.icon-grid {
  top: 62px;
  left: 18px;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid rgba(226,216,239,.15);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(47,38,57,.38),rgba(9,7,13,.58));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 26px 70px rgba(0,0,0,.26);
  backdrop-filter: blur(18px) saturate(1.25);
}
.desktop-icon {
  width: 86px;
  min-height: 78px;
  border-radius: 11px;
  font-size: .72rem;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.desktop-icon:hover { transform: translateX(4px); border-color: rgba(199,169,255,.32); background: linear-gradient(90deg,rgba(150,91,255,.19),rgba(255,255,255,.025)); }
.desktop-icon:hover .icon { filter: drop-shadow(0 0 10px rgba(169,119,255,.5)); }
.icon { transition: .25s ease; }

.window {
  border-color: rgba(225,216,236,.58);
  border-radius: 13px;
  background: linear-gradient(145deg,rgba(22,17,28,.91),rgba(6,5,9,.95));
  box-shadow: 0 34px 120px rgba(0,0,0,.72), 0 0 0 1px rgba(24,17,31,.9), inset 0 1px rgba(255,255,255,.12), 0 0 60px rgba(114,65,197,.09);
  backdrop-filter: blur(24px) saturate(1.35);
}
.window::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 24% 76%,rgba(157,103,255,.045)); }
.titlebar {
  height: 36px;
  padding: 0 10px 0 14px;
  border-radius: 12px 12px 0 0;
  border-bottom-color: rgba(46,38,53,.9);
  background: linear-gradient(180deg,#eeeaf2 0%,#bab3c0 38%,#6e6774 52%,#bbb5c0 100%);
  box-shadow: inset 0 1px #fff, inset 0 -1px rgba(255,255,255,.23);
  font-size: .75rem;
  letter-spacing: .09em;
}
.window-controls i,.close { border-radius: 50%; }

.portal-window { left: 51%; top: 47%; width: min(790px, calc(100vw - 310px)); }
.portal-content {
  min-height: 520px;
  background:
    radial-gradient(circle at 50% 48%,rgba(138,76,244,.24),transparent 28%),
    linear-gradient(150deg,rgba(255,255,255,.035),transparent 22% 78%,rgba(144,95,230,.035)),
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.012) 4px 5px);
}
.portal-content::before { inset: 3% 8%; border-radius: 50%; border-color: rgba(198,166,255,.18); transform: perspective(700px) rotateX(63deg) rotateZ(-14deg); box-shadow: 0 0 95px rgba(130,91,210,.13), inset 0 0 70px rgba(130,91,210,.06); }
.portal-content::after { content:""; position:absolute; width:56%; aspect-ratio:1; border:1px solid rgba(219,202,255,.11); border-radius:50%; box-shadow:0 0 0 30px rgba(199,175,255,.018),0 0 0 75px rgba(199,175,255,.012); animation:portal-spin 20s linear infinite; }
@keyframes portal-spin { to { transform:rotate(360deg); } }
.portal-chip { position:absolute; left:22px; top:20px; z-index:3; display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid rgba(186,157,239,.25); border-radius:999px; background:rgba(15,10,21,.58); color:#b8aec5; font-size:.72rem; letter-spacing:.08em; }
.portal-chip i { width:7px; height:7px; border-radius:50%; background:#aa75ff; box-shadow:0 0 12px #aa75ff; animation:blink 1.5s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.28; } }
.title-lockup { transform: translateY(-4px); }
.title-lockup h1 {
  margin-top: 12px;
  font-size: clamp(8rem,15vw,12rem);
  background: linear-gradient(180deg,#fff 2%,#d9d1df 27%,#71687a 48%,#f4eff8 63%,#8670b2 82%,#e8dff3 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.68));
  text-shadow: none;
}
.title-lockup h1::after { color:#8d5fea; text-shadow:3px 0 rgba(199,172,255,.35); mix-blend-mode:screen; }
.tiny-label { color:#c8bfce; font-size:.76rem; }
.title-lockup p { margin:18px 0 28px; font-family:var(--display); font-size:.82rem; font-weight:600; letter-spacing:1em; color:#e7e0ed; text-shadow:0 0 20px rgba(178,134,255,.45); }
.chrome-button { min-height:44px; border-radius:999px; padding:10px 22px; background:linear-gradient(180deg,#f7f3f8 0%,#aaa2af 45%,#615a67 51%,#ded9e2 100%); box-shadow:inset 0 1px #fff,0 0 0 1px #3d3547,0 12px 30px rgba(0,0,0,.42),0 0 24px rgba(150,100,230,.12); transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; }
.chrome-button:hover { transform:translateY(-2px); box-shadow:inset 0 1px #fff,0 0 0 1px #514362,0 16px 34px rgba(0,0,0,.48),0 0 32px rgba(157,102,241,.2); }
.edition-stamp { position:absolute; right:22px; bottom:22px; z-index:3; display:flex; align-items:center; gap:9px; transform:rotate(-7deg); color:#887c94; }
.edition-stamp b { display:grid; place-items:center; width:38px; height:38px; border:1px solid #665274; border-radius:50%; font-family:var(--display); font-size:.7rem; }
.edition-stamp span { font-size:.66rem; line-height:1.35; letter-spacing:.08em; }
.code-column { top:83px; left:22px; padding-left:10px; border-left:1px solid rgba(174,132,245,.28); font-size:.7rem; color:#9a8ba8; }
.orbit { top:31px; right:33px; border-color:rgba(210,190,255,.43); box-shadow:0 0 38px rgba(138,80,239,.14); }
.portal-status { font-size:.7rem; color:#81768c; }

.signal-card { position:absolute; right:22px; top:64px; z-index:4; width:242px; padding:14px; border:1px solid rgba(221,211,234,.17); border-radius:14px; background:linear-gradient(145deg,rgba(33,25,41,.5),rgba(6,5,9,.58)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 24px 65px rgba(0,0,0,.25); backdrop-filter:blur(17px); }
.signal-top,.signal-bottom { display:flex; justify-content:space-between; align-items:center; color:#81778d; font-size:.7rem; letter-spacing:.08em; }
.signal-top b { color:#cbb2ff; font-weight:400; }
.signal-wave { height:48px; display:flex; align-items:center; gap:4px; padding:8px 0; }
.signal-wave i { flex:1; height:15%; border-radius:2px; background:linear-gradient(#dfd0ff,#7f4dc9); animation:wave 1.1s ease-in-out infinite alternate; }
.signal-wave i:nth-child(2n) { height:70%; animation-delay:-.2s; }.signal-wave i:nth-child(3n) { height:35%; animation-delay:-.45s; }.signal-wave i:nth-child(5n) { height:92%; animation-delay:-.7s; }
@keyframes wave { to { height:90%; filter:brightness(1.35); } }

.mini-player { right:22px; bottom:66px; width:292px; border-radius:16px; border-color:rgba(221,211,234,.18); background:linear-gradient(145deg,rgba(38,29,47,.66),rgba(7,6,10,.85)); box-shadow:inset 0 1px rgba(255,255,255,.09),0 28px 80px rgba(0,0,0,.45); backdrop-filter:blur(21px); }
.mini-cover { border-radius:9px; background:radial-gradient(circle,#a06bec 0 2px,#09070d 3px 17%,#332047 18% 20%,#0b0910 21%); box-shadow:0 0 22px rgba(147,91,233,.16); }
.mini-copy small,.mini-copy span { font-size:.72rem; }
.mini-player > button { transition:transform .2s ease,filter .2s ease; }.mini-player > button:hover { transform:scale(1.08); filter:brightness(1.18); }

.album-art strong { background:linear-gradient(#fff,#777081 48%,#e7e0ea 64%,#8c6bc5); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 14px 25px #000); }
.visual-card { border-radius:10px; border-color:rgba(204,188,226,.18); }
.visual-card::after { content:"↗"; position:absolute; right:12px; top:10px; display:grid; place-items:center; width:29px; height:29px; border:1px solid rgba(255,255,255,.28); border-radius:50%; background:rgba(3,3,5,.45); backdrop-filter:blur(8px); opacity:0; transform:translateY(5px); transition:.25s ease; }
.visual-card:hover::after { opacity:1; transform:none; }
.lcd { border-radius:8px; }
.tag-cloud span { border-radius:999px; }

@media (max-width: 1220px) {
  .signal-card { display:none; }
  .portal-window { width:min(760px,calc(100vw - 250px)); }
}

@media (max-width: 920px) {
  .ambient-world { position:fixed; }
  .ghost-logo { left:-8%; bottom:8%; }
  .icon-grid { padding:8px; border-radius:14px; }
  .desktop-icon:hover { transform:translateY(-2px); }
  .portal-window { width:min(720px,100%); }
  .portal-content { min-height:480px; }
}

@media (max-width: 620px) {
  .desktop { padding-top:46px; }
  .icon-grid { gap:0; }
  .portal-content { min-height:430px; }
  .portal-chip { left:14px; top:14px; font-size:.65rem; }
  .title-lockup h1 { font-size:6.8rem; }
  .title-lockup p { letter-spacing:.65em; padding-left:.65em; }
  .edition-stamp { display:none; }
  .code-column { display:none; }
  .orbit { top:55px; }
}