/* ============================================================
   The boot experience: desktop → setup → connect → browser.
   Everything here is drawn from scratch in CSS/SVG — the era is
   evoked, not lifted.
   ============================================================ */

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0; overflow:hidden; background:#000;
  font:12px/1.4 Tahoma, Geneva, Verdana, sans-serif;
  color:#111; user-select:none;
}

.scene{position:fixed; inset:0}
[hidden]{display:none !important}

/* ----------------------------------------------------------- splash */
.scene-splash{
  display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto;
  background:
    radial-gradient(800px 420px at 50% -10%, rgba(78,122,47,.22), transparent 62%),
    #0a0d10;
}
.splash-card{
  max-width:620px; width:100%; text-align:center;
  padding:34px 34px 28px;
  background:#11161c; border:1px solid #232c36; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.splash-logo{width:74px; height:74px; object-fit:contain; display:block; margin:0 auto 12px}
.splash-title{
  margin:0; font:normal 34px/1.1 Georgia,"Times New Roman",serif;
  color:#8fd16a; letter-spacing:.5px;
}
.splash-tag{margin:6px 0 20px; font-size:12px; color:#6f7c8a; letter-spacing:.09em; text-transform:uppercase}

.splash-lead{
  margin:0 0 18px; font-size:14.5px; line-height:1.68; color:#c3ccd6; text-align:left;
}
.splash-lead b{color:#e9eef4}

.splash-points{
  margin:0 0 24px; padding:0; list-style:none; text-align:left;
  border-top:1px solid #1e2630;
}
.splash-points li{
  padding:12px 0 12px 26px; position:relative;
  font-size:13px; line-height:1.6; color:#94a0ad; border-bottom:1px solid #1e2630;
}
.splash-points li::before{
  content:"✓"; position:absolute; left:4px; top:12px; color:#5ea83f; font-weight:bold;
}
.splash-points b{color:#dfe6ec}

.splash-go{
  display:block; width:100%; padding:13px 20px; cursor:pointer;
  font:600 15px/1 ui-sans-serif, system-ui, sans-serif;
  color:#06210f; background:linear-gradient(180deg,#8fe07a,#4e9e33);
  border:0; border-radius:9px;
}
.splash-go:hover{filter:brightness(1.07)}
.splash-skip{margin:14px 0 0; font-size:12.5px}
.splash-skip a{color:#6f7c8a; text-decoration:underline}
.splash-skip a:hover{color:#9fb0bf}

@media (max-width:560px){
  .splash-card{padding:24px 20px 20px}
  .splash-title{font-size:27px}
  .splash-lead{font-size:13.5px}
}

/* ---------------------------------------------------------- desktop */
.wallpaper{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 70% at 50% 108%, #6ea832 0%, #4d8b25 28%, transparent 60%),
    linear-gradient(180deg, #1b4f86 0%, #2d76b8 38%, #6fb0dd 62%, #9fd0e8 74%, #78ab3f 74.5%, #4f8a26 100%);
}
.wallpaper::after{            /* soft horizon haze */
  content:""; position:absolute; left:0; right:0; top:66%; height:16%;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  filter:blur(6px);
}

.desk-icons{position:absolute; top:14px; left:12px; display:flex; flex-direction:column; gap:6px}
.dicon{
  width:86px; padding:6px 4px; border:1px solid transparent; background:none;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:#fff; font:11px/1.25 Tahoma, sans-serif; text-align:center; cursor:default;
}
.dicon-img{width:40px; height:40px; display:block}
.dicon-img svg{width:100%; height:100%; filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45))}
.dicon-label{text-shadow:0 1px 2px rgba(0,0,0,.9); padding:1px 3px; border-radius:2px}
#iconTor{cursor:pointer}
#iconTor:hover .dicon-label,
.dicon.is-sel .dicon-label{background:#1c4d8f; outline:1px dotted #cfe0ff}
#iconTor:hover .dicon-img{filter:brightness(1.08)}

.taskbar{
  position:absolute; left:0; right:0; bottom:0; height:32px; display:flex; align-items:center;
  background:linear-gradient(180deg,#3f8ce8 0%, #2a6fc9 8%, #1f5bb0 42%, #2a6fc9 92%, #1a4e9c 100%);
  border-top:1px solid #6fb0f5;
}
.start-btn{
  display:flex; align-items:center; gap:6px; height:100%; padding:0 18px 0 8px; border:0; cursor:default;
  background:linear-gradient(180deg,#61b94a 0%, #4d9e35 45%, #3d8a28 55%, #2f7a1e 100%);
  border-radius:0 12px 12px 0;
  color:#fff; font:italic bold 14px/1 Tahoma, sans-serif; text-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.start-orb{
  width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0 12%, #d9534f 13% 55%, #7fb539 56% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.quick-launch{display:flex; align-items:center; padding:0 8px}
.ql-sep{width:1px; height:18px; background:rgba(255,255,255,.35)}
.task-space{flex:1}
.tray{
  padding:0 12px; height:100%; display:flex; align-items:center; color:#fff; font-size:11px;
  background:linear-gradient(180deg,#1794d6 0%, #1279bd 50%, #0f67a4 100%);
  border-left:1px solid #5bb7ea;
}

.desk-hint{
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
  margin:0; padding:7px 16px; border-radius:3px;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------------------------------------------------------- dialogs */
.win-overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:40}
.win98{
  width:430px; background:#ece9d8; border:1px solid #0a246a;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  font:11px/1.45 Tahoma, sans-serif;
}
.win98.narrow{width:380px}
.win-title{
  display:flex; align-items:center; gap:6px; padding:3px 4px 3px 6px;
  background:linear-gradient(180deg,#0a5fc8 0%, #1e6fd8 8%, #0a52b4 50%, #1e6fd8 92%, #0a4ca6 100%);
  color:#fff; font-weight:bold; font-size:11px;
}
.win-title-txt{flex:1}
.win-btns{display:flex; gap:2px}
.win-btns i{
  width:16px; height:14px; display:grid; place-items:center; font-style:normal; font-size:9px;
  background:linear-gradient(180deg,#5a97e0,#2f6cc0); border:1px solid #17458f; color:#fff; border-radius:2px;
}
.win-btns i.x{background:linear-gradient(180deg,#e06a4d,#c33b21); border-color:#8e2a16}

.win-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:9px 12px; background:#fff; border-bottom:1px solid #b7b39f;
}
.win-head h3{margin:0 0 2px; font-size:12px}
.win-head p{margin:0; color:#444}
.win-head-ico{
  width:30px; height:30px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #b9e88a, #63ad3a 55%, #2f6b1c);
  box-shadow:inset 0 0 0 1px #24540f;
}
.win-main{padding:12px 14px; min-height:132px}
.win-p{margin:0 0 12px}
.win-field{border:1px solid #b7b39f; padding:8px 10px 10px; margin:0 0 10px}
.win-field legend{padding:0 4px; color:#333}
.win-row{display:flex; gap:8px}
.win-input{
  flex:1; min-width:0; padding:3px 5px; font:11px Tahoma, sans-serif;
  border:1px solid #7f9db9; background:#fff; color:#111;
}
.win-meta{margin:0; color:#333}
.win-btn{
  min-width:74px; padding:4px 10px; font:11px Tahoma, sans-serif; cursor:pointer;
  background:linear-gradient(180deg,#fdfdfb,#e2dfd2); border:1px solid #8d8977; border-radius:3px;
}
.win-btn:hover:not(:disabled){background:linear-gradient(180deg,#fff,#eceadf)}
.win-btn:disabled{color:#9b9887; cursor:default}
.win-btn.primary{border-color:#3c6ea8; box-shadow:0 0 0 1px #9dc0e6 inset}
.win-foot{
  display:flex; align-items:center; gap:7px; padding:8px 10px;
  border-top:1px solid #fff; background:#ece9d8; box-shadow:0 -1px 0 #b7b39f inset;
}
.win-nsis{flex:1; color:#8b8878; font-size:10px}

.win-bar{height:17px; border:1px solid #9a9683; background:#fff; padding:1px; margin:0 0 9px}
.win-bar span{
  display:block; height:100%; width:0;
  background:repeating-linear-gradient(90deg,#2f8f2a 0 9px, #ece9d8 9px 11px);
  transition:width .18s linear;
}
.win-log{
  height:64px; overflow:hidden; border:1px solid #b7b39f; background:#fff;
  padding:4px 6px; font:10px/1.5 "Lucida Console", monospace; color:#555;
}

.conn-wrap{padding:6px 2px}
.conn-lead{margin:0 0 10px; font-size:12px}
.conn-status{margin:0 0 8px; color:#2a6b1f; font-weight:bold}

/* ---------------------------------------------------------- browser */
.scene-browser{background:#2b2b2b; display:flex; align-items:stretch; justify-content:center; padding:0}
.browser{
  width:100%; max-width:1180px; display:flex; flex-direction:column;
  background:#d7d3c8; border-left:1px solid #000; border-right:1px solid #000;
}

.br-title{
  display:flex; align-items:center; gap:7px; padding:4px 6px;
  background:linear-gradient(180deg,#5b5b5b 0%, #3f3f3f 55%, #2f2f2f 100%);
  color:#eee; font-size:11px;
}
.br-title-ico{
  width:14px; height:14px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 38% 32%, #b9e88a, #63ad3a 60%, #2f6b1c);
}
.br-title-txt{flex:1}

.br-tabs{display:flex; align-items:flex-end; gap:2px; padding:4px 6px 0; background:#cdc9be}
.br-tab{
  display:flex; align-items:center; gap:6px; padding:5px 14px; max-width:230px;
  background:#f2f0ea; border:1px solid #9b978c; border-bottom:0; border-radius:4px 4px 0 0;
  font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.br-tab-ico{width:11px; height:11px; flex:none; background:#b9b5a9; border-radius:2px}
.br-newtab{
  padding:3px 9px; margin-bottom:2px; border:1px solid #9b978c; background:#e4e1d8;
  border-radius:3px; cursor:default; font-size:12px; line-height:1;
}

.br-nav{display:flex; align-items:center; gap:7px; padding:6px 8px; background:#e8e5dc; border-bottom:1px solid #b6b2a7}
.br-arrow{
  width:24px; height:22px; border:1px solid #a9a598; border-radius:3px; cursor:pointer; font-size:9px;
  background:linear-gradient(180deg,#fbfaf6,#dedad0); color:#4a4a4a;
}
.br-arrow:disabled{color:#b3afa4; cursor:default}
.br-onion{
  width:20px; height:20px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #b9e88a, #63ad3a 60%, #2f6b1c);
  box-shadow:inset 0 0 0 1px #24540f;
}
.br-url{
  flex:1; min-width:0; display:flex; align-items:center; gap:7px; padding:3px 8px;
  background:#fff; border:1px solid #9b978c; border-radius:3px; font-size:11px;
}
.br-url-ico{width:12px; height:12px; flex:none; border-radius:2px; background:#c9c5ba}
.br-url-ico.is-onion{background:radial-gradient(circle at 38% 32%, #b9e88a, #63ad3a 60%, #2f6b1c)}
.br-url-txt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#222}
.br-star{color:#c9a227}
.br-search{
  display:flex; align-items:center; gap:6px; width:150px; padding:3px 8px;
  background:#fff; border:1px solid #9b978c; border-radius:3px; font-size:11px; color:#666;
}

.br-bookmarks{
  display:flex; align-items:center; gap:4px; padding:4px 10px;
  background:#efece4; border-bottom:1px solid #b6b2a7; font-size:11px;
}
.bm{
  display:flex; align-items:center; gap:5px; padding:3px 8px; border:1px solid transparent;
  background:none; border-radius:3px; font:11px Tahoma, sans-serif; cursor:pointer; color:#1a1a1a;
}
.bm:hover{background:#dcd8cd; border-color:#b6b2a7}
.bm-ico{width:14px; height:14px; object-fit:contain; display:block}
.bm.is-dim{color:#8a8679; cursor:default}
.bm-hint{margin-left:6px; color:#0a6b2f; font-style:italic; animation:pulse 2s ease-in-out infinite}

.br-viewport{flex:1; min-height:0; overflow:auto; background:#fff; position:relative}
.page{min-height:100%}

/* ---------------------------------------------------------- about:tor */
.page-tor{background:linear-gradient(180deg,#eaf7e2 0%, #d6efc6 55%, #cbe9b8 100%); padding:26px 30px 40px}
.tor-inner{max-width:760px; margin:0 auto; font-family:Georgia, "Times New Roman", serif}
.tor-brand{display:flex; gap:22px; align-items:center; margin-bottom:22px}
.tor-onion{width:108px; height:108px; flex:none}
.tor-brand h1{margin:0; font-size:36px; color:#1f7a1f; font-weight:bold}
.tor-brand h2{margin:2px 0 0; font-size:22px; color:#2d7d2d; font-weight:normal}
.tor-sub{margin:6px 0 0; font-style:italic; color:#3c3c3c; font-size:14px}
.tor-link{margin:6px 0 0; font-size:13px}
.tor-link a,.tor-card a{color:#1f6fbf}
.tor-searchbar{display:flex; justify-content:center; gap:0; margin:6px 0 4px}
.tor-searchbar input{width:300px; padding:6px 8px; border:2px solid #4c9a2a; border-right:0; font-size:13px}
.tor-searchbar button{width:36px; border:2px solid #4c9a2a; background:#6fb440; color:#fff; cursor:default; font-size:14px}
.tor-searchnote{text-align:center; margin:0 0 24px; font-size:12px; color:#3f6f2f}
.tor-cards{display:flex; gap:26px; justify-content:center; margin-bottom:22px}
.tor-card{
  flex:1; max-width:330px; background:rgba(255,255,255,.55);
  border:1px solid #9cc487; border-radius:9px; padding:14px 18px;
}
.tor-card h3{margin:0 0 8px; text-align:center; font-size:17px; color:#1f1f1f}
.tor-card p,.tor-card li{font-size:12.5px; color:#2b2b2b; line-height:1.55}
.tor-card ul{margin:6px 0 0; padding-left:18px}
.tor-more{margin:8px 0 0; text-align:center}

/* ---------------------------------------------------------- seized */
.page-seized{
  background:#fff; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.seized-body{width:100%}
.seized-img{display:block; width:100%; height:auto}

/* ---- glitch: chunky blocks, hard edges, no smooth motion anywhere ---- */
.glitch-layer{position:absolute; inset:0; pointer-events:none; opacity:0; image-rendering:pixelated}

.page-seized.is-glitching .glitch-layer{
  opacity:1;
  mix-blend-mode:hard-light;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,25,110,.75) 0 8px,  transparent 8px 16px),
    repeating-linear-gradient(90deg, rgba(0,238,255,.65) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.8)      0 8px,  transparent 8px 24px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.55) 0 4px, transparent 4px 32px);
  background-size:16px 16px, 32px 32px, 24px 24px, 32px 32px;
  animation:mosh .1s steps(1) infinite;
}
/* Every offset is a whole block, so the noise snaps instead of sliding.
   Opacity swings frame to frame so the notice keeps punching through —
   a signal breaking up rather than a wall of static. */
@keyframes mosh{
  0%   {opacity:.85; background-position:0 0, 0 0, 0 0, 0 0}
  25%  {opacity:1;   background-position:8px -16px, -32px 8px, 16px 0, 0 16px}
  50%  {opacity:.35; background-position:-16px 8px, 16px -8px, -8px 16px, 8px -4px}
  75%  {opacity:.95; background-position:24px 0, -8px 24px, 8px -16px, -16px 8px}
  100% {opacity:.55; background-position:0 0, 0 0, 0 0, 0 0}
}

/* displaced scan bands — hard-clipped slabs that jump between rows */
.page-seized.is-glitching .glitch-layer::before,
.page-seized.is-glitching .glitch-layer::after{
  content:""; position:absolute; inset:0; mix-blend-mode:screen;
  background:repeating-linear-gradient(90deg,
    rgba(255,40,120,.9) 0 10px, rgba(0,240,255,.8) 10px 20px);
}
.page-seized.is-glitching .glitch-layer::before{animation:band-a .16s steps(1) infinite}
.page-seized.is-glitching .glitch-layer::after{animation:band-b .23s steps(1) infinite}
@keyframes band-a{
  0%  {clip-path:polygon(0 14%,100% 14%,100% 20%,0 20%); transform:translateX(0)}
  33% {clip-path:polygon(0 46%,100% 46%,100% 51%,0 51%); transform:translateX(-24px)}
  66% {clip-path:polygon(0 72%,100% 72%,100% 79%,0 79%); transform:translateX(32px)}
  100%{clip-path:polygon(0 30%,100% 30%,100% 34%,0 34%); transform:translateX(-8px)}
}
@keyframes band-b{
  0%  {clip-path:polygon(0 60%,100% 60%,100% 66%,0 66%); transform:translateX(16px)}
  50% {clip-path:polygon(0 22%,100% 22%,100% 27%,0 27%); transform:translateX(-40px)}
  100%{clip-path:polygon(0 84%,100% 84%,100% 90%,0 90%); transform:translateX(24px)}
}

/* the notice itself: whole-pixel jumps plus a blocky dropout mask */
.page-seized.is-glitching .seized-body{
  animation:jitter .14s steps(1) infinite, chop .3s steps(1) infinite;
}
@keyframes jitter{
  0%  {transform:translate(0,0)}
  20% {transform:translate(-8px,0)}
  40% {transform:translate(4px,-4px); filter:hue-rotate(40deg)}
  60% {transform:translate(-4px,4px)}
  80% {transform:translate(12px,0); filter:invert(.08)}
  100%{transform:translate(0,0)}
}
@keyframes chop{
  0%,100%{-webkit-mask-image:none; mask-image:none}
  35%{-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 12px);
      mask-image:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 12px)}
  70%{-webkit-mask-image:repeating-linear-gradient(0deg,#000 0 6px,transparent 6px 10px);
      mask-image:repeating-linear-gradient(0deg,#000 0 6px,transparent 6px 10px)}
}
.page-seized.is-dead .seized-body{opacity:.2; filter:grayscale(1)}

.enter-wrap{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; z-index:3;
}
.enter-kicker{
  margin:0; padding:6px 14px; font:12px/1.5 "Lucida Console", monospace; color:#7dff9b;
  background:rgba(0,0,0,.72); border:1px solid #1f7a37; letter-spacing:.3px;
}
.enter-btn{
  padding:14px 54px; font:bold 22px/1 "Lucida Console", monospace; letter-spacing:4px; cursor:pointer;
  color:#0c2f16; background:linear-gradient(180deg,#8fe07a,#49a530);
  border:2px solid #24540f; border-radius:3px;
  box-shadow:0 0 0 4px rgba(0,0,0,.6), 0 0 34px rgba(90,230,110,.55);
  animation:breathe 1.8s ease-in-out infinite;
}
.enter-btn:hover{background:linear-gradient(180deg,#a6ef91,#57bb3a)}
@keyframes breathe{0%,100%{box-shadow:0 0 0 4px rgba(0,0,0,.6), 0 0 22px rgba(90,230,110,.4)}
  50%{box-shadow:0 0 0 4px rgba(0,0,0,.6), 0 0 44px rgba(90,230,110,.75)}}

/* ---------------------------------------------------------- misc */
.replay{
  position:fixed; right:10px; bottom:10px; z-index:50;
  padding:5px 11px; font:11px Tahoma, sans-serif; cursor:pointer; opacity:.35;
  background:#1d1d1d; color:#ddd; border:1px solid #444; border-radius:3px;
}
.replay:hover{opacity:1}

@media (max-width:760px){
  .tor-cards{flex-direction:column; align-items:center}
  .tor-brand{flex-direction:column; text-align:center; gap:10px}
  .br-search{display:none}
  .desk-hint{bottom:56px; font-size:11px}
}