:root{
--ink:#2a1a0c; --wood:#b47843; --wood-dk:#6c421d; --wood-lt:#e2b57c; --paper:#f8ecd2; --paper-dk:#e3c896;
--ribbon:#d23a28; --leaf:#5ea835; --bad:#d2492f;
--display:"Nunito", "Segoe UI", system-ui, sans-serif;
color-scheme:light;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:var(--display);color:var(--ink);background:#9fd0ee;
display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:56px 16px 40px;overflow-x:hidden}
.sky{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#5aa5e6 0,#9fd0ee 45%,#d3e8d6 70%,#cfe6c4 100%);overflow:hidden}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.plank{
background:
repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 37px, rgba(70,38,12,.10) 37px 39px, rgba(0,0,0,0) 39px 83px),
linear-gradient(180deg, var(--wood-lt) 0, var(--wood) 16%, var(--wood) 84%, #94602f 100%);
border:2px solid var(--wood-dk);border-radius:18px;color:#fffaf0;
box-shadow:0 4px 0 var(--wood-dk), 0 18px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.card{position:relative;width:min(420px,100%);padding:38px 16px 16px}
.ribbon{position:absolute;left:50%;top:-24px;transform:translateX(-50%);white-space:nowrap;
background:linear-gradient(180deg,#e9563f,var(--ribbon) 60%,#a92a1a);color:#fff;border:2px solid #7d2015;border-radius:10px;
padding:9px 30px;font:900 26px/1 var(--display);letter-spacing:.02em;text-shadow:0 2px 0 #7d2015;box-shadow:0 4px 0 #7d2015,0 8px 16px rgba(0,0,0,.25)}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:10px;width:20px;height:30px;background:#a92a1a;border:2px solid #7d2015;z-index:-1}
.ribbon::before{left:-14px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}
.ribbon::after{right:-14px;clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}
.tabs{display:flex;gap:6px;margin:0 6px}
.tab{flex:1;text-align:center;padding:9px 6px 8px;border-radius:12px 12px 0 0;text-decoration:none;color:#fff6dc;
font:900 15px/1 var(--display);background:rgba(60,30,8,.28);border:2px solid var(--wood-dk);border-bottom:0;text-shadow:0 1px 0 rgba(60,30,8,.6)}
.tab.on{background:var(--paper);color:var(--ink);text-shadow:none}
.paper{background:var(--paper);border:2px solid var(--wood-dk);border-radius:14px;padding:18px 18px 14px;color:var(--ink);
box-shadow:inset 0 2px 0 rgba(255,255,255,.6)}
form{display:grid;gap:12px}
label{display:grid;gap:5px;font:800 14px/1.2 var(--display)}
label small{font-weight:700;color:#7a5a3a}
input[type=text],input[type=email],input[type=password],input:not([type]){width:100%;padding:11px 12px;border-radius:10px;border:2px solid #b08a5a;
background:#fffaf0;font:700 16px/1.2 var(--display);color:var(--ink)}
input:focus{outline:none;border-color:#2f7d64;box-shadow:0 0 0 3px rgba(47,125,100,.25)}
.chk{display:flex;align-items:center;gap:8px;font-weight:700}
.chk input{width:18px;height:18px;accent-color:#2f7d64}
.btn{margin-top:4px;padding:13px 16px;border-radius:12px;border:2px solid #2f6b19;cursor:pointer;
background:linear-gradient(180deg,#9ad860,var(--leaf) 60%,#468a22);color:#fff;font:900 19px/1 var(--display);
text-shadow:0 1px 0 #2f6b19;box-shadow:0 4px 0 #2f6b19}
.btn:hover{filter:brightness(1.05)}
.btn:active{translate:0 2px;box-shadow:0 2px 0 #2f6b19}
.err{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#fbe2dc;border:2px solid var(--bad);color:#7a1d0e;font:800 14px/1.3 var(--display)}
.note{margin:14px 0 0;text-align:center;font:700 14px/1.4 var(--display);color:#6b4a2a}
.note a{color:#2055b1;font-weight:900}
body{align-content:center;gap:18px}
.card.wide{width:min(760px,100%)}
.lead{margin:0 0 12px;font:700 15px/1.45 var(--display)}
.ok{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#e3f4d2;border:2px solid #2f6b19;color:#1f4a0f;font:800 14px/1.3 var(--display)}
.paper h3{margin:20px 0 10px;font:900 17px/1.2 var(--display);color:#5a3612}
.paper h3:first-child{margin-top:0}
.chk span{line-height:1.35}
.chk a,.lead a{color:#2055b1;font-weight:900}
.me{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 6px;font:700 15px/1.3 var(--display)}
.me dt{color:#7a5a3a}
.me dd{margin:0;font-weight:900;overflow-wrap:anywhere}
.btn.danger{background:linear-gradient(180deg,#f08a6e,var(--bad) 60%,#a8321c);border-color:#7d2414;box-shadow:0 4px 0 #7d2414;text-shadow:0 1px 0 #7d2414;font-size:17px}
.btn.danger:active{box-shadow:0 2px 0 #7d2414}
.foot{justify-self:center;text-align:center;font:800 13px/1.4 var(--display);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);
padding:5px 14px;border-radius:999px;background:rgba(25,50,12,.45)}
.foot a{color:#fff}
.doc{font:700 15px/1.55 var(--display);padding:20px 22px 16px}
.doc h2{margin:26px 0 2px;font:900 22px/1.2 var(--display);color:#3d2408;scroll-margin-top:16px}
.doc h2:first-of-type{margin-top:6px}
.doc h3{margin:18px 0 6px}
.doc p,.doc ul{margin:0 0 10px}
.doc ul{padding-left:22px}
.doc li{margin:3px 0}
.doc a{color:#2055b1;font-weight:900}
.doc code{font:800 13px/1 ui-monospace,Consolas,monospace;background:#efdcb7;padding:2px 5px;border-radius:5px}
.doc .muted{color:#7a5a3a;font-size:13px}
.toc{text-align:center;font-weight:900;padding-bottom:10px;border-bottom:2px dashed #d8bf8f}
@media (max-width:520px){.doc{padding:16px 14px 12px;font-size:14.5px}.doc h2{font-size:19px}}
.card.wide .tabs{max-width:460px;margin:0 auto}
@media (max-width:520px){ .card.wide .tabs .tab{font-size:13px;padding:8px 4px 7px} }
.doc .toc{text-align:center;font-weight:800;margin:0 0 14px}
.doc h2.sec{margin-top:34px;padding-top:22px;border-top:2px dashed rgba(90,58,28,.25)}