@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&display=swap');

:root{
  --bg:#07070f; --bg2:#0d0d1d;
  --pink:#ff2a6d; --cyan:#05d9e8; --yellow:#f9f002; --violet:#b537f2;
  --ink:#e8f6ff; --dim:#8b93b0;
  --card:rgba(13,15,35,.86); --line:rgba(5,217,232,.22);
  --fold:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Share Tech Mono',monospace; font-size:15px; line-height:1.55;
  overflow-x:hidden;
}
h1,h2{font-family:'Orbitron',sans-serif; letter-spacing:.02em; line-height:1.02; margin:.2em 0 .4em}
h1{font-size:clamp(44px,9vw,96px); font-weight:900; text-shadow:0 0 24px rgba(255,42,109,.45)}
h2{font-size:clamp(24px,4.5vw,40px); font-weight:700}
.neon-pink{color:var(--pink); text-shadow:0 0 18px var(--pink)}
.neon-cyan{color:var(--cyan); text-shadow:0 0 18px var(--cyan)}
.dim{color:var(--dim)}
a{color:var(--cyan)}

/* background layers */
#sky{position:fixed; inset:0; z-index:0; width:100%; height:100%}
#scanlines{position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);}
#vignette{position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(2,2,10,.75) 100%);}

/* HUD */
#hud{position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; background:rgba(5,6,16,.82); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.logo{font-family:'Orbitron'; font-weight:900; font-size:13px; letter-spacing:.12em}
.logo em{color:var(--pink); font-style:normal; text-shadow:0 0 10px var(--pink)}
.net-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan); margin-left:8px; animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.hud-right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.hud-stat{font-size:11px; color:var(--dim); letter-spacing:.08em}
.hud-stat b{color:var(--yellow); margin-left:4px}
.chip-btn{background:#11142a; color:var(--cyan); border:1px solid var(--line); border-radius:20px;
  font:inherit; font-size:12px; padding:4px 12px; cursor:pointer}
.chip-btn:hover{border-color:var(--cyan); box-shadow:0 0 12px rgba(5,217,232,.4)}
.chip-btn.off{color:var(--dim)}

#scrollProgress{position:fixed; top:0; left:0; right:0; height:3px; z-index:30; background:rgba(255,255,255,.06)}
#scrollProgress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan)); box-shadow:0 0 12px var(--cyan)}

#app{position:relative; z-index:5; max-width:1020px; margin:0 auto; padding:76px 16px 40px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:clamp(18px,4vw,38px); margin:0 0 26px; position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 12px 50px rgba(0,0,0,.5);
  opacity:0; transform:translateY(26px); transition:opacity .6s, transform .6s}
.panel.seen{opacity:1; transform:none}
.panel::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--pink),var(--cyan),transparent)}
.kicker{color:var(--yellow); font-size:11px; letter-spacing:.18em; margin:0 0 6px}
.lede{max-width:60ch; color:#c6cdea}
.hero{text-align:left}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0}
.btn{font-family:'Orbitron'; font-weight:700; font-size:13px; letter-spacing:.1em;
  padding:13px 22px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block;
  border:1px solid transparent; transition:transform .12s, box-shadow .2s}
.btn:active{transform:scale(.96)}
.btn-hot{background:linear-gradient(135deg,var(--pink),#a312eb); color:#fff; border-color:#ff7aa8;
  box-shadow:0 0 22px rgba(255,42,109,.55)}
.btn-hot:hover{box-shadow:0 0 34px rgba(255,42,109,.85)}
.btn-hot:disabled{filter:grayscale(1); opacity:.55; cursor:not-allowed; box-shadow:none}
.btn-ghost{background:rgba(5,217,232,.06); color:var(--cyan); border-color:var(--line)}
.btn-ghost:hover{box-shadow:0 0 18px rgba(5,217,232,.4); border-color:var(--cyan)}
.btn.big{width:100%; margin-top:10px}
.hero-hint{margin-top:14px; color:var(--cyan); font-size:12px; letter-spacing:.06em}
.ticker{margin-top:20px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:rgba(0,0,0,.4)}
.ticker-inner{display:inline-block; white-space:nowrap; padding:8px 0; animation:tick 30s linear infinite; font-size:12px; color:var(--dim)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* fold */
.fold-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px}
@media(max-width:760px){.fold-grid{grid-template-columns:1fr}}
#paperWrap{position:relative; display:grid; place-items:center; min-height:250px;
  background:radial-gradient(circle at 50% 60%, rgba(181,55,242,.18), transparent 65%), rgba(0,0,0,.35);
  border:1px dashed rgba(249,240,2,.35); border-radius:12px; padding:26px; overflow:hidden}
