:root{
  --paper:#ffffff; --ink:#000000; --graphite:#5e5e5e; --dim:#9a9a9a; --led:#1fbf4a; --warn:#a40000;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --beat: 1.1538s; /* 52 de bătăi pe minut */
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--serif);font-size:17px;line-height:1.55;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.25rem}

.top{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0 .6rem}
.brand{font-family:var(--mono);font-weight:700;font-size:1.35rem;letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:.55rem}
.led{width:.55rem;height:.55rem;border-radius:50%;background:var(--led);animation:beat var(--beat) infinite}
@keyframes beat{0%,100%{opacity:.25}12%{opacity:1}40%{opacity:.35}}
.langs{font-family:var(--mono);font-size:.95rem;display:flex;gap:.8rem}
.langs a{text-decoration:none;color:var(--graphite)}
.langs a[aria-current]{color:var(--ink);text-decoration:underline}
.door{font-size:.95rem;color:var(--graphite);margin:0 0 2.2rem}
.door a{color:var(--ink)}

h1{font-weight:normal;font-style:italic;font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.15;margin:0 0 1.2rem;max-width:18ch}
.lead{max-width:34rem;margin:0 0 1.6rem}

.reader{max-width:26rem}
.card{border:1px solid var(--ink);min-height:min(78vh,38rem);padding:1.6rem 1.4rem 1.2rem;display:flex;flex-direction:column;touch-action:pan-y;user-select:none}
.page h2{font-family:var(--mono);font-weight:700;font-size:1rem;margin:0 0 1rem}
.page p{margin:0 0 .8rem;font-size:.98rem}
.page .proc{font-family:var(--mono);font-size:.86rem;line-height:1.45;color:var(--graphite);margin-top:1rem}
.page .source{font-size:.82rem;color:var(--graphite);font-style:italic;margin-top:1rem}
.loading{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--mono);gap:.9rem}
.loading .word{letter-spacing:.35em;font-size:1rem}
.loading .bar{font-size:1.35rem;letter-spacing:.05em}
.controls{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1rem;font-family:var(--mono);font-size:.9rem;color:var(--graphite)}
.controls button{font:inherit;font-size:1.4rem;line-height:1;background:none;border:1px solid var(--ink);color:var(--ink);width:2.6rem;height:2.6rem;cursor:pointer}
.controls button:disabled{border-color:var(--dim);color:var(--dim);cursor:default}
.hint{font-size:.9rem;color:var(--graphite);margin:-.6rem 0 1.4rem;max-width:26rem}
.empty{font-family:var(--mono);font-size:.95rem;color:var(--graphite);border:1px dashed var(--dim);padding:1.4rem;max-width:26rem}

.btn{display:inline-block;font-family:var(--mono);font-weight:700;font-size:1rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--paper);color:var(--ink)}

/* formular */
form{max-width:34rem}
fieldset{border:none;padding:0;margin:0 0 1.6rem}
legend,label.lbl{display:block;font-family:var(--mono);font-weight:700;font-size:.95rem;margin:0 0 .45rem}
.radios{display:flex;gap:1.2rem;font-family:var(--mono)}
.radios label{display:flex;align-items:center;gap:.35rem;cursor:pointer}
input[type=text],input[type=email],textarea{width:100%;font:inherit;font-size:1rem;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:.6rem .7rem;border-radius:0}
textarea{min-height:11rem;resize:vertical}
.q{font-size:.98rem;margin:0 0 .5rem}
.help{font-size:.85rem;color:var(--graphite);margin:.35rem 0 0}
.counter{font-family:var(--mono);font-size:.85rem;color:var(--graphite);text-align:right;margin-top:.3rem}
.counter.over{color:var(--warn)}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem}
.check input{margin-top:.3rem}
input[type=radio],input[type=checkbox]{accent-color:var(--ink);width:1.05rem;height:1.05rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.errors{border:1px solid var(--warn);color:var(--warn);padding:.9rem 1rem;margin:0 0 1.6rem;max-width:34rem}
.errors ul{margin:0;padding-left:1.1rem}
.done{border:1px solid var(--ink);padding:1.4rem;max-width:34rem;font-family:var(--mono)}

section.block{margin-top:3.6rem}
section.block h2{font-weight:normal;font-style:italic;font-size:1.5rem;margin:0 0 .9rem}
.small{font-size:.88rem;color:var(--graphite)}
footer{margin:4rem 0 2.5rem;font-size:.9rem;color:var(--graphite)}
[hidden]{display:none!important}
@media (min-width:52rem){
  .wrap{max-width:60rem}
  .hero{display:grid;grid-template-columns:1fr 26rem;gap:3.5rem;align-items:start}
  .intro{position:sticky;top:2rem;padding-top:1rem}
  .hint{margin:0 0 1.4rem}
}
@media (prefers-reduced-motion:reduce){.led{animation:none;opacity:1}}