:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;--bg:#091525;--paper:#11233a;--panel:#122640;--line:#2c465f;--ink:#eef5fb;--muted:#bed0dd;--accent:#41dfcd;--gold:#f8ca79;--tint:#123d48;--danger:#ff9b9b;--positive:#80e2a0;--shadow:0 18px 46px #020a1760}
:root[data-theme=light]{color-scheme:light;--bg:#f1f7fb;--paper:#fff;--panel:#f8fbff;--line:#bdd0df;--ink:#132d44;--muted:#435c70;--accent:#0a817c;--gold:#a85e05;--tint:#e0f6f2;--danger:#ab2943;--positive:#086e49;--shadow:0 12px 36px #4d75951a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.56}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit}a:hover{color:var(--accent)}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.skip{position:absolute;left:-9999px;top:10px}.skip:focus{left:10px;z-index:99;background:#fff;color:#111;padding:10px}.top{max-width:1370px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 26px}.top nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.top nav a{font-size:.87rem;text-decoration:none;color:var(--muted)}.brand{font-size:1.2rem;display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.05em;text-decoration:none}.brand small{display:block;font-size:.61rem;letter-spacing:.17em;font-weight:700;color:var(--muted)}.star{font-size:2.3rem;color:var(--accent)}.brand-accent{color:var(--accent)}.theme{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:5px 12px}main{max-width:1320px;margin:auto;padding:0 22px}.hero{background:radial-gradient(circle at 85% 22%,#1c88864f,transparent 42%),linear-gradient(130deg,#102942,#0c1a31);border:1px solid #31566e;border-radius:28px;display:grid;grid-template-columns:1.4fr .8fr;align-items:center;gap:24px;padding:clamp(24px,4vw,56px);overflow:hidden;margin-bottom:22px;color:#f2f8fc}:root[data-theme=light] .hero{background:linear-gradient(120deg,#dceaf6,#e3fbf4);color:#13344b}.eyebrow{display:block;letter-spacing:.15em;font-size:.72rem;font-weight:850;color:var(--accent);text-transform:uppercase}.hero h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.04;letter-spacing:-.055em;margin:18px 0}.hero h1 em,.section-heading h2 em{color:var(--accent);font-style:normal}.hero p{font-size:1.04rem;max-width:700px;color:inherit;opacity:.92}.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.pill-row span{font-size:.75rem;font-weight:800;border:1px solid #6cabb58f;padding:6px 10px;border-radius:100px;background:#12404f30}.cta{background:var(--accent);border:0;color:#062229;border-radius:12px;padding:12px 19px;font-weight:900;box-shadow:0 7px 14px #041b2440}.cta:hover{filter:brightness(1.09)}.cta span{margin-left:17px}.hero-visual{max-width:330px;justify-self:center;width:100%;padding:15px;border:1px solid #54cccc58;border-radius:21px;background:#0a2239cc;transform:rotate(2deg);box-shadow:var(--shadow)}.hero-badge{border-radius:30px;padding:4px 12px;background:#154853;color:#bbfff4;font-weight:bold;font-size:.8rem;text-align:center;width:max-content;margin:0 auto 10px}.hero-grid{background:#143a53;border-radius:12px;padding:14px 12px}.hm-title{color:#abdfde;font-size:.7rem;font-weight:800;letter-spacing:.13em;margin:0 0 8px}.hm-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:5px 0}.hm-row b{border-radius:7px;background:#326581;padding:6px;text-align:center;color:#eaffff}.hero-grid.reduced .hm-row b{background:#2b806e}.hero-arrow{text-align:center;color:var(--gold);padding:7px;font-weight:850}.tabs{position:sticky;top:0;z-index:4;background:var(--bg);border-block:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:10px 0;margin-bottom:25px;scrollbar-width:thin}.tabs button{flex:0 0 auto;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:800;padding:11px 15px;border-radius:11px;font-size:.87rem;white-space:nowrap}.tabs button[aria-selected=true]{color:var(--ink);border-color:var(--line);background:var(--paper);box-shadow:0 2px 8px #0a14241a}.panel{margin-bottom:38px}.panel[hidden]{display:none}.section-heading{padding:12px 3px 24px;max-width:900px}.section-heading h2{font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.15;letter-spacing:-.04em;margin:6px 0 12px}.section-heading p{color:var(--muted);margin:0}.learn-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(350px,1.8fr);gap:20px}.lesson-list{display:grid;align-content:start;gap:8px;max-height:700px;overflow-y:auto;padding:2px}.lesson-btn{display:flex;align-items:center;text-align:left;gap:11px;padding:11px 13px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:13px}.lesson-btn[aria-pressed=true]{background:var(--tint);border-color:var(--accent)}.lesson-num{color:var(--accent);font-size:.79rem;font-weight:900;min-width:27px}.lesson-btn strong{display:block;font-size:.88rem}.lesson-btn small{display:block;color:var(--muted);font-size:.7rem}.lesson-details,.sheet{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}.lesson-details h3{font-size:1.6rem;letter-spacing:-.035em;line-height:1.18;margin:7px 0}.lesson-details p{color:var(--muted)}.formula{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;border-left:4px solid var(--accent);border-radius:8px;background:var(--tint);margin:16px 0;font-size:.95rem}.question{border-top:1px solid var(--line);margin-top:23px;padding-top:17px}.options{display:grid;gap:9px;padding:6px 0 14px}.options label{display:flex;gap:9px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px}.secondary,.plain{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:9px 13px;font-weight:750}.plain{background:transparent;color:var(--muted)}.secondary:hover,.plain:hover{border-color:var(--accent)}.feedback{min-height:1.5em;margin:12px 0;color:var(--muted)}.feedback.good{color:var(--positive)}.feedback.bad{color:var(--danger)}.work-layout,.board-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.sheet h3{margin:0 0 17px;font-size:1.16rem}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}.sheet-head:not(:first-child){margin-top:25px}.sheet-head h3{margin:0}.dimension,.small-tools,.board-toolbar,.board-buttons,.progress-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.dimension label,.board-toolbar label,.manual label,.exercise-side label{font-size:.79rem;color:var(--muted);font-weight:750}.dimension select,.board-toolbar select,.manual select,.manual input,.exercise-side select,.scalar-control input{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px;max-width:150px}.editor{overflow-x:auto}.edit-table,.matrix-table{border-collapse:separate;border-spacing:6px;width:max-content;max-width:100%;margin:8px auto;border-left:3px solid var(--accent);border-right:3px solid var(--accent);border-radius:7px;padding:1px 9px}.edit-table input{width:60px;max-width:100%;min-width:0;text-align:center;padding:8px 4px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;font-weight:750}.matrix-table td{font-family:ui-monospace,monospace;text-align:center;min-width:40px;padding:9px 8px;background:var(--panel);border-radius:7px;font-size:1.06rem;font-variant-numeric:tabular-nums}.matrix-table td.pivot{background:var(--tint);outline:2px solid var(--gold)}.matrix-table td.aug{border-left:3px solid var(--gold)}.small-tools{margin-top:20px}.operations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.operations button{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:12px 5px;border-radius:10px;font-size:.84rem;font-weight:800}.operations button[aria-pressed=true]{border-color:var(--accent);background:var(--tint)}.scalar-control{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted)}.scalar-control input{width:90px}.result-area{border-top:1px solid var(--line);min-height:120px;padding-top:12px;overflow-x:auto}.result-area h4{font-size:.9rem;margin:0 0 6px;color:var(--muted)}.result-area button{border:0;background:var(--panel);color:var(--ink);border-radius:6px;padding:6px 9px;min-width:35px}.result-area button.sel{box-shadow:0 0 0 2px var(--accent);background:var(--tint)}.calculation{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:13px;margin-top:12px;font-size:.87rem;color:var(--muted);overflow-wrap:anywhere}.calculation strong{color:var(--ink)}.board-toolbar{margin-bottom:17px;background:var(--paper);padding:15px;border:1px solid var(--line);border-radius:16px}.board-grid .matrix-wrap{overflow:auto}.note{font-size:.81rem;color:var(--muted)}.manual{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}.manual h4{grid-column:1/-1;margin:0}.manual label{display:grid;gap:4px}.manual button{align-self:end}.stat{background:var(--tint);color:var(--ink);border-radius:11px;padding:13px;margin:14px 0;font-size:.87rem}.step-list{display:grid;gap:9px;max-height:490px;overflow-y:auto}.step{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--panel)}.step p{color:var(--muted);margin:0 0 4px;font-size:.83rem}.step .matrix-table td{font-size:.83rem;padding:6px;min-width:31px}.exercise-layout{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(400px,1.7fr);gap:20px}.exercise-side{border-radius:16px;border:1px solid var(--line);padding:13px;background:var(--paper);align-self:start}.exercise-side label{display:block}.exercise-side select{display:block;width:100%;max-width:none;margin-top:8px}.exercise-list{max-height:620px;overflow-y:auto;display:grid;gap:7px;margin-top:16px}.exercise-list button{display:flex;justify-content:space-between;gap:10px;text-align:left;padding:10px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;font-size:.79rem}.exercise-list button[aria-pressed=true]{border-color:var(--accent);background:var(--tint)}.exercise-list .done{color:var(--positive)}.exercise-detail .problem{white-space:pre-wrap;line-height:1.85;font-size:.96rem}.exercise-detail textarea{background:var(--panel);color:var(--ink);border:1px solid var(--line);width:100%;padding:12px;border-radius:10px;min-height:72px;resize:vertical}.exercise-detail form{display:grid;gap:10px}.exercise-detail .answer-tools{display:flex;gap:9px;flex-wrap:wrap}.exercise-detail label{font-weight:800;font-size:.85rem}.exercise-detail .meta{font-size:.75rem;color:var(--accent);font-weight:850;letter-spacing:.07em}.mini-grid,.real-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.mini-grid button,.real-grid button{border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink);padding:18px;text-align:left;min-height:100px}.mini-grid button:hover,.real-grid button:hover{border-color:var(--accent)}.mini-grid small,.real-grid small{display:block;color:var(--muted);font-size:.77rem;margin-top:6px}.real-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.pau-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--tint);border:1px solid var(--accent);padding:17px;border-radius:15px;margin-bottom:20px}.pau-banner p{color:var(--muted);margin:4px 0 0}.pau-banner a{min-width:200px;font-weight:850;text-align:right;color:var(--accent)}.rubrics{display:grid;gap:14px;margin-top:20px}.rubrics details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:17px}.rubrics summary{cursor:pointer;font-weight:850}.rubrics textarea{width:100%;min-height:90px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:10px}.rubrics li{margin:7px 0}.progress{display:flex;gap:24px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:28px 0 36px}.progress h2{margin:9px 0;font-size:1.5rem}.progress p{color:var(--muted);max-width:730px}.progress-actions{justify-content:flex-end}.progress-actions a{font-weight:800;color:var(--accent)}footer{text-align:center;padding:24px;background:var(--paper);border-top:1px solid var(--line);color:var(--muted);font-size:.77rem}footer a{color:var(--accent)}
@media(max-width:1020px){.hero{grid-template-columns:1fr .65fr}.real-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.top{padding:12px 15px}.top nav{gap:9px}.top nav a{font-size:.73rem}.hero{grid-template-columns:1fr}.hero-visual{display:none}.learn-layout,.work-layout,.board-grid,.exercise-layout{grid-template-columns:1fr}.lesson-list{display:flex;overflow-x:auto;max-height:none;gap:9px}.lesson-btn{flex:0 0 180px}.section-heading{padding-bottom:18px}.real-grid,.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.progress{display:block}.progress-actions{justify-content:flex-start}.board-toolbar{display:grid;grid-template-columns:1fr 1fr}.board-toolbar label select{display:block;margin-top:6px;max-width:100%;width:100%}}
@media(max-width:480px){main{padding:0 11px}.hero{padding:26px 20px;border-radius:18px}.hero h1{font-size:2.36rem}.hero p{font-size:.9rem}.sheet,.lesson-details{padding:17px;border-radius:13px}.operations{grid-template-columns:repeat(2,minmax(0,1fr))}.real-grid,.mini-grid{grid-template-columns:1fr 1fr;gap:8px}.real-grid button,.mini-grid button{padding:13px;min-height:85px}.manual{gap:8px}.manual .cta,.manual .secondary{font-size:.83rem;padding:10px 6px}.pau-banner{display:block}.pau-banner a{display:block;margin-top:8px;text-align:left}.edit-table input{width:53px}.matrix-table td{min-width:34px;padding:7px 5px}.brand small{font-size:.52rem}}

/* Laboratori de comparació dels mètodes */
.compare-controls{display:flex;flex-wrap:wrap;align-items:end;gap:13px;margin-bottom:16px}
.compare-controls label{display:grid;gap:5px;font-size:.84rem;font-weight:800;color:var(--muted);flex:1 1 220px}
.compare-controls input,.compare-controls select{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:10px;border-radius:9px;min-width:0;width:100%}
.compare-controls .cta{flex:0 0 auto}.compare-controls #compareFeedback{flex:1 0 100%;color:var(--danger);font-size:.88rem}
.compare-equation{margin-bottom:16px}.compare-equation .matrix-wrap{overflow:auto}.compare-equation h3{margin:0 0 10px}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}.comparison-grid>.sheet{min-width:0}
.comparison-grid h3{margin:0 0 8px}.comparison-grid .method-description{color:var(--muted);font-size:.86rem;margin:0 0 8px}
.comparison-grid details{border:1px solid var(--line);border-radius:10px;margin:9px 0;padding:8px 12px}.comparison-grid summary{cursor:pointer;font-weight:700;font-size:.82rem}.comparison-grid .matrix-table td{padding:5px;min-width:32px;font-size:.82rem}
.compare-help ol{padding-left:23px}.compare-help li{margin-bottom:10px}.method-ok{color:var(--positive);font-weight:900}.method-na{color:var(--gold);font-weight:850}
@media(max-width:800px){.comparison-grid{grid-template-columns:1fr}.compare-controls{display:grid;grid-template-columns:1fr}.compare-controls .cta{width:100%}}
