/* Mapla lander. Tokens from mapla/docs/02-design-system.md sections 1 and 2: calm, one accent, monochrome. */
@font-face{font-family:"Hind Madurai";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/HindMadurai-Regular-tamil.woff2) format("woff2");unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"Hind Madurai";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/HindMadurai-SemiBold-tamil.woff2) format("woff2");unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"Hind Madurai";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/HindMadurai-Regular-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hind Madurai";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/HindMadurai-SemiBold-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark light;
  --bg:#000000;--card:#1C1C1E;--fill:rgba(120,120,128,.36);
  --label:#FFFFFF;--label-2:rgba(235,235,245,.60);--label-3:rgba(235,235,245,.30);--separator:rgba(84,84,88,.60);
  --accent:#0a84ff;
  --r-inner:8px;--r-row:12px;--r-card:20px;--r-pill:999px;
  --font:system-ui,-apple-system,"SF Pro Text",sans-serif;
  --tamil:"Hind Madurai","Noto Sans Tamil",sans-serif;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:light){
  :root{--bg:#F2F2F7;--card:#FFFFFF;--fill:rgba(120,120,128,.20);
    --label:#000000;--label-2:rgba(60,60,67,.60);--label-3:rgba(60,60,67,.30);--separator:rgba(60,60,67,.29)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--label);font:17px/1.45 var(--font)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:lang(ta),.ta{font-family:var(--tamil);line-height:1.4}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.prose{max-width:640px}
.muted{color:var(--label-2)}
section{padding:40px 0}
h2{font-size:22px;line-height:28px;font-weight:700;margin:0 0 6px}
.sub{color:var(--label-2);margin:0 0 20px;font-size:15px}

/* header */
.top{display:flex;align-items:center;gap:14px;padding:28px 0 0}
.top h1{font-size:34px;line-height:41px;font-weight:700;margin:0;letter-spacing:.2px}
.logo{width:56px;height:56px;flex:none}
.logo svg{width:56px;height:56px;display:block}
.intro{font-size:20px;line-height:1.5;margin:20px 0 0;max-width:640px}

/* hero */
.hero{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--card);aspect-ratio:16/9}
.hero video{width:100%;height:100%;display:block;object-fit:cover;cursor:pointer}
.hero .sound{position:absolute;right:12px;bottom:12px;border:0;border-radius:var(--r-pill);padding:6px 12px;font:600 13px/18px var(--font);color:#fff;background:rgba(0,0,0,.55);cursor:pointer}
.hero.placeholder{display:grid;place-items:center;text-align:center}
.hero.placeholder .logo,.hero.placeholder .logo svg{width:120px;height:120px}
.hero.placeholder p{margin:12px 0 0;color:var(--label-2);font-size:15px}

/* mascot grid */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.slot{background:var(--card);border-radius:var(--r-card);padding:12px;min-height:220px;display:flex;flex-direction:column}
.slot .media{border-radius:var(--r-inner);overflow:hidden;aspect-ratio:16/9;background:var(--bg);display:grid;place-items:center}
.slot .media video,.slot .media img{width:100%;height:100%;object-fit:cover;display:block}
.slot .media .live svg{width:112px;height:112px;display:block}
.slot .day{font:600 12px/16px var(--font);color:var(--label-2);text-transform:uppercase;letter-spacing:.6px;margin:12px 0 2px}
.slot .names{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.slot .nameTa{font-size:22px;font-weight:600}
.slot .nameLat{color:var(--label-2);font-size:15px}
.slot .tagline{margin:4px 0 0;font-size:16px}
.slot .use{margin:2px 0 0;color:var(--label-2);font-size:15px}
.slot.locked{color:var(--label-3)}
.slot.locked .media{background:transparent}
.slot.locked .sil svg{width:96px;height:96px;display:block}
.slot.locked .day{color:var(--label-3)}
.slot.locked .when{font-size:13px;color:var(--label-3);margin:0}
.next{font-size:15px;color:var(--label-2);margin:14px 0 0}

/* editor card */
.card{display:block;background:var(--card);border-radius:var(--r-card);padding:16px 20px;color:var(--label)}
a.card:hover{text-decoration:none;box-shadow:inset 0 0 0 1px var(--accent)}
.card b{display:block;font-size:17px}
.card span{color:var(--label-2);font-size:15px}
a.card .go{color:var(--accent)}

/* end glimpse */
.glimpse ul{margin:8px 0 12px;padding:0 0 0 20px}
.glimpse li{margin:4px 0}

footer{border-top:1px solid var(--separator);padding:20px 0 40px;color:var(--label-2);font-size:13px;display:flex;gap:16px;flex-wrap:wrap}

.notfound{padding-top:20vh}

@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .top h1{font-size:28px;line-height:34px}
  .intro{font-size:18px}
}

/* mascot animations, copied from show/mascot-editor/style.css */
.eye,.bub,.bodyg,.eyes,.zz{transform-box:fill-box;transform-origin:center}
.st-blink .eye{animation:blink 4.5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.st-look .eye{animation:look 3.2s ease-in-out infinite}
@keyframes look{0%,100%{transform:translateX(0)}35%{transform:translateX(3px)}70%{transform:translateX(-3px)}}
.st-think .bodyg{animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.035)}}
.st-think .eyes{animation:glanceUp 1.8s ease-in-out infinite}
@keyframes glanceUp{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
.st-think .bub{opacity:0;animation:rise 1.8s ease-out infinite}
.st-think .bub:nth-child(2){animation-delay:.3s}.st-think .bub:nth-child(3){animation-delay:.6s}
@keyframes rise{0%{opacity:0;transform:translateY(4px) scale(.6)}30%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-3px) scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}