:root {
  color-scheme: dark;
  --bg:#060607;
  --panel:#171718;
  --panel-2:#1c1a1b;
  --stroke:#494044;
  --text:#f5f3f2;
  --muted:#a8a2a3;
  --dim:#777173;
  --red:#ff3d4a;
  --red-2:#cc2634;
  --red-soft:rgba(255,61,74,.14);
  --red-glow:rgba(255,61,74,.43);
  --white:#f3eeee;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth;background:#060607}
body {margin:0;min-height:100dvh;color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse 900px 500px at 50% -380px,#242022 0,transparent 100%),#060607}
body::before {content:"";pointer-events:none;position:fixed;inset:0;background-image:url('/code-rain.webp');background-position:center top;background-size:min(100%,920px) auto;opacity:.72;z-index:0}
button,input,textarea {font:inherit}
button {cursor:pointer}
button:disabled {cursor:not-allowed;opacity:.6}
a {color:inherit;text-decoration:none}
[hidden] {display:none!important}
.visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-shell {position:relative;z-index:1;width:min(1000px,100%);margin:0 auto;padding:0 clamp(17px,3.5vw,36px);min-height:100dvh;display:flex;flex-direction:column}
.topbar {height:88px;display:flex;flex-shrink:0;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid #333033}
.brand {display:flex;align-items:center;min-width:0;height:74px;position:relative;isolation:isolate}
.brand img {width:194px;height:auto;max-height:76px;object-fit:contain;display:block;mix-blend-mode:screen}
.topbar-meta {white-space:nowrap;font-weight:780;letter-spacing:.85px;color:#bcb5b5;font-size:11px}
.live-dot {display:inline-block;vertical-align:1px;width:8px;height:8px;margin-right:11px;border-radius:50%;background:var(--red);box-shadow:0 0 8px 2px var(--red-glow)}
.app-main {width:100%;flex:1}
.intro {padding:21px 1px 16px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.intro h1 {font-size:clamp(28px,3.65vw,40px);font-weight:740;letter-spacing:-1.45px;line-height:1.1;margin:0;max-width:470px}
.intro h1 em,.receive-layout h1 em {color:var(--white);font-style:normal}
.lead {max-width:430px;color:#c6c0c1;font-size:14px;line-height:1.55;margin:0}
.workspace {display:flex;flex-direction:column;gap:12px}
.secret-composer {border:1px solid #5a4249;background:linear-gradient(155deg,#191719,#0d0c0d);padding:15px 18px 12px;border-radius:14px;box-shadow:0 8px 26px #0006}
.field-topline {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.field-topline label,.control-label,.board-title {font-size:11px;letter-spacing:1px;font-weight:800;color:#d5cbcb}
.field-topline span {font-size:10px;color:#858082}
#secretInput {width:100%;display:block;background:transparent;border:0;outline:none;color:#f9f6f6;font-size:14px;line-height:1.6;min-height:89px;height:108px;max-height:220px;resize:vertical;letter-spacing:.1px}
#secretInput::placeholder {color:#797577}
#secretInput:focus-visible {outline:2px solid var(--red);outline-offset:5px;border-radius:3px}
.board-frame {background:linear-gradient(160deg,rgba(29,28,29,.97),rgba(19,18,19,.98));border:1px solid #595154;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 8px 28px #0009,inset 0 1px #ffffff0c}
.board-frame::before {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 15%,#8c172011,transparent 40%)}
.board-topline {position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 19px 9px}
.board-title {color:#beb7b7;font-size:12px;letter-spacing:.95px}
.board-clock {color:var(--red);font-size:10px;font-weight:830;letter-spacing:.7px;white-space:nowrap}
.board-scroll {position:relative;padding:9px 20px 0;background-image:radial-gradient(circle at center,#b3a0a029 1px,transparent 1.8px);background-size:21px 21px;background-position:8px 9px}
.lane {display:flex;align-items:flex-start;justify-content:space-between;min-height:92px;width:100%}
.stage {display:flex;align-items:center;flex-direction:column;position:relative;gap:7px;flex:0 0 74px;min-width:0}
.stage-card {width:60px;height:60px;border:1.5px solid #5b5657;background:linear-gradient(155deg,#1e1c1d,#131313);border-radius:17px;display:grid;place-items:center;box-shadow:inset 0 0 16px #0005,0 5px 16px #0009;position:relative;z-index:1;transition:border-color .25s,box-shadow .25s,background .25s;}
.stage-card svg {width:34px;height:34px;fill:none;stroke:#8d8989;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.lock-stage .stage-card {border-color:#aa3b44;box-shadow:0 0 20px rgba(255,61,74,.2),inset 0 0 12px #0006}
.lock-stage .stage-card svg {stroke:var(--red)}
.node-status {font-size:10px;letter-spacing:.55px;color:#b4aeaf;font-weight:820;text-align:center;white-space:nowrap}
.wire {height:4px;flex:1 1 16px;min-width:4px;margin-top:29px;position:relative;border-radius:4px;background:repeating-linear-gradient(90deg,#817778 0 5px,transparent 5px 13px)}
.wire-core {position:absolute;inset:0;background:linear-gradient(90deg,#a32931,#ff525c);transform:scaleX(0);transform-origin:left;transition:transform .5s ease;border-radius:8px;box-shadow:0 0 10px var(--red-glow)}
.spark {position:absolute;top:-4px;left:0;width:11px;height:11px;border-radius:50%;background:#ffc0c4;opacity:0;box-shadow:0 0 8px 3px #ff3d4aa9,0 0 17px 5px #ff3d4a61}
.stage[data-state="active"] .stage-card {border-color:#f14350;box-shadow:0 0 15px rgba(255,61,74,.35),inset 0 0 13px rgba(255,61,74,.08)}
.stage[data-state="active"] .stage-card svg {stroke:#ff6370}
.stage[data-state="done"] .stage-card {border-color:#66595b;box-shadow:inset 0 0 13px #0007,0 3px 11px #0009}
.stage[data-state="done"] .stage-card svg {stroke:#a79b9d}
.stage[data-state="done"] .node-status {color:#b7aaac}
.stage.lock-stage[data-state="done"] .stage-card {border-color:#fa4050;box-shadow:0 0 15px rgba(255,61,74,.50),0 0 28px rgba(255,61,74,.19)}
.stage.lock-stage[data-state="done"] .stage-card svg,.stage.lock-stage[data-state="done"] .node-status {stroke:#ff5f6d;color:#ff6671}
.stage[data-state="thinking"] .stage-card {border-color:#ff4653;box-shadow:0 0 10px #ff3d4a8c,0 0 28px #ff3d4a44;animation:node-think 1s ease-in-out infinite alternate}
.stage[data-state="thinking"] .stage-card svg,.stage[data-state="thinking"] .node-status {stroke:#ff8a93;color:#ff9299}
.stage[data-state="failed"] .stage-card {border-color:#ff3d4a;box-shadow:0 0 0 2px #ff3d4a7d}
.stage[data-state="failed"] .node-status {color:var(--red)}
.wire[data-state="active"] .wire-core,.wire[data-state="done"] .wire-core {transform:scaleX(1)}
.wire[data-state="active"] .spark {opacity:1;animation:wire-pass .5s ease-out forwards}
.flow-explain {text-align:center;font-size:11px;color:#b9b0b2;line-height:1.5;margin:0;min-height:29px;padding:4px 13px 10px;position:relative}
.flow-explain.is-thinking {color:#ffb0b5;animation:text-think .85s ease-in-out infinite alternate}
.control-panel {display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.ttl-control {flex:1 1 auto;min-width:0}
.control-label {display:block;margin-bottom:7px}
.expiry-picker {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;gap:4px;margin:0;background:#141314;border:1px solid #51494b;border-radius:9px}
.expiry-picker label {position:relative;cursor:pointer;min-width:0}
.expiry-picker input {position:absolute;inset:0;opacity:0}
.expiry-picker span {display:block;text-align:center;padding:10px 9px;border:1px solid transparent;border-radius:6px;font-size:12px;color:#b5aaac;font-weight:780;white-space:nowrap}
.expiry-picker input:checked + span {background:#592128;border-color:#dc4654;color:#fff1f2}
.expiry-picker input:focus-visible + span {outline:2px solid #fff;outline-offset:2px}
.create-button {min-width:240px;min-height:48px;border:1px solid #ff7780;border-radius:9px;background:linear-gradient(115deg,#ff4b55,#ef283c);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 17px;font-weight:850;font-size:13px;text-transform:uppercase;box-shadow:0 5px 20px #ff3d4a42}
.create-button:hover {filter:brightness(1.1)}
.create-button:active {transform:translateY(1px)}
.btn-lock {font-size:15px}.btn-arrow {font-size:20px}
.transfer-status {display:flex;align-items:center;gap:11px;color:#c2b6b7;font-size:12px;line-height:1.45;min-height:23px;padding:0 2px}
.status-led {width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#5e5557;box-shadow:0 0 7px #5e555780}
.status-led.success,.status-led.error {background:var(--red);box-shadow:0 0 11px 3px #ff3d4a88}
.result-panel {display:flex;flex-direction:column;gap:11px;border:1.5px solid #ff3749;border-radius:17px;background:radial-gradient(ellipse 540px 360px at 10% 0%,rgba(139,22,34,.27),transparent 78%),linear-gradient(125deg,#201719,#19191b);box-shadow:0 0 3px #ff3649,0 0 23px #c9163166,inset 0 1px #ffffff0c;padding:19px 22px 17px;position:relative}
.result-heading {display:flex;align-items:center;gap:15px}
.result-check {width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--red);font-size:32px;color:var(--red);font-weight:500;flex:0 0 48px;line-height:1}
.result-heading h2 {font-size:21px;line-height:1.16;font-weight:830;letter-spacing:-.5px;margin:0 0 4px}
.result-heading p {margin:0;color:#c1b6b7;font-size:12px;line-height:1.48}
.result-panel .control-label {margin:2px 0 0;color:#bfb5b6}
#resultUrl {width:100%;height:48px;border:1px solid #6e5e61;background:#070707;color:#eee6e7;padding:0 13px;border-radius:8px;font-size:13px;letter-spacing:.1px;outline:none}
#resultUrl:focus {border-color:#ff656f;box-shadow:0 0 0 2px #ff3d4a40}
.link-actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.link-actions button {min-height:42px;border-radius:9px;border:1px solid #ef434f;background:#371b1f;color:#f7eced;font-size:11px;font-weight:850;white-space:nowrap}
.link-actions button:hover {background:#572329}
.link-actions button:nth-child(2) {background:#ff3948;border-color:#ff3948;color:#fff;box-shadow:0 4px 16px #ff3d4a25}
.link-actions button:last-child {border-color:#b19fa1;background:transparent}
.result-panel small {color:#ed737d;font-size:11px;line-height:1.4}
.workspace.has-result .secret-composer,.workspace.has-result .control-panel {display:none}
.workspace.has-result {gap:10px}
.footer {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:13px 0 18px;border-top:1px solid #393135;color:#716a6b;font-size:10px;letter-spacing:.8px}
.boot-path {position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:20;overflow:visible;opacity:0}
.boot-path path {stroke:#ff4b57;stroke-width:2;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 5px #ff3948);stroke-dasharray:1;stroke-dashoffset:1}
.booting .boot-path {opacity:1}.booting .boot-path path {animation:boot-trace .9s ease-out .25s forwards}
.booting .brand {animation:brand-rise .5s ease-out both}
.booting .stage-card {animation:boot-node .43s ease-in-out both;animation-delay:calc(.60s + var(--boot-step,0)*.12s)}
.booting .lock-stage .stage-card {animation:boot-lock .5s ease-in-out both;animation-delay:1.04s}
.booting .wire-core {animation:boot-wire .32s ease-out both;animation-delay:calc(.68s + var(--wire-index,0)*.12s)}
.booting .workspace {opacity:.76;transition:opacity .3s ease}
.ready .workspace {opacity:1}
@keyframes boot-trace {from {stroke-dashoffset:1}to {stroke-dashoffset:0}}
@keyframes brand-rise {from {opacity:.06;transform:scale(.97)}to {opacity:1;transform:scale(1)}}
@keyframes boot-node {0%,100% {box-shadow:0 0 0 #ff3d4a00}50% {box-shadow:0 0 15px 2px #ff3d4a99}}
@keyframes boot-lock {0%,100% {box-shadow:0 0 0 #ff3d4a00}55% {box-shadow:0 0 25px 5px #ff3d4ab0}}
@keyframes boot-wire {from {transform:scaleX(0)}to {transform:scaleX(1)}}
@keyframes wire-pass {from {left:0}to {left:calc(100% - 11px)}}
@keyframes node-think {from {box-shadow:0 0 8px #ff3d4a55,0 0 18px #ff3d4a1a}to {box-shadow:0 0 15px #ff3d4ab8,0 0 31px #ff3d4a55}}
@keyframes text-think {from {opacity:.78}to {opacity:1}}
/* Receiver: one compact card switches from sealed to revealed state. */
.receive-layout {width:min(650px,100%);margin:0 auto;padding:40px 0 4px;display:flex;flex-direction:column;gap:17px}
.receive-intro-block {text-align:center}
.receive-layout h1 {font-size:clamp(27px,4vw,39px);font-weight:800;letter-spacing:-1.25px;line-height:1.12;margin:0 0 10px}
.receive-intro {max-width:540px;margin:0 auto;color:#c4babb;font-size:13px;line-height:1.6}
.receive-vault {background:linear-gradient(145deg,#201a1c,#151314);border:1px solid #695358;border-radius:17px;overflow:hidden;box-shadow:0 9px 30px #0008}
.receive-vault-top {display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #4d393c;padding:13px 17px;color:#bdafb1;font-size:10px;font-weight:850;letter-spacing:.8px}
.receive-lock-status {color:var(--red)}.receive-lock-status.failed {color:#ff7e83}
.receive-vault-center {padding:24px 17px 25px;text-align:center}
.vault-hex {display:grid;place-items:center;width:70px;height:70px;margin:0 auto 13px;border:1px solid #ff515f;border-radius:18px;background:#351a1f;box-shadow:0 0 18px #ff3d4a30}
.vault-hex svg {width:43px;height:43px;fill:none;stroke:#ff6370;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.receive-vault-center h2 {font-size:20px;letter-spacing:-.3px;margin:0 0 7px}
.receive-vault-center p {max-width:470px;margin:0 auto 17px;color:#beb2b4;font-size:12px;line-height:1.5}
.reveal-btn {min-width:205px;min-height:45px;border-radius:9px;background:#ff3948;border:1px solid #ff6570;color:white;font-size:13px;font-weight:850}
.reveal-btn:hover {filter:brightness(1.1)}.reveal-btn span {font-size:18px;margin-left:10px}
.receive-help {text-align:center;color:#93898c;font-size:11px;line-height:1.5;margin:0}
.receive-vault.opened {border-color:#d53645;box-shadow:0 0 18px #ae20304a}
.receive-vault.opened .receive-vault-center {display:none}
.secret-panel {padding:18px;background:#1d1619}
.secret-top {display:flex;justify-content:space-between;align-items:center;gap:10px;color:#d9c5c8;font-size:10px;font-weight:850;letter-spacing:.6px}
.success-marker {color:#ff8d97;white-space:nowrap}
.secret-panel pre {max-height:min(30vh,300px);min-height:74px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#080808;border:1px solid #95515a;border-radius:9px;padding:14px;font-size:14px;line-height:1.55;color:#f9eff0}
.secret-actions {display:flex;gap:9px}
.secret-actions button {min-height:40px;background:#401e24;border:1px solid #f3505d;border-radius:7px;color:white;font-size:11px;font-weight:800;padding:9px 14px}
.secret-panel>p {font-size:11px;line-height:1.5;color:#c5b0b3;margin:12px 0 0}
.receive-page .footer {margin-top:auto}
@media (max-width:700px) {
 .site-shell {padding:0 16px}
 .topbar {height:65px}
 .brand {height:58px}
 .brand img {width:145px;max-height:58px}
 .topbar-meta {font-size:8px;letter-spacing:.35px;line-height:1.4;text-align:right;white-space:normal;max-width:46%}
 .live-dot {width:6px;height:6px;margin-right:6px}
 .intro {padding:16px 0 12px;display:block}
 .intro h1 {font-size:clamp(23px,6.1vw,30px);letter-spacing:-.95px;line-height:1.08;max-width:370px;margin-bottom:9px}
 .lead {font-size:11px;line-height:1.52;color:#c9c0c2;max-width:520px}
 .workspace {gap:9px}
 .secret-composer {border-radius:12px;padding:11px 13px 7px}
 .field-topline {margin-bottom:5px}
 .field-topline label,.control-label {font-size:9px}
 #secretInput {height:83px;min-height:69px;font-size:12px;resize:vertical}
 .board-frame {border-radius:14px}
 .board-topline {padding:10px 12px 7px}
 .board-title {font-size:10px}
 .board-clock {font-size:9px;letter-spacing:.1px}
 .board-scroll {padding:6px 10px 0;background-size:17px 17px}
 .lane {min-height:69px}
 .stage {flex:0 0 41px;gap:6px}
 .stage-card {height:38px;width:38px;border-radius:10px}
 .stage-card svg {width:24px;height:24px;stroke-width:1.9}
 .node-status {font-size:8px;letter-spacing:0}
 .wire {min-width:2px;margin-top:18px;height:3px;background:repeating-linear-gradient(90deg,#7d7476 0 3px,transparent 3px 8px)}
 .spark {width:8px;height:8px;top:-2.5px}
 .flow-explain {min-height:29px;font-size:9px;line-height:1.5;padding:2px 9px 8px}
 .control-panel {display:block}
 .expiry-picker span {font-size:11px;padding:8px 2px}
 .create-button {width:100%;min-height:43px;margin-top:8px;font-size:12px}
 .transfer-status {font-size:10px;min-height:19px;gap:8px}
 .status-led {width:7px;height:7px}
 .result-panel {border-radius:13px;padding:14px 14px 13px;gap:10px}
 .result-check {width:39px;height:39px;flex:0 0 39px;font-size:27px}
 .result-heading {gap:10px}
 .result-heading h2 {font-size:17px}
 .result-heading p {font-size:11px}
 #resultUrl {height:42px;font-size:11px}
 .link-actions {gap:6px}
 .link-actions button {font-size:10px;padding:0 4px;min-height:39px}
 .footer {font-size:8px;margin-top:10px;padding:11px 0 12px;line-height:1.4}
 .receive-layout {padding:26px 0 4px;gap:14px}
 .receive-layout h1 {font-size:clamp(24px,6.8vw,32px)}
 .receive-intro {font-size:12px}
 .receive-vault-center {padding:20px 14px}
 .receive-vault-center h2 {font-size:18px}
 .receive-help {font-size:10px}
 .secret-panel {padding:14px}
 .secret-top {flex-wrap:wrap;gap:5px}
}
@media (max-width:365px) {
 .stage {flex-basis:35px}
 .stage-card {width:34px;height:34px}
 .stage-card svg {width:22px;height:22px}
 .node-status {font-size:7px}
 .wire {margin-top:16px}
 .topbar-meta {font-size:7px}
}
@media (max-height:700px) and (max-width:700px) {
 .intro {padding:10px 0}
 .intro h1 {font-size:22px;margin-bottom:6px}
 .lead {font-size:10px}
 #secretInput {height:66px;min-height:60px}
 .secret-composer {padding:9px 12px 6px}
 .board-topline {padding:8px 11px 5px}
 .board-scroll {padding-top:3px}
 .lane {min-height:64px}
 .workspace {gap:7px}
 .footer {margin-top:8px;padding:9px 0 10px}
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after {scroll-behavior:auto!important;animation:none!important;transition:none!important}
 .boot-path {display:none!important}
}