:root{
  --ink:#16181d;
  --ink-soft:#4a4f58;
  --paper:#faf8f4;
  --paper-raised:#ffffff;
  --line:#e6e2da;
  --accent:#ff5a36;
  --accent-ink:#b8381c;
  --accent-soft:#ffe9e1;
  --dark:#111317;
  --dark-raised:#1b1e24;
  --dark-line:#2d313a;
  --on-dark:#f6f3ec;
  --on-dark-soft:#9aa0ab;
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand{font-family:"Sora","Inter",sans-serif;}
button{font-family:inherit;}
a{color:inherit;}

/* ================= Landing (profile) screen ================= */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:480px;
  margin:0 auto;
  padding:20px 20px 0;
}
.brand{font-weight:800; font-size:1.1rem; letter-spacing:-0.02em;}
.classic-link{
  font-size:0.82rem;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  border:1px solid var(--line);
  padding:7px 13px;
  border-radius:999px;
  transition:border-color .15s ease, color .15s ease;
}
.classic-link:hover{border-color:var(--accent); color:var(--accent-ink);}

.landing{
  max-width:480px;
  margin:0 auto;
  padding:28px 24px 64px;
  text-align:center;
}
.landing-avatar{
  width:112px;
  height:112px;
  border-radius:50%;
  margin:0 auto 18px;
  padding:3px;
  background:conic-gradient(from 210deg, var(--accent), #ffb199, var(--accent));
}
.landing-avatar-gap{
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--paper);
  padding:3px;
}
.landing-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.06);
}
.landing h1{
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0 0 6px;
}
.landing-role{
  font-size:0.95rem;
  color:var(--ink-soft);
  margin:0 0 24px;
}
.play-all-btn{
  appearance:none;
  border:none;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:0.95rem;
  padding:13px 26px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(255,90,54,0.6);
  transition:transform .15s ease;
  margin-bottom:36px;
}
.play-all-btn:hover{transform:translateY(-1px);}
.play-all-btn:active{transform:translateY(0);}

.bubble-row{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}
.bubble{
  appearance:none;
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:76px;
}
.bubble-ring{
  width:68px;
  height:68px;
  border-radius:50%;
  padding:3px;
  background:conic-gradient(from 210deg, var(--accent), #ffb199, var(--accent));
  transition:background .2s ease;
}
.bubble.seen .bubble-ring{
  background:var(--line);
}
.bubble-ring-gap{
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--paper);
  padding:2.5px;
}
.bubble-ring img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.06);
}
.bubble-mono{
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--dark);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:0.86rem;
  letter-spacing:-0.02em;
}
.bubble-label{
  font-size:0.76rem;
  font-weight:600;
  color:var(--ink-soft);
}

.landing-footer{
  margin-top:40px;
  font-size:0.78rem;
  color:var(--ink-soft);
}
.landing-footer a{
  color:var(--accent-ink);
  font-weight:600;
  text-decoration:none;
}

/* ================= Story viewer ================= */
.viewer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10,10,12,0.92);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
}
.viewer-backdrop[hidden]{
  display:none;
}
.viewer-frame{
  position:relative;
  width:min(420px, 100vw);
  height:min(860px, 100vh);
  background:var(--dark);
  overflow:hidden;
  border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);
}

.progress-row{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  display:flex;
  gap:5px;
  z-index:30;
}
.progress-bar{
  flex:1;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,0.25);
  overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  width:0%;
  background:#fff;
  border-radius:999px;
}
.progress-bar-fill.is-done{width:100%;}
.progress-bar-fill.is-filling{
  animation-name:fillBar;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}
.progress-bar-fill.is-paused{animation-play-state:paused;}
@keyframes fillBar{
  from{width:0%;}
  to{width:100%;}
}

.viewer-header{
  position:absolute;
  top:24px;
  left:14px;
  right:14px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:30;
}
.viewer-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:var(--dark-raised);
  display:flex;
  align-items:center;
  justify-content:center;
}
.viewer-avatar img{width:100%; height:100%; object-fit:cover; filter:grayscale(1);}
.viewer-avatar .bubble-mono{font-size:0.7rem;}
.viewer-title{
  color:var(--on-dark);
  font-weight:700;
  font-size:0.88rem;
}
.viewer-sub{
  color:var(--on-dark-soft);
  font-size:0.78rem;
  flex:1;
}
.viewer-close{
  appearance:none;
  background:rgba(255,255,255,0.08);
  border:none;
  color:var(--on-dark);
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:1rem;
  cursor:pointer;
  flex-shrink:0;
}

.slides{
  position:relative;
  width:100%;
  height:100%;
}
.story-slide{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:100px 32px 60px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
.story-slide.is-active{
  opacity:1;
  pointer-events:auto;
}

.tap-zone{
  position:absolute;
  top:0;
  bottom:0;
  width:34%;
  z-index:20;
}
.tap-left{left:0;}
.tap-right{right:0;}

/* interactive content inside a slide must float above the tap zones */
.story-slide a,
.story-slide button{
  position:relative;
  z-index:25;
}

/* ---- slide content styles ---- */
.s-kicker{
  text-transform:uppercase;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--accent);
  margin:0 0 14px;
}
.s-cover-photo{
  width:150px;
  height:150px;
  border-radius:50%;
  margin:0 auto 24px;
  overflow:hidden;
  border:3px solid var(--accent);
}
.s-cover-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08);}
.story-slide h2{
  font-size:2.1rem;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.02em;
  color:var(--on-dark);
  text-align:center;
  margin:0 0 14px;
  text-transform:uppercase;
}
.s-role{
  text-align:center;
  color:var(--on-dark-soft);
  font-size:0.95rem;
  font-weight:600;
}
.s-role .dot{color:var(--accent); margin:0 6px;}

