/* oss.kodte.com — песочница sudarev_home */
.hero{padding:18px 0 8px}
.hero h1{font-size:clamp(34px,6vw,58px);letter-spacing:-.03em;margin:10px 0 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}
.hero .lead{max-width:760px;font-size:17px;line-height:1.55;margin:0 0 16px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.inst{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 18px;line-height:1.5}
.small{font-size:13px}
.ok-t{color:var(--ok)}.bad-t{color:var(--bad)}
.play{display:grid;grid-template-columns:minmax(260px,1fr) 330px minmax(260px,1fr);gap:18px;align-items:start}
.ctl input:not([type=checkbox]),.ctl textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.ctl textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;resize:vertical}
.ctl .field label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.chk{display:flex;gap:8px;align-items:center;margin:8px 0;font-size:14px;cursor:pointer}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.code pre{margin:0 0 12px;white-space:pre-wrap;word-break:break-word;line-height:1.55;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px}
.code .s{color:var(--mala-2)}
.log{margin:0;padding-left:18px;line-height:1.7;font-size:12.5px;word-break:break-all}
/* телефон */
.phone{width:300px;justify-self:center;aspect-ratio:9/19.2;border-radius:42px;background:#0a0d0c;padding:11px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.phone .scr{position:relative;height:100%;border-radius:32px;overflow:hidden;background:#f6f3ea;color:#14201c;display:flex;flex-direction:column}
.appbar{padding:40px 18px 12px;display:flex;gap:10px;align-items:center;font-size:17px;border-bottom:1px solid #e4dfd1}
.appbar span{font-size:26px;line-height:1;color:#0f5a47}
.phone .body{flex:1;padding:18px;display:flex;flex-direction:column;gap:12px}
.tile{height:120px;border-radius:20px;background:linear-gradient(135deg,#0f5a47,#0a3d31);display:grid;place-items:center;font-size:54px}
.ph{height:14px;border-radius:7px;background:#e4dfd1}.ph.short{width:60%}.ph.big{height:150px;border-radius:18px}
.playb{margin-top:auto;background:#c9a24a;color:#1a1405;border:0;border-radius:14px;padding:13px;font-weight:600;font:inherit}
.kb{height:38%;background:#d7d3c8;border-top:1px solid #c6c1b4;background-image:repeating-linear-gradient(90deg,transparent 0 6px,#f6f3ea 6px 30px,transparent 30px 32px),repeating-linear-gradient(0deg,transparent 0 10px,transparent 10px 44px);background-size:100% 44px;background-position:0 12px}
.madeby{display:block;text-align:center;font-size:11.5px;color:#6a716d;padding:6px 10px 22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.madeby[href]{text-decoration:underline;text-decoration-color:#c9a24a;text-underline-offset:3px}
/* главный экран телефона */
.phone.home .scr{background:radial-gradient(120% 80% at 20% 0%,#2f8f72,#0b1512 70%);color:#fff}
.grid-ic{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 8px;padding:52px 16px 0;transition:filter .3s}
.ic{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ic i{width:56px;height:56px;border-radius:15px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:27px;font-style:normal}
.ic.me{cursor:pointer}.ic.me i{background:linear-gradient(135deg,#e7c977,#c9a24a);box-shadow:0 0 0 3px rgba(231,201,119,.35);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(231,201,119,.12)}}
.phone.blur .grid-ic .ic:not(.me){filter:blur(5px);opacity:.5}
.qmenu{position:absolute;left:14px;top:124px;width:230px;background:rgba(246,243,234,.96);color:#14201c;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.qmenu button{display:flex;justify-content:space-between;width:100%;border:0;background:none;padding:12px 15px;font:inherit;font-size:15px;color:inherit;cursor:pointer;border-bottom:1px solid #e1dccf}
.qmenu button:last-child{border-bottom:0}.qmenu button:hover{background:#ebe5d5}
.qmenu i{font-style:normal;color:#0f5a47}
.hint{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:12px;opacity:.75}
/* виджеты */
.wprev{justify-self:center;width:100%;max-width:340px}
.wall{border-radius:28px;padding:20px;background:radial-gradient(120% 80% at 20% 0%,#2f8f72,#0b1512 70%);display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.wg{background:rgba(250,248,241,.95);color:#14201c;border-radius:22px;padding:14px;cursor:pointer}
.wg.s{aspect-ratio:1;display:flex;flex-direction:column}
.wg.s .big{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:auto;color:#0f5a47}
.wg.s span{font-size:12px;color:#6a716d}.wg em{font-style:normal;font-size:11px;margin-top:4px;color:#6a716d}.wg em.go{color:#9a7419;font-weight:600}
.wg.m{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;gap:12px;cursor:default}
.wl b{display:block;margin-bottom:6px}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px dashed #e1dccf}.kv span{color:#6a716d}.kv i{font-style:normal;font-weight:600}
.wr{display:flex;flex-direction:column;gap:8px}
.wr button{border:0;border-radius:14px;padding:9px;font:inherit;font-size:12px;cursor:pointer}
.rw{background:#ebe5d5;color:#14201c}.rw.go{background:#c9a24a;color:#1a1405}
.pl{background:#0f5a47;color:#fff;font-weight:600;font-size:14px!important}
/* пакет */
.files{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.flist{list-style:none;margin:0 0 16px;padding:0}.flist li{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.flist a{color:var(--mala-2);font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.api{width:100%;border-collapse:collapse}.api td{padding:6px 8px 6px 0;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
.ticks{margin:0;padding:0;list-style:none}.ticks li{padding:7px 0 7px 26px;position:relative;line-height:1.45}.ticks li::before{content:'✓';position:absolute;left:2px;color:var(--ok);font-weight:700}
.readme{white-space:pre-wrap;word-break:break-word;max-height:560px;overflow:auto;line-height:1.5;margin:0}
@media (max-width:1100px){.play{grid-template-columns:1fr 330px}.play .code{grid-column:1/-1}}
@media (max-width:720px){.play{grid-template-columns:1fr}.phone{width:min(290px,86vw)}.files{grid-template-columns:1fr}.play .code{grid-column:auto}}