/* Chomik site */
:root{
  --bg:#fffaf3; --card:#ffffff; --line:#f1e4d3; --ink:#3a2b1f; --soft:#7b6755; --on:#2e1f12;
  --c:#f28c28; --orange:#f28c28; --tan:#c08a55; --green:#4fa56a; --yellow:#eab72c; --blue:#4a90d9;
  --shadow:0 6px 22px rgba(120,80,30,.10);
  --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1c1713; --card:#272019; --line:#3b3128; --ink:#f7ebdc; --soft:#c2ad97; --on:#2e1f12;
  --shadow:0 6px 22px rgba(0,0,0,.35); color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scrollbar-gutter:stable}
body{margin:0; background:var(--bg); color:var(--ink); font:500 17px/1.65 "Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif; transition:background .3s,color .3s;
  background-image:radial-gradient(900px 420px at 85% -80px, color-mix(in srgb,var(--orange) 14%,transparent), transparent), radial-gradient(700px 380px at -5% 20%, color-mix(in srgb,var(--yellow) 12%,transparent), transparent)}
h1,h2,h3{font-weight:800; line-height:1.18; margin:0; letter-spacing:-.01em}
a{color:var(--blue)}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
svg.i{width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* nav */
.nav{position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:10px; height:66px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; font-size:21px}
.brand img{width:40px; height:40px; border-radius:12px; background:#fff}
.links{display:flex; gap:4px; margin-left:auto}
.links a{color:var(--soft); text-decoration:none; font-weight:700; padding:8px 14px; border-radius:12px; transition:transform .25s var(--spring), background .2s, color .2s}
.links a:hover{background:color-mix(in srgb,var(--orange) 14%,transparent); color:var(--ink); transform:scale(1.07)}
.links a[aria-current="page"]{background:color-mix(in srgb,var(--orange) 20%,transparent); color:var(--ink)}
.icon-btn{width:40px; height:40px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; transition:transform .25s var(--spring)}
.icon-btn:hover{transform:scale(1.1)} .icon-btn:active{transform:scale(.88)}
.moon{display:none} [data-theme="dark"] .moon{display:block} [data-theme="dark"] .sun{display:none}

/* buttons */
.btn{--c:var(--orange); display:inline-flex; align-items:center; gap:9px; font:800 16px "Nunito",system-ui,sans-serif; color:var(--on); background:var(--c); border:0; border-radius:14px; padding:12px 20px; text-decoration:none; cursor:pointer; position:relative;
  box-shadow:0 4px 0 color-mix(in srgb,var(--c) 62%,#000); transition:transform .28s var(--spring), box-shadow .2s}
.btn:hover{transform:scale(1.07)}
.btn:active{transform:scale(.92) translateY(3px); box-shadow:0 1px 0 color-mix(in srgb,var(--c) 62%,#000)}
.btn.green{--c:var(--green); color:#fff} .btn.blue{--c:var(--blue); color:#fff} .btn.yellow{--c:var(--yellow)} .btn.tan{--c:var(--tan); color:#fff}
.btn.sm{padding:8px 14px; font-size:15px; border-radius:12px}
.btn.squish{animation:squish .45s var(--spring)}
@keyframes squish{0%{transform:scale(.88,1.1)}50%{transform:scale(1.1,.92)}100%{transform:scale(1)}}
.spark{position:fixed; z-index:999; width:9px; height:9px; border-radius:50%; pointer-events:none; animation:spark .65s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0}}

/* hero */
.hero{display:grid; grid-template-columns:1.4fr .6fr; align-items:center; gap:36px; padding:64px 0 36px}
.hero h1{font-size:clamp(44px,7.5vw,76px); margin-bottom:14px}
.hero h1 em{font-style:normal; color:var(--orange)}
.hero p{font-size:19px; color:var(--soft); max-width:540px; margin:0}
.cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.logo{justify-self:center; width:min(330px,70vw); aspect-ratio:1; border-radius:50%; background:#fff; padding:14px; box-shadow:var(--shadow); border:3px solid color-mix(in srgb,var(--orange) 55%,transparent)}
.logo img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}

/* sections */
.section{padding:30px 0}
.section h2{font-size:clamp(26px,4vw,34px)}
.lead{color:var(--soft); margin:6px 0 22px}
.tiles{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.tile{display:flex; align-items:center; gap:14px; padding:16px; text-decoration:none; color:var(--ink); background:color-mix(in srgb,var(--c) 11%,var(--card)); border:1px solid color-mix(in srgb,var(--c) 30%,var(--line)); border-radius:18px; transition:transform .3s var(--spring), box-shadow .2s}
.tile:hover{transform:scale(1.05); box-shadow:var(--shadow)} .tile:active{transform:scale(.93)}
.ico{width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:14px; background:var(--c); color:#fff; font-size:22px}
.tile b{display:block; font-size:18px; line-height:1.2} .tile small{color:var(--soft); font-weight:700}
.panel{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:24px 26px; box-shadow:var(--shadow)}


/* search + commands */
.search{position:relative; flex:1 1 280px}
.search input{width:100%; font:700 18px "Nunito",sans-serif; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:16px; padding:14px 18px 14px 50px; outline:none; transition:border-color .2s, transform .3s var(--spring), box-shadow .2s}
.search input:focus{border-color:var(--orange); transform:scale(1.015); box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 20%,transparent)}
.search svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--soft); font-size:21px}
.chips{display:flex; gap:9px; flex-wrap:wrap; margin:16px 0}
.chip{display:inline-flex; align-items:center; gap:7px; font:800 14.5px "Nunito",sans-serif; color:var(--ink); background:color-mix(in srgb,var(--c) 10%,var(--card)); border:1px solid color-mix(in srgb,var(--c) 35%,var(--line)); border-radius:999px; padding:6px 14px 6px 10px; cursor:pointer; transition:transform .28s var(--spring), background .2s}
.chip:hover{transform:scale(1.08)} .chip:active{transform:scale(.9)}
.chip.on{background:var(--c); color:#fff; border-color:var(--c)}
.count{color:var(--soft); font-weight:800; margin:0 0 14px}
/*cmds*/.cmds{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cmd{display:flex; gap:14px; align-items:flex-start; background:color-mix(in srgb,var(--c) 9%,var(--card)); border:1px solid color-mix(in srgb,var(--c) 28%,var(--line)); border-left:5px solid var(--c); border-radius:18px; padding:14px 16px; cursor:pointer; min-height:96px; animation:pop .45s var(--spring) both; transition:transform .3s var(--spring), box-shadow .2s; text-align:left; font:inherit; color:inherit; width:100%}
.cmd:hover{transform:scale(1.03); box-shadow:var(--shadow)} .cmd:active{transform:scale(.97)}
.cmd .ico{width:42px; height:42px; font-size:21px}
.cmd .body{flex:1; min-width:0}
.cmd .top{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:3px}
.cmd code{font:800 17px "Nunito",sans-serif; color:var(--ink); background:none; padding:0; word-break:break-word}
.tag{font-size:11.5px; font-weight:800; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent); border-radius:999px; padding:2px 10px; white-space:nowrap}
.cmd p{margin:0; color:var(--soft); font-size:15px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.req{font-size:11px; font-weight:800; color:#fff; background:var(--c); border-radius:999px; padding:1px 9px}
.opt{font-size:11px; font-weight:800; color:var(--soft); background:color-mix(in srgb,var(--soft) 16%,transparent); border-radius:999px; padding:1px 9px}
.empty{grid-column:1/-1; text-align:center; padding:46px 10px; border:1px solid var(--line); border-radius:20px; background:var(--card)}
@keyframes pop{from{opacity:0; transform:scale(.88) translateY(10px)}to{opacity:1; transform:none}}

/* legal */
.doc{max-width:800px; margin:44px auto 10px}
.doc h1{font-size:clamp(34px,6vw,50px)}
.updated{display:inline-block; margin:10px 0 22px; font-weight:800; font-size:14px; color:var(--soft); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px 14px}
.sec{background:var(--card); border:1px solid var(--line); border-left:5px solid var(--c); border-radius:18px; padding:20px 24px; margin:16px 0; box-shadow:var(--shadow)}
.sec h2{display:flex; align-items:center; gap:12px; font-size:22px; margin-bottom:6px}
.sec h2 .ico{width:36px; height:36px; font-size:18px; border-radius:11px}
.sec p{margin:8px 0} .sec ul{margin:8px 0; padding-left:22px} .sec li{margin:5px 0}
.pagenav{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:28px 0}
code{background:color-mix(in srgb,var(--orange) 14%,transparent); border-radius:7px; padding:1px 7px; font-size:.92em}

/* footer */
footer{margin-top:56px; border-top:2px dashed var(--line); padding:26px 0 30px}
.foot{display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; align-items:center}
.foot nav{display:flex; gap:6px 18px; flex-wrap:wrap} .foot a{color:var(--ink); font-weight:700; text-decoration:none} .foot a:hover{color:var(--orange)}
.fine{color:var(--soft); font-size:14px}

@media (max-width:760px){
  .hero{grid-template-columns:1fr; text-align:center; padding-top:34px} .hero p{margin-inline:auto} .cta{justify-content:center} .logo{order:-1; width:200px}
  .links{display:none} .nav-in .icon-btn{margin-left:auto}
  .mobile-links{display:flex}
}
.mobile-links{display:none; gap:6px; overflow-x:auto; padding:0 0 10px}
.mobile-links a{flex:none; color:var(--soft); text-decoration:none; font-weight:800; font-size:15px; padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card)}
.mobile-links a[aria-current="page"]{background:var(--orange); color:var(--on); border-color:var(--orange)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important; transition:none !important}}
/* categories colours */
.c-roblox{--c:#f28c28} .c-reports{--c:#b9783f} .c-say{--c:#4a90d9} .c-fun{--c:#d99a0b} .c-games{--c:#4fa56a}
.c-image{--c:#2fa3a3} .c-tools{--c:#6a82cf} .c-social{--c:#e5683c} .c-notifier{--c:#8fb52f} .c-general{--c:#8c7f70} .c-other{--c:#8c7f70}

/* command details modal */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(12,8,4,.68); opacity:0; pointer-events:none; visibility:hidden; transition:opacity .2s, visibility 0s .2s}
.modal.show{opacity:1; pointer-events:auto; visibility:visible; transition:opacity .2s}
.sheet{width:min(560px,100%); max-height:min(86vh,720px); display:flex; flex-direction:column; overflow:hidden; background:var(--card); border:1px solid var(--line); border-top:6px solid var(--c); border-radius:26px; padding:0; box-shadow:0 12px 32px rgba(0,0,0,.35); transform:scale(.85) translateY(18px); transition:transform .32s var(--spring); will-change:transform; contain:layout paint}
.modal.show .sheet{transform:none}
.sheet-head{display:flex; gap:16px; align-items:center; padding:22px 24px 14px; flex:none; border-bottom:1px solid var(--line)}
.sheet-body{flex:1; min-height:0; overflow-y:auto; padding:16px 24px 24px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--c) 55%,transparent) transparent}
.sheet-body::-webkit-scrollbar{width:10px} .sheet-body::-webkit-scrollbar-track{background:transparent; margin:6px 0}
.sheet-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--c) 55%,transparent); border-radius:999px; border:3px solid var(--card); background-clip:padding-box}
.sheet-body::-webkit-scrollbar-thumb:hover{background:var(--c); background-clip:padding-box}
.sheet-head .ico{width:56px; height:56px; font-size:28px; border-radius:18px}
.sheet h2{font-size:26px; word-break:break-word}
.sheet .tag{display:inline-block; margin-top:4px}
.sheet .desc{color:var(--soft); margin:0 0 18px; font-size:17px}
.sheet h3{font-size:14px; letter-spacing:.07em; text-transform:uppercase; color:var(--soft); margin:18px 0 8px}
.usage{display:block; background:color-mix(in srgb,var(--c) 12%,var(--card)); border:1px solid color-mix(in srgb,var(--c) 30%,var(--line)); border-radius:14px; padding:12px 14px; font:700 15.5px ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-word; color:var(--ink)}
.prm{padding:11px 0; border-bottom:1px solid var(--line)} .prm:last-child{border-bottom:0}
.prm b{font-size:16px; margin-right:8px} .prm p{margin:4px 0 0; color:var(--soft); font-size:15px}
.sheet-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; padding-bottom:6px}
.x-btn{margin-left:auto; align-self:flex-start; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; font-size:18px; transition:transform .25s var(--spring); flex:none}
.x-btn:hover{transform:scale(1.12)} .x-btn:active{transform:scale(.88)}
body.lock{overflow:hidden}
.cmd{content-visibility:auto; contain-intrinsic-size:auto 96px}

html{scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--orange) 55%,transparent) transparent}
::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--orange) 55%,transparent); border-radius:999px; border:3px solid var(--bg); background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--orange); background-clip:padding-box}
.sheet-body::-webkit-scrollbar-thumb{border-color:var(--card)}
/* footer spacing */
footer p.fine{margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line)}
.foot .fine{margin:2px 0 0}
.foot strong{font-size:18px}