.mf1-root{--mf1-bg:#000000;--mf1-bg-2:#050b06;--mf1-panel:#081208;--mf1-panel-2:#0c1a0d;--mf1-border:#12381b;--mf1-border-strong:#1e6a2e;--mf1-green:#00ff6a;--mf1-green-soft:#39ff88;--mf1-green-dim:#0bbf54;--mf1-green-ghost:rgba(0,255,106,0.08);--mf1-white:#e6fff0;--mf1-muted:#7fbf8d;--mf1-red:#ff4d6a;--mf1-amber:#ffd84d;--mf1-shadow:0 0 0 1px rgba(0,255,106,0.15),0 8px 30px rgba(0,255,106,0.08);--mf1-radius:10px;--mf1-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--mf1-sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark;}.mf1-root.mf1-light{--mf1-bg:#f3fbf5;--mf1-bg-2:#ffffff;--mf1-panel:#ffffff;--mf1-panel-2:#f0faf3;--mf1-border:#cfe9d6;--mf1-border-strong:#2aa14a;--mf1-green:#0a8a3a;--mf1-green-soft:#0fa047;--mf1-green-dim:#0a6b2e;--mf1-green-ghost:rgba(10,138,58,0.08);--mf1-white:#0b1a10;--mf1-muted:#4f7a58;--mf1-shadow:0 0 0 1px rgba(10,138,58,0.15),0 8px 24px rgba(10,138,58,0.08);}.mf1-root,.mf1-root *{box-sizing:border-box;}.mf1-root{position:relative;font-family:var(--mf1-sans);color:var(--mf1-white);background:radial-gradient(ellipse at top,#0a1a0d 0%,var(--mf1-bg) 60%),var(--mf1-bg);border:1px solid var(--mf1-border);border-radius:var(--mf1-radius);padding:18px;margin:18px 0;min-height:640px;overflow:hidden;box-shadow:var(--mf1-shadow);}.mf1-root.mf1-light{background:var(--mf1-bg);}.mf1-rain{position:absolute;inset:0;pointer-events:none;opacity:0.18;z-index:0;}.mf1-root.mf1-light .mf1-rain{display:none;}.mf1-wrap{position:relative;z-index:1;}.mf1-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--mf1-border);border-radius:var(--mf1-radius);background:linear-gradient(180deg,var(--mf1-panel),var(--mf1-panel-2));margin-bottom:12px;}.mf1-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--mf1-mono);font-weight:700;color:var(--mf1-green);font-size:16px;letter-spacing:1px;text-shadow:0 0 8px rgba(0,255,106,0.5);}.mf1-logo-crest{width:34px;height:34px;border:2px solid var(--mf1-green);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--mf1-green);background:var(--mf1-green-ghost);font-family:var(--mf1-mono);position:relative;}.mf1-logo-crest::after{content:"";position:absolute;inset:3px;border:1px solid var(--mf1-border-strong);border-radius:5px;opacity:0.5;}.mf1-header-spacer{flex:1;}.mf1-header-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}.mf1-active-profile{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;background:var(--mf1-green-ghost);border:1px solid var(--mf1-border-strong);font-family:var(--mf1-mono);font-size:12px;color:var(--mf1-green);}.mf1-avatar{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#001a08;background:var(--mf1-green);}.mf1-sync-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto;background:#333;box-shadow:0 0 0 rgba(0,0,0,0);transition:background 200ms ease,box-shadow 200ms ease;}.mf1-sync-dot[data-mf1-sync-state="idle"]{background:var(--mf1-green);box-shadow:0 0 6px rgba(0,255,106,0.6);}.mf1-sync-dot[data-mf1-sync-state="syncing"]{background:#f5c400;box-shadow:0 0 6px rgba(245,196,0,0.6);animation:mf1-sync-pulse 1s ease-in-out infinite;}.mf1-sync-dot[data-mf1-sync-state="error"]{background:#ff3b3b;box-shadow:0 0 6px rgba(255,59,59,0.6);}.mf1-sync-dot[data-mf1-sync-state="disabled"]{background:#333;box-shadow:none;}/* ========================================================================= * OFFLINE / ONLINE STATUS DOT * * A second tiny dot next to the sync dot that indicates network * connectivity. Green when online,amber when offline,gray when PWA * is not supported / initializing. Updated live by the PWA module's * onStatus listener. * ========================================================================= */ .mf1-offline-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#333;vertical-align:middle;margin-right:4px;box-shadow:none;}.mf1-offline-dot[data-mf1-net="online"]{background:var(--mf1-green);box-shadow:0 0 6px rgba(0,255,106,0.5);}.mf1-offline-dot[data-mf1-net="offline"]{background:#f5c400;box-shadow:0 0 6px rgba(245,196,0,0.6);}.mf1-offline-dot[data-mf1-net="unsupported"]{background:#444;}@keyframes mf1-sync-pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}.mf1-nav{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--mf1-border);border-radius:var(--mf1-radius);background:var(--mf1-panel);margin-bottom:14px;}.mf1-tab{flex:1 1 auto;min-width:90px;padding:8px 10px;border-radius:7px;background:transparent;color:var(--mf1-muted);border:1px solid transparent;cursor:pointer;font-family:var(--mf1-mono);font-size:12px;letter-spacing:0.5px;text-transform:uppercase;transition:all .15s ease;}.mf1-tab:hover{color:var(--mf1-green);background:var(--mf1-green-ghost);}.mf1-tab.mf1-tab-active{background:var(--mf1-green-ghost);color:var(--mf1-green);border-color:var(--mf1-border-strong);box-shadow:inset 0 0 12px rgba(0,255,106,0.15);}.mf1-teacher-only{display:none;}.mf1-root.mf1-teacher-mode .mf1-teacher-only{display:inline-flex;}.mf1-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;background:var(--mf1-green-ghost);border:1px solid var(--mf1-border-strong);color:var(--mf1-green);border-radius:7px;cursor:pointer;font-family:var(--mf1-mono);font-size:12px;letter-spacing:0.3px;transition:all .15s ease;text-transform:uppercase;}.mf1-btn:hover{background:rgba(0,255,106,0.18);box-shadow:0 0 12px rgba(0,255,106,0.35);transform:translateY(-1px);}.mf1-btn:active{transform:translateY(0);}.mf1-btn-primary{background:var(--mf1-green);color:#001a08;border-color:var(--mf1-green);}.mf1-btn-primary:hover{background:var(--mf1-green-soft);color:#001a08;}.mf1-btn-ghost{background:transparent;color:var(--mf1-muted);border-color:var(--mf1-border);}.mf1-btn-ghost:hover{color:var(--mf1-green);border-color:var(--mf1-border-strong);}.mf1-btn-danger{color:var(--mf1-red);border-color:rgba(255,77,106,0.4);background:rgba(255,77,106,0.08);}.mf1-btn-danger:hover{background:rgba(255,77,106,0.18);}.mf1-btn-sm{padding:4px 8px;font-size:11px;}.mf1-panel{background:var(--mf1-panel);border:1px solid var(--mf1-border);border-radius:var(--mf1-radius);padding:14px;margin-bottom:12px;}.mf1-panel h3{margin:0 0 10px;font-family:var(--mf1-mono);font-size:14px;color:var(--mf1-green);letter-spacing:1px;text-transform:uppercase;}.mf1-panel h4{margin:12px 0 6px;font-family:var(--mf1-mono);font-size:12px;color:var(--mf1-green-soft);letter-spacing:0.8px;text-transform:uppercase;}.mf1-grid{display:grid;gap:12px;}.mf1-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}.mf1-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}.mf1-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}@media (max-width:720px){.mf1-grid-2,.mf1-grid-3,.mf1-grid-4{grid-template-columns:1fr;}}.mf1-field{display:block;margin-bottom:10px;}.mf1-field label{display:block;font-family:var(--mf1-mono);font-size:11px;text-transform:uppercase;color:var(--mf1-green-soft);margin-bottom:4px;letter-spacing:0.5px;}.mf1-input,.mf1-select,.mf1-textarea{width:100%;padding:8px 10px;background:var(--mf1-bg-2);color:var(--mf1-white);border:1px solid var(--mf1-border);border-radius:6px;font-family:var(--mf1-mono);font-size:13px;transition:border .15s;}.mf1-textarea{min-height:70px;resize:vertical;}.mf1-input:focus,.mf1-select:focus,.mf1-textarea:focus{outline:none;border-color:var(--mf1-green);box-shadow:0 0 0 2px var(--mf1-green-ghost);}.mf1-root.mf1-light .mf1-input,.mf1-root.mf1-light .mf1-select,.mf1-root.mf1-light .mf1-textarea{background:#fff;color:#0b1a10;}.mf1-inline-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}.mf1-inline-row > *{flex:1 1 140px;}.mf1-inline-row .mf1-btn{flex:0 0 auto;}.mf1-stat{border:1px solid var(--mf1-border);border-radius:8px;padding:10px 12px;background:var(--mf1-panel-2);}.mf1-stat-label{font-family:var(--mf1-mono);font-size:10px;text-transform:uppercase;color:var(--mf1-muted);letter-spacing:0.8px;}.mf1-stat-value{font-family:var(--mf1-mono);font-size:22px;color:var(--mf1-green);font-weight:700;text-shadow:0 0 6px rgba(0,255,106,0.35);}.mf1-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--mf1-border-strong);border-radius:999px;font-family:var(--mf1-mono);font-size:11px;color:var(--mf1-green);background:var(--mf1-green-ghost);margin:2px 4px 2px 0;}.mf1-badge-amber{color:var(--mf1-amber);border-color:rgba(255,216,77,0.4);background:rgba(255,216,77,0.08);}.mf1-badge-red{color:var(--mf1-red);border-color:rgba(255,77,106,0.4);background:rgba(255,77,106,0.08);}.mf1-progress{height:10px;width:100%;background:var(--mf1-panel-2);border:1px solid var(--mf1-border);border-radius:999px;overflow:hidden;}.mf1-progress-fill{height:100%;background:linear-gradient(90deg,var(--mf1-green-dim),var(--mf1-green));transition:width .35s ease;box-shadow:0 0 10px rgba(0,255,106,0.4);}.mf1-question{font-family:var(--mf1-mono);font-size:clamp(18px,3vw,26px);color:var(--mf1-white);text-align:center;padding:20px 10px;line-height:1.5;}.mf1-question strong{color:var(--mf1-green);}.mf1-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}@media (max-width:540px){.mf1-choices{grid-template-columns:1fr;}}.mf1-choice{padding:14px;background:var(--mf1-panel-2);border:1px solid var(--mf1-border);color:var(--mf1-white);border-radius:8px;font-family:var(--mf1-mono);font-size:16px;cursor:pointer;transition:all .15s;text-align:center;}.mf1-choice:hover{border-color:var(--mf1-green);background:var(--mf1-green-ghost);transform:translateY(-1px);}.mf1-choice.mf1-correct{border-color:var(--mf1-green);background:rgba(0,255,106,0.22);color:var(--mf1-green);}.mf1-choice.mf1-wrong{border-color:var(--mf1-red);background:rgba(255,77,106,0.18);color:var(--mf1-red);}.mf1-feedback{margin-top:12px;padding:12px;border-radius:8px;border:1px solid var(--mf1-border);font-family:var(--mf1-mono);font-size:13px;line-height:1.55;}.mf1-feedback.mf1-fb-good{border-color:var(--mf1-green);background:var(--mf1-green-ghost);color:var(--mf1-green);}.mf1-feedback.mf1-fb-bad{border-color:var(--mf1-red);background:rgba(255,77,106,0.1);color:var(--mf1-red);}.mf1-feedback.mf1-fb-hint{border-color:var(--mf1-amber);background:rgba(255,216,77,0.08);color:var(--mf1-amber);}.mf1-table{width:100%;border-collapse:collapse;font-family:var(--mf1-mono);font-size:12px;}.mf1-table th,.mf1-table td{border:1px solid var(--mf1-border);padding:6px 8px;text-align:left;vertical-align:top;}.mf1-table th{background:var(--mf1-panel-2);color:var(--mf1-green);text-transform:uppercase;font-size:11px;letter-spacing:0.5px;}.mf1-table tbody tr:hover{background:var(--mf1-green-ghost);}.mf1-profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}.mf1-pcard{padding:14px;border:1px solid var(--mf1-border);border-radius:10px;background:var(--mf1-panel-2);text-align:center;cursor:pointer;transition:transform .15s,border-color .15s;}.mf1-pcard:hover{transform:translateY(-2px);border-color:var(--mf1-green);}.mf1-pcard-avatar{width:60px;height:60px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#001a08;box-shadow:0 0 12px rgba(0,255,106,0.4);}.mf1-pcard-name{font-family:var(--mf1-mono);color:var(--mf1-green);margin-bottom:4px;}.mf1-pcard-meta{font-size:11px;color:var(--mf1-muted);font-family:var(--mf1-mono);}.mf1-pcard.mf1-active{border-color:var(--mf1-green);box-shadow:0 0 14px rgba(0,255,106,0.3);}.mf1-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:99999;align-items:center;justify-content:center;padding:20px;}.mf1-modal-backdrop.mf1-open{display:flex;}.mf1-modal{background:var(--mf1-panel);border:1px solid var(--mf1-border-strong);border-radius:var(--mf1-radius);padding:18px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 0 30px rgba(0,255,106,0.25);color:var(--mf1-white);}.mf1-modal h3{margin:0 0 10px;color:var(--mf1-green);font-family:var(--mf1-mono);}.mf1-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap;}.mf1-toasts{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:100000;pointer-events:none;}.mf1-toast{padding:10px 14px;background:var(--mf1-panel);border:1px solid var(--mf1-border-strong);border-radius:8px;color:var(--mf1-green);font-family:var(--mf1-mono);font-size:12px;box-shadow:0 0 18px rgba(0,255,106,0.3);animation:mf1-toast-in .25s ease;}.mf1-toast-bad{color:var(--mf1-red);border-color:rgba(255,77,106,0.5);}.mf1-toast-warn{color:var(--mf1-amber);border-color:rgba(255,216,77,0.5);}@keyframes mf1-toast-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}.mf1-doc{background:#ffffff;color:#000000;padding:32px;border-radius:8px;font-family:Georgia,"Times New Roman",serif;line-height:1.5;}.mf1-doc-header{display:flex;align-items:center;gap:14px;border-bottom:3px double #000;padding-bottom:10px;margin-bottom:14px;}.mf1-doc-crest{width:56px;height:56px;border:2px solid #000;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:700;font-size:20px;position:relative;color:#000;}.mf1-doc-crest::after{content:"";position:absolute;inset:4px;border:1px solid #000;border-radius:4px;}.mf1-doc-title{margin:0;font-size:22px;letter-spacing:0.5px;color:#000;}.mf1-doc-sub{margin:2px 0;font-size:13px;color:#444;}.mf1-doc table{width:100%;border-collapse:collapse;font-family:Georgia,serif;font-size:13px;}.mf1-doc th,.mf1-doc td{border:1px solid #333;padding:6px 8px;color:#000;}.mf1-doc-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;margin-bottom:10px;color:#000;}.mf1-doc-sig{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;font-size:13px;color:#000;}.mf1-doc-sig .mf1-sigline{border-bottom:1px solid #000;height:24px;margin-top:18px;}.mf1-doc ol{padding-left:0;margin:0;list-style:none;}.mf1-doc ol li{margin-bottom:14px;list-style:none;}/* --- Worksheet / answer-key / assignment question layout ---------- We render question number and body as sibling blocks inside a flex row instead of relying on the browser's default <ol> marker. Rationale:html2canvas (used for PDF export) collapses or mis- positions default list markers,producing "11/3" where we want "1. 1/3". Explicit divs give deterministic spacing in both print and PDF paths. -------------------------------------------------------------------- */ .mf1-doc .mf1-doc-qlist{padding-left:0;margin:0;list-style:none;}.mf1-doc .mf1-doc-q{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;page-break-inside:avoid;list-style:none;}.mf1-doc .mf1-doc-qnum{flex:0 0 32px;font-weight:700;font-family:Georgia,"Times New Roman",serif;color:#000;padding-top:1px;text-align:right;padding-right:4px;}.mf1-doc .mf1-doc-qbody{flex:1 1 auto;min-width:0;}.mf1-doc .mf1-doc-qtext{margin-bottom:4px;}.mf1-doc .mf1-doc-choices{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0;}.mf1-doc .mf1-doc-choice{padding:2px 6px;}.mf1-doc .mf1-doc-blank{margin-top:6px;}.mf1-doc .mf1-doc-work{min-height:36px;border-bottom:1px dotted #bbb;margin-top:4px;}.mf1-doc .mf1-doc-ans{font-weight:700;margin-top:2px;}.mf1-doc .mf1-doc-expl{font-style:italic;color:#333;margin-top:2px;font-size:12px;}.mf1-doc-footer{margin-top:24px;border-top:1px solid #999;padding-top:6px;font-size:11px;color:#555;display:flex;justify-content:space-between;}/* ========================================================================= * NATIVE PRINT / "SAVE AS PDF" STYLES * * This file no longer ships jsPDF or html2canvas. All printable output * goes through the browser's native print dialog,which every modern * browser (Chrome,Edge,Firefox,Safari,Opera) exposes with a built-in * "Save as PDF" destination. That path preserves real text,real vectors,* real hyperlinks,and crisp scaling — all of which were lost under the * old rasterize-to-canvas-then-re-encode pipeline. * * The rules below exist to make the native print output look professional:* * 1. @page controls paper size and physical margins. * 2. An on-screen visibility toggle hides the app chrome (tabs,header,* rain,toasts,modals) so only the doc node in .mf1-print-area prints. * 3. Color,font,and contrast are normalized to black-on-white. * 4. print-color-adjust:exact tells browsers NOT to strip background * fills — so the crest,header rule,and dark table header stay visible. * 5. Page-break controls keep tables,questions,and signature blocks * from splitting awkwardly across page boundaries. * 6. Orphan / widow control stops paragraphs dangling one line at the * bottom of a page. * ========================================================================= */ @page{size:letter portrait;margin:0.5in;}@page mf1-landscape{size:letter landscape;margin:0.5in;}.mf1-doc-landscape{page:mf1-landscape;}@media print{/* Hide everything by default,then unhide only the print area and its descendants. Note:visibility alone isn't enough because the print area carries .mf1-hidden (display:none) while on-screen — we must force display back and strip any Matrix-theme dark background so the printed output is legible on paper. */ html,body{background:#fff !important;color:#000 !important;margin:0 !important;padding:0 !important;/* Ensure native browsers don't drop out colored backgrounds (header rule,table header shading,crest). Both properties are needed for cross-browser coverage:the -webkit- prefix is still required by Chrome / Safari as of 2026. */ -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}body *{visibility:hidden !important;}.mf1-print-area,.mf1-print-area *{visibility:visible !important;color:#000 !important;}.mf1-print-area{display:block !important;position:absolute !important;left:0;top:0;width:100%;background:#fff !important;color:#000 !important;padding:0 !important;box-shadow:none !important;border:none !important;/* Prevent the browser from inserting its own margin / header / footer duplication inside the print area. The physical margins come from @page above. */ margin:0 !important;}/* Force ALL text in the print area to black — Matrix theme defaults to green which is invisible on white paper and prints blank on many browser print engines. */ .mf1-print-area *,.mf1-print-area h1,.mf1-print-area h2,.mf1-print-area h3,.mf1-print-area h4,.mf1-print-area p,.mf1-print-area div,.mf1-print-area span,.mf1-print-area td,.mf1-print-area th,.mf1-print-area li,.mf1-print-area strong{color:#000 !important;background-color:transparent !important;text-shadow:none !important;box-shadow:none !important;/* Kill any border-radius from the on-screen theme so printed boxes look crisp on paper. */ border-radius:0 !important;}/* Body copy:11pt serif is the sweet spot for letter-sized paper — readable without crowding,and fits more content per page than the 14–16px we use on screen. */ .mf1-print-area,.mf1-print-area body,.mf1-doc{font-family:Georgia,"Times New Roman",Times,serif !important;font-size:11pt !important;line-height:1.45 !important;}/* Headings:keep the serif family but bump size up so hierarchy is obvious in print. h1 only shows on one-title docs like certs. */ .mf1-print-area h1{font-size:20pt !important;font-weight:700 !important;}.mf1-print-area h2{font-size:16pt !important;font-weight:700 !important;}.mf1-print-area h3{font-size:13pt !important;font-weight:700 !important;}.mf1-print-area h4{font-size:12pt !important;font-weight:700 !important;}/* Widow / orphan control:never let a heading sit alone at the bottom of a page,and never leave a single line of a paragraph stranded. */ .mf1-print-area p,.mf1-print-area li,.mf1-print-area td,.mf1-print-area div{orphans:3;widows:3;}.mf1-print-area h1,.mf1-print-area h2,.mf1-print-area h3,.mf1-print-area h4{page-break-after:avoid;break-after:avoid-page;}.mf1-print-area table{width:100% !important;border-collapse:collapse !important;page-break-inside:auto;break-inside:auto;}.mf1-print-area thead{/* Repeat the <thead> row on every printed page — essential for multi-page rosters,leaderboards,and attendance logs. */ display:table-header-group;}.mf1-print-area tfoot{display:table-footer-group;}.mf1-print-area tr{page-break-inside:avoid;break-inside:avoid;page-break-after:auto;}.mf1-print-area table,.mf1-print-area th,.mf1-print-area td{border:1px solid #000 !important;}.mf1-print-area th{/* Subtle gray background for header row so it reads clearly from the body rows. print-color-adjust on <html> / <body> guarantees this actually prints. */ background:#e8e8e8 !important;font-weight:700 !important;}.mf1-print-area td,.mf1-print-area th{padding:4pt 6pt !important;}.mf1-print-area img,.mf1-print-area svg{max-width:100% !important;page-break-inside:avoid;break-inside:avoid;}.mf1-page-break,.mf1-doc-break{page-break-before:always;break-before:page;}.mf1-no-print,.mf1-no-print *{display:none !important;}.mf1-doc{box-shadow:none !important;border:none !important;padding:0 !important;margin:0 !important;background:#fff !important;}.mf1-doc-header{page-break-after:avoid;break-after:avoid-page;}.mf1-doc-footer{/* Small,gray,positioned at doc end — not a running footer (those require browser-specific pseudo-elements not universally supported;keep it simple & portable). */ font-size:9pt !important;color:#444 !important;border-top:1px solid #666 !important;margin-top:18pt !important;padding-top:4pt !important;}/* Questions:never let a numbered item split across pages — keeps the question number with its body. */ .mf1-doc .mf1-doc-q{page-break-inside:avoid;break-inside:avoid;}.mf1-doc-sig,.mf1-doc-cert-sigs{page-break-inside:avoid;break-inside:avoid;margin-top:24pt !important;}.mf1-doc-landscape{min-height:0 !important;text-align:center;}.mf1-doc-landscape .mf1-doc-cert-name{font-size:32pt !important;font-weight:700 !important;margin:12pt 0 !important;}.mf1-doc-landscape .mf1-doc-cert-title{font-size:18pt !important;font-style:italic;margin:8pt 0 !important;}/* Hide the on-screen UI so only the doc prints. Extra specific selectors here catch everything the app renders,including any newer panels added after this file's initial write. */ .mf1-header,.mf1-nav,[data-mf1-panel],[data-mf1-panels],.mf1-toasts,.mf1-toasts-host,.mf1-modal-backdrop,.mf1-rain,.mf1-mascot,.mf1-skip-link,.mf1-no-print{display:none !important;}/* Kill all animations & transitions — they're meaningless on paper and can cause partial-opacity captures on some print engines. */ *{animation:none !important;transition:none !important;}/* Links inside the printed doc:keep underlined and black so they remain obvious as references,but don't append the URL after each one — that bloats every anchor and looks terrible in report cards. */ .mf1-print-area a,.mf1-print-area a:link,.mf1-print-area a:visited{color:#000 !important;text-decoration:underline !important;}}.mf1-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}.mf1-card{padding:14px;border:1px solid var(--mf1-border);border-radius:var(--mf1-radius);background:var(--mf1-panel-2);}.mf1-card h4{color:var(--mf1-green);font-family:var(--mf1-mono);font-size:13px;letter-spacing:0.5px;text-transform:uppercase;}/* --- Fullscreen mode ------------------------------------------------- When .mf1-fs is on root,scale up type,pad more,fill the viewport. Kept modest so low-resolution displays don't feel cramped after the bump. Tabs stay visible;only the outer page chrome is hidden by the browser's own fullscreen treatment. ---------------------------------------------------------------------- */ .mf1-root.mf1-fs{min-height:100vh;padding:26px;font-size:17px;background:var(--mf1-bg);overflow-y:auto;}.mf1-root.mf1-fs .mf1-header{padding:10px 14px;}.mf1-root.mf1-fs .mf1-logo{font-size:16px;}.mf1-root.mf1-fs .mf1-tab{padding:9px 14px;font-size:14px;}.mf1-root.mf1-fs .mf1-btn{padding:9px 14px;font-size:14px;}.mf1-root.mf1-fs .mf1-btn-sm{padding:6px 10px;font-size:13px;}.mf1-root.mf1-fs h3{font-size:22px;}.mf1-root.mf1-fs h4{font-size:15px;}.mf1-root.mf1-fs [data-mf1-panel="play"]{font-size:18px;}.mf1-root.mf1-fs .mf1-work{font-size:22px;line-height:1.45;}.mf1-root.mf1-fs .mf1-prompt-big{font-size:32px !important;}/* --- Step-by-step work block ---------------------------------------- Monospace pre-block used by subtraction/division/etc. to show aligned columns for borrowing,carrying,and long-division steps. overflow-x ensures the column structure stays intact on narrow screens. ---------------------------------------------------------------------- */ .mf1-work{font-family:var(--mf1-mono);font-size:18px;line-height:1.4;background:rgba(0,255,106,0.05);border:1px solid var(--mf1-border-strong);border-radius:var(--mf1-radius);padding:14px 18px;margin:10px 0;color:var(--mf1-green);white-space:pre;overflow-x:auto;box-shadow:inset 0 0 20px rgba(0,255,106,0.08);}.mf1-work .mf1-work-caption{color:var(--mf1-muted,#6a9e76);font-size:12px;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:8px;display:block;}.mf1-work .mf1-work-borrow{color:#f5c400;font-size:0.7em;vertical-align:super;}.mf1-work .mf1-work-cross{color:#888;text-decoration:line-through;}.mf1-work .mf1-work-carry{color:#f5c400;font-size:0.7em;vertical-align:super;}.mf1-work .mf1-work-label{color:var(--mf1-white);font-style:italic;}.mf1-work-steps{margin:12px 0;}.mf1-work-steps > div{margin-bottom:8px;padding-left:12px;border-left:2px solid var(--mf1-border);}.mf1-work-steps > div > strong{color:var(--mf1-green);display:block;margin-bottom:4px;font-family:var(--mf1-mono);font-size:13px;}.mf1-spacer{flex:1;}.mf1-muted{color:var(--mf1-muted);font-family:var(--mf1-mono);font-size:12px;}.mf1-center{text-align:center;}.mf1-hidden{display:none !important;}.mf1-section-title{font-family:var(--mf1-mono);color:var(--mf1-green);text-transform:uppercase;letter-spacing:1px;font-size:13px;margin:10px 0 6px;}.mf1-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-family:var(--mf1-mono);font-size:11px;border:1px solid var(--mf1-border-strong);color:var(--mf1-green);background:var(--mf1-green-ghost);}.mf1-pill-red{color:var(--mf1-red);border-color:rgba(255,77,106,0.4);background:rgba(255,77,106,0.08);}.mf1-pill-amber{color:var(--mf1-amber);border-color:rgba(255,216,77,0.4);background:rgba(255,216,77,0.08);}.mf1-small{font-size:11px;}.mf1-mascot{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--mf1-green-soft),var(--mf1-green-dim));position:relative;display:inline-block;box-shadow:0 0 18px rgba(0,255,106,0.4);animation:mf1-float 3s ease-in-out infinite;}.mf1-mascot::before,.mf1-mascot::after{content:"";position:absolute;width:10px;height:14px;background:#000;border-radius:50%;top:22px;}.mf1-mascot::before{left:18px;}.mf1-mascot::after{right:18px;}.mf1-mascot-mouth{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:22px;height:10px;border-radius:0 0 14px 14px;background:#000;}@keyframes mf1-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}/* ========================================================================= * ACCESSIBILITY MODE (.mf1-a11y) * * Triggered by the A11y toggle in the header OR the OS preference * (prefers-reduced-motion / prefers-contrast). * * Goals:* - WCAG AA / AAA color contrast (black on white,no neon) * - Dyslexia-friendlier typography (system-ui sans,wider spacing) * - Kill all animations and transitions * - Strong visible keyboard focus rings on every interactive element * - Minimum 44x44 tap targets * - Hide decorative elements (digital rain,float animations,etc.) * ========================================================================= */ .mf1-root.mf1-a11y{--mf1-bg:#ffffff;--mf1-bg-2:#ffffff;--mf1-panel:#ffffff;--mf1-panel-2:#f5f5f5;--mf1-border:#444444;--mf1-border-strong:#000000;--mf1-text:#000000;--mf1-text-dim:#222222;--mf1-muted:#444444;--mf1-green:#005a1f;--mf1-green-soft:#007b2a;--mf1-green-dim:#004a18;--mf1-accent:#003399;color:#000;background:#fff !important;font-family:system-ui,-apple-system,"Segoe UI",Verdana,Arial,sans-serif !important;font-size:17px;line-height:1.55;}.mf1-root.mf1-a11y .mf1-rain,.mf1-root.mf1-a11y .mf1-mascot{display:none !important;}.mf1-root.mf1-a11y *,.mf1-root.mf1-a11y *::before,.mf1-root.mf1-a11y *::after{animation:none !important;transition:none !important;text-shadow:none !important;box-shadow:none !important;font-family:inherit !important;}.mf1-root.mf1-a11y,.mf1-root.mf1-a11y h1,.mf1-root.mf1-a11y h2,.mf1-root.mf1-a11y h3,.mf1-root.mf1-a11y h4,.mf1-root.mf1-a11y p,.mf1-root.mf1-a11y span,.mf1-root.mf1-a11y label,.mf1-root.mf1-a11y div,.mf1-root.mf1-a11y li,.mf1-root.mf1-a11y td,.mf1-root.mf1-a11y th{color:#000 !important;}.mf1-root.mf1-a11y .mf1-panel,.mf1-root.mf1-a11y .mf1-card,.mf1-root.mf1-a11y .mf1-modal,.mf1-root.mf1-a11y .mf1-menu,.mf1-root.mf1-a11y .mf1-tile,.mf1-root.mf1-a11y .mf1-chip{background:#ffffff !important;border:2px solid #000000 !important;color:#000 !important;}.mf1-root.mf1-a11y .mf1-nav,.mf1-root.mf1-a11y .mf1-header{background:#f5f5f5 !important;border:2px solid #000 !important;}.mf1-root.mf1-a11y .mf1-tab{background:#ffffff !important;color:#000 !important;border:2px solid #000 !important;padding:10px 14px !important;min-height:44px;font-weight:600;}.mf1-root.mf1-a11y .mf1-tab.is-active{background:#003399 !important;color:#ffffff !important;border-color:#003399 !important;}.mf1-root.mf1-a11y .mf1-btn{background:#003399 !important;color:#ffffff !important;border:2px solid #001a66 !important;min-height:44px;min-width:44px;padding:10px 18px;font-weight:600;border-radius:4px;}.mf1-root.mf1-a11y .mf1-btn:hover{background:#001a66 !important;}.mf1-root.mf1-a11y .mf1-btn-sm{min-height:40px;min-width:40px;padding:8px 12px;font-size:14px;}.mf1-root.mf1-a11y .mf1-btn-ghost,.mf1-root.mf1-a11y .mf1-btn-secondary{background:#ffffff !important;color:#000 !important;border:2px solid #000 !important;}.mf1-root.mf1-a11y .mf1-btn-danger{background:#a00000 !important;color:#ffffff !important;border:2px solid #700000 !important;}.mf1-root.mf1-a11y input[type=text],.mf1-root.mf1-a11y input[type=number],.mf1-root.mf1-a11y input[type=password],.mf1-root.mf1-a11y input[type=date],.mf1-root.mf1-a11y input[type=search],.mf1-root.mf1-a11y input[type=url],.mf1-root.mf1-a11y textarea,.mf1-root.mf1-a11y select{background:#ffffff !important;color:#000 !important;border:2px solid #000 !important;padding:10px 12px;font-size:16px;min-height:44px;font-family:inherit !important;}.mf1-root.mf1-a11y button:focus,.mf1-root.mf1-a11y a:focus,.mf1-root.mf1-a11y input:focus,.mf1-root.mf1-a11y textarea:focus,.mf1-root.mf1-a11y select:focus,.mf1-root.mf1-a11y [tabindex]:focus{outline:4px solid #ff8c00 !important;outline-offset:2px !important;}.mf1-root.mf1-a11y .mf1-fb-correct{background:#ffffff !important;color:#005a1f !important;border:3px solid #005a1f !important;font-weight:700;}.mf1-root.mf1-a11y .mf1-fb-wrong{background:#ffffff !important;color:#a00000 !important;border:3px solid #a00000 !important;font-weight:700;}.mf1-root.mf1-a11y .mf1-q-prompt,.mf1-root.mf1-a11y .mf1-question{font-size:22px !important;line-height:1.5 !important;color:#000 !important;}.mf1-root.mf1-a11y .mf1-choice{background:#ffffff !important;color:#000 !important;border:2px solid #000 !important;min-height:52px;font-size:18px;padding:12px 16px;}.mf1-root.mf1-a11y .mf1-choice.is-correct{background:#e6ffe6 !important;border-color:#005a1f !important;}.mf1-root.mf1-a11y .mf1-choice.is-wrong{background:#ffe6e6 !important;border-color:#a00000 !important;}.mf1-root.mf1-a11y table{border:2px solid #000 !important;}.mf1-root.mf1-a11y th,.mf1-root.mf1-a11y td{border:1px solid #444 !important;padding:8px 10px !important;}.mf1-root.mf1-a11y th{background:#e0e0e0 !important;font-weight:700;}.mf1-root.mf1-a11y .mf1-progress,.mf1-root.mf1-a11y .mf1-bar{background:#ffffff !important;border:2px solid #000 !important;height:16px;}.mf1-root.mf1-a11y .mf1-progress > *,.mf1-root.mf1-a11y .mf1-bar > *{background:#003399 !important;}.mf1-root.mf1-a11y .mf1-chip,.mf1-root.mf1-a11y .mf1-badge,.mf1-root.mf1-a11y .mf1-pill{background:#ffffff !important;color:#000 !important;border:2px solid #000 !important;padding:4px 10px !important;font-weight:600;}.mf1-root.mf1-a11y .mf1-modal-wrap{background:rgba(0,0,0,0.7) !important;}.mf1-root.mf1-a11y .mf1-modal{background:#ffffff !important;color:#000 !important;border:3px solid #000 !important;}.mf1-root.mf1-a11y .mf1-logo-crest{background:#003399 !important;color:#ffffff !important;border:2px solid #001a66 !important;}.mf1-root.mf1-a11y .mf1-brand,.mf1-root.mf1-a11y .mf1-brand *{color:#000 !important;}.mf1-root.mf1-a11y .mf1-avatar{border:2px solid #000 !important;color:#ffffff !important;font-weight:700;}.mf1-skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#003399;color:#ffffff;padding:12px 18px;font-weight:700;text-decoration:none;border:3px solid #001a66;border-radius:4px;}.mf1-skip-link:focus{left:12px;top:12px;outline:4px solid #ff8c00;}/* ========================================================================= * REDUCED MOTION (explicit user pref OR OS preference) * * Separate class so users can opt-in to reduced motion without full * accessibility mode (e.g. if they want the dark theme but get nausea * from the rain). Also auto-applied via the prefers-reduced-motion * media query so OS settings are respected out of the box. * ========================================================================= */ .mf1-root.mf1-reduce-motion .mf1-rain,.mf1-root.mf1-reduce-motion .mf1-mascot{display:none !important;}.mf1-root.mf1-reduce-motion *,.mf1-root.mf1-reduce-motion *::before,.mf1-root.mf1-reduce-motion *::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}@media (prefers-reduced-motion:reduce){.mf1-root .mf1-rain,.mf1-root .mf1-mascot{display:none !important;}.mf1-root *,.mf1-root *::before,.mf1-root *::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}}@media (prefers-contrast:more){.mf1-root{--mf1-border:#ffffff;--mf1-border-strong:#ffffff;}.mf1-root .mf1-btn,.mf1-root .mf1-tab,.mf1-root .mf1-panel,.mf1-root .mf1-card{border-width:2px !important;}}