:root {
      color-scheme: light;
      --paper: #f3f2ff;
      --surface: #ffffff;
      --ink: #27294f;
      --muted: #4d5274;
      --line: #d1d2eb;
      --line-strong: #27294f;
      --teal: #4c5ff0;
      --teal-pale: #e7eaff;
      --ochre-pale: #fff0b8;
      --coral: #ef776a;
      --coral-hover: #ff9387;
      --lilac: #e9e5ff;
      --sky: #e1f5f6;
      --yellow: #f7d96f;
      --ochre-ink: #563e00;
      --error: #a74232;
      --error-text: #7a351f;
      --soft-rule: #e8e7f4;
      --bright-rule: #aeb5ff;
      --sans: "Segoe UI", "Noto Sans Sinhala", system-ui, sans-serif;
      --display: "Century Gothic", "Noto Sans Sinhala", "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    h1, h2 { scroll-margin-top: 20px; text-wrap: balance; }
    body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans); }
    button, input, select { font: inherit; }
    button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    a { -webkit-tap-highlight-color: transparent; }
    .skip-link { position:fixed; top:8px; left:8px; z-index:10; padding:10px 13px; transform:translateY(-150%); background:#fff; color:var(--ink); border:1px solid var(--line-strong); }
    .skip-link:focus { transform:translateY(0); }
    ::selection { background: var(--teal-pale); color: var(--ink); }
    :focus-visible { outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px var(--ink); }
    .topbar { min-height:82px; padding: 0 clamp(20px, 5.4vw, 84px); display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--teal); color:#fff; }
    .brand { display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; letter-spacing:-.025em; }
    .brand-mascot { display:block; width:56px; height:56px; flex:0 0 56px; }
    .brand-name { font-size:16px; }
    .top-actions { display:flex; align-items:center; gap:18px; }
    .language { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--bright-rule); border-radius:12px; }
    .language button { min-height:44px; padding:0 10px; border:0; border-radius:9px; background:transparent; color:#fff; font-size:13px; transition:background .18s ease, color .18s ease; }
    .language button:hover:not([aria-pressed="true"]) { background:#ffffff24; color:#fff; }
    .language button[aria-pressed="true"] { background:var(--yellow); color:var(--ink); font-weight:700; }
    main { max-width:1390px; margin:auto; padding:44px clamp(20px, 5.4vw, 84px) 70px; }
    .intro { margin-bottom:30px; }
    h1 { max-width:760px; margin:0 0 11px; font-family:var(--display); font-size:clamp(34px, 4vw, 49px); line-height:1.1; letter-spacing:-.04em; font-weight:700; }
    .subtitle { max-width:700px; margin:0; color:var(--muted); font-size:15px; line-height:1.65; }
    .workspace { display:grid; grid-template-columns:minmax(0, 2.12fr) minmax(280px, .88fr); gap:22px; align-items:start; }
    .form-area { padding:25px 28px 24px; border:2px solid var(--ink); border-radius:16px; background:var(--surface); }
    .section-label { margin:0 0 12px; color:var(--muted); font-size:13px; font-weight:650; }
    .subject-select, .mark-input { width:100%; height:46px; border:2px solid var(--line-strong); border-radius:10px; background:#fff; color:var(--ink); padding:0 11px; }
    .subject-select:focus-visible, .mark-input:focus-visible { border-color:var(--teal); box-shadow:0 0 0 3px #4c5ff044, 0 0 0 6px var(--ink); }
    .subjects { margin-top:24px; }
    .subject-note { margin:-5px 0 13px; color:var(--muted); font-size:13px; line-height:1.5; }
    .subject-head, .subject-row { display:grid; grid-template-columns:minmax(150px, 1.2fr) minmax(150px, 1fr); gap:14px; align-items:center; }
    .subject-head { padding:0 10px 8px; border-bottom:1px solid var(--line-strong); color:var(--muted); font-size:13px; }
    .subject-grid { display:block; }
    .subject-row { min-height:66px; padding:10px; border-bottom:2px solid var(--soft-rule); }
    .subject-picker { position:relative; display:flex; min-width:0; flex-direction:column; gap:4px; }
    button.subject-select { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; font:inherit; cursor:pointer; }
    .select-chevron { flex:none; color:var(--muted); }
    .subject-menu { position:absolute; z-index:20; top:calc(100% + 2px); left:0; width:100%; padding:8px; border:2px solid var(--line-strong); border-radius:10px; background:#fff; box-shadow:0 8px 22px #27294f24; }
    .subject-menu[hidden] { display:none; }
    .subject-search { height:40px; width:100%; margin:0 0 6px; padding:0 10px; border:1px solid var(--line-strong); border-radius:7px; background:#fff; color:var(--ink); }
    .subject-options { max-height:230px; overflow:auto; }
    .subject-option { display:block; width:100%; padding:8px 9px; border:0; border-radius:6px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
    .subject-option:hover, .subject-option:focus-visible, .subject-option.is-selected { background:var(--teal-pale); }
    .subject-option[disabled] { color:var(--muted); opacity:.55; cursor:not-allowed; }
    .subject-option[hidden] { display:none; }
    .subject-slot { color:var(--muted); font-size:13px; line-height:1.3; }
    .mark-wrap { min-width:0; }
    .mark-label { display:block; margin:0 0 4px; color:var(--muted); font-size:13px; line-height:1.3; }
    .mark-input-wrap { position:relative; }
    .mark-input { padding-right:54px; font-variant-numeric:tabular-nums; }
    .out-of { position:absolute; top:10px; right:11px; color:var(--muted); font-size:13px; pointer-events:none; }
    .form-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:20px; }
    .form-footer-copy { min-width:0; }
    .validation { min-height:0; margin:0; color:var(--error-text); font-size:13px; line-height:1.45; }
    .validation:not(:empty) { margin-top:7px; }
    .contribution-opt-in { display:grid; grid-template-columns:20px minmax(0, 1fr); align-items:start; gap:11px; margin-top:18px; padding:15px 16px; border:2px solid var(--line-strong); border-radius:13px; background:var(--teal-pale); color:var(--ink); cursor:pointer; transition:background .18s ease, transform .18s ease; }
    .contribution-opt-in:hover { background:var(--lilac); transform:translateY(-1px); }
    .contribution-opt-in.is-disabled { cursor:not-allowed; opacity:.72; }
    .contribution-opt-in.is-disabled:hover { background:var(--teal-pale); transform:none; }
    .contribution-opt-in input { width:18px; height:18px; margin:3px 0 0; accent-color:var(--teal); }
    .contribution-copy { display:grid; justify-items:start; gap:5px; font-size:13px; line-height:1.5; }
    .optional-tag { padding:2px 7px; border:1px solid var(--ink); border-radius:999px; background:var(--yellow); color:var(--ink); font-size:11px; font-weight:750; letter-spacing:.06em; line-height:1.4; }
    .contribution-copy strong { font-size:14px; line-height:1.4; }
    .contribution-description { color:var(--muted); }
    .community-status { margin:12px 0 0; padding-top:10px; border-top:1px solid #27294f30; color:var(--muted); font-size:13px; line-height:1.55; }
    .community-status:empty { display:none; }
    .confirmation { width:min(520px, calc(100vw - 32px)); max-width:none; padding:24px; border:2px solid var(--ink); border-radius:16px; background:var(--surface); color:var(--ink); box-shadow:0 16px 48px #27294f35; }
    .confirmation::backdrop { background:#27294f88; }
    .confirmation h2 { margin:0 0 9px; font-family:var(--display); font-size:22px; line-height:1.25; }
    .confirmation p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
    .confirmation-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
    .secondary-action { min-height:45px; padding:0 16px; border:2px solid var(--ink); border-radius:11px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:700; }
    .secondary-action:hover { background:var(--lilac); }
    [aria-invalid="true"] { border-color:var(--error) !important; }
    .primary { min-height:45px; flex:0 0 auto; padding:0 18px; border:2px solid var(--ink); border-radius:11px; background:var(--coral); color:var(--ink); font-size:13px; font-weight:700; transition:background .18s ease, transform .18s ease; }
    .primary:hover:not(:disabled) { background:var(--coral-hover); transform:translateY(-2px); }
    .primary:active:not(:disabled) { transform:translateY(1px); }
    button:disabled { cursor:not-allowed; opacity:.68; }
    .result { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:16px; margin-top:22px; padding:15px 16px; border:2px solid var(--ink); border-radius:14px; background:var(--lilac); }
    .contribution-prompt[hidden] { display:none; }
    .contribution-prompt { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:12px; padding:12px 2px 2px; border-top:1px solid var(--line); }
    .contribution-prompt-copy { display:grid; gap:3px; min-width:0; color:var(--muted); font-size:13px; line-height:1.45; }
    .contribution-prompt-copy strong { color:var(--ink); font-size:14px; }
    .contribution-prompt-actions { display:flex; flex:0 0 auto; align-items:center; gap:10px; }
    .prompt-button, .prompt-dismiss { min-height:40px; padding:0 13px; border-radius:9px; font-size:13px; font-weight:700; }
    .prompt-button { border:2px solid var(--ink); background:var(--yellow); color:var(--ink); }
    .prompt-button:hover { background:#ffe58b; }
    .prompt-dismiss { border:1px solid var(--line-strong); background:transparent; color:var(--muted); }
    .prompt-dismiss:hover { background:var(--lilac); color:var(--ink); }
    .result-summary { min-width:0; }
    .result-title { display:block; margin-bottom:3px; color:var(--ink); font-size:13px; font-weight:650; }
    .result-copy { display:block; color:var(--muted); font-size:13px; line-height:1.5; }
    .result-value { min-width:44px; color:var(--muted); font-size:25px; line-height:1; text-align:right; font-variant-numeric:tabular-nums; }
    .subject-results { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:10px; }
    .subject-result { min-width:0; padding:7px 9px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--ink); font-size:12px; }
    .subject-result strong { display:block; margin-top:2px; font-size:14px; font-variant-numeric:tabular-nums; }
    .method { padding:23px 22px 20px; border:2px solid var(--ink); border-radius:16px; background:var(--sky); }
    .method h2 { margin:0 0 7px; font-family:var(--display); font-size:19px; line-height:1.3; font-weight:700; }
    .method-intro { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
    .flow-visual { margin:16px 0 9px; padding:7px 9px 2px; border:2px solid var(--ink); border-radius:14px; background:var(--lilac); }
    .flow-visual svg { display:block; width:100%; height:58px; }
    .flow-labels { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; margin-bottom:15px; color:var(--muted); font-size:13px; line-height:1.3; text-align:center; }
    .notice { display:flex; gap:10px; margin-top:18px; padding:12px 13px; border:2px solid var(--ink); border-radius:13px; background:var(--ochre-pale); color:var(--ochre-ink); font-size:13px; line-height:1.55; }
    .notice svg { flex:0 0 15px; width:15px; height:15px; margin-top:1px; }
    .below { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-top:15px; padding:12px 1px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.55; }
    .below strong { color:var(--ink); font-weight:650; }
    .toast { position:fixed; right:24px; bottom:24px; z-index:5; max-width:min(400px, calc(100vw - 32px)); padding:13px 16px; border:2px solid var(--ink); border-radius:13px; background:#fff; color:var(--ink); font-size:13px; line-height:1.5; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
    .toast.show { opacity:1; transform:translateY(0); }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
    @media (max-width: 900px) {
      main { padding-top:34px; }
      .workspace { grid-template-columns:minmax(0, 1.6fr) minmax(255px, .9fr); gap:15px; }
      .form-area { padding:21px 20px; }
      .method { padding:20px 17px; }
      .subject-head, .subject-row { grid-template-columns:minmax(115px, 1fr) minmax(120px, 1fr); gap:10px; }
    }
    @media (max-width: 700px) {
      .topbar { min-height:74px; padding-inline:18px; }
      .top-actions { gap:12px; }
      main { padding:30px 18px 45px; }
      .intro { margin-bottom:20px; }
      h1 { font-size:36px; }
      .workspace { grid-template-columns:1fr; gap:14px; }
      .method { order:2; }
      .below { flex-direction:column; gap:7px; }
    }
    @media (max-width: 480px) {
      .brand { gap:8px; }
      .brand-mascot { width:48px; height:48px; flex-basis:48px; }
      .brand-name { font-size:14px; }
      .language button { padding-inline:8px; font-size:13px; }
      .subject-head { display:none; }
      .subject-results { grid-template-columns:1fr; }
      .subject-row { grid-template-columns:minmax(0, 1fr) minmax(110px, .9fr); gap:8px 12px; padding:12px 2px; }
      .form-footer { align-items:stretch; flex-direction:column; }
      .primary { width:100%; }
      .confirmation-actions { flex-direction:column-reverse; }
      .confirmation-actions button { width:100%; }
      .result { grid-template-columns:minmax(0, 1fr) auto; }
      .contribution-prompt { align-items:stretch; flex-direction:column; gap:10px; }
      .contribution-prompt-actions { align-items:stretch; flex-direction:column; }
    }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    @media (forced-colors: active) {
      :focus-visible { outline:3px solid CanvasText; box-shadow:none; }
      [aria-invalid="true"] { border-color:Mark !important; }
    }