/* Wajang Learn — uses the public site's design tokens from site.css */
.learn-portal-nav{position:sticky;top:0;z-index:9;background:#0b1825;border-bottom:1px solid rgba(228,186,88,.24);box-shadow:0 8px 24px rgba(2,10,18,.12)}
.learn-nav-inner{max-width:1600px;margin:auto;min-height:50px;padding:0 clamp(18px,5vw,76px);display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(228,186,88,.45) transparent}
.learn-nav-inner::-webkit-scrollbar{height:4px}.learn-nav-inner::-webkit-scrollbar-thumb{background:rgba(228,186,88,.45);border-radius:5px}
.learn-nav-label{flex:0 0 auto;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-right:6px}
.learn-nav-link{flex:0 0 auto;display:inline-flex;align-items:center;min-height:50px;padding:0 12px;border-bottom:3px solid transparent;color:#d8dee4;font-size:13px;font-weight:600;white-space:nowrap;transition:.2s}
.learn-nav-link:hover{color:var(--gold2);background:rgba(255,255,255,.035)}
.learn-nav-link.active{color:var(--gold);border-bottom-color:var(--gold)}
.learn-nav-link.tool{color:#c8ded9}.learn-nav-link.tool.active{color:#fff;border-bottom-color:#65bca8}
.learn-nav-divider{height:22px;width:1px;background:rgba(255,255,255,.16);margin:0 8px;flex:0 0 auto}

/* Learn page foundation */
body{background:var(--paper);color:#26313b;font-family:var(--sans);font-size:16px}
main{display:block;position:relative}
main p{color:#4f5c67;font-size:16px;line-height:1.75}
.page-hero{padding:70px clamp(24px,6vw,92px) 58px;color:#fff;background:linear-gradient(90deg,rgba(4,12,20,.97),rgba(4,12,20,.74),rgba(4,12,20,.40)),url('/assets/public-redesign/hero-learn.jpg') center/cover;border:0}
.page-hero-eyebrow,.sec-label{color:var(--gold);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.page-hero-eyebrow{margin-bottom:12px}
.page-hero h1{max-width:900px;margin:0 0 18px;color:#fff;font:600 clamp(42px,5.5vw,74px)/1.05 var(--serif)}
.page-hero h1 span,.sec-title span{color:var(--gold)}
.page-hero .lead{max-width:780px;margin:0;color:#d8dee4;font-size:18px;line-height:1.65}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.hero-tag{display:inline-flex;align-items:center;min-height:32px;padding:5px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(7,18,29,.56);color:#eef2f5;font-size:12px;font-weight:700}

.content-wrap{max-width:1240px;margin:0 auto;padding:70px clamp(20px,5vw,68px)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px;align-items:start}
.two-col-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sec-label{margin:0 0 8px}.sec-title{margin:0 0 20px;color:var(--ink);font:600 clamp(28px,3vw,40px)/1.16 var(--serif)}

.card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:28px;box-shadow:0 8px 30px rgba(7,18,29,.045)}
a.card{transition:transform .22s,box-shadow .22s,border-color .22s}
a.card:hover{transform:translateY(-3px);border-color:rgba(110,23,48,.3);box-shadow:0 16px 38px rgba(7,18,29,.09)}
.card-sm{padding:20px}.card-gold{border-top:4px solid var(--gold)}.card-jade{border-top:4px solid #65bca8}
.card h2,.card h3,.card h4{font-family:var(--serif);color:var(--ink)}

.comp-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:14px}
.comp-table th{padding:13px 15px;background:var(--ink);color:#fff;text-align:left;font-size:12px;letter-spacing:.04em}
.comp-table td{padding:13px 15px;border-bottom:1px solid var(--line);color:#47535e;vertical-align:top}.comp-table tr:last-child td{border-bottom:0}.comp-table td:first-child{color:var(--ink);font-weight:700}

.script-specimen{position:relative;overflow:auto;padding:28px 34px;border:1px solid #293846;border-radius:10px;background:#0b1621;color:#e8edf1;font:14px/1.9 'Courier New',monospace;box-shadow:0 12px 32px rgba(7,18,29,.12)}
.ss-scene{font-weight:700;text-transform:uppercase}.ss-action{color:#d2d9df}.ss-char{margin-left:22%;color:var(--gold);text-transform:uppercase}.ss-paren{margin-left:18%;color:#aeb9c2;font-style:italic}.ss-dial{max-width:55%;margin-left:12%;color:#f3f5f7}.ss-trans{text-align:right;color:#c9d1d8;font-style:italic}

.illus-frame{overflow:hidden;padding:18px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 8px 28px rgba(7,18,29,.05)}
.rule-list{display:grid;gap:12px;padding:0;list-style:none}.rule-list li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:16px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#4c5964}.rule-list .rn{color:var(--wine);font-weight:800}.rule-list strong{display:block;color:var(--ink);margin-bottom:2px}
.tip-box,.warn-box{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border-radius:9px;font-size:15px;line-height:1.65}
.tip-box{background:#edf7f4;border:1px solid #bedfd6;color:#285a4d}.tip-box strong{color:#164d3e}.warn-box{background:#fff7e4;border:1px solid #ead49a;color:#675018}.warn-box strong{color:#46350e}

.tool-preview-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border-radius:10px;background:var(--ink);color:#fff}
.tc-info{display:flex;align-items:center;gap:14px}.tc-icon{font-size:28px}.tc-name{font:600 19px var(--serif);color:#fff}.tc-desc{color:#b9c3cc;font-size:14px}.btn-jade,.btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:5px;font:700 14px var(--sans);cursor:pointer}
.btn-jade{background:#65bca8;color:#08251e;border:0}.btn-jade:hover{background:#82cfbd}.btn-outline{border:1px solid #9aa7b2;background:transparent;color:#26313b}.btn-outline:hover{border-color:var(--wine);color:var(--wine)}

.blabel{display:block;margin:0 0 6px;color:#303c47;font-size:13px;font-weight:700}.binput,input.binput,select.binput,textarea.binput{width:100%;padding:12px 13px;border:1px solid #cbd1d5;border-radius:6px;background:#fff;color:#17222c;font:inherit}.binput:focus{outline:3px solid rgba(228,186,88,.28);border-color:#bd9133}

/* Old per-page footer is retained only as a compact Learn utility bar when encountered. */
.page-footer{display:none}

/* Keep all old inline colour tokens readable after the design-system change. */
:root{--bg-base:var(--paper);--bg-raised:#fff;--bg-surface:#f1f3f4;--bg-card:#fff;--bg-glass:#fff;--gold-100:#fff2cc;--gold-200:var(--gold2);--gold-300:var(--gold);--gold-400:#bd9133;--gold-500:#876820;--gold-600:#5e4814;--gold-glow:rgba(228,186,88,.12);--text-100:var(--ink);--text-200:#293641;--text-300:#52606b;--text-400:#6d7881;--text-500:#8a949c;--jade:#368b78;--jade-dim:#edf7f4;--border:var(--line);--border-hi:#c8b479;--font-d:var(--sans);--font-dc:var(--serif);--font-b:var(--sans);--font-m:'Courier New',monospace;--r:9px}

@media(max-width:980px){.two-col{grid-template-columns:1fr}.three-col{grid-template-columns:repeat(2,minmax(0,1fr))}.content-wrap{padding-top:54px}.card[style*="position:sticky"]{position:static!important}}
@media(max-width:680px){.learn-nav-inner{padding:0 12px}.learn-nav-label,.learn-nav-divider{display:none}.learn-nav-link{padding:0 11px;font-size:12px}.page-hero{padding:48px 20px 40px}.page-hero h1{font-size:42px}.content-wrap{padding:42px 18px}.two-col-even,.three-col{grid-template-columns:1fr}.tool-preview-cta{align-items:flex-start;flex-direction:column}.script-specimen{padding:22px 18px}.ss-char{margin-left:18%}.ss-dial{max-width:78%;margin-left:8%}.comp-table{display:block;overflow-x:auto;white-space:nowrap}}

/* Script-layout diagrams: keep the annotated page, remove the oversized dark canvas. */
.illus-frame > svg{
  display:block;
  width:100%;
  height:auto;
  max-width:760px;
  margin-inline:auto;
  background:transparent;
}