:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-warm: #eef4ff;
  --fg: #172033;
  --fg-2: #3b4658;
  --muted: #6b7689;
  --meta: #2563eb;
  --border: #d8dee8;
  --border-soft: #edf1f6;
  --accent: #2563eb;
  --accent-on: #ffffff;
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);
  --success: #16a34a;
  --warn: #f59e0b;
  --danger: #dc2626;
  --font-display: Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: 42px;
  --text-4xl: 58px;
  --leading-body: 1.5;
  --leading-tight: 1.12;
  --tracking-display: -0.015em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-desktop: 88px;
  --section-y-tablet: 64px;
  --section-y-phone: 44px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 16px 40px rgba(23, 32, 51, 0.10);
  --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --container-max: 1200px;
  --container-gutter-desktop: 36px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1017;
    --surface: #151b28;
    --surface-warm: #1a2336;
    --fg: #f1f5f9;
    --fg-2: #94a3b8;
    --muted: #64748b;
    --meta: #3b82f6;
    --border: #232d3f;
    --border-soft: #1a2332;
    --accent: #3b82f6;
    --accent-on: #ffffff;
    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
    --accent-active: color-mix(in oklab, var(--accent), white 18%);
    --elev-raised: 0 16px 40px rgba(0, 0, 0, 0.45);
    --focus-ring: 0 0 0 4px rgba(59, 130, 246, 0.28);
  }
}

[data-theme="dark"] {
  --bg: #0c1017;
  --surface: #151b28;
  --surface-warm: #1a2336;
  --fg: #f1f5f9;
  --fg-2: #94a3b8;
  --muted: #64748b;
  --meta: #3b82f6;
  --border: #232d3f;
  --border-soft: #1a2332;
  --accent: #3b82f6;
  --accent-on: #ffffff;
  --accent-hover: color-mix(in oklab, var(--accent), white 10%);
  --accent-active: color-mix(in oklab, var(--accent), white 18%);
  --elev-raised: 0 16px 40px rgba(0, 0, 0, 0.45);
  --focus-ring: 0 0 0 4px rgba(59, 130, 246, 0.28);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;overflow-x:clip;background:var(--bg);color:var(--fg);
  font:var(--text-base)/var(--leading-body) var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1{margin:0;font-family:var(--font-display);font-weight:800;
  letter-spacing:var(--tracking-display);line-height:var(--leading-tight);text-wrap:balance}
h2{margin:0;font-family:var(--font-display);font-weight:800;
  letter-spacing:var(--tracking-display);line-height:var(--leading-tight)}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
code{font-family:var(--font-mono);font-size:.9em;color:var(--fg-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
[hidden]{display:none !important}
button{font:inherit;color:inherit}
svg{display:block}

.stage{max-width:720px;margin-inline:auto;
  padding:clamp(24px,5vh,48px) var(--container-gutter-desktop) var(--space-12)}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.brand{display:flex;align-items:center;gap:var(--space-2);font-weight:700;font-size:var(--text-base);color:var(--fg);letter-spacing:var(--tracking-display)}
.brand svg{color:var(--accent)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);color:var(--fg-2);cursor:pointer;transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
.theme-btn:hover{background:var(--border-soft);color:var(--fg);border-color:var(--muted)}
.icon-moon{display:none}
.icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:block}
[data-theme="dark"] .icon-sun{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .icon-moon{display:block}
  :root:not([data-theme="light"]) .icon-sun{display:none}
}

.intro{margin-bottom:var(--space-6)}
.intro h1{font-size:var(--text-2xl)}
.intro p{margin-top:0;color:var(--fg-2);max-width:56ch}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--elev-raised);overflow:hidden}
.card-pad,.card-body{padding:var(--space-6)}
.card.is-new{animation:reveal var(--motion-base) var(--ease-standard) both}
@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card-top{display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border-soft)}
.card-top h1,.card-top h2{font-size:var(--text-lg);font-weight:700}
.result-top{color:var(--success)}

.state-icon{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--radius-pill);background:var(--surface-warm);
  color:var(--accent);flex:none}
.state-icon svg{width:19px;height:19px}
.state-icon.dead{background:var(--border-soft);color:var(--fg-2)}
.spinner{width:15px;height:15px;border-radius:50%;border:2px solid var(--border);
  border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.lede{font-size:var(--text-base);line-height:1.6;color:var(--fg-2);max-width:58ch}
.hint{font-size:var(--text-sm);line-height:1.55;color:var(--fg-2);margin-top:var(--space-2)}
.hint.tight{margin-top:6px}
.footnote{margin-top:var(--space-6);font-size:var(--text-xs);line-height:1.65;color:var(--fg-2);
  max-width:68ch}
.footer-info{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-2);
  align-items:center;text-align:center}
.footer-info p{font-size:var(--text-sm);line-height:1.6;color:var(--fg-2);max-width:62ch;
  margin:0;text-align:center}

label.field-label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:8px}
textarea,input[type="text"],input[type="password"]{
  width:100%;padding:12px 14px;background:var(--bg);color:var(--fg);
  border:1px solid var(--border);border-radius:var(--radius-md);font:inherit;
  transition:border-color var(--motion-fast) var(--ease-standard),
             box-shadow var(--motion-fast) var(--ease-standard),
             background var(--motion-fast) var(--ease-standard)}
