/* f5tts.top - plain-text README: 7-bit ASCII frames, pipe-character waveform */
:root{
  --bg:#f6fcf5;--ink:#15300f;--mut:#4b6045;--pri:#168a12;--line:#53a44f;--slab:#10290a;--hl:#846bff;--tint:#e6f4e4;
  --mono:"Victor Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --disp:"Xanh Mono","Victor Mono",ui-monospace,monospace;
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dash:"----------------------------------------------------------------------------------------------------------------";
  --eq:"================================================================================================================";
  --dots:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
  --pipe:"||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||";
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.68 var(--sans);overflow-x:hidden}
::selection{background:var(--hl);color:var(--ink)}
a{color:var(--pri);text-underline-offset:3px}
a:hover{background:var(--hl);color:var(--ink)}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
img,svg{max-width:100%}
.col{width:100%;max-width:752px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#ffffff;padding:12px 16px;z-index:9;font:600 15px var(--mono)}
.skip:focus{left:8px;top:8px}

/* ---------- shared character rules ---------- */
.bx::before,.bx::after,.nav::before,.nav::after,.sec::before,.prose h2::after,.faq details::before,.feats>div::before,.exs>div::before,.ft .col::before{
  content:"+" var(--dash);display:block;height:15px;font:400 15px/1 var(--mono);color:var(--line);overflow:hidden;white-space:nowrap;pointer-events:none}

i{font-style:normal}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 1.5ch;font:600 15px/1.2 var(--mono);
  background:var(--pri);color:#ffffff;border:0;border-radius:0;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);white-space:nowrap;transition:transform .12s,box-shadow .12s}
.btn:hover{background:var(--pri);color:#ffffff;transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.cta::before{content:"[";margin-right:.4ch;opacity:.75}
.btn.cta::after{content:"]";margin-left:.4ch;opacity:.75}
.btn.ghost{background:var(--bg);color:var(--ink);border:1px solid var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--hl);color:var(--ink);transform:none;box-shadow:none}
.btn.sm{min-height:44px;font-size:13.5px;padding:0 1.2ch;box-shadow:3px 3px 0 var(--ink)}
.btn.ghost.sm{box-shadow:none}
.acts2{display:flex;flex-wrap:wrap;gap:16px 18px;margin-top:30px}

/* ---------- header ---------- */
.hd{padding-top:20px}
.hd1{display:flex;align-items:center;gap:14px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:400 27px/1 var(--disp);letter-spacing:-.02em;min-height:44px}
.logo:hover{background:none;color:var(--pri)}
.logo .mark{flex:none;color:var(--pri)}
.tag{flex:1;min-width:0;font:400 12.5px/1.35 var(--mono);color:var(--mut);padding-left:14px;border-left:1px dashed var(--line)}
.hcta{margin-left:auto;flex:none}
.burger{display:none}
.nav{position:relative;display:flex;margin-top:16px;padding:15px 0}
.nav::before,.nav::after{position:absolute;left:0;right:0}
.nav::before{top:0}.nav::after{bottom:0}
.nav a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;min-height:44px;position:relative;
  font:600 14px/1 var(--mono);color:var(--ink);text-decoration:none;text-transform:uppercase;letter-spacing:.04em}
.nav a::before{content:"|";position:absolute;left:-.3em;color:var(--line);font-weight:400}
.nav a:last-child::after{content:"|";position:absolute;right:-.3em;color:var(--line);font-weight:400}
.nav a:hover{background:linear-gradient(var(--hl),var(--hl)) center/calc(100% - 2.4ch) 30px no-repeat}
.nav a[aria-current]{color:#ffffff;background:linear-gradient(var(--pri),var(--pri)) center/calc(100% - 2.4ch) 30px no-repeat}

/* ---------- frames ---------- */
.bx{position:relative;padding:36px 28px 32px;min-width:0}
.bx::before,.bx::after{position:absolute;left:0;right:0}
.bx::before{top:0}.bx::after{bottom:0}
.bl,.br{position:absolute;top:15px;bottom:15px;width:15px;overflow:hidden;writing-mode:vertical-rl;text-orientation:upright;
  font:400 15px/1 var(--mono);color:var(--line);white-space:nowrap;pointer-events:none}
.bl{left:-3px}
.br{right:-3px;top:0;bottom:0;background:var(--bg)}
.bl::before{content:var(--pipe)}
.br::before{content:"+" var(--pipe)}
.br::after{content:"+";position:absolute;left:0;bottom:0;width:15px;height:15px;background:var(--bg)}
.bxt{position:absolute;top:-3px;left:27px;z-index:1;background:var(--bg);padding:0 1ch;font:700 13px/20px var(--mono);
  text-transform:uppercase;letter-spacing:.08em;color:var(--pri);max-width:calc(100% - 60px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bxt::before{content:"[ ";color:var(--line)}
.bxt::after{content:" ]";color:var(--line)}
.bdbl::before,.bdbl::after{content:"+" var(--eq)}

/* ---------- waveform ---------- */
.wave{display:flex;align-items:center;gap:2px;height:132px;overflow:hidden;font:700 12px/1 var(--mono);color:var(--pri);margin:26px 0 24px}
.wave i{flex:none;width:12px;height:calc(var(--n)*14px);overflow:hidden;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap}
.wave i::before{content:"||||||||||||"}
.wave.sm{height:64px;margin:0 0 6px;opacity:.55;font-size:10px}
.wave.sm i{width:12px;height:calc(var(--n)*6.5px)}

/* ---------- page top ---------- */
main{counter-reset:s;padding-top:34px;padding-bottom:10px}
.crumbs ol{display:block;list-style:none;padding:11px 0;font:400 13px/1.5 var(--mono);color:var(--mut)}
.crumbs li+li::before{content:"/";margin:0 1ch;color:var(--line)}
.crumbs li:first-child::before{content:"~ ";color:var(--line)}
.crumbs li{display:inline}
.crumbs a{color:var(--mut);padding:11px 0}
.crumbs li[aria-current]{color:var(--ink)}
h1{font:400 clamp(34px,7.4vw,54px)/1.07 var(--disp);letter-spacing:-.035em;overflow-wrap:break-word}
.top{padding-top:14px}
.top h1{font-size:clamp(32px,6.6vw,46px)}
.lead{font-size:19px;line-height:1.6;color:var(--mut);margin-top:18px}
.eyebrow{font:700 13px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--pri);margin-bottom:18px}
.eyebrow::before{content:"> "}
.hero{padding-top:26px}
.hero .lead{margin-top:0}
.date{font:400 13.5px/1.4 var(--mono);color:var(--mut);margin-top:14px}
.ticks{list-style:none;margin-top:22px}
.ticks li{position:relative;padding-left:5ch;margin-top:10px}
.ticks li::before{content:"[x]";position:absolute;left:0;top:.2em;font:700 15px/1.5 var(--mono);color:var(--pri)}
.ticks.big{margin-top:0}
.ticks.big li{margin-top:24px}
.ticks.big li:first-child{margin-top:0}
.ticks.big p{color:var(--mut)}
h3{font:700 18px/1.35 var(--sans);letter-spacing:-.005em}

/* ---------- sections ---------- */
.sec{position:relative;margin-top:76px;padding-top:44px;counter-increment:s}
.sec::before{position:absolute;top:0;left:0;right:0}
.sh{font:400 clamp(28px,5.4vw,36px)/1.12 var(--disp);letter-spacing:-.03em;margin-bottom:26px}
.sh::before{content:"[ " counter(s,decimal-leading-zero) " ]";position:absolute;top:-3px;left:27px;background:var(--bg);padding:0 1ch;
  font:700 13px/20px var(--mono);letter-spacing:.08em;color:var(--pri)}
.sec.nohead{padding-top:40px;margin-top:56px;counter-increment:none}
.try{margin-top:52px}
.try .bfacts{margin-top:26px}

.facts>div{display:flex;align-items:baseline;gap:1ch;padding:5px 0}
.facts dt{font:400 14px/1.4 var(--mono);color:var(--mut);min-width:0}
.facts i{flex:1;min-width:2ch;height:15px;overflow:hidden;white-space:nowrap;font:400 15px/1 var(--mono);color:var(--line)}
.facts i::before{content:var(--dots)}
.facts dd{font:400 23px/1.2 var(--disp);letter-spacing:-.02em;color:var(--pri);text-align:right}
.bfacts{padding-top:28px;padding-bottom:26px}

.feats,.exs{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;counter-reset:f}
.exs{grid-template-columns:1fr}
.feats>div,.exs>div{position:relative;padding:30px 0 26px;min-width:0;counter-increment:f}
.feats>div::before,.exs>div::before{position:absolute;top:0;left:0;right:0;content:var(--dash)}
.feats>div:nth-child(-n+2)::before,.exs>div:first-child::before{display:none}
.feats>div:nth-child(-n+2),.exs>div:first-child{padding-top:0}
.feats h3::before,.exs h3::before{content:counter(f,decimal-leading-zero) " /";display:block;font:700 13px/1.4 var(--mono);color:var(--pri);margin-bottom:6px;letter-spacing:.06em}
.feats p,.exs p,.uses p,.steps p{color:var(--mut);margin-top:6px;font-size:16px;line-height:1.62}

.steps{list-style:none;counter-reset:st}
.steps li{position:relative;padding:2px 0 34px 76px;counter-increment:st;min-height:70px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"(" counter(st) ")";position:absolute;left:0;top:-4px;font:400 34px/1 var(--disp);color:var(--pri);letter-spacing:-.04em}
.steps li::after{content:var(--pipe);position:absolute;left:16px;top:40px;bottom:6px;width:15px;overflow:hidden;writing-mode:vertical-rl;text-orientation:upright;
  font:400 15px/1 var(--mono);color:var(--line);white-space:nowrap}
.steps li:last-child::after{display:none}

.uses{display:grid;grid-template-columns:1fr 1fr;gap:24px 26px}
.uses .bx{padding:32px 24px 28px}

/* ---------- prose ---------- */
.prose{margin-top:70px;overflow-wrap:break-word}
.top+.prose,.toc+.prose{margin-top:44px}
.prose>*+*{margin-top:18px}
.prose h2{font:400 clamp(26px,5vw,32px)/1.15 var(--disp);letter-spacing:-.03em;margin-top:60px;scroll-margin-top:20px}
.prose h2:first-child{margin-top:0}
.prose h2::after{content:var(--eq);margin-top:8px}
.prose h3{margin-top:34px;font-size:19px}
.prose h3::before{content:"## ";font:700 15px var(--mono);color:var(--line)}
.prose ul,.prose ol{padding-left:3.2ch}
.prose ul{list-style-type:"-  "}
.prose li{margin-top:7px;padding-left:.4ch}
.prose li::marker{font-family:var(--mono);color:var(--pri);font-weight:700}
.prose.long{font-size:18px;line-height:1.75}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose th,.prose td{border:1px dashed var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.prose th{font:700 12.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--tint);white-space:nowrap}
.prose :not(pre)>code{font:400 .88em var(--mono);background:var(--tint);padding:.12em .4em}
.prose blockquote{margin-left:0;margin-right:0;padding-left:3ch;color:var(--mut);position:relative}
.prose blockquote::before{content:">";position:absolute;left:0;font:700 16px/1.7 var(--mono);color:var(--pri)}

/* ---------- code ---------- */
.bcode{padding:40px 15px 30px}
.codetabs{display:flex;flex-wrap:wrap;gap:4px 6px;margin-bottom:10px;padding:0 6px}
.codetabs button{min-height:44px;padding:0 1ch;background:none;border:0;border-radius:0;font:600 14px/1 var(--mono);color:var(--ink);cursor:pointer}
.codetabs button::before{content:"[ ";color:var(--line)}
.codetabs button::after{content:" ]";color:var(--line)}
.codetabs button:hover{background:var(--hl)}
.codetabs button[aria-selected="true"]{background:var(--ink);color:#ffffff}
[data-pane][hidden]{display:none}
pre.code{position:relative;margin:0;background:var(--slab);color:#e4f6e2;padding:18px 20px;overflow-x:auto;max-width:100%;
  font:400 13.5px/1.65 var(--mono);tab-size:2;-webkit-overflow-scrolling:touch}
.prose pre.code{margin-top:20px;box-shadow:6px 6px 0 var(--tint)}
pre.code code{font:inherit;background:none;padding:0}
pre.code .k{color:#9dffa9}pre.code .s{color:var(--hl)}pre.code .c{color:#a2c09d;font-style:italic}
pre.code .copy{float:right;position:sticky;right:0;top:0;margin:-8px -10px 6px 12px;min-width:44px;min-height:44px;padding:0 1ch;
  background:var(--slab);color:#e4f6e2;border:1px dashed #93bd8f;border-radius:0;font:600 12.5px/1 var(--mono);cursor:pointer}
pre.code .copy:hover{background:var(--hl);color:var(--ink);border-color:var(--hl)}
pre.code :focus-visible{outline-color:var(--hl)}

/* ---------- forms ---------- */
.signup,.support{margin-top:30px}
.bform{padding:42px 28px 34px}
.form,.calc,form[data-support]{min-width:0}
.tabs2{display:flex;margin-bottom:20px}
.tabs2 button{flex:1;min-width:0;min-height:46px;background:var(--bg);color:var(--ink);border:1px solid var(--ink);border-radius:0;font:600 14px/1.2 var(--mono);cursor:pointer}
.tabs2 button+button{border-left:0}
.tabs2 button.on,.tabs2 button.active,.tabs2 button[aria-selected="true"],.tabs2 button[aria-pressed="true"]{background:var(--ink);color:#ffffff}
.row{margin-bottom:16px}
.row label,.calc label{display:block;font:700 12.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}
.row label::before{content:"> ";color:var(--pri)}
input,select,textarea{width:100%;max-width:100%;min-height:50px;padding:11px 14px;background:#ffffff;color:var(--ink);border:1px solid var(--ink);border-radius:0;
  font:400 16px/1.4 var(--mono);-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
select,textarea{padding:11px 14px!important}
select{padding-right:40px!important}
textarea{min-height:140px;resize:vertical}
.keybox{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.keybox span{min-width:0;flex:1 1 200px}
.keyout h3{margin:0 0 12px}
.keyout code{font:600 .9em var(--mono);background:var(--tint);padding:.1em .4em;overflow-wrap:anywhere}
input::placeholder,textarea::placeholder{color:#70836a}
input:focus,select:focus,textarea:focus{outline:3px solid var(--pri);outline-offset:1px;box-shadow:4px 4px 0 var(--hl)}
.note{font:400 13px/1.55 var(--mono);color:var(--mut);margin:12px 0}
.msg{font:600 14px/1.5 var(--mono);margin:0 0 14px}
.msg:empty{display:none}
.msg.err{color:#00a182;background:#e9fffa;border-left:4px solid #00a182;padding:10px 14px}
.form .btn[data-submit],form[data-support] button{width:100%;margin-top:6px}
form[data-support] button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 1.5ch;font:600 15px/1.2 var(--mono);
  background:var(--pri);color:#ffffff;border:0;border-radius:0;cursor:pointer;box-shadow:4px 4px 0 var(--ink)}
[data-support-msg]{font:600 14px/1.5 var(--mono)}
[data-support-msg]:empty{display:none}
a.btn.ghost[data-gauth]{width:100%;min-height:50px}
.keyout{display:none;margin-top:8px}
.keyout.on{display:block}
.keybox{background:var(--slab);color:var(--hl);padding:16px 18px;font:600 15px/1.5 var(--mono);word-break:break-all;overflow-wrap:anywhere;box-shadow:6px 6px 0 var(--tint)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.keyout p{margin-top:12px;font-size:15.5px}

.bcalc{padding:38px 28px 32px}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;align-items:end}
.calc>*{min-width:0;margin:0}
.calc output,.calc #cr{font:400 clamp(30px,7vw,44px)/1.1 var(--disp);letter-spacing:-.03em;color:var(--pri);display:block}
.calc>:last-child,.calc>p,.calc>output,.calc>.res{grid-column:1/-1}

/* ---------- toc / takeaways ---------- */
.toc{margin-top:40px}
.toc .bx{padding:30px 28px 22px}
.toc ol{list-style:none;counter-reset:tc}
.toc li{counter-increment:tc}
.toc a{display:flex;align-items:baseline;gap:1ch;min-height:44px;padding:11px 0 9px;color:var(--ink);text-decoration:none;font:500 16px/1.35 var(--sans)}
.toc a span{min-width:0}
.toc a i{flex:1;min-width:2ch;height:15px;overflow:hidden;white-space:nowrap;font:400 15px/1 var(--mono);color:var(--line)}
.toc a i::before{content:var(--dots)}
.toc a::after{content:counter(tc,decimal-leading-zero);font:700 14px/1 var(--mono);color:var(--pri)}
.toc a:hover{background:var(--hl)}
.btake{margin-top:36px;padding-top:30px}
.btake .ticks{margin-top:0}
.btake .ticks li:first-child{margin-top:0}

/* ---------- faq ---------- */
.faq details::before{content:var(--dash)}
.faq details:first-child::before{display:none}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:14px 0 14px 5ch;min-height:48px;font:700 17.5px/1.4 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"[+]";position:absolute;left:0;top:14px;font:700 15px/1.6 var(--mono);color:var(--pri)}
.faq details[open] summary::before{content:"[-]"}
.faq summary:hover{background:var(--hl)}
.faq details p{padding:0 0 20px 5ch;color:var(--mut)}

/* ---------- closing / footer ---------- */
.closing{margin-top:84px}
.bdbl{padding:48px 28px 46px;text-align:center}
.bdbl h2{font:400 clamp(28px,5.6vw,38px)/1.12 var(--disp);letter-spacing:-.03em}
.bdbl p{color:var(--mut);margin-top:12px}
.bdbl .acts2{justify-content:center;margin-top:26px}
main>.wave.sm{margin-top:70px}
.ft{margin-top:84px;padding-bottom:44px}
.ft .col{position:relative}
.ft .col::before{content:"+" var(--eq);margin-bottom:22px}
.ft1{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px}
.fl{list-style:none;display:flex;flex-wrap:wrap;margin-top:22px;font:400 13.5px/1.4 var(--mono)}
.fl li:not(:last-child)::after{content:"|";margin:0 1.2ch;color:var(--line)}
.fl a{display:inline-block;padding:13px 0;color:var(--ink)}
.legal{font:400 12.5px/1.6 var(--mono);color:var(--mut);margin-top:14px}
.nf{padding:40px 0 60px}

/* ---------- mobile ---------- */
@media (max-width:760px){
  body{font-size:16.5px}
  .tag{display:none}
  .hd{padding-top:12px}
  .hd1{gap:8px}
  .logo{font-size:22px;gap:8px}
  .hcta{min-height:44px;font-size:13px;padding:0 1.1ch;box-shadow:3px 3px 0 var(--ink)}
  .hcta::before,.hcta::after{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:44px;margin-left:4px;background:none;border:0;border-radius:0;
    color:var(--ink);font:700 16px/1 var(--mono);cursor:pointer;padding:0}
  .burger::before{content:"[=]"}
  .burger span{display:none}
  .nav{display:none;flex-direction:column;margin-top:10px;padding:15px 0}
  .nav.open{display:flex}
  .nav a{justify-content:flex-start;padding-left:3ch;flex:none}
  .nav a::before{content:">";left:.8ch}
  .nav a:last-child::after{display:none}
  .nav a[aria-current],.nav a:hover{background-size:100% 34px}
  .nav a[aria-current]::before{color:#ffffff}
  main{padding-top:20px}
  .hero{padding-top:14px}
  .wave{height:104px;margin:20px 0 18px}
  .wave i{height:calc(var(--n)*11px)}
  .lead{font-size:17.5px}
  .bx{padding:32px 20px 28px}
  .bform,.bcalc{padding:38px 20px 30px}
  .bcode{padding:36px 14px 28px}
  .bxt{left:18px}
  .sh::before{left:18px}
  .feats,.uses,.calc{grid-template-columns:1fr}
  .feats>div:nth-child(2)::before{display:block}
  .feats>div:nth-child(2){padding-top:30px}
  .sec{margin-top:60px}
  .steps li{padding-left:60px}
  .facts dd{font-size:20px}
  .prose.long{font-size:17px}
  .acts2 .btn{flex:1 1 auto}
  pre.code{font-size:12.5px;padding:16px}
}
@media (max-width:380px){.hd .mark{display:none}.col{padding:0 14px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
.top+.bx{margin-top:30px}