:root { color-scheme: dark; --bg:#101416; --surface:#191f22; --ink:#f0f1ec; --muted:#b5c0c2; --border:#46565c; --accent:#8fe2bf; --accent-ink:#10251c; font:400 1rem/1.55 Arial, Helvetica, sans-serif; background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-inline-size:0; }
.topbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; max-inline-size:70rem; margin:auto; padding:.75rem clamp(1rem,4vw,2rem); border-block-end:1px solid var(--border); }
.brand { font-size:1.3rem; font-weight:700; text-decoration:none; color:var(--ink); min-block-size:44px; display:inline-flex; align-items:center; }
.topbar span { color:var(--muted); font-size:.9rem; }
main { max-inline-size:70rem; margin-inline:auto; padding:clamp(1rem,4vw,2rem); }
h1 { font-size:clamp(1.6rem,3.5vw,2.25rem); line-height:1.2; letter-spacing:-.025em; margin:.2rem 0 1rem; }
h2 { font-size:1.15rem; line-height:1.35; margin:0 0 .75rem; }
h3 { font-size:1rem; margin:0 0 .25rem; }
:where(h1,h2,h3,p,label,summary,li,footer,.topbar span) { overflow-wrap:anywhere; }
.heading > div { min-inline-size:0; max-inline-size:100%; }
p { margin:.5rem 0 1rem; max-inline-size:70ch; }
a { color:var(--accent); text-underline-offset:.2em; }
.eyebrow { color:var(--accent); font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 .35rem; }
.heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.tool-columns { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; margin-block-start:1rem; }
.tool-columns > * { min-inline-size:0; }
.password-tool { border-block-end:1px solid var(--border); padding-block-end:1.5rem; }
.guidance { color:var(--muted); }
.guidance summary { color:var(--ink); }
[data-work-embed] main { padding:clamp(.75rem,3vw,1.5rem); }
[data-work-embed] h1 { font-size:1.4rem; margin-block-end:.5rem; }
ol { padding-inline-start:1.5rem; }
li { padding-inline-start:.25rem; margin-block-end:.7rem; }
fieldset { border:0; margin:0; padding:0; min-inline-size:0; }
label { display:block; margin-block-start:1rem; margin-block-end:.35rem; font-weight:600; }
input:not([type=checkbox]), textarea { display:block; inline-size:100%; max-inline-size:100%; min-inline-size:0; min-block-size:44px; border:1px solid var(--border); border-radius:5px; background:var(--bg); color:var(--ink); padding:.65rem .75rem; font:inherit; }
textarea { resize:vertical; overflow-wrap:anywhere; }
input[type=checkbox] { flex:none; inline-size:1.25rem; block-size:1.25rem; margin:0; accent-color:var(--accent); }
input[readonly],textarea[readonly] { background:#151c1f; }
input:disabled,fieldset:disabled { opacity:.75; }
button,.button { min-block-size:44px; min-inline-size:44px; max-inline-size:100%; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border:1px solid var(--border); border-radius:5px; padding:.65rem .85rem; font:600 1rem/1.3 Arial,Helvetica,sans-serif; color:var(--ink); background:var(--surface); text-decoration:none; text-align:center; white-space:normal; cursor:pointer; touch-action:manipulation; }
button:hover,.button:hover { background:#263a31; border-color:var(--accent); color:var(--ink); }
.primary { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.primary:hover { background:#b0efd3; color:var(--accent-ink); }
button[aria-disabled=true] { opacity:.65; cursor:not-allowed; }
button.danger { color:#ffc1c6; border-color:#98636a; }
button.danger:hover { background:#48292e; color:#ffe8ea; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-block:1rem; }
.quiet { margin-block:.5rem 1rem; }
.quiet button { font-size:.9rem; }
summary { min-block-size:44px; padding-block:.65rem; cursor:pointer; font-weight:600; }
details { border-block-start:1px solid var(--border); margin-block:1rem; padding-block:.25rem; }
.generator { padding-block:.25rem .75rem; }
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap:.2rem .75rem; margin-block:.5rem 1rem; }
.choices label,.confirmation { display:flex; align-items:flex-start; gap:.75rem; min-block-size:44px; padding-block:.5rem; margin:0; font-weight:400; }
.confirmation { margin-block:1.25rem; }
.muted,footer { color:var(--muted); font-size:.92rem; }
.policy { color:var(--accent); font-size:.9rem; margin-block:1rem; }
.warning { background:#282822; border:1px solid #6d7053; padding:.85rem; border-radius:5px; color:#f0ead2; }
.result { border-block-start:1px solid var(--border); margin-block-start:1.75rem; padding-block-start:1.5rem; }
.result textarea { font:400 .92rem/1.5 Consolas,'Liberation Mono',monospace; margin-block-end:.5rem; word-break:break-all; }
.plaintext-field { padding-block:1rem; border-block-end:1px solid var(--border); }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:400 1rem/1.55 Consolas,'Liberation Mono',monospace; margin:.5rem 0 .75rem; background:var(--surface); padding:.85rem; min-block-size:44px; border-radius:5px; }
.receive { max-inline-size:45rem; margin-inline:auto; }
.intro { max-inline-size:40rem; padding-block:clamp(1rem,5vh,3rem); }
[role=status] { min-block-size:1.55em; color:var(--muted); overflow-wrap:anywhere; }
footer { margin-block-start:2.25rem; padding-block-start:1.25rem; border-block-start:1px solid var(--border); }
@media(min-width:55rem) { .tool-columns { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1.75rem; } .password-tool { border-block-end:0; border-inline-end:1px solid var(--border); padding:0 1.75rem 0 0; } }
@media(max-width:28rem) { .heading > button { inline-size:100%; } .actions > button { flex:1 1 11rem; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }