:root{
  color-scheme:dark;
  --bg:#08090d;
  --panel:#111319;
  --panel2:#171a21;
  --line:#282c36;
  --text:#f5f7fb;
  --muted:#8e95a5;
  --accent:#d9ff3f;
  --accent2:#91ffcf;
  --danger:#ff6262;
  --radius:22px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 80% -10%,rgba(217,255,63,.09),transparent 30rem),
    radial-gradient(circle at -10% 30%,rgba(145,255,207,.05),transparent 28rem),
    var(--bg);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
}
button,input,select{font:inherit}
button,select{color:inherit}
button{cursor:pointer}
.app-shell{width:min(760px,100%);margin:auto;padding:0 18px max(28px,env(safe-area-inset-bottom))}
.topbar{
  height:76px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;
  background:linear-gradient(var(--bg) 70%,transparent);
}
.brand{display:flex;align-items:center;gap:11px}
.brand h1{font-size:17px;line-height:1;margin:0;letter-spacing:-.02em}
.brand p{font-size:10px;color:var(--muted);margin:5px 0 0;letter-spacing:.14em;text-transform:uppercase}
.brand-mark{display:flex;align-items:center;gap:2px;width:31px;height:31px;padding:6px;border:1px solid var(--line);border-radius:9px}
.brand-mark span{display:block;width:3px;border-radius:9px;background:var(--accent)}
.brand-mark span:nth-child(1){height:7px}.brand-mark span:nth-child(2){height:16px}.brand-mark span:nth-child(3){height:11px}.brand-mark span:nth-child(4){height:19px}
.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:#111319;border-radius:50%;display:grid;place-items:center}
.hero{padding:36px 3px 30px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--accent);margin-bottom:16px}
.hero h2{font-size:clamp(40px,9vw,70px);line-height:.98;letter-spacing:-.065em;margin:0;font-weight:850}
.hero h2 span{color:#8e95a5}
.hero p{max-width:500px;color:var(--muted);font-size:14px;line-height:1.7;margin:22px 0 0}
.mode-tabs{display:grid;grid-template-columns:1fr 1fr;background:#0d0f14;border:1px solid var(--line);padding:4px;border-radius:15px;margin-bottom:16px}
.tab{border:0;background:transparent;border-radius:11px;padding:12px;font-weight:750;color:var(--muted)}
.tab.active{background:#20242d;color:#fff;box-shadow:inset 0 0 0 1px #2e333f}
.panel{display:none}.panel.active{display:block}
.dropzone{
  min-height:154px;border:1px dashed #363b47;border-radius:var(--radius);
  display:flex;align-items:center;gap:17px;padding:22px;background:rgba(17,19,25,.68);
  transition:.2s ease;cursor:pointer
}
.dropzone.drag{border-color:var(--accent);background:rgba(217,255,63,.05)}
.dropzone input{display:none}
.drop-icon{font-size:30px;width:55px;height:55px;border-radius:17px;background:var(--accent);color:#111;display:grid;place-items:center;font-weight:900}
.drop-copy{display:flex;min-width:0;flex-direction:column;gap:7px}
.drop-copy strong{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop-copy span{color:var(--muted);font-size:12px}
.card{background:linear-gradient(180deg,rgba(23,26,33,.98),rgba(15,17,22,.98));border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.settings{margin-top:12px;padding-block:5px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 4px}
.setting-row+.setting-row{border-top:1px solid var(--line)}
.setting-row>div{display:flex;flex-direction:column;gap:4px}
.setting-row strong{font-size:13px}.setting-row span{font-size:11px;color:var(--muted)}
select{border:1px solid #343946;background:#0d0f14;border-radius:11px;padding:9px 30px 9px 11px;font-size:12px}
.primary,.secondary{
  width:100%;border-radius:16px;padding:16px 18px;margin-top:14px;font-weight:850;border:0
}
.primary{background:var(--accent);color:#111}
.primary:disabled{opacity:.35;cursor:not-allowed}
.secondary{background:#181b22;color:#d8dce6;border:1px solid var(--line)}
.transfer{margin-top:12px}
.transfer-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.transfer-head>div{display:flex;flex-direction:column;gap:4px}
.status-label{font-size:9px;letter-spacing:.16em;color:var(--accent);font-weight:900}
.transfer-head strong{font-size:14px}
.transfer-head>span{font-variant-numeric:tabular-nums;font-size:22px;font-weight:800}
.progress{height:7px;border-radius:99px;background:#090a0d;overflow:hidden;margin:16px 0 12px}
.progress i{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .15s linear}
.stats{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.viz{height:55px;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden}
.viz i{display:block;width:3px;background:var(--accent);border-radius:9px;animation:bounce .7s ease-in-out infinite alternate}
.viz i:nth-child(3n){animation-delay:-.2s}.viz i:nth-child(4n){animation-delay:-.45s}.viz i:nth-child(5n){animation-delay:-.1s}
@keyframes bounce{from{height:7px;opacity:.4}to{height:42px;opacity:1}}
.listen{text-align:center;padding:28px 20px}
.mic-ring{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:3px auto 20px;border:1px solid #333844;position:relative}
.mic-ring.listening:before,.mic-ring.listening:after{content:"";position:absolute;inset:-1px;border:1px solid var(--accent);border-radius:50%;animation:pulse 1.8s ease-out infinite}
.mic-ring.listening:after{animation-delay:.9s}
@keyframes pulse{to{inset:-28px;opacity:0}}
.mic-dot{width:22px;height:31px;border:3px solid var(--text);border-radius:15px;position:relative}
.mic-dot:after{content:"";position:absolute;left:50%;bottom:-10px;width:22px;height:12px;border:2px solid var(--text);border-top:0;border-radius:0 0 15px 15px;transform:translateX(-50%)}
.listen h3{margin:0;font-size:20px}.listen p{color:var(--muted);font-size:12px;line-height:1.6;max-width:430px;margin:9px auto 20px}
.level{height:5px;background:#090a0d;border-radius:99px;overflow:hidden}
.level i{display:block;height:100%;width:0;background:var(--accent);transition:width .08s linear}
.packet-grid{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin:16px 0}
.packet-grid i{aspect-ratio:1;border-radius:2px;background:#282c35}
.packet-grid i.ok{background:var(--accent)}
.how{margin-top:18px}
.how-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}
.how-title span{font-size:9px;color:var(--accent);font-weight:900;letter-spacing:.18em}
.how-title strong{font-size:12px}
.flow{display:flex;align-items:center;justify-content:space-between;gap:6px}
.flow>div{display:flex;min-width:0;flex:1;flex-direction:column;padding:10px 8px;background:#0d0f14;border-radius:12px}
.flow b{font-size:9px;color:#5f6675}.flow span{font-size:11px;font-weight:800;margin:5px 0 2px}.flow small{font-size:8px;color:var(--muted)}
.flow>i{font-style:normal;color:#4a505d;font-size:11px}
footer{display:flex;justify-content:center;gap:8px;color:#59606e;font-size:9px;padding:28px 0 5px}
.hidden{display:none!important}
dialog{width:min(520px,calc(100% - 32px));background:#12151b;color:var(--text);border:1px solid var(--line);border-radius:22px;padding:0}
dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}
dialog form{padding:20px}dialog p{font-size:12px;color:var(--muted);line-height:1.7}.dialog-head{display:flex;justify-content:space-between;align-items:center}
@media(max-width:540px){
  .app-shell{padding-inline:14px}.topbar{height:67px}.hero{padding-top:28px}.hero p{font-size:13px}
  .dropzone{min-height:132px}.flow{gap:3px}.flow>div{padding:9px 5px}.flow>i{display:none}
  .packet-grid{grid-template-columns:repeat(18,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.received-file{margin-top:12px}
.received-file-head{display:flex;align-items:center;gap:13px}
.file-badge{
  width:50px;height:50px;border-radius:14px;background:var(--accent);color:#10110d;
  display:grid;place-items:center;font-size:10px;font-weight:950;letter-spacing:.04em
}
.received-file-copy{display:flex;flex-direction:column;min-width:0;gap:3px}
.received-file-copy strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.received-file-copy small{font-size:10px;color:var(--muted)}
.received-preview{
  margin-top:16px;min-height:170px;border-radius:16px;overflow:hidden;background:#090a0d;
  border:1px solid #20242c;display:grid;place-items:center
}
.received-preview img,.received-preview video{
  display:block;width:100%;max-height:420px;object-fit:contain;background:#050608
}
.received-preview audio{width:calc(100% - 24px);margin:22px 12px}
.received-preview iframe{display:block;width:100%;height:420px;border:0;background:#fff}
.received-preview pre{
  width:100%;max-height:360px;overflow:auto;margin:0;padding:16px;color:#dce2ee;
  font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word
}
.preview-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted)}
.preview-empty span{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(217,255,63,.1);color:var(--accent);font-size:22px
}
.preview-empty strong{font-size:13px;color:#cfd4de}
.received-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.received-actions .primary,.received-actions .secondary{margin:0}
.compact{padding:13px 14px;border-radius:13px}
@media(max-width:540px){
  .received-actions{grid-template-columns:1fr}
  .received-preview iframe{height:330px}
}

.live-preview-state{
  width:100%;
  min-height:170px;
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--muted);
  text-align:center;
}
.live-preview-state strong{color:#dfe4ee;font-size:14px}
.live-preview-state span{font-size:10px}
.live-preview-icon{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(217,255,63,.09);
  color:var(--accent);font-size:24px;
  animation:receiveFloat .9s ease-in-out infinite alternate;
}
@keyframes receiveFloat{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
.mini-meter{
  width:min(280px,82%);
  height:5px;
  overflow:hidden;
  margin-top:7px;
  border-radius:99px;
  background:#171a20;
}
.mini-meter i{
  display:block;height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .18s linear;
}
.receiving-image{opacity:.92}
.live-text-preview:after{
  content:"";
  display:inline-block;
  width:7px;height:13px;
  margin-left:2px;
  vertical-align:-2px;
  background:var(--accent);
  animation:cursorBlink .7s steps(1) infinite;
}
@keyframes cursorBlink{50%{opacity:0}}