:root { --paper:#f1eddf; --light:#fffdf5; --ink:#11110f; --blue:#1645a3; --red:#e6472e; --yellow:#f5c51b; --muted:#5e5b53; --line:3px solid var(--ink); --display:"Arial Black","Helvetica Neue",Arial,sans-serif; --body:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; }
* { box-sizing:border-box; }
html { min-width:320px; scroll-behavior:smooth; }
body { min-width:320px; margin:0; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--body); }
a { color:inherit; } a:focus-visible { outline:4px solid var(--yellow); outline-offset:4px; }
.topbar, main, footer { width:min(1320px,100%); margin-inline:auto; }
.topbar { min-height:72px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:24px; padding:9px 12px; border:var(--line); background:var(--light); box-shadow:7px 7px 0 var(--ink); }
.topbar .brand { min-height:48px; display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img { border:2px solid var(--ink); }
.brand strong { font-family:var(--display); font-size:16px; line-height:.78; letter-spacing:-.06em; }
.topbar > span { font-size:9px; font-weight:900; letter-spacing:.12em; }
.topbar > a:last-child { min-height:44px; display:inline-flex; align-items:center; padding:0 12px; border:2px solid var(--ink); font-size:10px; font-weight:900; text-decoration:none; text-transform:uppercase; }
.hero { min-height:560px; display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:60px; padding:clamp(48px,9vw,120px) 4px 56px; border-bottom:var(--line); }
.hero > p, .label { margin:0; color:var(--red); font-size:10px; font-weight:950; letter-spacing:.14em; }
.hero > p { grid-column:1/-1; }
h1,h2 { margin:0; font-family:var(--display); font-weight:950; letter-spacing:-.075em; }
h1 { font-size:clamp(64px,11vw,148px); line-height:.78; }
.hero > div p { margin:0; font-size:clamp(18px,2.2vw,28px); font-weight:700; line-height:1.32; }
.hero > div a, .back-button { min-height:50px; width:fit-content; display:inline-flex; align-items:center; margin-top:28px; padding:0 15px; border:var(--line); background:var(--yellow); box-shadow:5px 5px 0 var(--ink); font-size:11px; font-weight:950; text-decoration:none; text-transform:uppercase; }
.principles,.recipe,.ai-brief,.checks,.contribution { margin-top:clamp(80px,12vw,160px); }
.principles { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; }
.principles h2,.recipe h2,.ai-brief h2,.checks h2,.contribution h2 { margin-top:14px; font-size:clamp(42px,6vw,82px); line-height:.88; }
.principles ol { display:grid; grid-template-columns:repeat(2,1fr); margin:0; padding:0; border-top:var(--line); border-left:var(--line); list-style:none; }
.principles li { min-width:0; padding:20px; border-right:var(--line); border-bottom:var(--line); background:var(--light); }
.principles li strong,.template span { font-family:var(--display); color:var(--blue); font-size:15px; }
.principles h3,.template h3 { margin:34px 0 10px; font-family:var(--display); font-size:19px; letter-spacing:-.04em; }
.principles li p,.template p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.recipe header,.checks header { max-width:1000px; }
.template { display:grid; grid-template-columns:repeat(3,1fr); margin-top:44px; border-top:var(--line); border-left:var(--line); }
.template section { min-width:0; min-height:280px; padding:24px; border-right:var(--line); border-bottom:var(--line); background:var(--light); }
.template section:nth-child(2),.template section:nth-child(4),.template section:nth-child(6) { background:var(--yellow); }
.template section:nth-child(2) p,.template section:nth-child(4) p,.template section:nth-child(6) p { color:var(--ink); }
code { font-size:.9em; }
.ai-brief { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; padding:clamp(28px,5vw,64px); border:var(--line); background:var(--blue); box-shadow:8px 8px 0 var(--ink); color:white; }
.ai-brief .label { color:var(--yellow); }
.ai-brief blockquote { margin:0; padding:clamp(24px,4vw,48px); border:3px solid white; background:var(--light); box-shadow:7px 7px 0 white; color:var(--ink); }
.ai-brief blockquote p { margin:0; font-size:clamp(17px,2vw,24px); font-weight:700; line-height:1.48; }
.checks > div { display:grid; grid-template-columns:repeat(4,1fr); margin-top:42px; border-top:var(--line); border-left:var(--line); }
.checks article { padding:20px; border-right:var(--line); border-bottom:var(--line); background:var(--light); }
.checks article strong { font-family:var(--display); color:var(--blue); }
.checks article p { margin:24px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
pre { margin:28px 0 0; padding:22px; overflow:auto; border:var(--line); background:var(--ink); color:var(--light); font-size:12px; line-height:1.7; }
.contribution { padding:clamp(30px,6vw,80px); border:var(--line); background:var(--red); box-shadow:9px 9px 0 var(--ink); }
.contribution .label { color:var(--ink); }
.contribution h2 { max-width:1000px; color:var(--light); }
.contribution > p:not(.label) { max-width:880px; margin:28px 0 0; font-size:clamp(16px,2vw,22px); font-weight:650; line-height:1.5; }
.contribution > p a { font-weight:900; }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:clamp(70px,10vw,130px); padding:28px; background:var(--ink); color:var(--light); }
footer strong { font-family:var(--display); letter-spacing:-.05em; } footer span { color:#c7c1b4; font-size:11px; font-weight:700; }
@media (max-width:780px) { .topbar { grid-template-columns:1fr auto; } .topbar > span { display:none; } .hero,.principles,.ai-brief { grid-template-columns:1fr; } .hero { min-height:0; gap:30px; } .principles { gap:32px; } .template { grid-template-columns:repeat(2,1fr); } .checks > div { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .topbar > a:last-child { font-size:0; padding:0 10px; } .topbar > a:last-child::after { content:"ИГРЫ"; font-size:9px; } .template,.principles ol,.checks > div { grid-template-columns:1fr; } .template section { min-height:0; } footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }

.link-icon { width:1em; height:1em; vertical-align:-0.12em; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }