/* Let me show you — Mai intro. Warm paper, soft line art, one terracotta accent. */
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block;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:"Nunito";src:url(fonts/nunito-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:block;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:"Nunito";src:url(fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:block;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:"Nunito";src:url(fonts/nunito-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:block;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:"Nunito";src:url(fonts/nunito-vietnamese-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Nunito";src:url(fonts/nunito-vietnamese-600-normal.woff2) format("woff2");font-weight:600;font-display:block;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Nunito";src:url(fonts/nunito-vietnamese-700-normal.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Nunito";src:url(fonts/nunito-vietnamese-800-normal.woff2) format("woff2");font-weight:800;font-display:block;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Caveat";src:url(fonts/caveat-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"Caveat";src:url(fonts/caveat-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:block}

:root{--ink:#3D3631;--ink2:#6F665E;--mute:#9C9289;--line:#DDD2C2;--paper:#F3ECE0;--card:#FFFDF8;--acc:#C8663F;--acc2:#A9502E;--accsoft:#F6E1D4}
html,body{margin:0;height:100%;background:#1d1a17;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;
  background:radial-gradient(ellipse 75% 70% at 50% 44%,#F8F2E8 0%,#F2EADD 60%,#E9DFCF 100%);
  font-family:"Nunito",system-ui,sans-serif;font-weight:600;color:var(--ink);-webkit-font-smoothing:antialiased;font-kerning:normal}
#gfx{position:absolute;inset:0}
#grain{position:absolute;inset:0;pointer-events:none;background:url(grain.png);opacity:.10;mix-blend-mode:multiply}
#gfx div,#gfx svg{box-sizing:border-box}
.abs{position:absolute;left:0;top:0}
.hand{font-family:"Caveat",cursive;font-weight:600;color:var(--acc2)}

/* player */
#player{width:1280px;height:720px}
#player .pv{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#F4ECE0;
  box-shadow:0 40px 80px -30px rgba(92,66,40,.35),0 6px 18px -6px rgba(92,66,40,.18),0 0 0 1.5px rgba(80,60,40,.14)}
#player .scene{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0}
#player .room{position:absolute;left:0;top:0}
.ptitle{position:absolute;left:0;right:0;top:0;height:80px;padding:20px 28px;color:#fff;font-size:18px;font-weight:700;
  background:linear-gradient(rgba(40,30,24,.42),rgba(40,30,24,0))}
.ptitle span{opacity:.72;font-weight:600}
.tag{position:absolute;right:24px;top:18px;padding:5px 14px;border-radius:14px;background:var(--acc);color:#fff;font-size:16px;font-weight:800}
.ctrl{position:absolute;left:0;right:0;bottom:0;height:74px;background:linear-gradient(rgba(40,30,24,0),rgba(40,30,24,.5))}
.ctrl svg.pp{position:absolute;left:28px;top:30px;width:26px;height:26px}
.ctrl .track{position:absolute;left:76px;right:196px;top:41px;height:5px;border-radius:3px;background:rgba(255,255,255,.35)}
.ctrl .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--acc)}
.ctrl .knob{position:absolute;top:-5px;width:15px;height:15px;margin-left:-7px;border-radius:50%;background:#fff}
.ctrl .time{position:absolute;right:28px;top:31px;color:#fff;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.tsub{position:absolute;left:0;right:0;bottom:92px;text-align:center}
.tsub span.b{display:inline-block;max-width:860px;padding:8px 20px 10px;border-radius:10px;background:rgba(38,31,27,.8);color:#fff;
  font-size:27px;line-height:1.36;font-weight:700}
.tsub .hl{color:#F6B895}
.bigicon{position:absolute;left:580px;top:300px;width:120px;height:120px;border-radius:50%;background:rgba(38,31,27,.55)}
.bigicon svg{position:absolute;inset:0;margin:auto;width:52px;height:52px}
.btitle{position:absolute;left:602px;top:84px;font-family:"Caveat";font-weight:600;font-size:44px;color:#5B534C}
.bform{position:absolute;left:606px;top:140px;font-size:22px;font-weight:600;color:#9A928A}
.bcap{position:absolute;left:600px;top:186px;width:582px;padding:10px 20px 12px;border-radius:12px;background:#FDF1E8;border-left:6px solid var(--acc)}
.bcap .l1{font-size:17px;color:#8E857C;font-weight:700}
.bcap .l2{font-size:25px;font-weight:800;color:var(--ink);margin-top:2px}
.bcap .p{color:#8E847A}.bcap .i{color:var(--acc)}
.bar{position:absolute;bottom:0;width:78px}
.bar .pr{position:absolute;left:0;right:0;bottom:0;background:#BCB2A6;border-radius:0 0 3px 3px}
.bar .in{position:absolute;left:0;right:0;background:var(--acc);border-radius:5px 5px 0 0}
.bar .v{position:absolute;left:-20px;right:-20px;text-align:center;font-size:19px;font-weight:800;color:var(--ink)}
.bar .x{position:absolute;left:-20px;right:-20px;top:100%;margin-top:10px;text-align:center;font-size:16px;font-weight:700;color:#968D84}

/* editing */
.panel{position:absolute;width:1280px;height:238px;border-radius:20px;background:#FBF7EF;
  box-shadow:0 24px 50px -28px rgba(92,66,40,.35),0 0 0 1.5px rgba(80,60,40,.12)}
.panel .hdr{position:absolute;left:26px;top:14px;font-size:16px;font-weight:800;color:var(--ink2)}
.panel .tc{position:absolute;right:26px;top:14px;font-size:16px;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.panel .lab{position:absolute;left:28px;font-size:14px;font-weight:800;color:#AFA59A}
.ph{position:absolute;top:40px;width:2px;height:182px;margin-left:-1px;background:var(--acc)}
.ph:before{content:"";position:absolute;left:-7px;top:-6px;width:16px;height:12px;border-radius:4px;background:var(--acc)}
.card{position:absolute;background:var(--card);border-radius:16px;box-shadow:0 18px 36px -22px rgba(92,66,40,.4),0 0 0 1.5px rgba(80,60,40,.10)}
.notes{width:340px;padding:18px 24px 22px}
.notes h4{margin:0 0 8px;font-family:"Caveat";font-weight:600;font-size:34px;color:var(--acc2)}
.notes .it{position:relative;padding:9px 0 9px 38px;font-size:19px;font-weight:700;color:var(--ink);line-height:1.25}
.notes .it svg{position:absolute;left:0;top:9px;width:24px;height:24px}
.chip{position:absolute;white-space:nowrap;padding:6px 14px;border-radius:10px;background:#FDF1E8;border:2px solid var(--acc);font-size:18px;font-weight:800;color:var(--ink)}
.note{position:absolute;font-family:"Caveat";font-weight:600;font-size:32px;line-height:1.05;color:var(--acc2)}
.zrect{position:absolute;border:3px dashed var(--acc);border-radius:10px}

/* subtitles (Mai) */
.msub{position:absolute;left:0;right:0;top:948px;text-align:center}
.msub span.b{display:inline-block;padding:9px 26px 11px;border-radius:26px;background:rgba(253,250,244,.92);
  box-shadow:0 8px 20px -14px rgba(92,66,40,.45),0 0 0 1.5px rgba(80,60,40,.08);font-size:30px;font-weight:700;color:var(--ink);line-height:1.3}
.msub span.b:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin:0 14px 3px 0;vertical-align:middle}

/* subjects */
.subj{width:280px;height:204px}
.subj svg.mini{position:absolute;left:12px;top:12px;width:256px;height:144px;border-radius:10px}
.subj .nm{position:absolute;left:16px;top:166px;font-size:17px;font-weight:800;color:var(--ink)}
.subj .tr{position:absolute;right:10px;top:-22px;padding:0 10px;border-radius:8px;background:#F8F1E6;font-family:"Caveat";font-weight:600;font-size:27px;color:var(--acc2);transform:rotate(-2deg)}

/* polaroid */
.pol{width:340px;height:470px;padding:20px 20px 0;background:#FFFEFA;border-radius:4px;
  box-shadow:0 30px 50px -26px rgba(70,50,30,.5),0 3px 8px -3px rgba(70,50,30,.2)}
.pol img{display:block;width:300px;height:375px;object-fit:cover}
.pol .cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:"Caveat";font-weight:600;font-size:36px;color:var(--ink)}
.pol .tape{position:absolute;left:50%;top:-18px;width:120px;height:36px;margin-left:-60px;background:rgba(230,196,172,.72);transform:rotate(-4deg);
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
.endt{position:absolute}
.endt .nm{font-size:64px;font-weight:800;color:var(--ink);line-height:1}
.endt .ro{font-size:25px;font-weight:700;color:var(--ink2);margin-top:22px}
.endt .fa{font-size:19px;font-weight:600;color:#8E857C;margin-top:10px}
.endt .ct{font-size:22px;font-weight:800;color:var(--acc);margin-top:24px}

#hud{position:fixed;z-index:10;left:12px;top:10px;display:flex;gap:14px;align-items:center;font:600 13px/1 "Nunito",sans-serif;
  color:#fff;background:rgba(0,0,0,.72);padding:8px 12px;border-radius:6px;opacity:0;transition:opacity .25s}
#hud.on{opacity:1}
#hud a{color:#fff}
#hud .hint{opacity:.75}