@layer base,layout,components;
@layer base{:root{color-scheme:light;--ink:#20332d;--paper:#f6f5f0;--sub:#52645b;--line:#ccd4ca;--accent:#245b45;--danger:#943a30}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 ui-sans-serif,system-ui,sans-serif}
a{color:var(--accent);text-underline-offset:.2em}button,input{font:inherit}button,a,input{touch-action:manipulation}
:focus-visible{outline:3px solid #a7531e;outline-offset:4px}::selection{background:#cfdfcb;color:#122b20}h1{font-size:clamp(2rem,5vw,3rem);line-height:1.15;letter-spacing:-.035em;margin:0 0 1.25rem}h2{font-size:1.1rem;margin:2rem 0 .5rem}
p{max-width:65ch}pre,code{font:14px/1.65 ui-monospace,monospace}pre{background:#e9ede5;border:1px solid var(--line);padding:1.2rem;white-space:pre-wrap;overflow-wrap:anywhere;max-height:45vh;overflow:auto}dl{display:grid;grid-template-columns:7rem 1fr;gap:.55rem 1rem}dt{color:var(--sub)}dd{margin:0;overflow-wrap:anywhere}input{padding:.75rem;border:1px solid var(--sub);background:white;width:100%;max-width:32rem;caret-color:var(--accent)}label{display:block;margin-bottom:.5rem}}
@layer layout{header,footer,main{max-width:850px;margin:auto;padding:1.5rem 2rem}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}header a{text-decoration:none;font-weight:700;font-size:1.2rem}header a span{color:var(--sub);padding:0 .3rem}.private,footer{font-size:.85rem;color:var(--sub)}main{padding-top:clamp(2.5rem,8vh,5rem);min-height:70vh}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}footer{border-top:1px solid var(--line)}@media(max-width:540px){header,main,footer{padding-left:1.2rem;padding-right:1.2rem}.private{font-size:.75rem}dl{grid-template-columns:1fr;gap:.15rem}dd{margin-bottom:.8rem}.actions button{flex:1}}}
@layer components{button{border:1px solid var(--accent);background:var(--accent);color:white;cursor:pointer;padding:.8rem 1.25rem;min-height:48px;border-radius:5px;font-weight:600}button:hover{background:#174632}button.secondary{background:transparent;color:var(--ink);border-color:var(--sub)}button.secondary:hover{background:#e6e9e1}button:disabled{opacity:.5;cursor:wait}#status{margin-top:1.5rem;color:var(--danger)}.hint{color:var(--sub)}.state{display:inline-block;padding:.2rem .65rem;background:#e5eada;color:#354b2a;border-radius:3px;font-size:.85rem;font-weight:600}}
