*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:#080a0c;color:#f4f0e8}
body{font:15px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC",sans-serif}
.shell{width:min(480px,100%);margin:0 auto;padding:20px max(16px,env(safe-area-inset-left))}
header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
h1{font-size:24px;line-height:1.1;margin:0}
a{color:#9fd2ff;text-decoration:none}
.panel{border:1px solid rgba(255,255,255,.12);background:#15191d;border-radius:8px;padding:16px}
.tabs,.method-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.method-row{grid-template-columns:1fr 1fr;margin-bottom:0}
button,input{font:inherit;border-radius:6px;border:1px solid rgba(255,255,255,.14)}
button{height:42px;background:#20262b;color:#f4f0e8;cursor:pointer}
.tab.active,.mini-tab.active,.primary{background:#f2c46d;border-color:#f2c46d;color:#15110a;font-weight:800}
form,label{display:grid;gap:8px}
form{gap:13px}
span{font-size:13px;color:#9aa5ad}
input{height:42px;padding:0 12px;background:#0d1114;color:#f4f0e8;width:100%}
.code-row{display:grid;grid-template-columns:1fr 118px;gap:10px;align-items:end}
.primary{width:100%}
output{color:#b8c2ca;min-height:1.4em}
@media (max-width:420px){.code-row{grid-template-columns:1fr}header{align-items:flex-start;flex-direction:column;gap:8px}}
@media (max-width:360px){.tabs{grid-template-columns:1fr}.tab{height:38px}}