.s-stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.s-stat{
  background:var(--dark-raised);
  border:1px solid var(--dark-line);
  border-radius:14px;
  padding:22px 16px;
  text-align:center;
}
.s-stat-num{
  display:block;
  font-family:"Sora",sans-serif;
  font-size:2.1rem;
  font-weight:800;
  color:var(--accent);
  margin-bottom:6px;
}
.s-stat-label{
  font-size:0.78rem;
  color:var(--on-dark-soft);
  line-height:1.3;
}

.s-highlight-title{
  font-size:1.7rem;
  font-weight:800;
  color:var(--on-dark);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0 0 16px;
  border-left:3px solid var(--accent);
  padding-left:18px;
}
.s-body{
  font-size:1.05rem;
  line-height:1.6;
  color:var(--on-dark-soft);
  padding-left:21px;
}

.s-job-period{
  display:inline-block;
  font-size:0.76rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--accent-ink);
  background:var(--accent-soft);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:14px;
  align-self:flex-start;
}
.s-job-role{
  font-size:1.5rem;
  font-weight:800;
  color:var(--on-dark);
  margin:0 0 4px;
  letter-spacing:-0.01em;
}
.s-job-org{
  font-size:0.92rem;
  color:var(--on-dark-soft);
  margin:0 0 20px;
}
.s-job-part{
  font-size:0.72rem;
  font-weight:700;
  color:var(--on-dark-soft);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:10px;
}
.s-bullets{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.s-bullets li{
  font-size:0.92rem;
  line-height:1.5;
  color:var(--on-dark-soft);
  padding-left:16px;
  position:relative;
}
.s-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
}

.s-info-row{
  display:flex;
  flex-direction:column;
  gap:22px;
  align-items:center;
  text-align:center;
}
.s-info-label{
  display:block;
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--accent);
  font-weight:700;
  margin-bottom:6px;
}
.s-info-value{
  font-size:1.2rem;
  font-weight:700;
  color:var(--on-dark);
}

.s-pg-year{
  display:block;
  font-family:"Sora",sans-serif;
  font-size:3.4rem;
  font-weight:800;
  color:var(--accent);
  text-align:center;
  line-height:1;
  margin-bottom:14px;
}
.s-pg-title{
  font-size:1.5rem;
  font-weight:800;
  color:var(--on-dark);
  text-align:center;
  line-height:1.15;
  margin:0 0 8px;
}
.s-pg-org{
  text-align:center;
  color:var(--on-dark-soft);
  font-size:0.95rem;
}

.s-lang-name{
  text-align:center;
  font-size:1.6rem;
  font-weight:800;
  color:var(--on-dark);
  margin-bottom:14px;
}
.s-lang-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:16px;
}
.s-lang-dots i{
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--dark-line);
  display:block;
}
.s-lang-dots i.on{background:var(--accent);}
.s-lang-note{
  text-align:center;
  color:var(--on-dark-soft);
  font-size:0.88rem;
}

.s-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.s-list li strong{
  display:block;
  color:var(--on-dark);
  font-size:0.98rem;
  margin-bottom:3px;
}
.s-list li span{
  display:block;
  color:var(--on-dark-soft);
  font-size:0.85rem;
  line-height:1.45;
}

.s-extra-org{
  color:var(--on-dark-soft);
  font-size:0.88rem;
  margin:0 0 14px;
}
.s-extra-desc{
  color:var(--on-dark-soft);
  font-size:0.95rem;
  line-height:1.55;
  margin:0 0 20px;
}
.s-link-btn{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:0.88rem;
  padding:11px 20px;
  border-radius:999px;
}

.s-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.s-tag{
  background:var(--dark-raised);
  border:1px solid var(--dark-line);
  color:var(--on-dark);
  padding:9px 15px;
  border-radius:999px;
  font-size:0.85rem;
  font-weight:500;
}

.s-contact-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.s-contact-card{
  display:flex;
  flex-direction:column;
  gap:3px;
  background:var(--dark-raised);
  border:1px solid var(--dark-line);
  border-radius:14px;
  padding:16px 18px;
  text-decoration:none;
}
.s-contact-card .c-label{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--accent);
  font-weight:700;
}
.s-contact-card .c-value{
  color:var(--on-dark);
  font-weight:700;
  font-size:1rem;
}
.s-replay{
  margin-top:22px;
  text-align:center;
}
.s-replay button{
  appearance:none;
  background:none;
  border:1px solid var(--dark-line);
  color:var(--on-dark-soft);
  font-weight:600;
  font-size:0.85rem;
  padding:10px 18px;
  border-radius:999px;
  cursor:pointer;
}

/* ================= Responsive ================= */
@media (max-width:480px){
  .viewer-backdrop{background:var(--dark);}
  .viewer-frame{
    width:100vw;
    height:100vh;
    height:100dvh;
    border-radius:0;
    box-shadow:none;
  }
}
@media (max-width:360px){
  .bubble{width:64px;}
  .bubble-ring{width:60px; height:60px;}
}