#paper{width:190px; height:150px; position:relative; border-radius:6px;
  background:linear-gradient(135deg,#101736,#1b1040);
  border:2px solid var(--cyan); box-shadow:0 0 24px rgba(5,217,232,.35);
  transition:transform .5s cubic-bezier(.2,1.4,.4,1), border-color .3s, box-shadow .3s;
  display:grid; place-items:center}
#paper .crease{position:absolute; background:rgba(5,217,232,.0); transition:background .3s}
#paper .crease.h{left:0; right:0; top:50%; height:1px}
#paper .crease.v{top:0; bottom:0; left:50%; width:1px}
#paper .crease.d1{left:6%; right:6%; top:50%; height:1px; transform:rotate(32deg)}
#paper .crease.d2{left:6%; right:6%; top:50%; height:1px; transform:rotate(-32deg)}
#paper[data-step="1"]{transform:perspective(500px) rotateX(24deg) scale(.96)}
#paper[data-step="1"] .crease.h{background:var(--yellow)}
#paper[data-step="2"]{transform:perspective(500px) rotateX(24deg) rotateY(18deg) scale(.92); clip-path:polygon(50% 0,100% 40%,78% 100%,22% 100%,0 40%)}
#paper[data-step="2"] .crease.v{background:var(--yellow)}
#paper[data-step="3"]{transform:perspective(500px) rotateY(-14deg) scale(.94)}
#paper[data-step="3"] .crease.d1,#paper[data-step="3"] .crease.d2{background:var(--pink)}
#paper[data-step="4"]{background:transparent; border-color:transparent; box-shadow:none; transform:scale(1.05)}
#paper[data-step="4"] .crease{opacity:0}
#craneSvg{width:150px; opacity:0; transform:scale(.4); transition:all .5s}
#craneSvg g{stroke:var(--cyan); filter:drop-shadow(0 0 8px var(--cyan))}
#paper[data-step="4"] #craneSvg{opacity:1; transform:scale(1)}
#paper[data-step="4"] #craneSvg g{animation:flap .9s ease-in-out infinite alternate; transform-origin:60px 55px}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.72)}}
#paperMsg{position:absolute; bottom:6px; font-size:10px; color:var(--yellow); max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#paper[data-step="4"] #paperMsg{display:none}
#paperGlow{position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle,rgba(255,42,109,.4),transparent 70%)}
#paperGlow.flash{animation:flash .6s}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
#paperWrap.launching #paper{animation:launch 1.1s ease-in forwards}
@keyframes launch{to{transform:translateY(-260px) translateX(120px) scale(.3) rotate(18deg); opacity:0}}
#foldSteps{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px}
#foldSteps button{width:100%; text-align:left; background:#0a0e24; color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; font:inherit; cursor:pointer; display:flex; gap:10px; align-items:baseline}
#foldSteps button b{font-family:'Orbitron'; color:var(--yellow)}
#foldSteps button span{color:var(--dim); font-size:12px; margin-left:auto}
#foldSteps li.done button{border-color:var(--pink); background:rgba(255,42,109,.1)}
#foldSteps li.done button::after{content:"✓"; color:var(--pink); margin-left:8px}
#foldSteps button:hover{border-color:var(--cyan)}
.link-btn{background:none; border:none; color:var(--dim); font:inherit; font-size:12px; cursor:pointer; margin-top:10px; text-decoration:underline}
.link-btn:hover{color:var(--cyan)}
.field{display:block; margin-bottom:14px}
.flabel{display:flex; justify-content:space-between; font-size:11px; letter-spacing:.14em; color:var(--yellow); margin-bottom:6px}
.flabel i{color:var(--dim); font-style:normal}
textarea,input{width:100%; background:#05060f; color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:11px 12px; font:inherit; font-size:14px; resize:vertical}
textarea:focus,input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 14px rgba(5,217,232,.35)}
#swatches{display:flex; gap:10px}
.sw{width:42px; height:42px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  background:radial-gradient(circle at 35% 35%, #fff8, transparent 45%), var(--c);
  box-shadow:0 0 12px var(--c)}
.sw.on{border-color:#fff; transform:scale(1.12)}
.microcopy{font-size:12px; color:var(--dim)}

/* stream */
.stream-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:#0a0e24; color:var(--dim); border:1px solid var(--line); border-radius:20px;
  font:inherit; font-size:11px; letter-spacing:.1em; padding:6px 14px; cursor:pointer}
.chip.on{color:#000; background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 14px rgba(5,217,232,.6)}
.wind{font-size:12px; color:var(--dim)}
.wind b{color:var(--yellow)}
.windbar{display:inline-block; width:90px; height:6px; background:#1a1e35; border-radius:4px; overflow:hidden; vertical-align:middle; margin-left:6px}
.windbar i{display:block; height:100%; width:0; background:var(--pink)}
#craneGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.crane-card{background:rgba(6,8,22,.9); border:1px solid var(--line); border-radius:10px; padding:14px;
  cursor:pointer; transition:transform .15s, box-shadow .2s; position:relative; overflow:hidden}
.crane-card:hover{transform:translateY(-4px) rotate(-.5deg); box-shadow:0 8px 30px rgba(0,0,0,.6), 0 0 18px var(--glow,var(--cyan))}
.crane-card::after{content:""; position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent); transform:skewX(-20deg)}
.crane-card:hover::after{animation:sheen .6s}
@keyframes sheen{to{left:130%}}
.crane-card .cc-top{display:flex; justify-content:space-between; font-size:10px; color:var(--dim); letter-spacing:.1em}
.crane-card .cc-glyph{font-size:38px; line-height:1; margin:8px 0; color:var(--glow,var(--cyan)); text-shadow:0 0 14px var(--glow,var(--cyan)); animation:hover 2.4s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-5px)}}
.crane-card .cc-msg{font-size:13px; min-height:40px}
.crane-card .cc-from{font-size:11px; color:var(--dim)}
.crane-card.mine{border-color:rgba(249,240,2,.5)}
.crane-card.kept{border-color:rgba(255,42,109,.55)}
.badge{font-size:9px; padding:2px 8px; border-radius:10px; letter-spacing:.1em}
.badge.air{background:rgba(5,217,232,.15); color:var(--cyan)}
.badge.mine{background:rgba(249,240,2,.15); color:var(--yellow)}
.badge.kept{background:rgba(255,42,109,.18); color:var(--pink)}
.empty{color:var(--dim); border:1px dashed var(--line); border-radius:10px; padding:26px; text-align:center; grid-column:1/-1}

