:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark;--bg:#0b1110;--panel:#151f1c;--text:#eef4f1;--muted:#abbcb4;--line:#354840;--accent:#9ce2bd;--button:#b2e7c8;--button-text:#102019;--error:#ffb9a9;--input:#0d1612}
*{box-sizing:border-box}body{margin:0;padding:calc(32px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));min-height:100vh;background:var(--bg);color:var(--text);line-height:1.55}main{max-width:520px;margin:0 auto}header{margin-bottom:28px}h1{margin:0 0 8px;font-size:clamp(1.65rem,6vw,2.2rem);line-height:1.2}h2{margin:0 0 16px;font-size:1.2rem}p{margin:0 0 14px}.note{color:var(--muted);font-size:.9rem}.language{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}.language label{font-size:.85rem;color:var(--muted)}section{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:6px}form{display:grid;gap:18px}label{display:grid;gap:7px;font-size:.95rem}input,select,button{font:inherit;max-width:100%;border-radius:3px}input,select{width:100%;min-width:0;background:var(--input);color:var(--text);border:1px solid var(--line);padding:11px 12px}select{width:auto}input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{cursor:pointer;padding:11px 16px;border:1px solid transparent;background:var(--button);color:var(--button-text);font-weight:650}button.secondary{background:transparent;color:var(--text);border-color:var(--line)}button:disabled,input:disabled,select:disabled{opacity:.6;cursor:wait}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.tabs button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}small{color:var(--muted);font-size:.8rem;line-height:1.45}.message{min-height:1.6em;margin:18px 0 0;font-size:.9rem;color:var(--error);white-space:pre-wrap;overflow-wrap:anywhere}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions button{flex:1}footer{margin-top:22px}footer p{font-size:.8rem;color:var(--muted)}[hidden]{display:none!important}
@media(prefers-color-scheme:light){:root{color-scheme:light;--bg:#edf2ef;--panel:#fff;--text:#16261e;--muted:#52665a;--line:#bac9c0;--accent:#176343;--button:#185a3d;--button-text:#fff;--error:#9b3022;--input:#f6f9f7}}
@media(max-width:420px){section{padding:20px 16px}body{padding-top:24px}.tabs button{flex:1}}