/* =====================================================================
   Console-style menu — 1280×720 stage, scaled to fit the viewport.
   ===================================================================== */
:root{
  --font: 'Nunito', 'Varela Round', 'Segoe UI', system-ui, sans-serif;
  --blue: #5fc6ee;          /* the swoosh line */
  --hl: #3fc0f5;            /* hover outline */
  --hl-glow: rgba(63,192,245,.75);
  --gray-text: #8d8d8d;
  --dark-text: #5f5f5f;
  --stripes: repeating-linear-gradient(180deg,#ececec 0 2px,#f8f8f8 2px 4px);
  --stripes-dark: repeating-linear-gradient(180deg,#d1d1d1 0 2px,#e3e3e3 2px 4px);
  --stripes-black: repeating-linear-gradient(180deg,#000 0 2px,#1d1d1d 2px 4px);
  --cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='52' viewBox='0 0 44 52'><path d='M15 4.5a4 4 0 0 1 8 0V22h1v-4.5a3.5 3.5 0 0 1 7 0V22h1v-2.5a3.5 3.5 0 0 1 7 0V25h1a3 3 0 0 1 3 3v6c0 8-7 14-15 14h-6c-5 0-8-2-11-6L4 34c-2-2.5.5-5.5 3-3.5l8 4.5V4.5z' fill='white' stroke='%23333' stroke-width='2' stroke-linejoin='round'/><path d='M23 22v6M31 22v6M39 25v4' stroke='%23333' stroke-width='1.6' stroke-linecap='round'/><circle cx='33' cy='40' r='8' fill='%2322a3e6' stroke='white' stroke-width='2'/><text x='33' y='44' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='11' fill='white'>1</text></svg>") 19 2, pointer;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:#2b2a2a radial-gradient(ellipse at 50% 30%,#4a4846 0%,#2a2928 55%,#151414 100%);
  color:var(--dark-text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:var(--cursor);
  user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:var(--cursor)}
a{color:inherit;cursor:var(--cursor)}
a,button,.channel,.arrow,.day{cursor:var(--cursor)}

/* ---------------------------------------------------- the screen itself
   The room and the CRT it used to sit in are gone; the menu now fills the
   window directly, with the startup screen fading straight into it. */
#room{position:fixed;inset:0;overflow:hidden;background:#000}
#scene{position:absolute;left:50%;top:50%;width:1280px;height:720px;
  transform:translate(-50%,-50%) scale(var(--s,1))}
#cam{position:absolute;left:0;top:0;width:1280px;height:720px}
#tvobj{position:absolute;left:0;top:0;width:1280px;height:720px}
.face.front{position:absolute;left:0;top:0;width:1280px;height:720px;background:#000}
#stage{position:absolute;left:0;top:0;width:1280px;height:720px;overflow:hidden;background:#000;transition:opacity .45s}
#stage.off > *:not(#poweron){display:none}

/* CRT-ish overlay: scanlines, a slow rolling band, vignette, glass */
#crt{position:absolute;inset:0;z-index:150;pointer-events:none;overflow:hidden;mix-blend-mode:normal}
#crt .scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.11) 2px 3px,rgba(255,255,255,.035) 3px 4px);animation:scanjitter 6s steps(1) infinite}
#crt .band{position:absolute;left:0;right:0;top:-30%;height:22%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.07) 40%,rgba(0,0,0,.05) 60%,transparent);animation:roll 7s linear infinite}
#crt .vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,0,0,.22) 100%)}
#crt .glass{position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 25%,transparent 45%)}
@keyframes roll{to{top:120%}}
@keyframes scanjitter{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
body.no-crt #crt,body.no-crt #stage::after{display:none}

.screen{position:absolute;inset:0}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- menu */
#menu{background:#f6f6f6 var(--stripes);transition:opacity .4s}
#menu::before{ /* the thin rail along the top */
  content:'';position:absolute;left:0;right:0;top:0;height:14px;
  background:linear-gradient(#e2e2e2,#f6f6f6);
}
#menu::after{
  content:'';position:absolute;left:0;right:0;top:12px;height:2px;background:#d6d6d6;opacity:.7;
}
#pages-wrap{position:absolute;left:0;top:63px;width:1280px;height:450px;overflow:visible}
#pages{position:absolute;left:0;top:0;height:450px;transition:transform .55s cubic-bezier(.25,.8,.3,1);will-change:transform}
.page{position:absolute;top:0;width:1080px;height:450px}
.channel{
  position:absolute;width:252px;height:142px;border-radius:14px;overflow:hidden;
  background:#e9e9e9;
  box-shadow:0 0 0 3px #d0d0d0, inset 0 0 0 1px rgba(255,255,255,.7);
  transition:transform .18s ease, box-shadow .18s ease;
  will-change:transform;
}
.channel:focus{outline:none}
.channel.empty{
  background:repeating-linear-gradient(180deg,#d9d9d9 0 2px,#e4e4e4 2px 4px);
  box-shadow:0 0 0 3px #d6d6d6, inset 0 0 0 1px rgba(255,255,255,.5);
}
.channel.empty::after{
  content:attr(data-logo);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:38px;letter-spacing:-1px;color:#cdcdcd;text-shadow:0 1px 0 #f2f2f2;
}
.channel:not(.empty):hover,.channel:not(.empty).focus{
  transform:scale(1.045);z-index:5;
  box-shadow:0 0 0 4px var(--hl), 0 0 14px 2px var(--hl-glow), inset 0 0 0 1px rgba(255,255,255,.7);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px var(--hl), 0 0 14px 2px var(--hl-glow), inset 0 0 0 1px rgba(255,255,255,.7)}
  50%{box-shadow:0 0 0 4px #9be0fb, 0 0 22px 4px rgba(63,192,245,.35), inset 0 0 0 1px rgba(255,255,255,.7)}
}
.channel:active{transform:scale(1.02)}
#menu.zooming .channel{pointer-events:none}

/* page arrows */
.arrow{
  position:absolute;top:238px;width:60px;height:80px;z-index:6;opacity:.95;
  filter:drop-shadow(0 1px 0 #fff);transition:opacity .25s,transform .15s;
}
.arrow svg{width:100%;height:100%}
.arrow.left{left:28px}.arrow.right{right:28px}
.arrow polygon{fill:url(#arrowGrad);stroke:#fff;stroke-width:3;stroke-linejoin:round}
.arrow:hover{transform:scale(1.12)}
.arrow:hover polygon{fill:#39b6f0}
.arrow[disabled]{opacity:0;pointer-events:none}

/* ------------------------------------------------- channel banners */
.banner{
  position:absolute;left:0;top:0;width:1280px;height:720px;overflow:hidden;
  transform-origin:0 0;transform:scale(.19688);
  display:block;color:#fff;
}
.channel .banner{pointer-events:none}
.banner .title{
  position:absolute;left:0;right:0;text-align:center;font-weight:800;font-size:96px;letter-spacing:-1px;
  text-shadow:0 3px 0 rgba(0,0,0,.18), 0 0 30px rgba(0,0,0,.15);
}
.banner.b-disc{background:linear-gradient(#fff,#f3f3f3)}
.banner.b-disc{perspective:1100px}
.b-disc .disc{
  position:absolute;left:50%;top:46%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 54px, #cfcfcf 55px 60px, transparent 61px),
    conic-gradient(from 0deg, #e9e9e9, #c9c9c9, #f4f4f4, #cfcfcf, #ececec, #c4c4c4, #f2f2f2, #e9e9e9);
  box-shadow:0 0 0 3px #d5d5d5, 0 6px 18px rgba(0,0,0,.12);
  animation:spinY 7s linear infinite;transform-style:preserve-3d;
}
@keyframes spin{to{transform:rotate(360deg)}}
.b-disc .title{bottom:22px;color:#a3a3a3;font-size:58px;text-shadow:none}

.banner.b-about{background:#fff url('../img/mii-crowd.jpg') center bottom / cover no-repeat}
.b-about .crowd{position:absolute;inset:0}
.b-about .crowd svg{position:absolute;width:210px;height:230px;filter:drop-shadow(0 6px 4px rgba(0,0,0,.15))}
.b-about .title{color:#fff;-webkit-text-stroke:0;text-shadow:0 3px 0 rgba(60,90,110,.55), 0 0 10px rgba(30,60,80,.75), 0 0 30px rgba(30,60,80,.55), 0 8px 22px rgba(0,0,0,.5)}
.b-about .title{top:26px;font-size:104px;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25), 0 0 22px rgba(0,0,0,.35), 0 0 4px rgba(0,0,0,.6)}

.banner.b-photos{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.14) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.08) 0 5px, transparent 6px),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,.1) 0 4px, transparent 5px),
    linear-gradient(#d68a45,#bf6d2b);
  background-size:120px 120px,150px 150px,90px 90px,100% 100%;
}
.b-photos .title{top:40px;font-size:100px}
.polaroid{position:absolute;background:#fff;padding:14px 14px 40px;box-shadow:0 8px 20px rgba(0,0,0,.28);border-radius:6px}
.polaroid i{display:block;width:100%;height:100%;border-radius:3px}
.b-photos .polaroid{width:330px;height:280px}
.b-photos .p1{left:180px;top:300px;transform:rotate(-9deg)}
.b-photos .p2{left:470px;top:250px;transform:rotate(3deg)}
.b-photos .p3{left:780px;top:290px;transform:rotate(11deg)}

.banner.b-projects{background:linear-gradient(#fff,#f1f7fb)}
.b-projects .icon{position:absolute;left:50%;top:110px;width:300px;height:300px;margin-left:-150px}
.b-projects .title{bottom:84px;color:#2fa5e3;font-size:100px;text-shadow:0 3px 0 rgba(0,0,0,.08)}

.banner.b-interests{background:linear-gradient(#2a6be0 0%,#0d3aa8 45%,#061f6e 100%)}
.b-interests .title{top:40px;font-size:100px}
.b-interests .sun{position:absolute;left:300px;top:250px;width:260px;height:260px;border-radius:50%;background:radial-gradient(#fff6b0,#ffc83c 60%,#ff9d1c);box-shadow:0 0 80px 20px rgba(255,200,60,.55);animation:float 5s ease-in-out infinite}
.b-interests .cloud{position:absolute;width:420px;height:150px;border-radius:100px;background:#fff;opacity:.95;box-shadow:0 20px 40px rgba(0,0,0,.2);animation:drift 12s ease-in-out infinite}
.b-interests .cloud::before,.b-interests .cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.b-interests .cloud::before{width:190px;height:190px;left:60px;top:-100px}
.b-interests .cloud::after{width:150px;height:150px;left:220px;top:-70px}
.b-interests .c1{left:640px;top:380px}
.b-interests .c2{left:120px;top:520px;transform:scale(.6);animation-delay:-4s}
@keyframes float{50%{transform:translateY(-18px)}}
@keyframes drift{50%{transform:translateX(40px)}}

.banner.b-writings{
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 3px,transparent 3px 8px),
    linear-gradient(#2b8a2b,#0f4f14);
}
.b-writings .title{top:40px;font-size:100px}
.b-writings .paper{position:absolute;left:340px;top:250px;width:600px;height:520px;background:#f5f1e6;border-radius:8px;transform:rotate(-3deg);box-shadow:0 20px 40px rgba(0,0,0,.35);padding:60px 50px}
.b-writings .paper b{display:block;height:22px;width:60%;background:#2b2b2b;border-radius:4px;margin-bottom:34px}
.b-writings .paper i{display:block;height:10px;background:#a9a493;border-radius:3px;margin-bottom:16px}
.b-writings .paper i:nth-child(odd){width:92%}.b-writings .paper i:nth-child(even){width:78%}

.banner.b-contact{background:linear-gradient(#fff,#f2f9fd)}
.b-contact .icon{position:absolute;left:50%;top:120px;width:320px;height:260px;margin-left:-160px}
.b-contact .title{bottom:84px;color:#2fa5e3;font-size:100px;text-shadow:0 3px 0 rgba(0,0,0,.08)}

.banner.b-now{
  background:
    linear-gradient(45deg,transparent 0 45%,rgba(255,255,255,.35) 45% 55%,transparent 55%),
    linear-gradient(-45deg,transparent 0 45%,rgba(255,255,255,.35) 45% 55%,transparent 55%),
    repeating-linear-gradient(45deg,#fff 0 90px,#d9ecf5 90px 180px),
    repeating-linear-gradient(-45deg,transparent 0 90px,rgba(244,188,110,.55) 90px 180px);
  background-size:180px 180px,180px 180px,255px 255px,255px 255px;
}
.b-now .figure{position:absolute;left:160px;top:120px;width:380px;height:520px}
.b-now .figure svg{width:100%;height:100%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.2))}
.b-now .title{top:60px;left:520px;right:auto;color:#1aa198;font-size:110px;text-shadow:0 3px 0 rgba(0,0,0,.08)}
.b-now .sub{position:absolute;left:560px;top:230px;width:600px;color:#5b6b6b;font-size:46px;font-weight:700;line-height:1.3}

/* ------------------------------------------------------- bottom bar */
#bottombar{position:absolute;left:0;top:0;width:1280px;height:720px;pointer-events:none}
#bottombar svg{position:absolute;left:0;top:0;width:1280px;height:720px}
#bottombar > *{pointer-events:auto}
#bottombar svg{pointer-events:none}
.seg{position:absolute;left:0;width:1280px;top:518px;height:80px;display:flex;justify-content:center;align-items:center;pointer-events:none}
#clock{position:absolute;left:505px;top:524px;width:270px;height:63px}
#clock svg{width:270px;height:63px}
#ampm{position:absolute;left:760px;top:552px;font-size:26px;font-weight:800;color:#8a8a8a;letter-spacing:1px}
#date{position:absolute;left:0;width:1280px;top:606px;text-align:center;font-size:44px;font-weight:800;color:#8f8f8f;letter-spacing:.5px}
.round{
  position:absolute;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fff 0 46%,#f0f0f0 60%,#d9d9d9 100%);
  box-shadow:0 0 0 3px #c9c9c9, 0 0 0 6px #e8f5fb, 0 2px 4px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-weight:800;font-size:40px;
  transition:transform .15s, box-shadow .15s;
}
.round:hover{
  transform:scale(1.06);
  box-shadow:0 0 0 3px var(--hl), 0 0 0 6px #e8f5fb, 0 0 16px 2px var(--hl-glow);
  animation:pulse-round 1.1s ease-in-out infinite;
}
@keyframes pulse-round{50%{box-shadow:0 0 0 3px #9be0fb, 0 0 0 6px #e8f5fb, 0 0 22px 4px rgba(63,192,245,.35)}}
.round.small{width:100px;height:100px;font-size:34px}
#btn-options{left:59px;top:546px}
#btn-mail{left:1104px;top:546px}
.round > svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#btn-mail svg{width:56px;height:42px;top:44%}
#btn-mail .badge{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:22px;color:#9a9a9a}
#sd{position:absolute;left:240px;top:603px;width:48px;height:60px;display:block}
#sd svg{width:48px;height:60px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
#sd:hover svg{filter:drop-shadow(0 0 6px var(--hl-glow))}
#sd.hidden{display:none}

/* ----------------------------------------------------------- zoom */
#zoom{
  position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;
  z-index:20;overflow:hidden;border-radius:70px;
  transition:transform .6s cubic-bezier(.2,.75,.25,1), border-radius .6s ease;
  box-shadow:0 0 0 3px #d0d0d0;
}
#zoom.full{transform:none!important;border-radius:0;box-shadow:none}
#zoom .banner{transform:none}

#previewbar{
  position:absolute;left:0;right:0;bottom:-140px;height:128px;z-index:25;
  background:linear-gradient(rgba(255,255,255,.9),rgba(238,238,238,.92));
  border-top:3px solid #d2d2d2;
  transition:bottom .4s cubic-bezier(.2,.8,.3,1);
}
#previewbar.show{bottom:0}
#previewbar .pill{top:22px}
#previewbar .pill.l{left:110px}#previewbar .pill.r{right:110px}

/* ---------------------------------------------- shared components */
.pill{
  position:absolute;height:84px;min-width:320px;padding:0 44px;border-radius:999px;
  background:linear-gradient(#fff 0%,#f4f4f4 45%,#e2e2e2 100%);
  box-shadow:0 0 0 2px #cfcfcf, inset 0 2px 0 #fff, 0 2px 3px rgba(0,0,0,.12);
  color:#6b6b6b;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center;
  transition:box-shadow .15s, transform .15s;
}
.pill:hover{box-shadow:0 0 0 4px var(--hl), inset 0 2px 0 #fff, 0 0 16px 2px var(--hl-glow);animation:pulse-pill 1.1s ease-in-out infinite}
@keyframes pulse-pill{50%{box-shadow:0 0 0 4px #9be0fb, inset 0 2px 0 #fff, 0 0 22px 4px rgba(63,192,245,.35)}}
.pill:active{transform:translateY(1px)}
.pill.blue{box-shadow:0 0 0 4px #5ac8f5, inset 0 2px 0 #fff;background:linear-gradient(#fff,#fbf6f7 45%,#eee)}
.pill.blue:hover{box-shadow:0 0 0 5px #3fc0f5, inset 0 2px 0 #fff, 0 0 18px 3px var(--hl-glow)}
.pill.sm{height:64px;min-width:220px;font-size:28px;padding:0 30px}

/* white fade + splash */
#fade{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:90;transition:opacity .35s ease}
#fade.on{opacity:1;pointer-events:auto}
#splash{position:absolute;inset:0;background:#000;z-index:100;display:flex;align-items:center;justify-content:center;color:#fff;transition:opacity .6s ease;font-family:'Nunito',system-ui,sans-serif}
#splash.out{opacity:0;pointer-events:none}
#splash .box{width:900px;text-align:center}
#splash h1{font-size:34px;letter-spacing:1px;font-weight:800;color:#fff;margin-bottom:26px;display:flex;align-items:center;justify-content:center;gap:16px}
#splash h1 svg{width:44px;height:44px}
#splash p{font-size:22px;line-height:1.55;color:#d8d8d8;font-weight:600;margin:0 auto 12px;max-width:760px}
#splash .press{margin-top:54px;font-size:26px;color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;animation:blink 1.6s ease-in-out infinite}
#splash .abtn{display:inline-flex;width:44px;height:44px;border-radius:50%;background:#e9e9e9;color:#333;align-items:center;justify-content:center;font-weight:800;font-size:22px;box-shadow:inset 0 -3px 0 #bdbdbd}
@keyframes blink{50%{opacity:.35}}

/* -------------------------------------------------------- app screens */
.app{position:absolute;inset:0;background:#fff;overflow:hidden;opacity:0;transition:opacity .35s ease}
.app.on{opacity:1}
.app:not(.on){pointer-events:none}
.app .chrome{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(#f4f4f4,#e1e1e1);border-top:3px solid #cfcfcf}
.app .chrome .pill{left:64px;top:18px}
.app .chrome .home{position:absolute;right:64px;top:14px;width:92px;height:92px;font-size:30px}
.app .chrome .home svg{width:44px;height:44px}
.app .titlebar{position:absolute;left:0;right:0;top:0;height:92px;display:flex;align-items:center;padding:0 64px;font-size:40px;font-weight:800;color:#fff;letter-spacing:.5px}
.app .body{position:absolute;left:0;right:0;top:92px;bottom:120px;overflow:hidden}
.scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#bfe6f5 transparent}
/* a scroll container must win over the panel's own overflow */
.app .body.scroll,.app .scroll{overflow-y:auto}
.scroll::-webkit-scrollbar{width:10px}
.scroll::-webkit-scrollbar-thumb{background:#bfe6f5;border-radius:10px}
.card{background:#fff;border-radius:18px;box-shadow:0 0 0 3px #d9d9d9, 0 4px 14px rgba(0,0,0,.08)}
.tab{position:relative;height:58px;padding:0 34px;border-radius:999px;font-size:26px;font-weight:800;color:#7a7a7a;background:linear-gradient(#fff,#ececec);box-shadow:0 0 0 2px #d3d3d3;display:inline-flex;align-items:center;transition:box-shadow .15s}
.tab:hover{box-shadow:0 0 0 3px var(--hl), 0 0 12px var(--hl-glow)}
.tab.on{color:#2fa5e3;box-shadow:0 0 0 3px #5ac8f5}

/* About Me — Mii plaza */
#app-about{background:
  radial-gradient(ellipse at 50% 60%,rgba(255,255,255,1) 0%,rgba(255,255,255,.85) 30%,rgba(255,255,255,.35) 70%,rgba(255,255,255,0) 100%),
  repeating-conic-gradient(from 0deg at 50% 60%, rgba(205,192,168,.35) 0deg 7deg, transparent 7deg 14deg),
  repeating-radial-gradient(circle at 50% 60%, rgba(200,200,200,.45) 0 30px, transparent 30px 70px),
  #fbfbfb}
#app-about .titlebar{background:linear-gradient(#8fd7f5,#4fbbe9);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}


#app-about .plaza .mii:hover .mii-arm-r{animation:wave .7s ease-in-out infinite;transform-origin:154px 184px}
#app-about .nameplate{margin-top:8px;padding:10px 40px;border-radius:999px;background:linear-gradient(#fff,#e6e6e6);box-shadow:0 0 0 2px #cfcfcf;font-size:32px;font-weight:800;color:#666}

#app-about .tabs{display:flex;gap:14px;margin-bottom:18px}
#app-about .pane{display:none;height:340px}
#app-about .pane.on{display:block}
#app-about .pane h2{font-size:38px;color:#3a3a3a;font-weight:800;margin-bottom:12px}
#app-about .pane p{font-size:21px;line-height:1.55;color:#5c5c5c;margin-bottom:12px;font-weight:600}
#app-about .facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-top:10px}
#app-about .facts div{font-size:19px;color:#666;font-weight:600;background:#f4f8fb;border-radius:12px;padding:10px 16px}
#app-about .facts b{display:block;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#2fa5e3}
.timeline{list-style:none;padding-left:26px;border-left:4px solid #bfe6f5;margin-left:12px}
.timeline li{position:relative;padding:0 0 18px 24px}
.timeline li::before{content:'';position:absolute;left:-36px;top:8px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #5ac8f5}
.timeline .when{font-size:15px;font-weight:800;letter-spacing:1px;color:#2fa5e3;text-transform:uppercase}
.timeline .t{font-size:24px;font-weight:800;color:#3a3a3a}
.timeline .w{font-size:19px;color:#777;font-weight:700}
.timeline .n{font-size:18px;color:#666;font-weight:600;margin-top:2px}
@keyframes idle{50%{transform:translateY(-6px)}}
@keyframes wave{50%{transform:rotate(-40deg)}}
.mii-eyes{animation:blinkeyes 4.5s ease-in-out infinite;transform-origin:100px 106px}
@keyframes blinkeyes{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}

/* Experience */
#app-experience .titlebar{background:linear-gradient(#e9e9e9,#cfcfcf);color:#666}
#app-experience .body{padding:30px 90px}
#app-experience .watermark{position:absolute;right:-80px;top:120px;width:460px;height:460px;border-radius:50%;opacity:.35;background:conic-gradient(#eee,#d3d3d3,#f6f6f6,#d8d8d8,#eee);box-shadow:0 0 0 3px #e2e2e2;animation:spin 30s linear infinite}
#app-experience .watermark::after{content:'';position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ddd}
.job{position:relative;margin-bottom:22px;padding:18px 26px;max-width:860px}
.job .when{font-size:15px;font-weight:800;letter-spacing:1px;color:#2fa5e3;text-transform:uppercase}
.job .role{font-size:28px;font-weight:800;color:#3a3a3a}
.job .org{font-size:20px;color:#888;font-weight:700;margin-bottom:8px}
.job ul{padding-left:22px}
.job li{font-size:18px;color:#5c5c5c;font-weight:600;line-height:1.5}

/* Projects */
#app-projects .titlebar{background:linear-gradient(#bfe6f5,#8fd4f2);color:#1f8bc7}
#app-projects .body{padding:28px 64px;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-content:start}
.proj{padding:22px 26px;position:relative;min-height:200px}
.proj h3{font-size:27px;color:#2fa5e3;font-weight:800;margin-bottom:6px}
.proj p{font-size:18px;color:#5c5c5c;font-weight:600;line-height:1.5;margin-bottom:12px}
.proj .tags{display:flex;gap:8px;flex-wrap:wrap}
.proj .tags span{font-size:14px;font-weight:800;letter-spacing:.5px;color:#666;background:#eef6fa;padding:4px 12px;border-radius:999px}
.proj a.go{position:absolute;right:20px;bottom:18px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(#5fd0f8,#2fa5e3);padding:8px 18px;border-radius:999px;text-decoration:none;box-shadow:0 2px 0 #1d84bd}
.proj a.go:hover{filter:brightness(1.08)}

/* Photos */
#app-photos{background:linear-gradient(#fff8ef,#fbead3)}
#app-photos .titlebar{background:linear-gradient(#f0a862,#d68a45)}
#app-photos .body{padding:24px 54px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 18px;align-content:start}
#app-photos .polaroid{position:relative;width:100%;height:200px;padding:9px;transition:transform .2s}
#app-photos .polaroid:nth-child(odd){transform:rotate(-2deg)}
#app-photos .polaroid:nth-child(even){transform:rotate(1.5deg)}
#app-photos .polaroid:hover{transform:scale(1.06) rotate(0);z-index:3;box-shadow:0 0 0 4px var(--hl), 0 14px 30px rgba(0,0,0,.25)}
#app-photos .polaroid img,#app-photos .polaroid i{display:block;width:100%;height:143px;object-fit:cover;border-radius:3px}
#app-photos .polaroid span{display:-webkit-box;margin-top:7px;height:32px;text-align:center;font-size:13px;line-height:1.22;color:#666;font-weight:700;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#lightbox{position:absolute;inset:0;background:rgba(0,0,0,.82);z-index:30;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
#lightbox.on{opacity:1;pointer-events:auto}
#lightbox .frame{width:900px;height:560px;background:#fff;padding:18px 18px 64px;border-radius:8px;box-shadow:0 30px 60px rgba(0,0,0,.5);position:relative}
#lightbox #lb-img{display:block;width:100%;height:100%}
#lightbox .frame img,#lightbox .frame i{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px;background:#f2f2f2}
#lightbox .cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:24px;color:#666;font-weight:700}
#lightbox .arrow{top:300px}
#lightbox .close{position:absolute;right:40px;top:30px}

/* Writings */
#app-writings{background:#f3f7f3}
#app-writings .titlebar{background:linear-gradient(#3aa03a,#1f6b1f)}
#app-writings .list{position:absolute;left:40px;top:120px;width:400px;bottom:150px;overflow-y:auto}
#app-writings .item{display:block;width:100%;text-align:left;padding:16px 20px;border-radius:14px;margin-bottom:10px;background:#fff;box-shadow:0 0 0 2px #dfe6df;transition:box-shadow .15s}
#app-writings .item:hover{box-shadow:0 0 0 3px var(--hl), 0 0 12px var(--hl-glow)}
#app-writings .item.on{box-shadow:0 0 0 3px #2fa5e3}
#app-writings .item b{display:block;font-size:20px;color:#3a3a3a;font-weight:800;line-height:1.25}
#app-writings .item small{font-size:14px;color:#888;font-weight:700;letter-spacing:.5px}
#app-writings .item .ext{float:right;font-size:14px;color:#2fa5e3;font-weight:800}
#app-writings .reader{position:absolute;left:470px;top:120px;right:40px;bottom:150px;padding:36px 44px;overflow-y:auto;background:#fffdf7}
#app-writings .reader h2{font-size:36px;color:#2b2b2b;font-weight:800;line-height:1.2;margin-bottom:6px}
#app-writings .reader .meta{font-size:15px;color:#888;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:22px}
#app-writings .reader p{font-size:20px;line-height:1.65;color:#444;font-weight:500;margin-bottom:16px}
#app-writings .reader a.go{display:inline-block;margin-top:10px;font-size:18px;font-weight:800;color:#fff;background:linear-gradient(#5fd0f8,#2fa5e3);padding:10px 22px;border-radius:999px;text-decoration:none}

/* Interests */
#app-interests{background:linear-gradient(#3a7cf0 0%,#1747b8 60%,#0d2f8a 100%)}
#app-interests .titlebar{background:rgba(255,255,255,.12);border-bottom:2px solid rgba(255,255,255,.25)}
#app-interests .sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#app-interests .cloud{position:absolute;width:260px;height:90px;border-radius:100px;background:#fff;opacity:.85;animation:drift 14s ease-in-out infinite}
#app-interests .cloud::before,#app-interests .cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
#app-interests .cloud::before{width:120px;height:120px;left:40px;top:-60px}
#app-interests .cloud::after{width:90px;height:90px;left:140px;top:-40px}
#app-interests .body{padding:30px 64px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-content:start}
.interest{padding:22px 24px;text-align:center;min-height:190px}
.interest .ic{font-size:54px;line-height:1;margin-bottom:10px}
.interest h3{font-size:25px;color:#2f5aa8;font-weight:800;margin-bottom:6px}
.interest p{font-size:17px;color:#5c5c5c;font-weight:600;line-height:1.45}

/* Now */
#app-now{background:linear-gradient(#f7fbfd,#e3f1f6)}
#app-now .titlebar{background:linear-gradient(#5fd0c8,#1aa198)}
#app-now .figure{position:absolute;left:80px;top:120px;width:360px;height:470px}
#app-now .figure .mii{width:100%;height:100%;animation:idle 3.2s ease-in-out infinite}
#app-now .panel{position:absolute;left:500px;top:130px;width:700px;padding:30px 36px}
#app-now .panel small{display:block;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#888;font-weight:800;margin-bottom:14px}
#app-now .row{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:2px dashed #e3ecef;font-weight:600}
#app-now .row b{width:160px;flex:none;font-size:16px;letter-spacing:1px;text-transform:uppercase;color:#1aa198}
#app-now .row span{font-size:22px;color:#444}

/* ------------------------------------------- Options + Settings (black) */
.black{background:#000 var(--stripes-black);color:#fff}
.black .hr{position:absolute;left:0;right:0;height:5px;background:#fff}
#app-options .hr.t{top:100px}#app-options .hr.b{top:566px}
#app-options .logo{position:absolute;right:90px;top:42px;font-size:52px;font-weight:800;letter-spacing:-1px;color:#fff}
#app-options .opt{
  position:absolute;top:196px;width:378px;height:306px;border-radius:16px;background:#fff;
  box-shadow:0 0 0 5px #46c2f3, 0 0 0 8px #fff;overflow:hidden;color:#666;transition:transform .15s, box-shadow .15s;
}
#app-options .opt:hover{transform:scale(1.03);box-shadow:0 0 0 6px #7ad8fb, 0 0 0 9px #fff, 0 0 30px rgba(70,194,243,.7)}
#app-options .opt .top{height:38px;background:linear-gradient(#e3e3e3,#f6f6f6)}
#app-options .opt .ic{height:172px;display:flex;align-items:center;justify-content:center}
#app-options .opt .ic svg{width:170px;height:150px}
#app-options .opt .lbl{height:96px;border-top:3px solid #e2e2e2;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700}
#app-options .opt.a{left:164px}#app-options .opt.b{left:738px}
#app-options .pill{left:124px;top:596px}

#app-settings .tabtitle{position:absolute;left:210px;top:44px;width:626px;height:54px;background:#fff;color:#333;font-size:36px;font-weight:700;border-radius:0 10px 0 0;padding-left:14px;display:flex;align-items:center}
#app-settings .ver{position:absolute;left:926px;top:56px;font-size:30px;font-weight:700;color:#fff}
#app-settings .hr.t{top:98px}#app-settings .hr.b{top:584px}
#app-settings .rows{position:absolute;left:340px;top:112px;width:600px}
#app-settings .pill.blue{position:relative;left:auto;top:auto;width:600px;height:66px;margin-bottom:12px;font-size:30px;color:#444;justify-content:space-between}
#app-settings .pill.blue span:last-child{color:#2fa5e3}
#app-settings .pill{left:224px;top:594px;width:400px;height:96px}
#app-settings .pnum{position:absolute;left:848px;top:592px;display:flex;gap:10px}
#app-settings .pnum b{width:64px;height:54px;border-radius:8px;background:#fff;color:#333;font-size:36px;display:flex;align-items:center;justify-content:center}
#app-settings .pnum b.off{background:#888;color:#ccc}

/* --------------------------------------------------- message board */
.board{background:#dcdcdc var(--stripes-dark);color:#666}
.board .band{position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(#f2f2f2,#dedede);border-top:3px solid #ececec}
.board .plate{position:absolute;bottom:20px;height:150px;border-radius:999px;background:linear-gradient(#fafafa,#e6e6e6);box-shadow:0 0 0 2px #d4d4d4}
.board .plate.l{left:-40px;width:340px}.board .plate.r{right:-40px;width:260px}
.board .date{position:absolute;left:0;right:0;top:614px;text-align:center;font-size:44px;font-weight:800;color:#8f8f8f}
.board .round.small{top:556px}
#mb-cal{left:70px}#mb-new{left:182px}#mb-back{left:1112px}
.board .round svg{width:50px;height:50px}
.board .arrow{top:238px}
.board .arrow.left{left:48px}.board .arrow.right{right:48px}
.memo-wrap{position:absolute;left:0;right:0;top:110px;height:400px;display:flex;align-items:center;justify-content:center;gap:60px}
.memo{position:relative;width:240px;height:172px;background:#fff;border-radius:14px;box-shadow:0 0 0 3px #cfcfcf, 0 6px 12px rgba(0,0,0,.12);overflow:visible;transition:transform .15s, box-shadow .15s}
.memo::before{content:'';position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(#e6e6e6,#d6d6d6);border-radius:14px 14px 0 0}
.memo .pin{position:absolute;left:50%;top:-14px;width:36px;height:36px;margin-left:-18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a6a,#e63b1f 70%);box-shadow:0 3px 4px rgba(0,0,0,.25)}
.memo .txt{position:absolute;left:14px;right:14px;top:78px;text-align:center;font-family:Georgia,'Times New Roman',serif;font-size:22px;color:#555;border-bottom:2px solid #dcdcdc;padding-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memo:hover{transform:scale(1.06);box-shadow:0 0 0 4px var(--hl), 0 0 16px var(--hl-glow)}
.memo.mail{background:#fffbd6;width:250px;height:180px;border-radius:6px}
.memo.mail::before{display:none}
.memo.mail .flap{position:absolute;left:0;right:0;top:0;height:0;border-left:125px solid transparent;border-right:125px solid transparent;border-top:80px solid #c9c9b3;filter:drop-shadow(0 2px 0 rgba(0,0,0,.08))}
.memo.mail .txt{top:96px;border:0}
.memo.mail .stripe{position:absolute;left:22px;right:22px;top:72px;height:12px;background:#7ecfe6}
.empty-day{font-size:30px;color:#a7a7a7;font-weight:700}
/* note view */
.note{position:absolute;left:245px;top:70px;width:790px;height:560px;background:#fff;border-radius:24px;box-shadow:0 0 0 5px #cfcfcf, 0 8px 16px rgba(0,0,0,.12);overflow:hidden}
.note .hd{height:72px;background:linear-gradient(#a8a8a8,#8f8f8f);color:#fff;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center}
.note .bd{padding:32px 40px;font-size:26px;line-height:1.7;color:#555;font-weight:600}
.note .bd .from{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.note .bd .from .mii{width:74px;height:74px;border-radius:12px;background:#f0f0f0;box-shadow:0 0 0 2px #d0d0d0}
.note .bd .from b{font-size:22px;color:#777}
.note .bd .line{border-bottom:2px solid #e3e3e3;padding:10px 0;font-family:Georgia,serif;font-weight:400;color:#444}
.board .pill{top:562px}
.board .pill.l{left:60px;min-width:250px}.board .pill.r{right:60px;min-width:250px}
/* calendar */
.cal{position:absolute;left:258px;top:60px;width:764px;height:600px;background:#fff;border-radius:6px;box-shadow:0 0 0 3px #d5d5d5}
.cal table{border-collapse:collapse;width:100%}
.cal th{height:48px;font-size:24px;font-weight:700;color:#666;border:2px solid #dedede}
.cal th.sun{color:#e34c4c}.cal th.sat{color:#2f8fe0}
.cal td{width:14.28%;height:74px;border:2px solid #dedede;text-align:center;font-size:36px;color:#333;font-weight:700;position:relative;transition:background .12s}
.cal td.sun{color:#e34c4c}.cal td.sat{color:#2f8fe0}
.cal td.out{background:#dedede;color:#b6b6b6}
.cal td.today{background:#fff6a3}
.cal td:not(.out):hover{background:#fdf59a;box-shadow:inset 0 0 0 3px var(--hl)}
.cal td .env{position:absolute;right:6px;bottom:6px;width:26px;height:18px;background:#fffbd6;border:2px solid #c9c9b3;border-radius:2px}
.cal td .env::after{content:'';position:absolute;left:0;right:0;top:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:8px solid #c9c9b3}
.cal .month{position:absolute;right:28px;bottom:14px;font-size:52px;font-weight:800;color:#8a8a8a}
/* create message */
.mk{position:absolute;top:180px;width:210px;height:250px;border-radius:14px;background:#fff;box-shadow:0 0 0 3px #d0d0d0, 0 6px 14px rgba(0,0,0,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#2fa5e3;font-size:24px;font-weight:700;transition:transform .15s, box-shadow .15s}
.mk:hover{transform:scale(1.05);box-shadow:0 0 0 4px var(--hl), 0 0 18px var(--hl-glow)}
.mk svg{width:120px;height:110px}
.mk.a{left:130px}.mk.b{left:535px;background:#fffbd6}.mk.c{left:940px}
.mk small{font-size:15px;color:#999;font-weight:700;letter-spacing:.5px}
.linklist{position:absolute;left:245px;top:80px;width:790px;padding:30px 40px 30px}
.linklist a{display:flex;align-items:center;gap:20px;padding:18px 10px;border-bottom:2px solid #eee;text-decoration:none;font-size:28px;font-weight:800;color:#444}
.linklist a:hover{color:#2fa5e3}
.linklist a small{margin-left:auto;font-size:16px;color:#999;font-weight:700}
.linklist a svg{width:40px;height:40px}

/* ------------------------------------------------------- HOME overlay */
#home{position:absolute;inset:0;z-index:80;background:rgba(20,20,20,.62);opacity:0;pointer-events:none;transition:opacity .25s}
#home.on{opacity:1;pointer-events:auto}
#home .top,#home .bot{position:absolute;left:0;right:0;background:linear-gradient(#fdfdfd,#e8e8e8)}
#home .top{top:0;height:124px;border-bottom:4px solid #cfcfcf;transform:translateY(-100%);transition:transform .3s}
#home .bot{bottom:0;height:124px;border-top:4px solid #cfcfcf;transform:translateY(100%);transition:transform .3s}
#home.on .top,#home.on .bot{transform:none}
#home .top .pill{top:20px}#home .top .pill.l{left:90px}#home .top .pill.r{right:90px}
#home .bot .pill{top:20px;right:90px}
#home .remote{position:absolute;left:90px;top:26px;display:flex;align-items:center;gap:18px;color:#777;font-size:26px;font-weight:800}
#home .remote .batt{display:flex;gap:4px;padding:6px;border:3px solid #999;border-radius:6px;position:relative}
#home .remote .batt::after{content:'';position:absolute;right:-10px;top:10px;width:6px;height:16px;background:#999;border-radius:0 3px 3px 0}
#home .remote .batt i{width:12px;height:22px;background:#4fc3f7;border-radius:2px}
#home .label{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-size:44px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none}

/* portrait hint */
#rotate{position:fixed;inset:0;z-index:200;background:#000;color:#fff;display:none;align-items:center;justify-content:center;text-align:center;font-size:18px;padding:30px;font-weight:700}
@media (orientation:portrait) and (max-width:700px){#rotate{display:flex}}

/* thumbnails stay still, apart from the disc, which keeps turning */
.channel .banner .sun,.channel .banner .cloud{animation:none}
.channel .banner .disc{animation:spinY 7s linear infinite;transform-style:preserve-3d}

/* ---------------------------------------------- video intro + flat mode */
#introvid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:300;display:none;transition:opacity .7s}
#introvid.on{display:block}
#introvid.fade{opacity:0}


#gesture-hint{position:fixed;left:50%;bottom:9%;transform:translateX(-50%);z-index:302;display:none;pointer-events:none;font-family:'Press Start 2P',monospace;font-size:14px;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.7), 2px 0 0 rgba(255,0,80,.5), -2px 0 0 rgba(0,200,255,.5);letter-spacing:1px;text-align:center;line-height:2}
#gesture-hint small{display:block;font-size:9px;color:#ddd;opacity:.85}
#gesture-hint .blink{animation:blink 1s steps(1) infinite}
body.needs-gesture #gesture-hint{display:block}
body.intro-done #gesture-hint{display:none!important}



#stage{transition:opacity .45s}

/* ============================================================ welcome title
   Big rounded title that fades in over the intro clip, then away again
   before the camera reaches the screen. */
#welcome{
  position:fixed;left:0;right:0;top:4.5%;z-index:301;display:none;
  pointer-events:none;text-align:center;padding:0 6vw;
}
#introvid.on ~ #welcome{display:block}
#welcome span{
  display:inline-block;
  font-family:'Times New Roman',Times,'Liberation Serif',serif;
  font-weight:700;
  font-size:clamp(34px,6.2vw,96px);
  letter-spacing:.005em;
  line-height:1.15;
  color:#fff;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 46%,#d8ecf7 78%,#bcdff2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 2px 0 rgba(40,90,120,.28))
    drop-shadow(0 5px 16px rgba(0,0,0,.6))
    drop-shadow(0 0 40px rgba(150,220,255,.30));
  opacity:0;
}
#welcome.play span{animation:welcome-in var(--wt,8s) ease-out forwards}
@keyframes welcome-in{
  0%   {opacity:0;transform:translateY(14px) scale(.965)}
  11%  {opacity:0;transform:translateY(14px) scale(.965)}
  26%  {opacity:1;transform:translateY(0) scale(1)}
  60%  {opacity:1;transform:translateY(0) scale(1)}
  75%  {opacity:0;transform:translateY(-6px) scale(1.015)}
  100% {opacity:0;transform:translateY(-6px) scale(1.015)}
}
body.no-welcome #welcome{display:none!important}

/* ======================================================= channel tile art
   Generated artwork sits behind the standard Wii-style title plate. */
.banner.b-art{background:#111 center/cover no-repeat}
.banner.b-art .title{
  font-family:'Zen Maru Gothic','Nunito',system-ui,sans-serif;
  font-weight:900;
}
.banner.b-about{background:#fff url('../img/mii-crowd.jpg') center center / cover no-repeat}
.banner.b-photos{background:#c07636 url('../img/tile-photos.jpg') center center / cover no-repeat}
.banner.b-interests{background:#2a6be0 url('../img/tile-interests.jpg') center center / cover no-repeat}

/* the tile titles, in the soft glossy menu style */
.b-photos .title,.b-interests .title,.b-shorts .title{
  font-family:'Zen Maru Gothic','Nunito',system-ui,sans-serif;font-weight:900;
  color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.30), 0 0 26px rgba(0,0,0,.45), 0 0 4px rgba(0,0,0,.5);
}
.b-photos .title{top:30px;font-size:96px}
.b-interests .title{bottom:40px;top:auto;font-size:96px}
.b-shorts .title{top:50%;transform:translateY(-50%);font-size:104px;letter-spacing:.02em}
.b-about .title{top:26px;font-size:104px}

/* --------------------------------------------------------- Short Videos */
#app-shorts{background:linear-gradient(#1a1a1c,#0e0e10)}
#app-shorts .titlebar{background:linear-gradient(#eaeaea,#c9c9c9);color:#5f5f5f}
#app-shorts .body{padding:30px 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-content:start}
.shortcard{
  position:relative;border-radius:16px;overflow:hidden;background:#241416;text-align:left;
  box-shadow:0 0 0 3px #3a2023, 0 6px 16px rgba(0,0,0,.5);transition:transform .18s, box-shadow .18s;
  text-decoration:none;display:block;
}
.shortcard:hover{transform:scale(1.045);z-index:3;box-shadow:0 0 0 4px var(--hl), 0 0 18px var(--hl-glow)}
.shortcard .thumb{position:relative;height:170px;background:linear-gradient(135deg,var(--a,#e0342c),var(--b,#7d0f0c));display:flex;align-items:center;justify-content:center}
.shortcard .thumb img{width:100%;height:100%;object-fit:cover}
.shortcard .thumb::after{
  content:'';position:absolute;left:50%;top:50%;width:0;height:0;margin:-17px 0 0 -12px;
  border-left:34px solid rgba(255,255,255,.95);border-top:22px solid transparent;border-bottom:22px solid transparent;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.shortcard .meta{padding:14px 18px 18px}
.shortcard h3{font-size:22px;color:#fff;font-weight:800;margin-bottom:4px;line-height:1.25}
.shortcard p{font-size:16px;color:#c9aeb0;font-weight:600;line-height:1.4}
.shortcard .len{position:absolute;right:10px;top:140px;background:rgba(0,0,0,.8);color:#fff;font-size:14px;font-weight:800;padding:3px 9px;border-radius:5px}

/* ------------------------------------------------- generated Mii artwork */
.mii-photo{
  display:block;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;
  animation:idle 3.2s ease-in-out infinite;
}
#app-about .plaza .mii-photo{width:400px;height:400px}
#app-now .figure .mii-photo{width:100%;height:100%}
.note .bd .from .mii-photo{width:74px;height:74px;border-radius:12px;object-fit:cover;animation:none;mix-blend-mode:normal}

/* --------------------------------- retro pixel-art tiles (Interests, Writings)
   The 8-bit artwork carries its own title, so the CSS title plate is hidden and
   the bitmap is scaled with hard edges so the pixels stay square. */
.banner.b-writings{background:#101828 url('../img/tile-writings.jpg') center center / cover no-repeat}
.banner.b-interests{background:#3b4ad0 url('../img/tile-interests.jpg') center center / cover no-repeat}
.b-notitle .title{display:none}
.b-writings{image-rendering:pixelated;image-rendering:crisp-edges}
.banner.b-interests{background-color:#000}

/* ============================================================== MOBILE
   Portrait phones get the console screen across the top and a Wii-style
   remote below it that works as the navigation. Desktop is untouched. */
#remote{display:none}

body.mobile{overflow:hidden;background:#0d0d0e}
body.mobile #room{position:fixed;left:0;right:0;top:0;height:56.25vw;bottom:auto;
  overflow:hidden;background:#000;box-shadow:0 6px 18px rgba(0,0,0,.5)}

body.mobile #scene{left:0;top:0;width:1280px;height:720px;transform:scale(var(--s,1));transform-origin:0 0}
body.mobile #cam{transform:none!important;transition:none}
body.mobile #tvobj{left:0;top:0;width:1280px;height:720px}
body.mobile .face.front{left:0;top:0;width:1280px;height:720px;transform:none!important;
  visibility:visible;border:0;border-radius:0;background:#000;box-shadow:none}

body.mobile #stage{left:0;top:0;border-radius:0}
body.mobile #stage::after{border-radius:0;box-shadow:none}
body.mobile #introvid{object-fit:contain;background:#000}
body.mobile #welcome{top:14vw}
body.mobile #welcome span{font-size:clamp(22px,7vw,44px)}

/* ------------------------------------------------------- the remote */
body.mobile #remote{
  display:block;position:fixed;left:0;right:0;top:56.25vw;bottom:0;
  background:radial-gradient(ellipse 78% 46% at 50% 50%,#e1e0e0 0%,#dddcdc 55%,#d6d6d6 100%);border-top:2px solid #c6c6c6;overflow:hidden;
}
#remote .rmt-wrap{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:450px}
@media (max-height:740px){#remote .rmt-wrap{transform:translateY(-50%) scale(.84)}}
#remote .rmt{position:absolute;left:50%;margin-left:-55px;top:0;width:110px;height:450px;z-index:2}
#remote .rmt-img{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
#remote .mark{display:none}

/* transparent tap targets sitting exactly over each button in the render */
#remote .hit{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;background:none;
  border-radius:50%;-webkit-tap-highlight-color:transparent;cursor:pointer}
#remote .hit:active{background:rgba(63,181,239,.30)}
#remote .b-power{left:50.3%;top:7.3%; width:30px;height:30px}
#remote .b-dl   {left:28.5%;top:22.1%;width:32px;height:30px;border-radius:7px}
#remote .b-dr   {left:72.2%;top:22.1%;width:32px;height:30px;border-radius:7px}
#remote .b-a    {left:50%;  top:37.3%;width:46px;height:46px}
#remote .b-home {left:50%;  top:47.7%;width:30px;height:30px}
#remote .b-plus {left:74.8%;top:47.7%;width:28px;height:28px}
#remote .b-one  {left:50%;  top:73.9%;width:34px;height:34px}
#remote .b-two  {left:50%;  top:81.9%;width:34px;height:34px}

/* each label runs a full hairline to its own button, ending in a dot on it */
#remote .tag{position:absolute;height:26px;padding:0 11px;border-radius:999px;
  font:800 12px/26px 'Nunito',sans-serif;color:#4a545e;white-space:nowrap;
  background:rgba(255,255,255,.97);box-shadow:0 0 0 1px #c6ced5, 0 1px 2px rgba(0,0,0,.08);
  -webkit-tap-highlight-color:transparent;z-index:3}
#remote .tag:active{background:#e8f6fd;box-shadow:0 0 0 2px #3fb5ef}
#remote .tag.l{right:calc(50% + 67px)}
#remote .tag.r{left:calc(50% + 67px)}
#remote .tag::after{content:'';position:absolute;top:50%;height:2px;width:var(--len);
  background:#8d99a4;transform:translateY(-50%)}
#remote .tag::before{content:'';position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:#3fb5ef;box-shadow:0 0 0 2px #fff;transform:translateY(-50%);z-index:1}
#remote .tag.l::after {left:100%}
#remote .tag.l::before{left:calc(100% + var(--len) - 5px)}
#remote .tag.r::after {right:100%}
#remote .tag.r::before{right:calc(100% + var(--len) - 5px)}
#remote .t-about  {top:20px;  --len:58px}
#remote .t-photos {top:86px;  --len:32px}
#remote .t-menu   {top:202px; --len:58px}
#remote .t-shorts {top:356px; --len:55px}
#remote .t-proj   {top:86px;  --len:32px}
#remote .t-contact{top:155px; --len:47px}
#remote .t-fun    {top:202px; --len:32px}
#remote .t-writ   {top:320px; --len:55px}

/* text inside the app pages has to survive being scaled to ~30% */
body.mobile .app .titlebar{font-size:64px;height:120px;padding:0 54px}
body.mobile .app .body{top:120px}
body.mobile .app .chrome{height:150px}
body.mobile .app .chrome .pill{height:104px;min-width:360px;font-size:46px;top:22px}
body.mobile .app .chrome .home{width:110px;height:110px;top:20px}
body.mobile #app-about .panel{left:470px;width:750px;height:480px}
body.mobile #app-about .pane h2{font-size:62px}
body.mobile #app-about .pane p{font-size:36px;line-height:1.5}
body.mobile #app-about .facts div{font-size:30px}
body.mobile #app-about .facts b{font-size:22px}
body.mobile .tab{height:76px;font-size:36px;padding:0 40px}
body.mobile .timeline .when{font-size:24px}
body.mobile .timeline .t{font-size:38px}
body.mobile .timeline .w{font-size:30px}
body.mobile .timeline .n{font-size:28px}
body.mobile .proj h3{font-size:44px}
body.mobile .proj p{font-size:30px}
body.mobile .proj .tags span{font-size:22px}
body.mobile .interest .ic{font-size:74px}
body.mobile .interest h3{font-size:40px}
body.mobile .interest p{font-size:28px}
body.mobile .shortcard h3{font-size:36px}
body.mobile .shortcard p{font-size:26px}
body.mobile #app-writings .item b{font-size:32px}
body.mobile #app-writings .item small{font-size:22px}
body.mobile #app-writings .reader h2{font-size:56px}
body.mobile #app-writings .reader p{font-size:34px;line-height:1.6}
body.mobile #app-photos .polaroid span{font-size:22px;height:54px}
body.mobile #app-photos .polaroid{height:300px}
body.mobile #app-photos .polaroid img{height:224px}
body.mobile #app-now .row b{font-size:28px}
body.mobile #app-now .row span{font-size:36px}
body.mobile .linklist a{font-size:44px}
body.mobile .linklist a small{font-size:26px}
body.mobile .job .role{font-size:44px}
body.mobile .job li{font-size:28px}

/* the old landscape nag is replaced by the remote */
body.mobile #rotate{display:none!important}

body.mobile #gesture-hint{display:none!important}


/* ======================================================= startup screen
   Plain white type on black, in the spirit of a console boot notice.
   Everything here is live text, so it stays sharp and editable. */
#bootscreen{
  position:fixed;inset:0;z-index:320;background:#000;display:none;
  align-items:center;justify-content:center;padding:6vh 7vw;
  -webkit-tap-highlight-color:transparent;cursor:var(--cursor);
}
#bootscreen.on{display:flex}
#bootscreen.out{animation:bootout .6s ease forwards}
@keyframes bootout{to{opacity:0}}
#bootscreen .bootinner{max-width:1000px;text-align:center;animation:bootin 1.1s ease-out both}
@keyframes bootin{from{opacity:0}to{opacity:1}}
#bootscreen h1{
  font-family:'Nunito',Arial,Helvetica,sans-serif;font-weight:900;
  font-size:clamp(22px,3.6vw,50px);line-height:1.45;letter-spacing:.01em;
  color:#fff;text-transform:uppercase;margin-bottom:.7em;
}
#bootscreen p{
  font-family:'Nunito',Arial,Helvetica,sans-serif;font-weight:700;
  font-size:clamp(14px,1.7vw,23px);line-height:1.75;color:#cfcfcf;
  max-width:820px;margin:0 auto;
}
#bootscreen .bootprompt{
  margin-top:clamp(28px,5vh,60px);display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(13px,1.4vw,19px);color:#fff;
  animation:blink 1.7s ease-in-out infinite;
}
#bootscreen .abtn{
  display:inline-flex;width:38px;height:38px;border-radius:50%;background:#e9e9e9;color:#333;
  align-items:center;justify-content:center;font-weight:900;font-size:18px;box-shadow:inset 0 -3px 0 #bdbdbd;
}
body.booting #room,body.booting #welcome,body.booting #gesture-hint,body.booting #remote{visibility:hidden}

/* ================================================ About Mii: plain page */
#app-about{background:#fdfdfd}
#app-about .titlebar{background:linear-gradient(#8fd7f5,#4fbbe9);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
#app-about .body{padding:0}
#app-about .doc{
  padding:20px 44px 24px;font-family:'Nunito',system-ui,sans-serif;color:#2f3438;
  display:grid;grid-template-columns:1fr 1.3fr;gap:0 46px;align-content:start;
}
#app-about .doc .col{min-width:0}
#app-about .doc h2{
  font-size:21px;font-weight:900;color:#1b1f22;margin:0 0 6px;
  padding-bottom:5px;border-bottom:2px solid #e3e8ec;break-after:avoid;
}
#app-about .doc .col > section + section{margin-top:16px}
#app-about .doc ul{list-style:none;padding:0;margin:0}
#app-about .doc section > ul > li{
  position:relative;padding:3px 0 3px 16px;font-size:15px;line-height:1.4;font-weight:700;color:#2f3438;
  break-inside:avoid-column;
}
#app-about .doc section > ul > li::before{
  content:'';position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:#4fbbe9;
}
#app-about .doc li ul{margin:3px 0 6px}
#app-about .doc li li{
  position:relative;padding:2px 0 2px 15px;font-size:13.5px;line-height:1.45;font-weight:600;color:#5b656d;
}
#app-about .doc li li::before{
  content:'';position:absolute;left:3px;top:11px;width:7px;height:2px;border-radius:2px;background:#b9c4cc;
}
body.mobile #app-about .doc{padding:40px 56px 60px;max-width:none}
body.mobile #app-about .doc h2{font-size:62px;margin:52px 0 20px;padding-bottom:14px}
body.mobile #app-about .doc > ul > li{font-size:44px;padding-left:44px}
body.mobile #app-about .doc > ul > li::before{width:15px;height:15px;top:32px;left:6px}
body.mobile #app-about .doc li li{font-size:36px;padding-left:44px}
body.mobile #app-about .doc li li::before{width:18px;height:4px;top:30px;left:10px}

@keyframes spinY{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}