*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--h-bg);color:var(--h-text);font:var(--h-body)/var(--h-leading-body) var(--h-font)}
header,main,footer{width:min(100%,960px);margin-inline:auto;padding-inline:var(--h-space-8)}
header{padding-block:var(--h-space-8)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--h-accent);outline-offset:4px}
.brand{display:inline-flex;align-items:center;gap:var(--h-space-2);font-size:var(--h-subvalue);font-weight:var(--h-semibold)}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--h-accent)}
main{flex:1;padding-block:var(--h-space-12)}
h1{font-size:var(--h-value);line-height:var(--h-leading-value);font-weight:var(--h-semibold);margin:0 0 var(--h-space-4)}
.intro{color:var(--h-muted);font-size:var(--h-section);line-height:var(--h-leading-section);margin:0 0 var(--h-space-12)}
.app{display:flex;align-items:center;gap:var(--h-space-6);padding:var(--h-space-8);border:1px solid var(--h-line);border-radius:var(--h-radius-panel);background:var(--h-surface)}
.app-icon{flex-shrink:0;display:grid;place-items:center;width:var(--h-space-12);height:var(--h-space-12);background:var(--h-tint);color:var(--h-accent);border-radius:var(--h-radius-panel);font-size:var(--h-value);line-height:1;font-weight:var(--h-semibold)}
.app-description{flex:1;min-width:0}
h2{margin:0;font-size:var(--h-title);line-height:var(--h-leading-title);font-weight:var(--h-semibold)}
h2 span{font-size:var(--h-body);font-weight:var(--h-regular);color:var(--h-muted);margin-left:var(--h-space-2)}
.app p{margin:var(--h-space-2) 0 var(--h-space-4);color:var(--h-muted)}
ul{display:flex;flex-wrap:wrap;gap:var(--h-space-3);list-style:none;padding:0;margin:0;font-size:var(--h-caption);color:var(--h-muted)}
li+li{border-left:1px solid var(--h-line);padding-left:var(--h-space-3)}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--h-space-3);min-height:var(--h-control);padding:var(--h-space-2) var(--h-space-4);border-radius:var(--h-radius-control);background:var(--h-accent);color:white;font-weight:var(--h-medium);white-space:nowrap}
.primary:hover{background:var(--h-accent-hover)}
footer{display:flex;flex-wrap:wrap;gap:var(--h-space-4);padding-block:var(--h-space-6);font-size:var(--h-caption);color:var(--h-muted)}
footer a:hover{text-decoration:underline}
@media(max-width:600px){header,main,footer{padding-inline:var(--h-space-4)}main{padding-block:var(--h-space-8)}h1{font-size:var(--h-title);line-height:var(--h-leading-title)}.app{align-items:flex-start;flex-wrap:wrap;padding:var(--h-space-6);gap:var(--h-space-4)}.app-description{flex-basis:calc(100% - 64px)}.primary{width:100%;min-height:44px}.intro{margin-bottom:var(--h-space-8)}}