html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 "Bricolage Grotesque",system-ui,sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.app{max-width:480px;margin:0 auto;padding:24px 24px 110px;position:relative;overflow-x:hidden}
.mono{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--mute)}
h1{font:900 clamp(32px,9vw,44px)/1.1 Doto,"JetBrains Mono",monospace;text-transform:uppercase;margin:6px 0 12px}
h2{font:900 clamp(24px,6vw,32px)/1.15 Doto,"JetBrains Mono",monospace;text-transform:uppercase;margin:2px 0 6px}
h3{font-size:18px;margin:24px 0 8px}
input,textarea{width:100%;font:16px "Bricolage Grotesque",sans-serif;padding:13px 15px;border:0;border-radius:16px;background:var(--card);color:var(--ink)}
textarea{min-height:100px;resize:vertical}
code{font-family:"JetBrains Mono",monospace;font-size:.84em;background:var(--card);padding:1px 7px;border-radius:6px}
figure{margin:0 0 20px}
figure>div{border-radius:20px;overflow:hidden}
figcaption{padding:8px 4px 0;color:var(--mute);font-family:"JetBrains Mono",monospace;font-size:12.5px}
label.mono{display:block;margin:20px 0 8px}
/* Responsif: mobile-first di atas; tablet ke atas melebarkan konten */
@media(min-width:700px){.app{max-width:720px;padding:24px 24px 120px}}
@media(min-width:1024px){.app{max-width:1024px;padding:32px 32px 120px}}