:root{
  --ink:#e8eef4;
  --panel:#0f141b;
  --panel2:#141b24;
  --line:#232d3a;
  --amber:#ffb000;
  --cyan:#41f0ff;
  --mag:#ff5ecb;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(65,240,255,0.08), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(255,94,203,0.07), transparent 60%),
    #070a0e;
  color:var(--ink);
  font-family:'Oswald', sans-serif;
  min-height:100vh;
}
.app-root{max-width:1180px;margin:0 auto;padding:0 16px 40px;}

/* HERO */
.hero{position:relative;padding:38px 0 22px;overflow:hidden;}
.hero-inner{position:relative;z-index:2;}
.hero-title{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(30px,6vw,58px);letter-spacing:2px;margin:0;
  background:linear-gradient(90deg,#fff,#41f0ff 40%,#ff5ecb);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:heroIn .8s ease both;
}
.hero-tag{font-weight:300;color:#9fb0c0;margin:6px 0 0;font-size:clamp(13px,2.4vw,18px);letter-spacing:.5px;
  animation:heroIn .8s .15s ease both;}
@keyframes heroIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.hero-strip{
  position:absolute;left:-10%;right:-10%;top:0;bottom:0;z-index:1;opacity:.10;
  background-image:radial-gradient(circle, #41f0ff 1px, transparent 1.4px);
  background-size:14px 14px;
  animation:drift 30s linear infinite;
}
@keyframes drift{from{background-position:0 0;}to{background-position:140px 70px;}}

/* LAYOUT */
.main-grid{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start;}
@media(max-width:820px){.main-grid{grid-template-columns:1fr;}}

/* INPUT */
.input-panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:16px;padding:18px;
  position:sticky;top:14px;
}
@media(max-width:820px){.input-panel{position:static;}}
.input-label{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#7f93a6;margin-bottom:8px;}
.req-box{
  width:100%;background:#060a0f;color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:14px;
  resize:vertical;min-height:120px;line-height:1.5;transition:border .2s,box-shadow .2s;
}
.req-box:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(65,240,255,.15);}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.btn{
  flex:1 1 auto;background:#1a2430;color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;font-family:'Oswald';font-weight:500;font-size:13px;
  letter-spacing:.5px;cursor:pointer;transition:transform .1s,background .2s,border .2s;
}
.btn:hover{background:#243141;border-color:#37485c;transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.5;cursor:wait;}
.btn-primary{background:linear-gradient(90deg,#41f0ff,#2bb8c9);color:#03191d;border:none;font-weight:700;flex-basis:100%;}
.btn-primary:hover{background:linear-gradient(90deg,#5cf6ff,#31c9db);}
.btn-ghost{background:transparent;border-color:#3a2530;color:#ff9dc9;}
.btn-ghost:hover{background:rgba(255,94,203,.08);}
.status-line{margin-top:10px;font-size:12px;color:#8ad9ff;font-family:'JetBrains Mono';}

/* OUTPUT */
.output-area{display:flex;flex-direction:column;gap:22px;min-height:200px;}
.empty-state{
  border:1px dashed var(--line);border-radius:16px;padding:40px 20px;text-align:center;
  background:rgba(255,255,255,.01);
}
.empty-marquee{overflow:hidden;white-space:nowrap;color:var(--amber);
  font-family:'DotGothic16';font-size:15px;margin-bottom:16px;}
.empty-marquee span{display:inline-block;animation:marq 16s linear infinite;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.empty-text{color:#8195a7;font-weight:300;}
.loading-dots{font-size:26px;color:var(--cyan);letter-spacing:6px;animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

/* CARD */
.display-card{
  background:linear-gradient(180deg,var(--panel),#0b1018);
  border:1px solid var(--line);border-radius:16px;padding:16px;
  animation:cardIn .5s ease both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:10px;}
.card-op{font-family:'Orbitron';font-weight:900;font-size:18px;letter-spacing:.5px;}
.card-veh{font-size:13px;color:#8195a7;font-weight:300;}
.tech-badge{background:#03191d;color:var(--cyan);border:1px solid #1f4c53;
  padding:5px 10px;border-radius:6px;font-family:'JetBrains Mono';font-size:11px;font-weight:800;letter-spacing:1px;white-space:nowrap;}

/* BEZEL */
.bezel{border-radius:12px;padding:14px;position:relative;}
.bezel-roller,.bezel-flipdot{background:linear-gradient(#2a2a2a,#151515);border:2px solid #000;box-shadow:inset 0 0 20px rgba(0,0,0,.8);}
.bezel-led,.bezel-lcd{background:linear-gradient(#20262e,#0d1014);border:3px solid #05070a;}
.bezel-crt{background:#2b2418;border:6px solid #0f0c06;border-radius:20px;box-shadow:inset 0 0 30px rgba(0,0,0,.9);}
.bezel-oled,.bezel-eink{background:#0a0e13;border:2px solid #1a222c;}
.bezel-holographic{background:radial-gradient(circle at 50% 0,rgba(157,92,255,.25),transparent 70%),#05030f;border:1px solid #3a2a66;box-shadow:0 0 30px rgba(157,92,255,.35);}

/* SCREEN */
.screen-wrap{
  position:relative;border-radius:6px;height:210px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.screen-content{
  position:relative;z-index:2;width:100%;text-align:center;padding:0 18px;
}
.screen-line{line-height:1.25;}
.line-head{font-size:15px;letter-spacing:2px;text-transform:uppercase;opacity:.9;margin-bottom:6px;}
.line-body{font-size:clamp(20px,4vw,34px);font-weight:700;letter-spacing:1px;}
.screen-corner{position:absolute;top:8px;left:10px;z-index:3;font-family:'JetBrains Mono';font-size:10px;letter-spacing:1px;opacity:.7;display:flex;align-items:center;gap:5px;}
.live-dot{width:7px;height:7px;border-radius:50%;background:#ff3b3b;display:inline-block;animation:blink 1.2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}
.screen-clock{position:absolute;top:8px;right:10px;z-index:3;font-family:'JetBrains Mono';font-size:12px;opacity:.75;}
.page-dots{position:absolute;bottom:8px;left:0;right:0;z-index:3;display:flex;gap:6px;justify-content:center;}
.pdot{width:6px;height:6px;border-radius:50%;transition:background .3s;}

/* scrolling text */
.scroll-track{overflow:hidden;white-space:nowrap;width:100%;font-size:clamp(20px,4vw,32px);font-weight:700;}
.scroll-inner{display:inline-block;padding-left:100%;animation:scrollH 12s linear infinite;}
@keyframes scrollH{from{transform:translateX(0);}to{transform:translateX(-100%);}}

/* TECH LOOKS */
.ts-led::after,.ts-flipdot::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,.55) 40%, transparent 42%);
  background-size:5px 5px;mix-blend-mode:multiply;
}
.ts-led .screen-content{text-shadow:0 0 6px currentColor;}
.ts-crt::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,.15) 0 1px, transparent 1px 3px);
  animation:crtFlick .12s steps(2) infinite;
}
.ts-crt .screen-wrap{border-radius:20%/8%;}
@keyframes crtFlick{0%{opacity:.9;}100%{opacity:1;}}
.ts-lcd .screen-content{text-shadow:none;}
.ts-lcd::before{content:"";position:absolute;inset:0;background:rgba(80,140,180,.05);z-index:1;}
.ts-oled .screen-content{text-shadow:0 0 12px currentColor;}
.ts-holo .screen-content{text-shadow:0 0 10px currentColor,0 0 22px currentColor;filter:drop-shadow(2px 0 rgba(255,0,120,.4)) drop-shadow(-2px 0 rgba(0,200,255,.4));}
.ts-holo::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(rgba(65,240,255,.05) 0 2px, transparent 2px 6px);animation:holoScan 4s linear infinite;}
@keyframes holoScan{from{background-position:0 0;}to{background-position:0 30px;}}
.ts-eink .screen-content{text-shadow:none;font-weight:800;}
.ts-roller .line-body{font-family:'Oswald'!important;text-shadow:1px 1px 0 rgba(0,0,0,.6);}

/* ANIMATIONS */
.anim-fade{animation:fadeIn .5s ease both;}
.anim-out{opacity:0;transition:opacity .26s;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.anim-flip .screen-line{animation:flipIn .45s ease both;transform-origin:top;}
@keyframes flipIn{0%{transform:rotateX(-90deg);opacity:0;}60%{transform:rotateX(15deg);}100%{transform:rotateX(0);opacity:1;}}
.anim-scroll-v .screen-line{animation:slideUp .5s ease both;}
@keyframes slideUp{from{transform:translateY(30px);opacity:0;}to{transform:none;opacity:1;}}
.anim-char-by-char .screen-line{animation:fadeIn .6s ease both;}
.anim-flash .flashline{animation:warnFlash .7s infinite;}
@keyframes warnFlash{0%,100%{opacity:1;}50%{opacity:.25;}}
.anim-none{animation:fadeIn .3s ease both;}

/* CONTROLS */
.ctrl-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.ctrl-btn{background:#141b24;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:7px 11px;font-family:'JetBrains Mono';font-size:12px;cursor:pointer;transition:background .2s;}
.ctrl-btn:hover{background:#1e2833;}
.ctrl-btn.tiny{padding:4px 8px;font-size:11px;}
.ctrl-select{background:#141b24;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 9px;font-family:'JetBrains Mono';font-size:12px;cursor:pointer;}

/* SPEC */
.spec-panel{margin-top:14px;background:#060a0f;border:1px solid var(--line);border-radius:10px;padding:16px;
  max-height:420px;overflow:auto;animation:fadeIn .4s ease both;}
.spec-h1{font-family:'Orbitron';font-size:16px;margin:0 0 8px;color:var(--cyan);}
.spec-h2{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--amber);margin:14px 0 6px;}
.spec-p{font-size:14px;line-height:1.55;color:#c3d0dc;font-weight:300;margin:4px 0;}
.spec-p strong{color:#fff;font-weight:700;}
.spec-quote{border-left:3px solid var(--mag);padding-left:10px;color:#a0aec0;font-style:italic;font-size:13px;margin:8px 0;}
.spec-prompt{margin-top:12px;}
.spec-code{display:block;background:#0d1620;border:1px solid #1c3540;border-radius:6px;padding:10px;
  font-family:'JetBrains Mono';font-size:12px;color:#8ad9ff;white-space:pre-wrap;margin-bottom:6px;}

/* IMAGE */
.img-frame{margin-top:14px;position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);}
.interior-img{display:block;width:100%;}
.img-shimmer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#0a0e13,#141b24,#0a0e13);background-size:200% 100%;
  animation:shimmer 1.4s infinite;color:#8195a7;font-family:'JetBrains Mono';font-size:13px;}
@keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}

/* FOOTER */
.footer{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
  text-align:center;color:#6b7d8e;font-size:13px;font-weight:300;}
.remix-link{color:var(--cyan);text-decoration:none;border-bottom:1px dotted var(--cyan);}
.remix-link:hover{color:#fff;}
</parameter>