/* RectaLab exact visual layer, generated from rectalab_pagina_completa.zip app/globals.css. */
.rectalab-exact {
  --ink: #19203a;
  --muted: #68708a;
  --purple: #6157e7;
  --purple-dark: #4c43cb;
  --purple-soft: #efedff;
  --orange: #f08a49;
  --orange-soft: #fff1e7;
  --teal: #17a99a;
  --teal-soft: #e5f8f5;
  --surface: #ffffff;
  --border: #e2e5ef;
  --background: #f6f7fb;
}.rectalab-exact * { box-sizing: border-box; }.rectalab-exact { background: var(--background); }.rectalab-exact { margin: 0; background: var(--background); color: var(--ink); font-family: Inter, ui-rounded, "Segoe UI", Arial, sans-serif; }.rectalab-exact button, .rectalab-exact input { font: inherit; }.rectalab-exact button { cursor: pointer; }.rectalab-exact button:focus-visible, .rectalab-exact input:focus-visible { outline: 3px solid #aca6ff; outline-offset: 3px; }.rectalab-exact button:disabled { cursor: not-allowed; opacity: .48; }.rectalab-exact svg { display: block; }.rectalab-exact .app { min-height: 100vh; overflow: hidden; }.rectalab-exact .app svg[aria-hidden="true"] { width: 22px; height: 22px; }.rectalab-exact .start-screen {
  min-height: 100vh;
  position: relative;
  padding: 28px clamp(24px, 6vw, 94px) 36px;
  background:
    radial-gradient(circle at 88% 18%, rgba(97,87,231,.13), transparent 25%),
    radial-gradient(circle at 6% 82%, rgba(23,169,154,.1), transparent 25%),
    linear-gradient(135deg, #fbfbff 0%, #f7f7fd 60%, #f8fcfb 100%);
}.rectalab-exact .brand { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }.rectalab-exact .brand-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--purple); color: white; box-shadow: 0 10px 25px rgba(97,87,231,.25); }.rectalab-exact .brand div { display: flex; flex-direction: column; }.rectalab-exact .brand strong { font-size: 19px; letter-spacing: -.4px; }.rectalab-exact .brand small { color: var(--muted); font-size: 12px; margin-top: 2px; }.rectalab-exact .hero { max-width: 1320px; min-height: 630px; margin: 16px auto 0; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(40px, 7vw, 120px); position: relative; z-index: 1; }.rectalab-exact .hero-copy { padding: 30px 0; }.rectalab-exact .eyebrow { color: var(--purple); background: var(--purple-soft); width: fit-content; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.rectalab-exact .eyebrow svg { width: 16px!important; height: 16px!important; }.rectalab-exact .hero h1 { margin: 22px 0 18px; max-width: 650px; font-size: clamp(48px, 5vw, 76px); line-height: .98; letter-spacing: -.055em; font-weight: 790; }.rectalab-exact .hero h1 em { color: var(--purple); font-style: normal; }.rectalab-exact .hero-copy > p { max-width: 580px; color: var(--muted); font-size: 18px; line-height: 1.65; }.rectalab-exact .hero-equation { margin: 28px 0; width: fit-content; min-width: 330px; position: relative; padding: 17px 24px 36px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.8); box-shadow: 0 12px 40px rgba(35,38,83,.07); font-family: Georgia, serif; font-size: 34px; }.rectalab-exact .hero-equation b { color: var(--purple); }.rectalab-exact .hero-equation b.orange { color: var(--orange); }.rectalab-exact .hero-equation small { position: absolute; bottom: 10px; left: 84px; right: 20px; display: flex; gap: 38px; color: var(--muted); font: 700 10px Inter, sans-serif; text-transform: uppercase; letter-spacing: .1em; }.rectalab-exact .hero-equation small i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); margin-top: 2px; }.rectalab-exact .hero-equation small i:nth-of-type(2) { background: var(--orange); }.rectalab-exact .primary { border: 0; border-radius: 12px; padding: 13px 18px; background: var(--purple); color: white; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 8px 20px rgba(97,87,231,.23); transition: transform .18s, background .18s; }.rectalab-exact .primary:hover:not(:disabled) { background: var(--purple-dark); transform: translateY(-2px); }.rectalab-exact .primary svg { width: 18px!important; }.rectalab-exact .primary.large { padding: 17px 25px; font-size: 16px; }.rectalab-exact .full { width: 100%; }.rectalab-exact .time-note { display: inline-block; margin-left: 16px; font-size: 12px!important; }.rectalab-exact .hero-visual { position: relative; max-width: 630px; padding: 36px; }.rectalab-exact .hero-visual .graph { filter: drop-shadow(0 30px 50px rgba(40,45,88,.15)); transform: rotate(-1deg); }.rectalab-exact .floating-card { position: absolute; z-index: 3; width: 138px; background: white; border: 1px solid var(--border); border-radius: 16px; padding: 12px 15px; display: flex; flex-direction: column; box-shadow: 0 15px 35px rgba(38,43,85,.14); }.rectalab-exact .floating-card span { font: 700 22px Georgia, serif; }.rectalab-exact .floating-card b { color: var(--muted); font-size: 11px; margin-top: 3px; }.rectalab-exact .card-m { left: -15px; top: 120px; color: var(--purple); }.rectalab-exact .card-b { right: -15px; bottom: 115px; color: var(--orange); }.rectalab-exact .journey { max-width: 1040px; margin: -10px auto 0; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,.85); box-shadow: 0 16px 40px rgba(38,43,85,.08); overflow: hidden; }.rectalab-exact .journey article { position: relative; display: flex; align-items: center; gap: 13px; padding: 18px 20px; border-right: 1px solid var(--border); }.rectalab-exact .journey article:last-child { border: 0; }.rectalab-exact .journey article > span { position: absolute; top: 7px; right: 10px; font-size: 10px; color: #c5c9d7; font-weight: 800; }.rectalab-exact .journey article > svg { color: var(--purple); }.rectalab-exact .journey b, .rectalab-exact .journey small { display: block; }.rectalab-exact .journey b { font-size: 13px; }.rectalab-exact .journey small { color: var(--muted); font-size: 11px; margin-top: 3px; }.rectalab-exact .ambient { position: absolute; width: 220px; height: 220px; border: 1px solid rgba(97,87,231,.12); border-radius: 50%; }.rectalab-exact .ambient-one { right: -90px; top: 44%; }.rectalab-exact .ambient-two { left: -120px; bottom: -50px; width: 300px; height: 300px; border-color: rgba(23,169,154,.12); }.rectalab-exact .graph { width: 100%; height: auto; user-select: none; }.rectalab-exact .graph-bg { fill: white; stroke: var(--border); stroke-width: 1.5; }.rectalab-exact .grid-line { stroke: #e8eaf2; stroke-width: 1; }.rectalab-exact .axis { stroke: #777f98; stroke-width: 1.8; }.rectalab-exact .axis-label { fill: #8c93a7; font-size: 11px; font-family: Inter, sans-serif; }.rectalab-exact .student-point { fill: var(--orange); stroke: white; stroke-width: 3; filter: drop-shadow(0 3px 4px rgba(240,138,73,.35)); }.rectalab-exact .point-label { fill: #b35a21; font-size: 13px; font-weight: 800; paint-order: stroke; stroke: white; stroke-width: 4px; }.rectalab-exact .intercept-dot { stroke: white; stroke-width: 3; }.rectalab-exact .slope-step path { fill: none; stroke: var(--orange); stroke-width: 3; stroke-dasharray: 5 4; }.rectalab-exact .slope-step text { fill: #b75d25; font-size: 12px; font-weight: 800; paint-order: stroke; stroke: white; stroke-width: 4px; }.rectalab-exact .graph-clickable { cursor: crosshair; }.rectalab-exact .activity-shell { width: min(1450px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0 50px; min-height: 100vh; }.rectalab-exact .progress-wrap { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 12px 18px 10px; box-shadow: 0 4px 15px rgba(36,42,82,.04); }.rectalab-exact .progress-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }.rectalab-exact .progress-top strong { color: var(--purple); }.rectalab-exact .progress-track { height: 5px; margin-top: 8px; background: #eceef5; border-radius: 99px; overflow: hidden; }.rectalab-exact .progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), #897ff5); border-radius: inherit; transition: width .4s; }.rectalab-exact .progress-labels { margin-top: 7px; display: flex; justify-content: space-between; color: #b2b6c4; font-size: 10px; }.rectalab-exact .progress-labels .active { color: var(--purple); font-weight: 800; }.rectalab-exact .section-heading { min-height: 110px; display: flex; justify-content: space-between; align-items: center; padding: 18px 8px 10px; }.rectalab-exact .section-heading > div { position: relative; padding-left: 75px; }.rectalab-exact .section-number { position: absolute; left: 0; top: -4px; font-size: 62px; color: #e7e4ff; font-weight: 900; line-height: 1; }.rectalab-exact .section-heading p { color: var(--purple); margin: 0 0 4px; font-size: 10px; font-weight: 900; letter-spacing: .15em; }.rectalab-exact .section-heading h2 { margin: 0; font-size: 32px; letter-spacing: -.035em; }.rectalab-exact .lesson-count, .rectalab-exact .concept-pill { background: white; border: 1px solid var(--border); border-radius: 99px; padding: 9px 14px; font-size: 12px; color: var(--muted); font-weight: 800; }.rectalab-exact .lesson-progress { height: 6px; background: #e9eaf1; border-radius: 99px; margin: -3px 8px 17px; overflow: hidden; }.rectalab-exact .lesson-progress span { display: block; height: 100%; background: var(--purple); border-radius: inherit; transition: width .35s; }.rectalab-exact .workspace-grid { display: grid; grid-template-columns: 370px 1fr; gap: 20px; }.rectalab-exact .instruction-card, .rectalab-exact .graph-card, .rectalab-exact .control-panel, .rectalab-exact .mission-card { background: white; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 9px 30px rgba(42,47,86,.05); }.rectalab-exact .instruction-card { padding: 25px; }.rectalab-exact .mini-label { color: var(--purple); font-size: 10px; font-weight: 900; letter-spacing: .13em; }.rectalab-exact .big-equation { margin: 8px 0 22px; padding: 15px; border-radius: 13px; background: var(--purple-soft); color: var(--purple-dark); text-align: center; font: 700 31px Georgia, serif; }.rectalab-exact .instruction-card h3 { margin: 0 0 7px; font-size: 17px; }.rectalab-exact .instruction-card > p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }.rectalab-exact .value-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 13px; }.rectalab-exact .value-table > div { display: grid; grid-template-columns: 55px 1fr 100px; align-items: center; min-height: 47px; border-bottom: 1px solid var(--border); text-align: center; font-size: 13px; }.rectalab-exact .value-table > div:last-child { border: 0; }.rectalab-exact .value-table > div:first-child { min-height: 32px; background: #f7f8fb; color: var(--muted); font-size: 10px; }.rectalab-exact .value-table input { width: 70px; margin: auto; text-align: center; border: 1px solid #cfd3df; border-radius: 8px; padding: 7px; background: white; color: var(--ink); font-weight: 800; }.rectalab-exact .secondary { border: 1px solid var(--purple); background: white; color: var(--purple); border-radius: 10px; padding: 10px 14px; font-weight: 800; }.rectalab-exact .secondary:hover { background: var(--purple-soft); }.rectalab-exact .feedback { display: flex; gap: 10px; align-items: flex-start; padding: 11px; margin: 13px 0; background: #f7f8fb; border-radius: 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }.rectalab-exact .feedback > span { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: #dfe2ec; display: grid; place-items: center; font-weight: 900; }.rectalab-exact .feedback p { margin: 1px 0 0; }.rectalab-exact .feedback.success { background: var(--teal-soft); color: #14796e; }.rectalab-exact .feedback.success > span { background: var(--teal); color: white; }.rectalab-exact .steps { display: grid; gap: 5px; margin-top: 16px; }.rectalab-exact .steps div { display: flex; align-items: center; gap: 8px; color: #a3a8b9; font-size: 11px; }.rectalab-exact .steps div span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #d7dae3; border-radius: 50%; font-weight: 800; }.rectalab-exact .steps .current { color: var(--purple); font-weight: 800; }.rectalab-exact .steps .current span { border-color: var(--purple); }.rectalab-exact .steps .done { color: var(--teal); font-weight: 800; }.rectalab-exact .steps .done span { border-color: var(--teal); background: var(--teal); color: white; }.rectalab-exact .graph-card { position: relative; padding: 18px; }.rectalab-exact .graph-card-top { display: flex; justify-content: space-between; align-items: start; margin: 0 4px 8px; }.rectalab-exact .graph-card h3 { margin: 0 0 3px; font-size: 15px; }.rectalab-exact .graph-card-top p { margin: 0; color: var(--muted); font-size: 11px; }.rectalab-exact .coordinate-chip { color: var(--muted); background: #f4f5f9; border-radius: 99px; padding: 6px 10px; font-size: 10px; }.rectalab-exact .graph-card .graph { max-height: 610px; }.rectalab-exact .graph-disabled { position: relative; opacity: .48; filter: grayscale(.7); }.rectalab-exact .locked-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #7d8397; font-size: 12px; font-weight: 800; }.rectalab-exact .locked-overlay svg { width: 30px!important; height: 30px!important; }.rectalab-exact .graph-action { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); }.rectalab-exact .graph-action:hover { transform: translateX(-50%) translateY(-2px)!important; }.rectalab-exact .discovery { margin-top: 10px; display: flex; gap: 12px; align-items: center; padding: 13px; background: var(--purple-soft); border-radius: 12px; color: var(--purple-dark); }.rectalab-exact .discovery > svg { flex: 0 0 auto; }.rectalab-exact .discovery div { flex: 1; }.rectalab-exact .discovery p { margin: 3px 0 0; font-size: 12px; }.rectalab-exact .discovery .primary { padding: 10px 14px; font-size: 12px; }.rectalab-exact .guided-grapher { display: grid; gap: 16px; }.rectalab-exact .mission-strip { min-height: 112px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #dcd9ff; border-radius: 17px; background: linear-gradient(115deg, #f2f0ff, #fbfaff); box-shadow: 0 8px 24px rgba(54,48,137,.06); }.rectalab-exact .position-grapher .mission-strip { border-color: #ffd8bf; background: linear-gradient(115deg, #fff1e7, #fffaf7); }.rectalab-exact .mission-strip > div:first-child { max-width: 760px; }.rectalab-exact .mission-strip span { color: var(--purple); font-size: 9px; font-weight: 900; letter-spacing: .12em; }.rectalab-exact .position-grapher .mission-strip span { color: #b85b25; }.rectalab-exact .mission-strip h3 { margin: 4px 0 4px; font-size: 20px; }.rectalab-exact .mission-strip p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.rectalab-exact .mission-functions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; min-width: 260px; }.rectalab-exact .mission-functions code { padding: 8px 12px; color: var(--purple-dark); background: white; border: 1px solid #dad6ff; border-radius: 9px; font: 700 16px Georgia, serif; box-shadow: 0 4px 12px rgba(40,40,80,.06); }.rectalab-exact .position-grapher .mission-functions code { color: #a95423; border-color: #ffd6bd; }.rectalab-exact .desmos-shell { min-height: 560px; display: grid; grid-template-columns: 355px minmax(0, 1fr); overflow: hidden; border: 1px solid #d9dce5; border-radius: 18px; background: white; box-shadow: 0 15px 36px rgba(37,42,77,.09); }.rectalab-exact .expression-panel { position: relative; display: flex; flex-direction: column; min-width: 0; background: #f8f8fa; border-right: 1px solid #d9dce5; }.rectalab-exact .expression-toolbar { min-height: 55px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; color: #545a6c; background: white; border-bottom: 1px solid #d9dce5; }.rectalab-exact .expression-toolbar > div { display: flex; align-items: center; gap: 8px; }.rectalab-exact .expression-toolbar svg { width: 18px!important; height: 18px!important; color: var(--purple); }.rectalab-exact .position-grapher .expression-toolbar svg { color: var(--orange); }.rectalab-exact .expression-toolbar b { font-size: 12px; }.rectalab-exact .expression-toolbar > button { width: 34px; height: 34px; border: 1px solid #d5d8e1; border-radius: 9px; color: #5f6577; background: #f8f8fa; font-size: 20px; line-height: 1; }.rectalab-exact .expression-list { flex: 1; overflow: auto; background: white; }.rectalab-exact .expression-row { min-height: 92px; position: relative; display: grid; grid-template-columns: 24px 23px minmax(0, 1fr) 24px; align-content: center; align-items: center; column-gap: 7px; padding: 12px 12px 12px 9px; border-bottom: 1px solid #e1e3e9; background: white; }.rectalab-exact .expression-row:focus-within { background: #fdfdff; box-shadow: inset 3px 0 var(--purple); }.rectalab-exact .position-grapher .expression-row:focus-within { box-shadow: inset 3px 0 var(--orange); }.rectalab-exact .visibility-dot { width: 16px; height: 16px; padding: 0; border: 3px solid white; border-radius: 50%; background: var(--line-color); box-shadow: 0 0 0 2px var(--line-color); }.rectalab-exact .visibility-dot.hidden-line { background: transparent; opacity: .35; }.rectalab-exact .expression-number { color: #adb1bf; font-size: 10px; font-weight: 800; text-align: center; }.rectalab-exact .expression-row input { width: 100%; min-width: 0; padding: 8px 5px; color: #242a40; background: transparent; border: 0; border-bottom: 1px solid transparent; font: 600 20px Georgia, serif; }.rectalab-exact .expression-row input:focus { outline: 0; border-bottom-color: #cac6fb; }.rectalab-exact .expression-row input::placeholder { color: #b8bbc6; }.rectalab-exact .delete-expression { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; color: #a1a5b2; background: transparent; font-size: 18px; }.rectalab-exact .delete-expression:hover { color: #d64f61; background: #fff0f2; }.rectalab-exact .expression-row small { grid-column: 3 / 5; min-height: 14px; margin-top: 2px; color: #858a9b; font-size: 9px; }.rectalab-exact .expression-row.invalid small { color: #cf5565; }.rectalab-exact .expression-row.invalid input { color: #bd3f50; border-bottom-color: #efbac2; }.rectalab-exact .add-expression { width: calc(100% - 24px); margin: 12px; padding: 9px; border: 1px dashed #cfd2dc; border-radius: 9px; color: #777d8f; background: #fbfbfc; font-size: 10px; font-weight: 800; }.rectalab-exact .panel-tip { margin: 0 12px 12px; padding: 10px; display: flex; align-items: flex-start; gap: 8px; color: #686f83; background: #eeedf9; border-radius: 9px; }.rectalab-exact .position-grapher .panel-tip { background: var(--orange-soft); }.rectalab-exact .panel-tip svg { width: 15px!important; height: 15px!important; flex: 0 0 auto; color: var(--purple); }.rectalab-exact .position-grapher .panel-tip svg { color: var(--orange); }.rectalab-exact .panel-tip p { margin: 0; font-size: 9px; line-height: 1.45; }.rectalab-exact .desmos-canvas { position: relative; min-width: 0; min-height: 560px; background: white; overflow: hidden; }.rectalab-exact .canvas-toolbar { height: 44px; position: absolute; z-index: 3; top: 12px; left: 14px; padding: 7px 10px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #d9dce4; border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 4px 12px rgba(34,39,67,.08); }.rectalab-exact .canvas-toolbar span { color: #464c5e; font-size: 10px; font-weight: 900; }.rectalab-exact .canvas-toolbar small { color: #9195a3; font-size: 8px; }.rectalab-exact .desmos-plot { width: 100%; height: 100%; min-height: 560px; display: block; }.rectalab-exact .desmos-bg { fill: white; }.rectalab-exact .minor-grid { stroke: #eef0f4; stroke-width: 1; }.rectalab-exact .major-grid { stroke: #d7dae1; stroke-width: 1.3; }.rectalab-exact .desmos-axis { stroke: #4e5360; stroke-width: 2.4; }.rectalab-exact .desmos-label { fill: #555b69; font-size: 13px; font-family: Inter, sans-serif; }.rectalab-exact .intercept-label { font-size: 11px; font-weight: 900; font-family: Inter, sans-serif; paint-order: stroke; stroke: white; stroke-width: 4px; stroke-linejoin: round; }.rectalab-exact .empty-graph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; color: #969aa8; }.rectalab-exact .empty-graph svg { width: 34px!important; height: 34px!important; color: #b8bbc6; }.rectalab-exact .empty-graph b { font-size: 13px; }.rectalab-exact .empty-graph span { font-size: 10px; }.rectalab-exact .zoom-mock { position: absolute; top: 14px; right: 14px; display: grid; overflow: hidden; border: 1px solid #d5d8e0; border-radius: 8px; background: white; box-shadow: 0 4px 12px rgba(34,39,67,.08); }.rectalab-exact .zoom-mock span { width: 34px; height: 34px; display: grid; place-items: center; color: #626775; font-size: 20px; }.rectalab-exact .zoom-mock span + span { border-top: 1px solid #e0e2e7; }.rectalab-exact .observation-question { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(520px, 1.5fr); gap: 14px 22px; padding: 20px 22px; border: 1px solid #e0e2e9; border-radius: 17px; background: white; box-shadow: 0 10px 28px rgba(40,45,80,.06); }.rectalab-exact .observation-question:not(.question-ready) { background: #fafafd; }.rectalab-exact .question-copy span { color: var(--purple); font-size: 8px; font-weight: 900; letter-spacing: .11em; }.rectalab-exact .position-grapher .question-copy span { color: #b85b25; }.rectalab-exact .question-copy h3 { margin: 5px 0 0; font-size: 17px; line-height: 1.35; }.rectalab-exact .question-copy p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }.rectalab-exact .observation-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }.rectalab-exact .observation-options button { min-height: 58px; padding: 9px; display: flex; align-items: center; gap: 8px; border: 1px solid #dfe1e8; border-radius: 10px; color: #42485a; background: white; text-align: left; font-size: 10px; font-weight: 800; }.rectalab-exact .observation-options button > span { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: #686f82; background: #eff0f4; }.rectalab-exact .observation-options button:hover:not(:disabled) { border-color: var(--purple); background: #faf9ff; }.rectalab-exact .position-grapher .observation-options button:hover:not(:disabled) { border-color: var(--orange); background: #fffaf7; }.rectalab-exact .observation-options button.correct { color: #0c796e; border-color: var(--teal); background: var(--teal-soft); }.rectalab-exact .observation-options button.correct > span { color: white; background: var(--teal); }.rectalab-exact .observation-options button.wrong { color: #a33e4b; border-color: #df7180; background: #fff2f4; }.rectalab-exact .observation-options button.wrong > span { color: white; background: #d85869; }.rectalab-exact .guided-feedback { min-height: 42px; grid-column: 1 / 2; padding: 9px 11px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: #f3f4f7; border-radius: 9px; }.rectalab-exact .guided-feedback > span { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: #969baa; font-size: 10px; font-weight: 900; }.rectalab-exact .guided-feedback p { margin: 0; font-size: 9px; line-height: 1.45; }.rectalab-exact .guided-feedback.hint { color: #775b10; background: #fff7dc; }.rectalab-exact .guided-feedback.hint > span { background: #e7b932; }.rectalab-exact .guided-feedback.success { color: #0b6e65; background: var(--teal-soft); }.rectalab-exact .guided-feedback.success > span { background: var(--teal); }.rectalab-exact .observation-question > .primary { align-self: center; justify-self: end; grid-column: 2 / 3; grid-row: 2 / 3; min-width: 190px; }.rectalab-exact .explore-grid { display: grid; grid-template-columns: 390px 1fr; gap: 20px; }.rectalab-exact .control-panel { padding: 28px; }.rectalab-exact .control-panel h3 { font-size: 22px; margin: 10px 0 8px; }.rectalab-exact .control-panel > p { color: var(--muted); font-size: 13px; line-height: 1.55; }.rectalab-exact .equation-live { margin: 25px 0; padding: 18px; background: var(--purple-soft); color: var(--ink); border-radius: 14px; text-align: center; font: 600 34px Georgia, serif; }.rectalab-exact .equation-live b { color: var(--purple); }.rectalab-exact .slider-label, .rectalab-exact .lab-control label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; }.rectalab-exact .slider-label output, .rectalab-exact .lab-control output { width: 38px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--purple); color: white; font-weight: 900; font-size: 16px; }.rectalab-exact .slider { width: 100%; height: 7px; margin: 20px 0 13px; accent-color: var(--purple); }.rectalab-exact .orange-slider { accent-color: var(--orange); }.rectalab-exact .preset-row { display: flex; justify-content: space-between; gap: 7px; }.rectalab-exact .preset-row button { width: 46px; border: 1px solid var(--border); border-radius: 9px; background: white; color: var(--muted); padding: 8px; font-weight: 800; }.rectalab-exact .preset-row button.active { background: var(--purple); color: white; border-color: var(--purple); }.rectalab-exact .dynamic-sentence { margin-top: 22px; background: #f7f8fb; border-left: 4px solid var(--purple); border-radius: 8px; padding: 13px; color: var(--muted); font-size: 12px; line-height: 1.5; }.rectalab-exact .dynamic-sentence b { color: var(--ink); }.rectalab-exact .observation-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }.rectalab-exact .observation-checks span { padding: 5px 7px; border-radius: 7px; background: #f1f2f6; color: #a3a7b6; font-size: 9px; font-weight: 800; }.rectalab-exact .observation-checks .seen { color: var(--teal); background: var(--teal-soft); }.rectalab-exact .explore-graph { display: grid; place-items: center; min-height: 610px; }.rectalab-exact .explore-graph .graph { max-height: 560px; }.rectalab-exact .legend { position: absolute; top: 25px; right: 25px; padding: 8px 11px; background: white; border: 1px solid var(--border); border-radius: 9px; font-size: 11px; font-weight: 800; }.rectalab-exact .legend span { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; }.rectalab-exact .rule-card { margin-top: 18px; border-radius: 17px; padding: 17px 20px; display: flex; align-items: center; gap: 16px; }.rectalab-exact .rule-card > svg { width: 28px!important; height: 28px!important; }.rectalab-exact .rule-card div { flex: 1; }.rectalab-exact .rule-card span { font-size: 9px; font-weight: 900; letter-spacing: .12em; }.rectalab-exact .rule-card h3 { margin: 3px 0 2px; font-size: 15px; }.rectalab-exact .rule-card p { margin: 0; font-size: 11px; line-height: 1.5; }.rectalab-exact .purple-rule { background: var(--purple-soft); color: var(--purple-dark); border: 1px solid #d9d4ff; }.rectalab-exact .unlock-note { margin: 8px 0 0; text-align: right; color: var(--muted); font-size: 10px; }.rectalab-exact .concept-pill.purple { color: var(--purple); background: var(--purple-soft); border-color: #d9d4ff; }.rectalab-exact .orange-number { color: #ffe4d2; }.rectalab-exact .orange-text { color: var(--orange); }.rectalab-exact .orange-pill { color: #b85b25; background: var(--orange-soft); border-color: #ffd9c1; }.rectalab-exact .orange-eq { background: var(--orange-soft); }.rectalab-exact .orange-eq b { color: var(--orange); }.rectalab-exact .orange-output { background: var(--orange)!important; }.rectalab-exact .orange-presets button.active { background: var(--orange); border-color: var(--orange); }.rectalab-exact .orange-rule { background: var(--orange-soft); color: #9d4d20; border: 1px solid #ffd5ba; }.rectalab-exact .orange-button { background: var(--orange); box-shadow: 0 8px 20px rgba(240,138,73,.22); }.rectalab-exact .orange-button:hover:not(:disabled) { background: #d97335; }.rectalab-exact .compare-lines { display: flex; gap: 15px; margin-top: 16px; color: var(--muted); font-size: 10px; }.rectalab-exact .compare-lines i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }.rectalab-exact .intercept-callout { position: absolute; top: 25px; right: 25px; border-radius: 9px; padding: 8px 11px; color: #a54f1d; background: var(--orange-soft); font-size: 11px; font-weight: 900; }.rectalab-exact .teal-number { color: #d4f3ef; }.rectalab-exact .teal-pill { display: inline-flex; align-items: center; gap: 6px; color: #0d7f74; background: var(--teal-soft); border-color: #c8eee9; }.rectalab-exact .teal-pill svg { width: 16px!important; }.rectalab-exact .lab-layout { display: grid; grid-template-columns: 290px minmax(450px, 1fr) 300px; gap: 18px; }.rectalab-exact .lab-sidebar { background: #202640; border-radius: 20px; padding: 20px; color: white; box-shadow: 0 15px 35px rgba(22,27,51,.15); }.rectalab-exact .lab-expression { display: flex; gap: 11px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }.rectalab-exact .color-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px rgba(97,87,231,.2); }.rectalab-exact .lab-expression small { display: block; color: #999fb6; font-size: 8px; letter-spacing: .1em; }.rectalab-exact .lab-expression b { display: block; margin-top: 5px; font: 600 22px Georgia, serif; }.rectalab-exact .lab-control { margin-top: 25px; }.rectalab-exact .lab-control label { color: #dce0ef; }.rectalab-exact .lab-control label b { color: #a9a2ff; }.rectalab-exact .lab-control small { display: flex; justify-content: space-between; color: #8d93aa; font-size: 9px; }.rectalab-exact .ghost-button { width: 100%; margin-top: 24px; padding: 10px; display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: #d8dbea; border-radius: 9px; font-size: 11px; font-weight: 800; }.rectalab-exact .ghost-button svg { width: 15px!important; }.rectalab-exact .auto-reading { margin-top: 20px; padding: 14px; border-radius: 10px; background: rgba(23,169,154,.12); border: 1px solid rgba(23,169,154,.2); }.rectalab-exact .auto-reading span { color: #5cd5c8; font-size: 8px; letter-spacing: .1em; font-weight: 900; }.rectalab-exact .auto-reading p { margin: 5px 0 0; color: #d8eeeb; font-size: 11px; line-height: 1.55; }.rectalab-exact .lab-graph { min-height: 610px; display: grid; place-items: center; }.rectalab-exact .lab-badges { position: absolute; top: 25px; right: 25px; display: flex; gap: 7px; }.rectalab-exact .lab-badges span { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 10px; font-weight: 900; }.rectalab-exact .lab-badges i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }.rectalab-exact .purple-dot { background: var(--purple); }.rectalab-exact .orange-dot { background: var(--orange); }.rectalab-exact .mission-card { padding: 23px; }.rectalab-exact .mission-icon { width: 48px; height: 48px; margin: 19px 0 12px; display: grid; place-items: center; color: var(--teal); background: var(--teal-soft); border-radius: 14px; }.rectalab-exact .mission-icon svg { width: 27px!important; height: 27px!important; }.rectalab-exact .mission-card h3 { font-size: 21px; line-height: 1.25; margin: 0 0 18px; }.rectalab-exact .mission-hints { background: #f7f8fb; border-radius: 11px; padding: 10px 13px; margin-bottom: 15px; }.rectalab-exact .mission-hints p { margin: 5px 0; color: var(--muted); font-size: 11px; }.rectalab-exact .mission-hints p span { display: inline-block; color: var(--purple); width: 20px; font-size: 17px; }.rectalab-exact .mission-feedback { min-height: 46px; margin-top: 10px; padding: 10px; border-radius: 9px; color: var(--muted); background: #f7f8fb; font-size: 10px; line-height: 1.4; }.rectalab-exact .evaluation-button { width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: 10px; background: var(--teal); color: white; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; font-size: 11px; }.rectalab-exact .evaluation-button svg { width: 16px!important; }.rectalab-exact .evaluation-shell { max-width: 1260px; }.rectalab-exact .assessment-top { display: flex; justify-content: space-between; align-items: center; padding: 28px 5px 18px; }.rectalab-exact .assessment-top h2 { margin: 5px 0 0; font-size: 31px; letter-spacing: -.04em; }.rectalab-exact .score-chip { display: flex; align-items: baseline; gap: 4px; padding: 9px 15px; border-radius: 14px; background: var(--purple-soft); color: var(--purple); }.rectalab-exact .score-chip small { margin-right: 8px; font-size: 8px; font-weight: 900; letter-spacing: .1em; }.rectalab-exact .score-chip b { font-size: 28px; }.rectalab-exact .score-chip span { color: var(--muted); font-size: 11px; }.rectalab-exact .question-progress { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding: 0 6px; }.rectalab-exact .question-progress span, .rectalab-exact .question-progress b { display: block; font-size: 10px; }.rectalab-exact .question-progress span { color: var(--muted); }.rectalab-exact .question-progress b { margin-top: 4px; color: var(--purple); }.rectalab-exact .dots { display: flex; gap: 5px; }.rectalab-exact .dots i { width: 20px; height: 5px; border-radius: 99px; background: #e0e2ea; }.rectalab-exact .dots i.current { background: var(--purple); }.rectalab-exact .dots i.done { background: var(--teal); }.rectalab-exact .question-card { min-height: 585px; display: grid; grid-template-columns: 1fr 310px; background: white; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; box-shadow: 0 16px 40px rgba(39,44,85,.07); }.rectalab-exact .question-main { position: relative; padding: 46px 55px; }.rectalab-exact .question-number { position: absolute; top: 25px; left: 22px; color: #e4e1ff; font-size: 48px; font-weight: 900; line-height: 1; }.rectalab-exact .question-main h3 { position: relative; max-width: 680px; margin: 18px 0 8px; font-size: 25px; line-height: 1.3; }.rectalab-exact .question-main > p { color: var(--muted); margin: 0 0 15px; font-size: 13px; }.rectalab-exact .question-graph { max-width: 230px; margin: 12px auto; }.rectalab-exact .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 25px; }.rectalab-exact .choices button { min-height: 68px; display: flex; align-items: center; gap: 13px; padding: 12px 15px; border: 1px solid var(--border); border-radius: 13px; background: white; color: var(--ink); text-align: left; transition: border .15s, background .15s, transform .15s; }.rectalab-exact .choices button:hover:not(:disabled) { border-color: var(--purple); background: #faf9ff; transform: translateY(-1px); }.rectalab-exact .choices button > span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #f0f1f6; color: var(--muted); font-weight: 900; }.rectalab-exact .choices button b { font-size: 14px; }.rectalab-exact .choices button svg { margin-left: auto; width: 20px!important; }.rectalab-exact .choices button.wrong { border-color: #e56a65; background: #fff2f1; }.rectalab-exact .choices button.wrong > span { background: #e56a65; color: white; }.rectalab-exact .choices button.correct { border-color: var(--teal); background: var(--teal-soft); color: #0b746a; }.rectalab-exact .choices button.correct > span { background: var(--teal); color: white; }.rectalab-exact .assessment-side { display: flex; flex-direction: column; gap: 13px; padding: 25px; background: #f7f8fb; border-left: 1px solid var(--border); }.rectalab-exact .attempt-card, .rectalab-exact .assessment-feedback { background: white; border: 1px solid var(--border); border-radius: 13px; padding: 14px; }.rectalab-exact .attempt-card > span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .1em; }.rectalab-exact .attempt-card > div { display: flex; gap: 8px; margin: 10px 0 8px; }.rectalab-exact .attempt-card i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 900; font-size: 11px; }.rectalab-exact .attempt-card i.available { background: var(--purple-soft); color: var(--purple); border: 1px solid #d6d2ff; }.rectalab-exact .attempt-card i.used { background: #eceef3; color: #a9adba; text-decoration: line-through; }.rectalab-exact .attempt-card p { margin: 0; color: var(--muted); font-size: 9px; }.rectalab-exact .assessment-feedback { display: flex; gap: 10px; flex: 1; align-items: flex-start; }.rectalab-exact .assessment-feedback > span { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #edf0f5; color: var(--muted); font-weight: 900; }.rectalab-exact .assessment-feedback b { font-size: 12px; }.rectalab-exact .assessment-feedback p { color: var(--muted); font-size: 10px; line-height: 1.55; }.rectalab-exact .assessment-feedback.hint { background: #fff8e5; border-color: #f1dda0; }.rectalab-exact .assessment-feedback.hint > span { background: #f3c94e; }.rectalab-exact .assessment-feedback.good { background: var(--teal-soft); border-color: #b9e8e2; }.rectalab-exact .assessment-feedback.good > span { background: var(--teal); color: white; }.rectalab-exact .result-screen { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 50% 15%, rgba(97,87,231,.15), transparent 35%), var(--background); }.rectalab-exact .result-card { width: min(650px, 100%); position: relative; padding: 42px 55px; border: 1px solid var(--border); border-radius: 26px; background: white; text-align: center; box-shadow: 0 25px 60px rgba(35,40,82,.12); }.rectalab-exact .result-burst { width: 55px; height: 55px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 18px; background: var(--purple-soft); color: var(--purple); }.rectalab-exact .result-burst svg { width: 30px!important; height: 30px!important; }.rectalab-exact .result-card h1 { margin: 8px 0 7px; font-size: 36px; letter-spacing: -.04em; }.rectalab-exact .result-card > p { color: var(--muted); margin: 0 auto 18px; font-size: 13px; }.rectalab-exact .score-ring { width: 155px; height: 155px; margin: 12px auto 22px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--purple) var(--score), #e9eaf1 0); position: relative; }.rectalab-exact .score-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: white; }.rectalab-exact .score-ring div { position: relative; z-index: 1; }.rectalab-exact .score-ring b, .rectalab-exact .score-ring span { display: block; }.rectalab-exact .score-ring b { font-size: 42px; }.rectalab-exact .score-ring span { color: var(--muted); font-size: 9px; }.rectalab-exact .result-breakdown { display: grid; gap: 11px; text-align: left; }.rectalab-exact .result-breakdown > div { display: grid; grid-template-columns: 145px 1fr 42px; align-items: center; gap: 10px; font-size: 10px; }.rectalab-exact .result-breakdown > div > div { height: 7px; border-radius: 99px; background: #eceef4; overflow: hidden; }.rectalab-exact .result-breakdown i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), #9a92f5); border-radius: inherit; }.rectalab-exact .result-note { display: flex; gap: 10px; text-align: left; margin: 22px 0; padding: 13px; border-radius: 12px; background: var(--purple-soft); color: var(--purple-dark); }.rectalab-exact .result-note p { margin: 0; font-size: 11px; line-height: 1.5; }

@media (max-width: 1050px) {.rectalab-exact .hero { grid-template-columns: 1fr 1fr; gap: 20px; }.rectalab-exact .hero h1 { font-size: 50px; }.rectalab-exact .lab-layout { grid-template-columns: 260px 1fr; }.rectalab-exact .mission-card { grid-column: 1 / -1; }.rectalab-exact .desmos-shell { grid-template-columns: 310px minmax(0, 1fr); }.rectalab-exact .observation-question { grid-template-columns: 1fr; }.rectalab-exact .guided-feedback, .rectalab-exact .observation-question > .primary { grid-column: 1; grid-row: auto; }
}
@media (max-width: 780px) {.rectalab-exact .start-screen { padding: 20px 18px 30px; }.rectalab-exact .hero { grid-template-columns: 1fr; padding-top: 30px; }.rectalab-exact .hero-visual { padding: 15px; }.rectalab-exact .journey { grid-template-columns: 1fr 1fr; margin-top: 20px; }.rectalab-exact .journey article:nth-child(2) { border-right: 0; }.rectalab-exact .journey article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }.rectalab-exact .time-note { display: block; margin-left: 0; }.rectalab-exact .activity-shell { width: min(100% - 24px, 700px); }.rectalab-exact .progress-labels { display: none; }.rectalab-exact .section-heading { align-items: flex-end; }.rectalab-exact .section-heading > div { padding-left: 0; }.rectalab-exact .section-number { display: none; }.rectalab-exact .workspace-grid, .rectalab-exact .explore-grid, .rectalab-exact .lab-layout, .rectalab-exact .question-card { grid-template-columns: 1fr; }.rectalab-exact .mission-strip { align-items: flex-start; flex-direction: column; }.rectalab-exact .mission-functions { justify-content: flex-start; min-width: 0; }.rectalab-exact .desmos-shell { grid-template-columns: 1fr; }.rectalab-exact .expression-panel { border-right: 0; border-bottom: 1px solid #d9dce5; }.rectalab-exact .expression-list { max-height: 285px; }.rectalab-exact .desmos-canvas, .rectalab-exact .desmos-plot { min-height: 390px; }.rectalab-exact .observation-options { grid-template-columns: 1fr; }.rectalab-exact .graph-card { min-height: auto; }.rectalab-exact .explore-graph, .rectalab-exact .lab-graph { min-height: 400px; }.rectalab-exact .assessment-side { border-left: 0; border-top: 1px solid var(--border); }.rectalab-exact .question-main { padding: 40px 24px 25px; }.rectalab-exact .question-number { top: 14px; left: 15px; font-size: 38px; }.rectalab-exact .choices { grid-template-columns: 1fr; }.rectalab-exact .assessment-top { align-items: flex-end; }.rectalab-exact .result-card { padding: 35px 24px; }.rectalab-exact .result-breakdown > div { grid-template-columns: 115px 1fr 35px; }
}

@media (prefers-reduced-motion: reduce) {.rectalab-exact *, .rectalab-exact *::before, .rectalab-exact *::after { scroll-behavior: auto!important; transition: none!important; animation: none!important; }
}

.rectalab-exact.app,
.rectalab-exact .app {
  min-height: 100vh;
  overflow: hidden;
}

.rectalab-exact .desmos-plot {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.rectalab-exact .desmos-bg {
  fill: #fff;
  stroke: var(--border);
  stroke-width: 1.5;
}

.rectalab-exact .minor-grid {
  stroke: #f1f2f6;
  stroke-width: 1;
}

.rectalab-exact .major-grid {
  stroke: #e3e6ef;
  stroke-width: 1.15;
}

.rectalab-exact .desmos-axis {
  stroke: #777f98;
  stroke-width: 2;
}

.rectalab-exact .desmos-label {
  fill: #8c93a7;
  font-size: 11px;
  font-family: Inter, ui-rounded, "Segoe UI", Arial, sans-serif;
}

.rectalab-exact .desmos-line {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 4px 6px rgba(32, 36, 70, .16));
}

.rectalab-exact .desmos-point {
  stroke: #fff;
  stroke-width: 4;
}

.rectalab-exact .rectalab-student-session {
  width: min(580px, 100%);
  margin: 26px 0 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 34px rgba(35, 38, 83, .07);
}

.rectalab-exact .rectalab-student-session label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rectalab-exact .rectalab-student-session strong,
.rectalab-exact .rectalab-student-session select {
  min-height: 39px;
  padding: 10px 12px;
  border: 1px solid #cfd5e2;
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.rectalab-exact .rectalab-student-session .rectalab-pair-toggle {
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d9dded;
  border-radius: 10px;
  background: #f8f9fd;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

.rectalab-exact .rectalab-student-session .rectalab-pair-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--purple);
}

.rectalab-exact .rectalab-student-session label:last-of-type,
.rectalab-exact .rectalab-student-session small {
  grid-column: 1 / -1;
}

.rectalab-exact .rectalab-student-session small {
  color: #a55a1f;
  font-size: 11px;
  font-weight: 700;
}