:root{
  --bg:#000;
  --ink:#f2f4f5;
  --muted:#9aa1a7;
  --dim:#5e666d;
  --line:rgba(255,255,255,.16);
  --red:#ff2323;
  --red-soft:rgba(255,35,35,.35);
  --font:"Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --mono:"SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:#000}
body{
  margin:0; background:#000; color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;
}
button,a,input{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
canvas{display:block}

/* ---------------- main stage ---------------- */
body[data-page="main"]{overflow:hidden;background:#000}
#stage{position:fixed;inset:0;background:#000}
#scene{width:100%;height:100%;touch-action:none;cursor:grab}
#scene:active{cursor:grabbing}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0) 35%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.76) 100%);
}
.grain{
  position:fixed;inset:-20%;pointer-events:none;z-index:3;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grainShift 9s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)} 20%{transform:translate3d(-2%,1.5%,0)}
  40%{transform:translate3d(1.5%,-1%,0)} 60%{transform:translate3d(-1%,-2%,0)}
  80%{transform:translate3d(2%,1%,0)} 100%{transform:translate3d(0,0,0)}
}
.top-shade{
  position:fixed;inset:0 0 auto 0;height:180px;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,0));
}
.hud-top{
  position:fixed;left:0;right:0;top:0;z-index:5;display:flex;align-items:flex-start;
  justify-content:space-between;padding:22px 26px;pointer-events:none;
}
.hud-top a{pointer-events:auto}
.brand{display:flex;flex-direction:column;gap:6px;line-height:1}
.brand-main{font-size:13px;letter-spacing:.30em;font-weight:600;color:#e9edef;pointer-events:auto;cursor:default;user-select:none}
.brand-sub{font-size:9.5px;letter-spacing:.24em;color:var(--dim);display:flex;align-items:center;gap:9px}
.brand-sub i{display:inline-block;width:20px;height:1px;background:var(--red)}
.top-right{display:flex;align-items:center;gap:18px}
#timecode{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#8d959b}
.compare-link{
  font-size:10px;letter-spacing:.14em;color:#c7ccd0;border:1px solid var(--line);
  padding:8px 11px;transition:border-color .2s,color .2s,background .2s;background:rgba(0,0,0,.18);
  backdrop-filter:blur(6px);
}
.compare-link:hover{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.04)}
.compare-link span{color:var(--red);margin-left:4px}

.shot-label{
  position:fixed;left:26px;bottom:104px;z-index:5;display:flex;flex-direction:column;gap:4px;
  padding-left:11px;border-left:1px solid var(--red);pointer-events:none;
}
.shot-label span{font-size:13px;letter-spacing:.16em;color:#e9edef}
.shot-label em{font-style:normal;font-size:8.5px;letter-spacing:.26em;color:var(--dim)}
.free-hint{
  position:fixed;right:26px;bottom:104px;z-index:5;font-size:10px;letter-spacing:.12em;color:#c5cbd0;
  padding:7px 10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.45);
  opacity:0;transform:translateY(4px);transition:all .25s;pointer-events:none;backdrop-filter:blur(6px);
}
.free-hint.show{opacity:1;transform:none}

