:root{color-scheme:dark;--bg:#101012;--s1:#18181a;--s2:#1b1b1d;--s3:#1c1c1e;--s4:#222225;--s5:#2c2c2e;--t2:#8e8e93;--t3:#6c6c70;--ac:#0088ff;--sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0 auto;max-width:760px;padding:0 20px calc(92px + env(safe-area-inset-bottom,0px));background:var(--bg);color:#fff;font:15px/1.4 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
button{font-family:var(--sans)}

/* верхняя панель */
.top{display:flex;align-items:center;gap:8px;padding:calc(16px + env(safe-area-inset-top,0px)) 0 4px}
.btn{flex:none;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--s2);color:#e5e5ea;cursor:pointer;transition:background-color .2s,color .2s,transform .12s}
.btn:hover{background:#242427;color:#fff}.btn:active{transform:scale(.95)}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sp{flex:1}
.chip{display:flex;align-items:center;gap:6px;height:42px;padding:0 16px;border:0;border-radius:999px;background:var(--s3);color:#fff;font:500 14px var(--sans);cursor:pointer;transition:background-color .2s,transform .12s}
.chip:hover{background:var(--s4)}.chip:active{transform:scale(.97)}
.chip b{font-weight:600;color:var(--ac)}
.btn:focus-visible,.chip:focus-visible,.tile:focus-visible,.nav button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* заголовки секций */
h2{margin:var(--sp-5) 0 var(--sp-3);color:#007aff;font:700 13.5px var(--sans);letter-spacing:.04em;text-transform:uppercase}

/* плитки */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-start;aspect-ratio:1/1;padding:var(--sp-3);overflow:hidden;isolation:isolate;border:0;border-radius:20px;background:var(--s1);color:#fff;text-align:left;cursor:pointer;transition:background-color .2s,transform .12s}
.tile:hover{background:#1f1f22}.tile:active{transform:scale(.97)}
.t{display:block;font:600 clamp(15px,4.7vw,17px)/1.2 var(--sans);letter-spacing:-.01em}
.s{display:block;margin-top:3px;color:var(--t3);font:500 12px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* главная плитка — акцентная */
/* 3D-блоки в плитках */
.tile::before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 74% 74%,var(--glow,transparent),transparent 62%)}
.tile.main::before{background:radial-gradient(circle at 74% 74%,rgba(255,255,255,.28),transparent 62%)}
.hi{margin:var(--sp-4) 0 0}
.hi h1{margin:0;font:700 28px/1.15 var(--sans);letter-spacing:-.02em}
.hi p{margin:var(--sp-2) 0 0;color:var(--t2);font-size:15px}
.tile.main{background:var(--ac)}
.tile.main:hover{background:#0077e6}
.tile.main .s{color:rgba(255,255,255,.75)}

.bd{position:absolute;bottom:12px;left:12px;z-index:2;display:flex;align-items:center;height:20px;padding:0 var(--sp-2);border-radius:999px;background:var(--s5);color:#d1d1d6;font:600 10.5px var(--sans);pointer-events:none}
.bd.new{background:var(--ac);color:#fff}

/* нижняя навигация */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--bg);border-top:1px solid rgba(255,255,255,.06);padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom,0px))}
.nav-in{display:flex;max-width:760px;margin:0 auto}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border:0;border-radius:12px;background:none;color:var(--t3);font:500 11.5px var(--sans);cursor:pointer;transition:color .2s}
.nav button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nav button:hover{color:var(--t2)}
.nav button.on{color:var(--ac)}

#toast{position:fixed;z-index:30;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translate(-50%,-80px);background:#fff;color:#000;padding:var(--sp-2) var(--sp-4);border-radius:20px;font-weight:500;white-space:nowrap;transition:transform .25s;pointer-events:none}
#toast.on{transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Плитки без декоративного свечения. */
.tile::before,.tile.main::before{background:none}
body{padding-bottom:32px}

/* Широкая плитка создания занимает место двух обычных плиток. */
#g1 .tile.main{grid-column:span 2;aspect-ratio:2.05/1}
@media(min-width:900px){
  .desktop-home #g1 .tile.main{aspect-ratio:2.35/1}
  .desktop-home #g1 [data-go="tpl"]{grid-row:2;grid-column:1}
}