:root{
  --bg:#0b0e12; --panel:#0f141a; --text:#e8edf2; --muted:#a9b3be; --stroke:#1e2935; --accent:#7aa2ff;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){:root{--bg:#ffffff;--panel:#f6f8fb;--text:#0e1116;--muted:#475569;--stroke:#e5e7eb;--accent:#3b82f6}}
*{box-sizing:border-box}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--text); background:radial-gradient(50% 60% at 90% -10%, rgba(122,162,255,.15), transparent 60%), var(--bg)}
a{color:inherit; text-decoration:none}
.container{max-width:1080px; margin-inline:auto; padding:0 20px}

/* header */
header{position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px); background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--stroke)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px}
.logo {
  width: 36px;
  height: 36px;
  display: inline-block;
  background-image: url("./images/okitori.png"); /* path to your logo */
  background-size: contain;   /* make it fit inside */
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;         /* optional, remove if your logo shouldn’t be rounded */
}
.brand span{font-weight:700}

/* hero */
.hero{padding:64px 0 28px; text-align:center}
.hero h1{font-size:clamp(26px,4.4vw,40px); margin:0 0 10px}
.hero p{color:var(--muted); margin:0}

/* apps carousel */
section{padding:28px 0}
.card{background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 78%, transparent), var(--panel)); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow)}
.apps{position:relative}
.apps h2{font-size:18px; margin:0 0 12px}
.carousel{position:relative}
.track{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 4px; scrollbar-width:thin}
.track::-webkit-scrollbar{height:8px}
.track::-webkit-scrollbar-thumb{background:var(--stroke); border-radius:8px}
.item{flex:0 0 84%; max-width:84%; scroll-snap-align:center}
@media(min-width:720px){ .item{flex-basis:320px; max-width:320px} }
.item-inner{padding:14px}
.item .thumb{display:block; height:160px; border-bottom:1px solid var(--stroke); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); background:repeating-linear-gradient(45deg, rgba(122,162,255,.18) 0 10px, rgba(75,224,193,.18) 10px 20px)}
.item h3{margin:10px 0 6px; font-size:16px}
.item p{margin:0; color:var(--muted); font-size:14px}

.ctrl{position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:8px; width:100%; justify-content:space-between; pointer-events:none}
.ctrl button{pointer-events:auto; background:var(--panel); color:var(--text); border:1px solid var(--stroke); border-radius:10px; padding:8px 10px}

/* footer */
footer{border-top:1px solid var(--stroke); padding:24px 0; color:var(--muted); margin-top:20px}
footer .links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
footer a{color:var(--muted)}

/* --- Few-items carousel behavior (pure CSS, no JS) --- */
/* Center track and remove horizontal scroll when there are ≤2 items */
.carousel:not(:has(.item:nth-child(3))) .track{justify-content:center; overflow-x:hidden}
/* Exactly 2 items */
.carousel:has(.item:nth-child(2)):not(:has(.item:nth-child(3))) .item{flex-basis:300px; max-width:300px}
/* Exactly 1 item */
.carousel:not(:has(.item:nth-child(2))) .item{flex-basis:360px; max-width:360px}

/* Kadojo image (assumes first card is Kadojo) */
.item:first-child .thumb{
  background: none;
  background-image:url('./images/kadojo.png');
  background-size:cover;
  background-position:center;
}