/* ---------------- easter egg ---------------- */
.egg-toast{
  position:fixed;left:50%;top:76px;z-index:8;transform:translate(-50%,-8px);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 18px 10px;border:1px solid rgba(96,128,255,.42);
  border-left:2px solid #4d6bfe;background:rgba(3,6,13,.76);
  backdrop-filter:blur(9px);pointer-events:none;opacity:0;
  transition:opacity .28s ease,transform .28s ease;text-align:center;
}
.egg-toast.show{opacity:1;transform:translate(-50%,0)}
.egg-kicker{font-size:7.5px;letter-spacing:.34em;color:#7f9bff}
.egg-toast strong{font-size:12px;letter-spacing:.24em;color:#e8eeff;font-weight:600}
.egg-toast span:last-child{font-size:8.5px;letter-spacing:.12em;color:#7f8fa8}
body.egg-mode .brand-main{color:#aebfff}
body.egg-mode .brand-sub i{background:#4d6bfe}

/* ---------------- controls ---------------- */
.controls{
  position:fixed;left:0;right:0;bottom:0;z-index:6;padding:34px 24px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.88) 15%, rgba(0,0,0,.42) 62%, rgba(0,0,0,0));
}
.controls-inner{
  max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:13px;
}
.play-btn{
  width:46px;height:46px;min-width:46px;border-radius:50%;border:1px solid rgba(255,255,255,.34);
  background:rgba(10,10,10,.35);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .2s,background .2s,transform .15s;padding:0;
  backdrop-filter:blur(8px);
}
.play-btn:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.06)}
.play-btn:active{transform:scale(.96)}
.play-btn svg{width:19px;height:19px;fill:#fff;display:block}
.ghost-btn{
  height:38px;display:flex;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--line);
  background:rgba(8,9,10,.30);color:#b8bfc4;font-size:11px;letter-spacing:.10em;cursor:pointer;
  transition:all .2s;white-space:nowrap;backdrop-filter:blur(7px);
}
.ghost-btn svg{width:15px;height:15px;fill:currentColor;opacity:.8}
.ghost-btn:hover{color:#fff;border-color:rgba(255,255,255,.46);background:rgba(255,255,255,.055)}
.ghost-btn.active{color:#fff;border-color:rgba(255,35,35,.72);box-shadow:inset 0 0 18px rgba(255,35,35,.11)}
.ghost-btn.active svg{opacity:1;fill:#ff5a5a}
.timeline-shell{position:relative;flex:1 1 auto;min-width:120px;height:34px;display:flex;align-items:center;margin:0 8px}
.timeline-track{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:rgba(255,255,255,.15);pointer-events:none}
.timeline-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff1b1b,#ff5a3c);box-shadow:0 0 8px rgba(255,35,35,.45)}
.ticks{position:absolute;inset:0}
.ticks i{position:absolute;top:50%;width:1px;height:7px;background:rgba(255,255,255,.28);transform:translate(-50%,-50%)}
#timeline{
  -webkit-appearance:none;appearance:none;position:relative;z-index:2;width:100%;height:26px;
  margin:0;background:transparent;cursor:pointer;outline:none;
}
#timeline::-webkit-slider-runnable-track{height:26px;background:transparent}
#timeline::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#f4f5f5;
  border:2px solid #ff2a2a;box-shadow:0 0 0 3px rgba(255,35,35,.12),0 0 12px rgba(255,35,35,.55);
  margin-top:8px;transition:transform .15s;
}
#timeline:hover::-webkit-slider-thumb{transform:scale(1.15)}
#timeline::-moz-range-track{height:26px;background:transparent}
#timeline::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:#f4f5f5;border:2px solid #ff2a2a}
.time-read{font-family:var(--mono);font-size:10px;color:#7f878d;letter-spacing:.04em;min-width:92px;text-align:right;white-space:nowrap}
.controls .play-btn{box-shadow:0 0 0 1px rgba(255,35,35,.0)}

/* ---------------- loading ---------------- */
.loading{
  position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;transition:opacity .7s ease,visibility .7s;
}
.loading.hidden{opacity:0;visibility:hidden;pointer-events:none}
.load-title{font-size:12px;letter-spacing:.42em;color:#dfe3e5}
.load-sub{font-size:8.5px;letter-spacing:.30em;color:#555d63}
.load-line{width:170px;height:1px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:9px}
.load-line i{display:block;width:45%;height:100%;background:var(--red);animation:load 1.5s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
.loading.error .load-sub{color:#ff8a8a;max-width:560px;text-align:center;line-height:1.6;letter-spacing:.08em}
.noscript{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;color:#ccc;z-index:200}

/* ---------------- comparison page ---------------- */
body.compare-page{
  height:100%;overflow:hidden;display:flex;flex-direction:column;
  padding:0 22px 10px;background:#000;
}
.compare-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:15px 4px 10px;
}
.compare-head .brand-main{font-size:11.5px}
.compare-head .brand-sub{font-size:8px}
.back-link{font-size:10px;letter-spacing:.14em;color:#a9b0b5;border-bottom:1px solid transparent;padding-bottom:3px;transition:all .2s}
.back-link:hover{color:#fff;border-color:var(--red)}
.compare-stack{
  --pw:min(1240px, calc((100vh - 188px) * 0.8889), calc(100vw - 44px));
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;
}
.panel{width:100%;display:flex;align-items:center;justify-content:center;min-height:0}
.frame{
  position:relative;width:var(--pw);aspect-ratio:16/9;background:#000;overflow:hidden;
  border:1px solid rgba(255,255,255,.075);box-shadow:0 0 0 1px rgba(0,0,0,.8);
}
.frame video,.frame canvas{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.frame canvas{touch-action:none}
.panel-label{
  position:absolute;left:0;top:0;z-index:4;display:flex;align-items:baseline;gap:8px;
  padding:9px 12px 8px 13px;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,0));
  border-left:2px solid var(--red);pointer-events:none;
}
.panel-label span{font-size:10.5px;letter-spacing:.18em;color:#f0f3f4}
.panel-label em{font-style:normal;font-size:7.5px;letter-spacing:.18em;color:#8c949a}
.original-panel .frame{box-shadow:0 0 30px rgba(255,255,255,.02)}
.replica-panel .frame{border-color:rgba(255,35,35,.14)}
.compare-controls{
  flex:0 0 auto;padding:10px 0 6px;background:#000;
}
.compare-controls-inner{
  max-width:980px;margin:0 auto;display:flex;align-items:center;gap:13px;padding:0 6px;
}
.compare-controls .time-read{min-width:86px}
.sync-dot{
  font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:#6d757b;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.sync-dot:before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red-soft)}

/* ---------------- export mode ---------------- */
body.export-mode .hud-top,
body.export-mode .controls,
body.export-mode .shot-label,
body.export-mode .free-hint,
body.export-mode .vignette,
body.export-mode .grain,
body.export-mode .top-shade,
body.export-mode .loading,
body.export-mode .egg-toast,
body.export-mode .compare-link,
body.export-mode .compare-head,
body.export-mode .compare-controls,
body.export-mode .compare-stack,
body.export-mode .panel-label { display:none !important; }
body.export-mode { padding:0 !important; overflow:hidden !important; }
body.export-mode #stage { position:fixed !important; inset:0 !important; }
body.export-mode #scene { width:100vw !important; height:100vh !important; }

/* ---------------- responsive ---------------- */
@media (max-width: 980px){
  .hud-top{padding:17px 18px}
  .shot-label{left:18px;bottom:96px}
  .free-hint{right:18px;bottom:96px}
  .controls{padding:26px 16px 14px}
  .controls-inner{gap:9px}
  .ghost-btn{padding:0 10px;font-size:10px}
  .ghost-btn span{display:none}
  .ghost-btn svg{width:17px;height:17px}
  .time-read{min-width:78px;font-size:9px}
  .timeline-shell{margin:0 2px}
}
@media (max-width: 700px){
  .brand-sub{display:none}
  .top-right{gap:10px}
  .compare-link{font-size:9px;padding:7px 9px}
  .shot-label span{font-size:11px}
  .controls-inner{gap:7px}
  .play-btn{width:40px;height:40px;min-width:40px}
  .compare-page{padding:0 12px 6px}
  .compare-stack{--pw:min(1240px, calc((100vh - 176px) * 0.8889), calc(100vw - 24px));gap:7px}
  .panel-label{padding:6px 9px 6px 10px}
  .panel-label span{font-size:9px}
  .panel-label em{font-size:6.5px}
}
@media (max-height: 690px){
  .shot-label{bottom:88px}
  .free-hint{bottom:88px}
  .controls{padding-top:22px}
  .compare-head{padding:8px 4px 6px}
  .compare-stack{--pw:min(1240px, calc((100vh - 160px) * 0.8889), calc(100vw - 44px));gap:7px}
}