/* export */
.export-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:760px){.export-grid{grid-template-columns:1fr}}
.share-card{background:linear-gradient(160deg,#12041f,#06121f); border:1px solid var(--pink);
  border-radius:12px; padding:22px; text-align:center; box-shadow:0 0 30px rgba(255,42,109,.25); color:var(--ink)}
.sc-top{font-size:10px; letter-spacing:.16em; color:var(--yellow); margin:0}
.sc-crane{width:130px; margin:10px auto; color:var(--cyan); filter:drop-shadow(0 0 10px var(--cyan))}
.sc-msg{font-size:16px; margin:10px 0}
.sc-from{color:var(--dim); font-size:12px; margin:0}
.sc-code{font-family:'Orbitron'; color:var(--pink); letter-spacing:.2em; margin:12px 0 0}
.export-btns{display:grid; gap:10px; align-content:start}

/* modal */
#modal{position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(2,2,10,.7); backdrop-filter:blur(4px); padding:16px}
#modal[hidden]{display:none}
.modal-card{background:#0c0f26; border:1px solid var(--cyan); border-radius:14px; max-width:440px; width:100%;
  padding:28px; text-align:center; box-shadow:0 0 60px rgba(5,217,232,.35); animation:pop .3s}
@keyframes pop{from{transform:scale(.85); opacity:0}}
.m-crane{font-size:64px; animation:hover 2s infinite}
.m-msg{font-size:18px; margin:14px 0 6px}
.m-from{color:var(--dim); font-size:13px}
.m-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.m-row .btn{padding:10px 14px; font-size:11px}

#toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(80px); z-index:60;
  background:#0c0f26; border:1px solid var(--cyan); color:var(--ink); border-radius:8px;
  padding:10px 18px; font-size:13px; transition:transform .3s; max-width:90vw; text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}

.foot{text-align:center; font-size:12px; color:var(--dim)}
@media(max-width:480px){
  h1{font-size:46px}
  #app{padding:70px 10px 30px}
  .hud-stat:nth-child(2){display:none}
}