textarea{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;
  resize:vertical;min-height:150px}
input.mono{font-family:var(--font-mono);font-size:var(--text-sm)}
textarea:hover,input:hover{border-color:var(--muted)}
textarea:focus,input:focus{outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:var(--focus-ring)}
::placeholder{color:var(--muted)}
.meterline{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  margin-top:10px;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-2)}
.meterline b{font-weight:600;color:var(--fg)}
.meterline.over b{color:var(--danger)}
.meterline.near b{color:var(--warn)}

.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:5px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md)}
.seg.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.seg button{min-height:44px;padding:0 6px;border:0;border-radius:var(--radius-sm);
  background:transparent;font-size:var(--text-sm);font-weight:600;color:var(--fg-2);
  cursor:pointer;transition:background var(--motion-fast) var(--ease-standard),
             color var(--motion-fast) var(--ease-standard)}
.seg button:hover{background:var(--border-soft);color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-on)}
.field{margin-top:var(--space-5)}
.field:first-child{margin-top:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:0 20px;border-radius:var(--radius-md);border:1px solid transparent;
  font-size:var(--text-base);font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:background var(--motion-fast) var(--ease-standard),
             border-color var(--motion-fast) var(--ease-standard),
             color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--accent-on)}
.btn-primary:hover:not(:disabled){background:var(--accent-hover)}
.btn-primary:active:not(:disabled){background:var(--accent-active)}
.btn-ghost{background:var(--surface);color:var(--fg);border-color:var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--bg);border-color:var(--muted);color:var(--fg)}
.btn-sm{min-height:44px;padding:0 13px;font-size:var(--text-sm);border-radius:var(--radius-sm)}
.btn-block{width:100%}
.row-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-5)}
.linkbox{display:flex;gap:var(--space-2)}
.linkbox input{flex:1;min-width:0}

.kv{display:flex;flex-direction:column;gap:10px;margin:var(--space-5) 0 0}
.kv div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  font-size:var(--text-sm)}
.kv dt{color:var(--fg-2)}
.kv dd{margin:0;font-family:var(--font-mono);font-weight:600;text-align:right;
  overflow-wrap:anywhere}
.receipt{margin:var(--space-5) 0 0;padding-top:var(--space-4);border-top:1px solid var(--border-soft);
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.receipt div{display:flex;align-items:baseline;gap:7px;font-size:var(--text-sm)}
.receipt dt{color:var(--fg-2)}
.receipt dd{margin:0;font-family:var(--font-mono);font-weight:600}

.passbox{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);
  background:var(--surface-warm);
  border:1px dashed color-mix(in oklab,var(--accent),transparent 62%);
  border-radius:var(--radius-md)}
.passbox strong{display:block;font-size:var(--text-sm)}
.passbox .row{display:flex;gap:var(--space-2);align-items:center;margin-top:8px}
.passbox input{flex:1;min-width:0}

.notice{display:flex;gap:10px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);line-height:1.5;margin-bottom:var(--space-4)}
.notice-err{background:color-mix(in oklab,var(--danger),var(--surface) 93%);
  border:1px solid color-mix(in oklab,var(--danger),transparent 62%);
  color:color-mix(in oklab,var(--danger),var(--fg) 22%)}
.notice-warn{margin-top:var(--space-4);
  background:color-mix(in oklab,var(--warn),var(--surface) 92%);
  border:1px solid color-mix(in oklab,var(--warn),transparent 60%);
  color:color-mix(in oklab,var(--warn),var(--fg) 40%)}
.notice svg{width:16px;height:16px;flex:none;margin-top:2px}

.secret{margin:var(--space-4) 0 0;padding:var(--space-4);max-height:340px;overflow:auto;
  background:#090d16;color:#f8fafc;border-radius:var(--radius-md);
  font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.7;
  white-space:pre-wrap;overflow-wrap:anywhere;user-select:all;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--surface),transparent 88%);
  border:1px solid var(--border)}
.secret::selection{background:var(--accent);color:var(--accent-on)}

.countdown{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);
  padding:var(--space-3) var(--space-4);background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--fg-2)}
.bar{flex:1;height:4px;border-radius:2px;background:var(--border);overflow:hidden;max-width:180px}
.bar span{display:block;height:100%;width:100%;background:var(--accent);
  transform-origin:left center;transition:transform 1s linear}
.countdown b{font-family:var(--font-mono);color:var(--fg);min-width:34px;text-align:right}
.countdown.is-cleared .bar span{background:var(--border)}
.countdown.is-cleared ~ .row-actions #plain-action{
  background:var(--accent);color:var(--accent-on);border-color:transparent}
.countdown.is-cleared ~ .row-actions #plain-action:hover:not(:disabled){
  background:var(--accent-hover);border-color:transparent}

@media (max-width:767px){
  :root{--container-gutter-desktop:var(--container-gutter-phone)}
  .card-pad,.card-body,.card-top{padding:var(--space-4)}
  .seg.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .linkbox{flex-direction:column}
  .linkbox .btn{width:100%}
  .row-actions .btn{flex:1 1 100%}
  .countdown{flex-wrap:wrap}
  .countdown .bar{flex:1 1 100%;order:3;max-width:none}
  .countdown #clear-now{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}