:root {
  color-scheme: light;
  --deep: #103b32;
  --forest: #075c45;
  --green: #0f7a5b;
  --lime: #a7e3a1;
  --mint: #def3e0;
  --canvas: #f7fbf4;
  --paper: #ffffff;
  --sun: #ffd166;
  --butter: #fff2c6;
  --ink: #173a31;
  --muted: #5c786d;
  --line: #d8e8d9;
  --blue: #e0ecfa;
  --pink: #fadadd;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-width: 320px; background: #eaf2e9; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
button:active:not(:disabled), .selection:active { filter: brightness(.96); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #d79522; outline-offset: 3px; }
svg { display: block; }
.icon { width: 22px; height: 22px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 18px; height: 18px; }
.icon.lg { width: 27px; height: 27px; }
.eyebrow { color: var(--green); font-size: 11px; font-weight: 850; letter-spacing: .14em; }

.demo-shell { display: grid; grid-template-columns: minmax(275px, 330px) minmax(475px, 1fr) minmax(270px, 320px); min-height: 100dvh; }
.studio-panel, .guide-panel { height: 100dvh; overflow-y: auto; background: #f9fcf8; scrollbar-width: thin; }
.studio-panel { border-right: 1px solid #dceadd; padding: 30px 24px 22px; }
.guide-panel { border-left: 1px solid #dceadd; padding: 38px 24px 28px; }
.studio-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.brand-lockup { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 27px; font-weight: 850; letter-spacing: -.06em; }
.brand-mark { width: 40px; height: 40px; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-dot { color: #e5aa22; }
.studio-tag { display: inline-flex; padding: 7px 10px; border-radius: 20px; background: var(--mint); color: var(--forest); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.studio-heading { padding: 48px 0 30px; }
.studio-heading h1 { font-size: clamp(36px, 3vw, 48px); letter-spacing: -.075em; line-height: 1.02; margin: 13px 0 16px; font-weight: 850; }
.studio-heading h1 em { font-style: normal; color: var(--green); }
.studio-heading p, .guide-head p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
.studio-group { border-top: 1px solid var(--line); padding: 21px 0 18px; }
.group-heading, .module-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.group-heading h2, .module-head h2 { margin: 0; font-size: 13px; font-weight: 800; }
.group-heading span, .module-head span { color: var(--muted); font-size: 11px; }
.centre-fixed { background: var(--mint); border: 1px solid #c8e9cf; border-radius: 13px; display: grid; gap: 3px; padding: 11px 13px; }.centre-fixed strong { font-size: 13px; }.centre-fixed small { color: var(--muted); font-size: 11px; }
.role-list { display: grid; gap: 7px; }
.role-option { border: 1px solid transparent; background: transparent; color: var(--ink); border-radius: 15px; width: 100%; min-height: 55px; padding: 8px 10px; display: flex; align-items: center; gap: 11px; text-align: left; transition: background .2s, border-color .2s, transform .2s; }
.role-option:hover { background: #edf7ed; }
.role-option.is-selected { background: var(--mint); border-color: #c8e9cf; }
.role-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #e9f2e7; color: var(--forest); font-size: 12px; font-weight: 850; flex: 0 0 auto; }
.role-option.is-selected .role-avatar { background: var(--green); color: white; }
.role-copy { min-width: 0; display: grid; gap: 2px; flex: 1; }
.role-copy strong { font-size: 12px; font-weight: 800; }
.role-copy small { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-option .tiny-dot { width: 6px; height: 6px; border-radius: 50%; background: #1aab78; }
.role-option .tiny-dot.preview { background: #b8c9bd; }
.studio-footer { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 9px; }
.reset-button { min-height: 44px; border-radius: 11px; border: 1px solid var(--line); color: var(--forest); background: #fff; font-size: 12px; font-weight: 800; }
.studio-footer span { color: #7d9488; font-size: 10px; }

.stage { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 18px; background: radial-gradient(circle at 10% 14%, #d3efdc 0, transparent 24%), radial-gradient(circle at 91% 87%, #fff1bf 0, transparent 25%), #eaf2e9; }
.stage-topline { display: flex; align-items: center; gap: 8px; color: #526f61; font-size: 10px; font-weight: 800; letter-spacing: .1em; margin-bottom: 16px; }
.stage-topline span:last-child { letter-spacing: 0; font-weight: 600; }
.pulse-dot, .legend-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #31ba7d; box-shadow: 0 0 0 4px #31ba7d20; }
.phone { width: min(410px, 100%); height: min(855px, calc(100dvh - 95px)); min-height: 660px; border: 9px solid #123d34; border-radius: 54px; overflow: hidden; box-shadow: 0 36px 80px #2a50433d, 0 2px 0 #082d24; position: relative; display: flex; flex-direction: column; background: var(--canvas); }
.phone-hardware { height: 40px; flex: 0 0 auto; padding: 8px 22px 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; position: relative; background: var(--forest); color: white; font-size: 12px; font-weight: 800; }
.phone-hardware.light { background: var(--canvas); color: var(--ink); }
.island { position: absolute; width: 102px; height: 23px; border-radius: 0 0 15px 15px; background: #123d34; top: 0; left: calc(50% - 51px); }
.hardware-icons { display: flex; gap: 4px; align-items: end; height: 13px; }
.hardware-icons i { display: block; width: 4px; height: 7px; border-radius: 2px; background: currentColor; }
.hardware-icons i:nth-child(2) { height: 10px; }.hardware-icons i:nth-child(3) { height: 13px; }
.app { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; position: relative; background: var(--canvas); }
.app::-webkit-scrollbar { display: none; }
.bottom-nav { min-height: 76px; flex: 0 0 auto; display: grid; grid-template-columns: repeat(var(--nav-items, 5), 1fr); gap: 1px; background: #ffffffed; border-top: 1px solid var(--line); padding: 8px 8px 4px; z-index: 4; backdrop-filter: blur(12px); }
.nav-item { border: 0; background: transparent; border-radius: 13px; color: #6e887b; min-height: 58px; padding: 6px 2px 2px; display: grid; place-items: center; align-content: center; gap: 2px; font-size: 10px; }
.nav-item .icon { width: 20px; height: 20px; }
.nav-item.active { color: var(--green); font-weight: 850; }
.nav-item.active .icon-wrap { background: var(--mint); }
.icon-wrap { display: grid; place-items: center; width: 41px; height: 32px; border-radius: 16px; }
.home-indicator { position: absolute; bottom: 2px; width: 115px; height: 4px; left: calc(50% - 57px); z-index: 6; background: #173a31; border-radius: 5px; }
.stage-caption { color: #6b8578; font-size: 10px; text-align: center; margin: 15px 0 0; }

.guide-head h2 { font-size: 30px; letter-spacing: -.055em; line-height: 1.06; margin: 8px 0 8px; }
.journey-list { display: grid; gap: 9px; margin-top: 27px; }
.journey-step { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); background: white; border-radius: 15px; padding: 12px; text-align: left; width: 100%; min-height: 68px; transition: transform .2s, border-color .2s; }
.journey-step:hover { border-color: #95cda7; background: #f5fbf4; }
.journey-index { color: var(--green); font-size: 11px; font-weight: 850; padding-top: 2px; }
.journey-step span:last-child { display: grid; gap: 3px; }
.journey-step strong { font-size: 12px; font-weight: 850; }
.journey-step small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.guide-divider { border-top: 1px solid var(--line); margin: 28px 0 20px; }
.module-list { display: flex; flex-wrap: wrap; gap: 7px; }
.module-chip { min-height: 31px; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 5px 10px; color: var(--forest); font-size: 10px; font-weight: 700; }
.module-chip:hover { border-color: var(--green); background: var(--mint); }
.guide-legend { margin-top: 30px; font-size: 10px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.legend-dot { width: 6px; height: 6px; box-shadow: none; }.legend-dot.muted { background: #b8c9bd; margin-left: 7px; }

/* Inside the mobile canvas */
.screen { min-height: 100%; }
.top-hero { padding: 16px 24px 26px; color: white; background: linear-gradient(148deg, #0d7054, #07543f 72%); border-radius: 0 0 30px 30px; position: relative; overflow: hidden; }
.top-hero::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -150px; top: 32px; background: radial-gradient(circle, #76d99780, transparent 70%); pointer-events: none; }
.top-hero.teacher { background: linear-gradient(150deg, #123e3b, #0e5f50); }
.top-hero.owner { background: linear-gradient(150deg, #074e44, #0e6b52); }
.top-hero.provider { background: linear-gradient(150deg, #173d45, #13566a); }
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: relative; z-index: 1; }
.wordmark { font-size: 20px; font-weight: 850; letter-spacing: -.065em; }.wordmark i { display: inline-block; width: 7px; height: 7px; background: var(--sun); border-radius: 50%; margin: 0 2px 8px 0; }
.context-name { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; font-weight: 750; text-align: right; }.context-name.on-dark { color: #c7ebd6; margin-left: auto; }
.round-icon { display: grid; place-items: center; border: 0; border-radius: 50%; background: #ffffff24; color: inherit; width: 44px; height: 44px; flex: 0 0 auto; }
.round-icon.light { background: #e8f3e9; color: var(--forest); }
.hero-kicker { font-size: 11px; letter-spacing: .08em; font-weight: 850; color: #bee8d1; text-transform: uppercase; margin-top: 31px; position: relative; z-index: 1; }
.hero-title { margin: 9px 0 8px; font-size: 37px; line-height: 1.06; letter-spacing: -.07em; font-weight: 850; position: relative; z-index: 1; max-width: 285px; }
.hero-title.wide { max-width: 100%; }.hero-sub { font-size: 13px; color: #d5f0de; line-height: 1.45; position: relative; z-index: 1; max-width: 300px; }
.hero-pill { display: inline-flex; align-items: center; gap: 5px; margin-top: 20px; border-radius: 18px; background: #e2f4df; color: #085f45; padding: 8px 12px; font-size: 10px; font-weight: 850; position: relative; z-index: 1; }
.sprout-orb { position: absolute; right: 17px; top: 127px; width: 110px; height: 128px; filter: drop-shadow(0 8px 24px #efd75c77); }
.sprout-orb svg { width: 100%; height: 100%; }
.screen-body { padding: 23px 22px 28px; }
.section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.section-label h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; font-weight: 850; }
.section-label button, .text-link { border: 0; background: none; color: var(--green); font-size: 11px; font-weight: 800; padding: 6px 0; min-height: 44px; }
.stack { display: grid; gap: 11px; }
.action-card, .record-card, .feature-card { border: 1px solid #e5eee3; border-radius: 20px; background: white; width: 100%; text-align: left; color: var(--ink); }
.action-card { min-height: 95px; padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 7px 22px #174a2c09; }
.action-card:hover, .record-card:hover, .feature-card:hover { border-color: #b4dfbd; }
.card-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; flex: 0 0 auto; background: var(--butter); color: #8f6224; }
.card-icon.green { background: var(--mint); color: var(--green); }.card-icon.blue { background: var(--blue); color: #417da1; }.card-icon.pink { background: var(--pink); color: #a45566; }
.card-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.card-copy strong { font-size: 14px; font-weight: 850; line-height: 1.2; }.card-copy small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.chev { color: var(--green); font-size: 23px; font-weight: 600; }
.timeline { border-radius: 20px; padding: 16px 16px 16px 18px; background: #edf6ec; display: grid; gap: 3px; }
.timeline-row { display: flex; gap: 12px; align-items: flex-start; min-height: 52px; }
.timeline-line { width: 16px; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.timeline-dot { width: 12px; height: 12px; border: 3px solid var(--green); border-radius: 50%; background: #fff; margin-top: 4px; }.timeline-dot.done { background: var(--green); }
.timeline-stem { height: 37px; width: 2px; background: #c5dfc8; }.timeline-row:last-child .timeline-stem { display: none; }
.timeline-row strong { display: block; font-size: 12px; }.timeline-row small { color: var(--muted); font-size: 10px; }
.notice-strip { background: var(--butter); border-radius: 17px; padding: 14px 16px; width: 100%; border: 0; text-align: left; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.notice-strip strong { display: block; font-size: 12px; }.notice-strip small { display: block; color: #775f31; font-size: 10px; margin-top: 3px; }
.page-header { padding: 13px 23px 0; }
.page-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.back-button { min-height: 44px; border: 0; padding: 0 9px 0 0; background: transparent; color: var(--green); display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; }
.page-header h1 { margin: 18px 0 2px; font-size: 33px; line-height: 1.08; letter-spacing: -.065em; font-weight: 850; }
.page-header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.content { padding: 20px 22px 32px; display: grid; gap: 16px; }
.status-panel { border-radius: 21px; background: #e4f2e7; padding: 17px; display: flex; gap: 13px; align-items: flex-start; }
.status-panel.warn { background: var(--butter); }.status-panel.blue { background: var(--blue); }.status-panel.pink { background: #fae8e9; }
.status-panel .status-icon { background: var(--green); border-radius: 14px; color: #fff; width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; }
.status-panel.warn .status-icon { background: #af7a25; }
.status-panel strong { font-size: 14px; display: block; margin-bottom: 2px; }.status-panel p { font-size: 11px; color: var(--muted); margin: 0; line-height: 1.45; }
.mini-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; font-weight: 850; font-size: 17px; letter-spacing: -.025em; }
.mini-heading small { font-size: 11px; color: var(--green); font-weight: 750; letter-spacing: 0; }
.record-card { padding: 14px 15px; display: flex; align-items: center; gap: 12px; min-height: 72px; }
.record-card .avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; background: var(--mint); color: var(--green); display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.record-card .avatar.sun { background: var(--butter); color: #a16e25; }.record-card .avatar.blue { background: var(--blue); color: #4a7c9b; }
.record-main { min-width: 0; flex: 1; display: grid; gap: 3px; }.record-main strong { font-size: 13px; }.record-main small { font-size: 10px; line-height: 1.3; color: var(--muted); }
.badge { font-size: 10px; line-height: 1; font-weight: 850; color: var(--green); background: var(--mint); padding: 7px 8px; border-radius: 14px; white-space: nowrap; }
.badge.warn { background: var(--butter); color: #976121; }.badge.blue { background: var(--blue); color: #417b9c; }.badge.gray { background: #edf0ed; color: #6d8173; }
.primary-button, .secondary-button, .ghost-button { min-height: 50px; border-radius: 15px; font-weight: 850; font-size: 13px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; }
.primary-button { background: var(--green); border: 1px solid var(--green); color: white; }.primary-button:hover { background: #096a4e; }
.secondary-button { background: white; border: 1px solid #cde3cf; color: var(--forest); }.secondary-button:hover { background: #eaf8eb; }
.ghost-button { background: transparent; border: 0; color: var(--green); }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.money-card { background: white; border-radius: 23px; padding: 20px; box-shadow: 0 12px 28px #173a3110; }
.money-card .eyebrow { font-size: 10px; }.money-amount { font-size: 41px; line-height: 1; letter-spacing: -.055em; font-weight: 900; margin: 12px 0; }
.money-line { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 11px; margin-top: 11px; font-size: 12px; }.money-line span { color: var(--muted); }.money-line strong { font-weight: 800; }
.selection { display: flex; align-items: center; gap: 10px; min-height: 66px; background: white; border: 1px solid var(--line); border-radius: 16px; padding: 12px; font-size: 12px; }
.selection:has(input:checked) { border-color: var(--green); background: var(--mint); }.selection input { accent-color: var(--green); width: 19px; height: 19px; margin: 0; flex: 0 0 auto; }
.selection-copy { flex: 1; display: grid; gap: 2px; }.selection-copy strong { font-size: 12px; }.selection-copy small { color: var(--muted); font-size: 10px; }
.field { display: grid; gap: 6px; font-size: 12px; font-weight: 800; }.field input, .field select, .field textarea { width: 100%; border: 1px solid #cbded0; background: white; border-radius: 12px; padding: 11px 12px; min-height: 47px; color: var(--ink); }.field textarea { min-height: 90px; resize: vertical; }
.info-note { border-radius: 15px; padding: 11px 13px; background: #eef5ee; color: var(--muted); font-size: 10px; line-height: 1.5; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.stat { border-radius: 16px; background: #eff7ee; padding: 13px 9px; }.stat strong { display: block; font-size: 21px; letter-spacing: -.05em; color: var(--forest); }.stat span { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.choice-grid .selection { min-height: 55px; }
.feature-card { padding: 16px; display: grid; gap: 5px; }.feature-card strong { font-size: 14px; }.feature-card small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.directory { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.directory button { display: grid; gap: 11px; align-content: space-between; border: 1px solid var(--line); background: white; color: var(--ink); min-height: 113px; border-radius: 19px; padding: 13px; text-align: left; }.directory button:hover { border-color: #a6d5b1; }.directory .icon { color: var(--green); }.directory strong { font-size: 12px; line-height: 1.25; }
.progress-bar { width: 100%; height: 7px; background: #e4ede4; border-radius: 10px; overflow: hidden; }.progress-bar i { display: block; height: 100%; background: var(--green); border-radius: 10px; }
.tiny-separator { height: 1px; background: var(--line); margin: 2px 0; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--deep); color: white; border-radius: 13px; padding: 13px 16px; box-shadow: 0 10px 30px #092c2760; z-index: 20; min-width: min(300px, calc(100vw - 30px)); text-align: center; font-size: 12px; font-weight: 750; transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1120px) {
  .demo-shell { grid-template-columns: 250px minmax(430px, 1fr); }
  .guide-panel { display: none; }
  .studio-panel { padding-inline: 18px; }
}
@media (max-width: 700px) {
  .demo-shell { display: flex; flex-direction: column; min-height: 100dvh; height: 100dvh; }
  .studio-panel { width: 100%; height: auto; overflow: visible; padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .studio-brand { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; }.brand-lockup { font-size: 20px; }.brand-mark { width: 28px; height: 28px; }.studio-tag { font-size: 9px; }
  .studio-heading, .studio-group, .studio-footer { display: none; }
  .studio-panel::after { content: "Tukar peranan melalui butang di penjuru kanan atas app"; display: block; font-size: 10px; color: var(--muted); padding: 4px 0 0 36px; }
  .stage { padding: 0; display: block; flex: 1; min-height: 0; background: var(--canvas); }
  .stage-topline, .stage-caption { display: none; }
  .phone { width: 100%; max-width: none; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .phone-hardware { padding-top: 9px; }.island { height: 22px; border-radius: 0 0 14px 14px; }
  .home-indicator { bottom: max(2px, env(safe-area-inset-bottom)); }
  .bottom-nav { padding-bottom: max(5px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) { .hero-title { font-size: 33px; }.sprout-orb { right: 6px; width: 95px; }.content, .screen-body { padding-inline: 16px; }.page-header { padding-inline: 17px; } }
@media (max-height: 600px) and (orientation: landscape) {
  .demo-shell { display: flex; flex-direction: column; min-height: 100dvh; height: 100dvh; }
  .studio-panel { width: 100%; height: auto; overflow: visible; padding: 7px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .studio-brand { flex-direction: row; justify-content: space-between; align-items: center; }
  .brand-lockup { font-size: 18px; }.brand-mark { width: 25px; height: 25px; }
  .studio-heading, .studio-group, .studio-footer, .guide-panel, .stage-topline, .stage-caption { display: none; }
  .stage { padding: 0; display: block; flex: 1; min-height: 0; background: var(--canvas); }
  .phone { width: 100%; max-width: none; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .phone-hardware, .island, .home-indicator { display: none; }
  .bottom-nav { min-height: 66px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .top-hero { padding-block: 10px 15px; }.hero-kicker { margin-top: 13px; }.hero-title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* 2026 editorial mobile refresh: larger type, real classroom imagery, quieter surfaces. */
@font-face {
  font-family: "DM Sans";
  src: url("./assets/dm-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./assets/nunito-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}
:root {
  --deep: #163e33;
  --forest: #154f3e;
  --green: #176b52;
  --lime: #cdebd8;
  --mint: #e4f5eb;
  --canvas: #ffffff;
  --paper: #ffffff;
  --sun: #f6be6a;
  --butter: #fff0d5;
  --ink: #183129;
  --muted: #5d7168;
  --line: #e1eae3;
  --blue: #e9f2fa;
  --pink: #fae7e1;
  font-family: "DM Sans", system-ui, sans-serif;
}
body { background: #e9eee9; }
button, input, select, textarea { font-family: "DM Sans", system-ui, sans-serif; }
.studio-panel, .guide-panel { background: #fcfcf8; }
.studio-heading { padding-block: 42px 28px; }
.studio-heading h1, .guide-head h2 { font-family: "Nunito", "DM Sans", sans-serif; font-weight: 900; letter-spacing: -.05em; }
.studio-heading h1 { font-size: clamp(35px, 3vw, 45px); }
.studio-heading h1 em { color: #db735c; }
.studio-heading p, .guide-head p { font-size: 14px; }
.studio-tag { background: #fce8de; color: #a4513f; letter-spacing: .04em; }
.brand-lockup { font-family: "Nunito", sans-serif; letter-spacing: -.055em; }
.stage { background: radial-gradient(circle at 10% 20%, #dbe9db 0, transparent 30%), radial-gradient(circle at 87% 86%, #f9e7d8 0, transparent 27%), #e9eee9; }
.phone { width: min(402px, 100%); border-color: #1a2823; border-radius: 43px; box-shadow: 0 26px 60px #263d302a; background: white; }
.phone-hardware, .phone-hardware.light { background: #fff; color: var(--ink); }
.island { background: #1a2823; }
.app { background: #fff; }
.bottom-nav { background: #fff; border-top-color: #e8eee9; padding-top: 6px; }
.nav-item { color: #64786d; font-size: 11px; font-weight: 650; }
.nav-item.active { color: var(--green); font-weight: 800; }
.nav-item.active .icon-wrap { background: var(--mint); }
.home-indicator { background: #223d33; }
.top-hero { background: #fff; color: var(--ink); border-radius: 0; padding: 8px 20px 0; overflow: visible; }
.top-hero.teacher, .top-hero.owner, .top-hero.provider { background: #fff; }
.top-hero::before { display: none; }
.top-row { gap: 8px; }
.wordmark { color: var(--forest); font-family: "Nunito", sans-serif; font-size: 21px; font-weight: 900; letter-spacing: -.065em; }
.wordmark i { display: none; }
.wordmark-dot { color: #e67a5f; }
.context-name, .context-name.on-dark { color: #63796c; max-width: 137px; font-size: 11px; font-weight: 700; }
.round-icon, .round-icon.light { color: var(--forest); background: #edf5ef; }
.hero-kicker { margin-top: 26px; color: #6a7e70; font-size: 11px; letter-spacing: .11em; }
.hero-title, .page-header h1 { font-family: "Nunito", "DM Sans", sans-serif; font-weight: 900; letter-spacing: -.045em; }
.hero-title { max-width: 100%; margin: 8px 0 4px; font-size: 34px; line-height: 1.08; }
.hero-sub { color: #566f62; font-size: 14px; line-height: 1.45; max-width: 100%; }
.hero-pill { margin-top: 14px; background: var(--mint); color: #195e46; font-size: 11px; font-weight: 800; padding: 8px 11px; letter-spacing: .035em; }
.hero-pill.waiting { background: #fff1d7; color: #805d1f; }
.hero-photo { margin: 18px 0 0; position: relative; height: 186px; border-radius: 23px; overflow: hidden; background: #d9e7dd; }
.hero-photo::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #112e28d9); pointer-events: none; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero-photo figcaption { position: absolute; inset: auto 17px 15px; z-index: 1; display: grid; gap: 2px; color: white; }
.hero-photo figcaption span { font-size: 9px; font-weight: 800; letter-spacing: .13em; opacity: .9; }
.hero-photo figcaption strong { font-family: "Nunito", sans-serif; font-size: 19px; font-weight: 900; line-height: 1.12; }
.screen-body { padding: 23px 20px 30px; background: #fff; }
.section-label { align-items: center; margin-block: 4px 12px; }
.section-label h2 { font-family: "Nunito", sans-serif; font-size: 21px; font-weight: 900; }
.section-label button { font-size: 12px; }
.stack { gap: 9px; }
.action-card { background: #f7f9f6; border-color: #edf1ec; box-shadow: none; border-radius: 18px; min-height: 76px; padding: 12px 14px; }
.action-card:active { background: #edf7ee; }
.card-icon { width: 45px; height: 45px; border-radius: 14px; background: #ffefcf; color: #875d25; }
.card-copy strong { font-size: 15px; font-weight: 750; line-height: 1.24; }
.card-copy small { font-size: 12px; line-height: 1.36; }
.timeline { background: #ecf7ef; border-radius: 19px; padding: 17px; }
.timeline-row { min-height: 57px; }
.timeline-row strong { font-size: 13px; }
.timeline-row small { font-size: 12px; }
.timeline-dot { border-color: #2c9366; }.timeline-dot.done { background: #2c9366; }
.record-card { border-color: #e5ece5; border-radius: 18px; min-height: 76px; padding: 13px 14px; }
.record-main strong { font-size: 14px; line-height: 1.3; }
.record-main small { font-size: 12px; line-height: 1.4; }
.badge { font-size: 11px; padding: 7px 9px; }
.notice-strip { background: #fff1db; border-radius: 17px; min-height: 70px; }
.notice-strip strong { font-size: 13px; }.notice-strip small { font-size: 12px; }
.page-header { background: #fff; padding: 8px 20px 0; }
.page-header h1 { font-size: 32px; margin-top: 22px; }
.page-header p { font-size: 13px; }
.content { padding: 21px 20px 35px; gap: 14px; background: #fff; }
.status-panel { background: #e9f5ec; border-radius: 18px; }
.status-panel strong { font-size: 15px; }.status-panel p { font-size: 12px; line-height: 1.5; }
.mini-heading { font-family: "Nunito", sans-serif; font-size: 19px; font-weight: 900; }
.mini-heading small { font-family: "DM Sans", sans-serif; font-size: 12px; }
.money-card { background: #f7f9f6; border: 1px solid #e8eee7; box-shadow: none; border-radius: 20px; }
.money-amount { font-family: "Nunito", sans-serif; font-weight: 900; font-variant-numeric: tabular-nums; }
.money-line { font-size: 13px; }
.selection { font-size: 13px; }
.selection-copy strong { font-size: 13px; }.selection-copy small { font-size: 12px; }
.info-note { background: #f1f6f1; font-size: 12px; line-height: 1.5; }
.stat { background: #f0f6f1; }.stat strong { font-family: "Nunito", sans-serif; font-size: 24px; }.stat span { font-size: 11px; }
.feature-card strong { font-size: 15px; }.feature-card small { font-size: 12px; }
.directory strong { font-size: 13px; }
.journey-step strong { font-size: 13px; }.journey-step small { font-size: 11px; }
.module-chip { min-height: 38px; font-size: 11px; }
.role-copy strong { font-size: 13px; }.role-copy small { font-size: 11px; }
.field { font-size: 13px; }.field input, .field select, .field textarea { font-size: 15px; }
@media (max-width: 700px) { .phone { width: 100%; border: 0; border-radius: 0; box-shadow: none; } .stage { background: #fff; } }
@media (max-height: 600px) and (orientation: landscape) { .phone { width: 100%; border: 0; border-radius: 0; box-shadow: none; } .hero-photo { height: 130px; } .hero-kicker { margin-top: 12px; } .hero-title { font-size: 28px; } }

/* Taskalah Little World: one journey map, expressive icons, quiet surfaces. */
:root {
  --canvas: #fbfcf8;
  --butter: #fff2d6;
  --pink: #fce8e1;
  --blue: #e9f3fa;
  --mint: #e7f5e8;
  --line: #e2ebe2;
  --green: #167750;
  --forest: #235843;
  --ink: #1d4234;
  --muted: #5f776a;
}
body { background: #eaf2e9; }
.studio-panel, .guide-panel { background: #fcfdf9; }
.stage { background: radial-gradient(circle at 14% 20%, #d9efdd 0, transparent 31%), radial-gradient(circle at 85% 84%, #f9ead8 0, transparent 29%), #eaf2e9; }
.phone, .app, .screen-body, .content, .page-header, .top-hero, .top-hero.teacher, .top-hero.owner, .top-hero.provider, .phone-hardware, .phone-hardware.light { background: var(--canvas); }
.game-icon { display: block; width: 100%; height: 100%; overflow: visible; }
.round-icon .game-icon { width: 30px; height: 30px; }
.round-icon, .round-icon.light { background: #e9f5e9; }
.top-hero { padding-bottom: 0; }
.hero-kicker { margin-top: 16px; color: #5b7967; }
.hero-title { font-size: 33px; line-height: 1.06; }
.top-hero.parent .hero-title { max-width: calc(100% - 83px); }
.top-hero:not(.parent) .hero-title { max-width: calc(100% - 75px); }
.hero-sub { font-size: 13px; }
.top-hero.parent .hero-sub, .top-hero:not(.parent) .hero-sub { max-width: calc(100% - 84px); }
.hero-pill { border: 0; box-shadow: none; background: #e2f5e5; color: #236549; margin-top: 11px; }
.hero-pill.waiting { background: #fff0d1; color: #835c26; }
.hero-mascot { position: absolute; right: 20px; top: 101px; width: 82px; height: 105px; pointer-events: none; z-index: 2; }
.hero-mascot::before { content: ""; position: absolute; width: 72px; height: 72px; top: 17px; right: 3px; border-radius: 50%; background: #e1f3df; }
.hero-mascot .sprout-orb { position: relative; display: block; inset: auto; width: 100%; height: 100%; filter: drop-shadow(0 5px 0 #a6cdb24d); animation: hero-sprout-hello 700ms cubic-bezier(.2, 1.3, .3, 1) both; }
.hero-mascot .sprout-orb svg { width: 100%; height: 100%; }
.hero-emblem { position: absolute; right: 21px; top: 111px; z-index: 2; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 21px; background: #e9f5e9; pointer-events: none; }
.hero-emblem .game-icon { width: 56px; height: 56px; }
@keyframes hero-sprout-hello { 0% { opacity: 0; transform: translateY(12px) scale(.9) rotate(-8deg); } 65% { opacity: 1; transform: translateY(-2px) scale(1.03) rotate(3deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
.hero-photo { height: 142px; margin: 14px 0 0; border: 0; border-radius: 21px; box-shadow: none; }
.hero-photo figcaption { inset: auto 14px 12px; }
.hero-photo figcaption span { font-size: 8px; }
.hero-photo figcaption strong { font-size: 17px; }
.screen-body { padding: 18px 20px 30px; }
.section-label { margin-block: 4px 11px; }
.section-label h2 { font-size: 20px; }
.section-label h2::before, .mini-heading::before { content: none; }
.journey-map { padding: 15px 12px 14px; background: #fff; border: 1px solid #e3ebe2; border-radius: 22px; box-shadow: 0 5px 14px #1b50320b; }
.journey-map-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 12px; }
.journey-map-top span { color: #6b8172; font-size: 9px; letter-spacing: .1em; font-weight: 800; }
.journey-map-top strong { color: #2b7554; font-size: 11px; font-weight: 850; }
.journey-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.journey-track::before { content: ""; position: absolute; z-index: 0; top: 23px; left: 16.5%; right: 16.5%; height: 4px; border-radius: 4px; background: #dfeae0; }
.journey-stop { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; min-height: 96px; padding: 0 2px; border: 0; background: transparent; color: var(--ink); text-align: center; }
.journey-stop:active .journey-node { transform: translateY(2px) scale(.96); }
.journey-node { display: grid; place-items: center; width: 49px; height: 49px; margin-bottom: 4px; border: 2px solid #d6e5d9; border-radius: 17px; background: #f2f7f1; transition: transform .18s ease-out; }
.journey-stop.done .journey-node { border-color: #99d4a8; background: #e3f5e7; }
.journey-stop.ready .journey-node { border-color: #efd398; background: #fff1cf; }
.journey-node .game-icon { width: 34px; height: 34px; }
.journey-stop strong { font-family: "Nunito", sans-serif; font-size: 12px; font-weight: 900; line-height: 1.15; }
.journey-stop small { max-width: 98px; color: var(--muted); font-size: 10px; line-height: 1.2; }
.action-card { min-height: 83px; padding: 11px 13px; border: 1px solid #e2ebe2; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 #e1e9df; transition: transform .18s ease-out, box-shadow .18s ease-out; }
.action-card.green { background: #eaf7ed; border-color: #d5ebdc; box-shadow: 0 3px 0 #cce6d2; }
.action-card.blue { background: #ecf5fa; border-color: #dbeaf1; box-shadow: 0 3px 0 #d5e4eb; }
.action-card.pink { background: #fceee9; border-color: #f3e1d9; box-shadow: 0 3px 0 #ebdad2; }
.action-card:active { transform: translateY(2px); box-shadow: 0 1px 0 #e1e9df; }
.card-icon, .card-icon.green, .card-icon.blue, .card-icon.pink { display: grid; place-items: center; width: 54px; height: 54px; padding: 3px; border-radius: 14px; background: transparent; color: var(--forest); flex: 0 0 auto; }
.card-icon .game-icon { width: 47px; height: 47px; }
.card-copy strong { font-family: "Nunito", sans-serif; font-size: 16px; font-weight: 900; }
.card-copy small { font-size: 12px; line-height: 1.35; }
.chev { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #eef5ed; color: var(--forest); font-size: 21px; line-height: 1; flex: 0 0 auto; }
.notice-strip { background: #fff3dc; border: 0; box-shadow: none; min-height: 66px; }
.notice-strip .card-icon { padding: 0; }
.notice-strip .game-icon { width: 37px; height: 37px; }
.notice-strip strong { font-family: "Nunito", sans-serif; font-size: 14px; font-weight: 900; }
.bottom-nav { background: #fffefa; border-top: 1px solid #e4ece3; padding-top: 5px; }
.nav-item { gap: 0; font-size: 11px; }
.nav-item .icon-wrap { width: 43px; height: 36px; border-radius: 13px; }
.nav-item .game-icon { width: 28px; height: 28px; }
.nav-item.active .icon-wrap { background: #e0f3e4; box-shadow: none; }
.nav-item:active .icon-wrap { transform: scale(.95); }
.directory { gap: 10px; }
.directory button { min-height: 119px; padding: 12px; border: 1px solid #e2ebe1; border-radius: 18px; background: #fff; box-shadow: none; transition: transform .18s ease-out, background .18s ease-out; }
.directory button:hover { background: #f3faf3; }
.directory button:active { transform: scale(.98); }
.directory .game-icon { width: 48px; height: 48px; }
.directory strong { font-family: "Nunito", sans-serif; font-size: 14px; font-weight: 900; }
.primary-button { border-radius: 16px; box-shadow: 0 3px 0 #10513a; transition: transform .18s ease-out, box-shadow .18s ease-out; }
.primary-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #10513a; }
.page-header { background: var(--canvas); }
.page-header h1, .mini-heading { color: #204b38; }
.status-panel { border: 0; border-radius: 19px; background: #eaf7eb; box-shadow: none; }
.status-panel.warn { background: #fff2d8; }
.status-panel.blue { background: #eaf4fb; }
.status-panel.pink { background: #fcebe8; }
.status-panel .status-icon, .status-panel.warn .status-icon { width: 44px; height: 44px; background: transparent; color: var(--forest); }
.status-panel .game-icon { width: 42px; height: 42px; }
.record-card, .feature-card { border: 1px solid #e5ede3; border-radius: 19px; background: #fff; box-shadow: none; }
.record-card .avatar { border: 0; border-radius: 14px; background: #e1f3e5; }
.record-card .avatar.sun { background: #fff0d1; }
.record-card .avatar.blue { background: #e3f1fb; }
.stat { border: 0; border-radius: 15px; background: #eaf7eb; box-shadow: none; }
.stat:nth-child(3n+2) { background: #fff2dc; }
.stat:nth-child(3n+3) { background: #eaf4fb; }
.selection { border: 1px solid #dce9de; background: #fff; }
.selection:has(input:checked) { border-color: #86cfa3; background: #edf8ee; box-shadow: none; }
.role-option.is-selected { border: 1px solid #ccebd6; background: #e9f7ef; }
.role-avatar { width: 40px; height: 40px; border-radius: 14px; background: #fff0d3; }
.role-avatar .game-icon { width: 35px; height: 35px; }
.role-option.is-selected .role-avatar { background: #fff0d3; color: var(--forest); }
.role-option:nth-child(4n+2) .role-avatar { background: #f9e5df; }
.role-option:nth-child(4n+3) .role-avatar { background: #e1effa; }
.role-option:nth-child(4n+4) .role-avatar { background: #e0f3e5; }
.record-card .role-pick-avatar { width: 52px; height: 52px; border-radius: 17px; }
.role-pick-avatar .game-icon { width: 45px; height: 45px; }
.journey-index { display: grid; place-items: center; min-width: 29px; height: 29px; padding: 0; border-radius: 9px; background: #ffdf9e; color: #694f23; font-family: "Nunito", sans-serif; font-size: 12px; font-weight: 900; }
.journey-step:nth-child(4n+2) .journey-index { background: #d1efdc; color: #205b3c; }
.journey-step:nth-child(4n+3) .journey-index { background: #f9d8cd; color: #8e5143; }
.journey-step:nth-child(4n+4) .journey-index { background: #d7eafd; color: #3a6488; }
@media (max-width: 700px) { .stage, .phone { background: var(--canvas); } }
@media (max-width: 355px) { .top-hero.parent .hero-title { max-width: calc(100% - 70px); font-size: 30px; } .hero-mascot { right: 14px; width: 72px; } .journey-stop small { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .hero-mascot .sprout-orb { animation: none; } .action-card, .directory button, .primary-button, .journey-node { transition-duration: .01ms; } }

/* Opening sequence and purposeful feedback. */
.splash-screen[hidden] { display: none; }
.splash-screen { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 35px 25px 28px; background: radial-gradient(circle at 50% 35%, #f4ffe9 0, #e8f7e7 54%, #dcf0e7 100%); color: var(--ink); opacity: 1; transform: translateY(0); transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.22, 1, .36, 1); }
.splash-screen.is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.splash-skip { align-self: flex-end; min-height: 42px; padding: 8px 4px 8px 14px; border: 0; background: transparent; color: #356b4e; font-size: 12px; font-weight: 800; }
.splash-art { position: relative; display: grid; place-items: center; width: 100%; flex: 1 1 auto; min-height: 230px; max-height: 385px; }
.splash-sun { position: absolute; width: min(61vw, 250px); height: min(61vw, 250px); border-radius: 39% 44% 42% 43%; background: #fff1bf; transform: rotate(-12deg); }
.splash-orbit { position: absolute; width: 16px; height: 16px; border-radius: 5px; background: #f2aa8f; transform: rotate(25deg); }
.splash-orbit-one { top: 22%; left: 15%; }
.splash-orbit-two { right: 15%; bottom: 21%; width: 11px; height: 11px; background: #83c9a0; }
.splash-mascot { position: relative; z-index: 1; width: 194px; height: 228px; filter: drop-shadow(0 12px 0 #c6dfbd70); }
.splash-mascot .sprout-orb { position: static; display: block; width: 100%; height: 100%; filter: none; }
.splash-mascot svg { width: 100%; height: 100%; }
.splash-copy { display: grid; justify-items: center; gap: 5px; width: 100%; text-align: center; }
.splash-eyebrow { color: #3f7757; font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.splash-copy strong { max-width: 310px; font-family: "Nunito", sans-serif; font-size: clamp(29px, 7vw, 37px); font-weight: 900; line-height: 1.06; letter-spacing: -.045em; }
.splash-copy p { margin: 0; color: #4f725c; font-size: 13px; }
.splash-wordmark { margin-top: 10px; color: #1e6647; font-family: "Nunito", sans-serif; font-size: 23px; font-weight: 900; letter-spacing: -.06em; }
.splash-wordmark span { color: #ef937a; }
.splash-screen.is-visible .splash-sun { animation: splash-sun-in 640ms cubic-bezier(.22, 1, .36, 1) both; }
.splash-screen.is-visible .splash-mascot { animation: splash-bounce-in 720ms cubic-bezier(.2, 1.22, .34, 1) 100ms both; }
.splash-screen.is-visible .splash-copy { animation: splash-copy-in 380ms cubic-bezier(.22, 1, .36, 1) 420ms both; }
@keyframes splash-sun-in { from { opacity: 0; transform: scale(.75) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(-12deg); } }
@keyframes splash-bounce-in { 0% { opacity: 0; transform: translateY(34px) scale(.72) rotate(-10deg); } 65% { opacity: 1; transform: translateY(-7px) scale(1.06) rotate(4deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes splash-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.app[data-transition="forward"] > .screen { animation: page-arrive-forward 230ms cubic-bezier(.22, 1, .36, 1) both; }
.app[data-transition="back"] > .screen { animation: page-arrive-back 230ms cubic-bezier(.22, 1, .36, 1) both; }
.app[data-transition="switch"] > .screen { animation: page-arrive-switch 240ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes page-arrive-forward { from { opacity: .55; transform: translateX(13px); } to { opacity: 1; transform: translateX(0); } }
@keyframes page-arrive-back { from { opacity: .55; transform: translateX(-13px); } to { opacity: 1; transform: translateX(0); } }
@keyframes page-arrive-switch { from { opacity: .6; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.nav-item .icon-wrap { transition: transform 140ms cubic-bezier(.22, 1, .36, 1), background-color 160ms ease-out; }
.app[data-transition="forward"] + .bottom-nav .nav-item.active .icon-wrap, .app[data-transition="back"] + .bottom-nav .nav-item.active .icon-wrap { animation: nav-bloom 260ms cubic-bezier(.2, 1.25, .35, 1) both; }
@keyframes nav-bloom { from { transform: scale(.82); } to { transform: scale(1); } }
.toast[data-kind="success"] { background: #145c41; }
.toast[data-kind="success"]::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #d8f4d9; color: #126340; font-weight: 900; }
@media (max-height: 700px) { .splash-screen { padding-top: 17px; padding-bottom: 18px; } .splash-art { min-height: 170px; } .splash-mascot { width: 150px; height: 181px; } .splash-copy strong { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .splash-screen, .nav-item .icon-wrap { transition-duration: .01ms; } .splash-screen.is-visible .splash-sun, .splash-screen.is-visible .splash-mascot, .splash-screen.is-visible .splash-copy, .app[data-transition] > .screen, .app[data-transition] + .bottom-nav .nav-item.active .icon-wrap { animation: none; } }