@font-face{font-family:IonArabic;src:url('./fonts/noto-sans-arabic.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{--canvas:#f8f6ef;--ink:#1e2a2b;--muted:#536365;--line:#d7dfda;--teal:#0e6b73;--teal-soft:#dcecee;--coral:#c8492e;--water:#cfe6f2;--water-rim:#7fb3cc;--bench:#efe6d2;--bench-edge:#d9c9a6;--shadow:0 12px 32px #263b3d0c;font-family:IonArabic,system-ui,sans-serif;color:var(--ink);background:var(--canvas);font-synthesis:none}
[data-palette="mint"]{--water:#d3efe3;--water-rim:#6fb59a;--bench:#e6efe4;--bench-edge:#b4cbae}
[data-palette="rose"]{--water:#f6dde0;--water-rim:#d08a95;--bench:#f3e6e2;--bench-edge:#d4b8af}
[data-palette="gold"]{--water:#f7e6bf;--water-rim:#d3a648;--bench:#f1e3c8;--bench-edge:#d4bc8a}
*{box-sizing:border-box}body{margin:0;min-width:300px}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button{border:0}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--teal);outline-offset:4px}button.primary:focus-visible{outline:3px solid var(--ink);box-shadow:0 0 0 3px white}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.5}p{line-height:1.85}bdi.chem,.number{font-family:ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;display:inline-block;unicode-bidi:isolate;white-space:nowrap}.chem sub,.chem sup{font-size:.65em;line-height:0;position:relative;vertical-align:baseline}.chem sub{bottom:-.24em}.chem sup{top:-.55em}button .chem{pointer-events:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:8px;right:16px;z-index:900;background:white;border-radius:12px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{width:auto;height:auto;padding:12px;clip-path:none}
.topbar{max-width:1244px;margin:auto;min-height:84px;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:650}.brand img{width:42px;height:42px}.top-actions{display:flex;align-items:center;gap:22px}.quiet{min-height:44px;background:none;font-size:13px;font-weight:650;color:var(--muted)}.wallet{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 15px;background:#fff3d6;border:1px solid #edd6a3;border-radius:40px;font-size:13px;color:#74480e}.wallet b{font-size:19px}.spark{font-family:system-ui,sans-serif;color:#ae6710;font-size:23px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;border-radius:13px;padding:11px 22px;font-size:15px;font-weight:700;line-height:1.65;transition:background .16s,transform .16s}.primary{background:var(--coral);color:#fff;box-shadow:0 4px 0 #963a26}.primary:hover:not(:disabled){background:#b23f27;transform:translateY(-1px)}.primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #963a26}.primary:disabled{box-shadow:none}.secondary{background:#fffdf7;color:var(--ink);border:1px solid var(--line)}.secondary:hover:not(:disabled){background:var(--teal-soft)}.text-button,.text-link{min-height:44px;background:none;font-size:13px;line-height:1.7;color:var(--teal);font-weight:650;text-decoration:underline;text-underline-offset:5px}.text-button{padding:8px 2px}.eyebrow{font-size:12px;line-height:1.9;font-weight:650;color:var(--teal);display:inline-flex;align-items:center;gap:8px}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--coral)}#workspace{max-width:1180px;margin:0 auto;outline:none;padding:0 0 28px}
.hero{display:grid;grid-template-columns:1fr 1.07fr;gap:45px;align-items:center;min-height:535px;padding:42px 0 34px}.hero-copy{padding:12px 0 12px 28px}.hero h1{font-size:43px;font-weight:750;line-height:1.6;margin-top:13px}.tagline{font-size:20px;font-weight:650;color:var(--teal);margin-top:8px}.hero-intro{font-size:15px;max-width:465px;color:var(--muted);margin-top:20px}.hero-cta{margin-top:28px;min-width:230px;min-height:56px}.hero-cta span{font-family:system-ui;font-size:22px}.hero-meta{display:flex;gap:22px;margin-top:24px;font-size:12px;color:var(--muted)}.hero-meta span+span{position:relative}.hero-meta span+span:before{content:"";position:absolute;right:-12px;top:50%;width:3px;height:3px;background:#889b96;border-radius:50%}.no-account{font-size:11px;color:var(--muted);margin-top:8px}.hero-art{position:relative;min-width:0}.hero-art .lab-scene{height:410px}.hero-legend{display:flex;justify-content:center;gap:24px;margin-top:16px;font-size:12px;color:var(--muted)}.hero-legend>span,.visual-toolbar>span{display:inline-flex;align-items:center;gap:7px}.legend-dot{display:inline-block;width:11px;height:11px}.cation-dot{background:#e9a53b;border-radius:50%;border:1px solid #a86913}.anion-dot{background:#6b74c9;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.lab-scene{position:relative;isolation:isolate;height:480px;border-radius:36px;overflow:hidden;background:linear-gradient(155deg,#f9f1df 0%,#f6f0e4 36%,#e7ece8 100%);border:1px solid #e5e3d8;direction:ltr;--particle-size:49px}.sun-disc{position:absolute;top:-17%;left:-9%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff7d8 0%,#ffedbf70 48%,#ffedbf00 72%)}.window-shadow{position:absolute;width:140%;height:64%;top:-9%;left:-34%;transform:rotate(-27deg);background:repeating-linear-gradient(90deg,transparent 0 67px,#ffffff60 67px 112px,transparent 112px 131px);opacity:.6}.bench{position:absolute;inset:auto 0 0;height:23%;background:linear-gradient(178deg,var(--bench) 0%,var(--bench) 72%,var(--bench-edge) 73%,var(--bench-edge) 79%,#c9bca1 80%,var(--bench) 100%);box-shadow:0 -1px 0 #fff9}.bench:before{content:"";position:absolute;width:67%;height:30%;left:20%;top:3%;border-radius:50%;background:#58636324;filter:blur(12px)}.specimen-label{position:absolute;top:24px;left:26px;display:flex;flex-direction:column;gap:7px;z-index:3}.tiny-label{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:1px;color:#65726e}.specimen-label>b{font-size:24px;color:#334747}.lab-tag{position:absolute;right:20px;top:24px;max-width:42%;font-size:11px;line-height:1.8;background:#fff9;padding:5px 10px;border:1px solid #fff;border-radius:8px;direction:rtl;color:#4c6061}.vessel{position:absolute;left:29%;top:22%;width:46%;height:61%;border:2px solid #799fae95;border-top:0;border-radius:5px 5px 35px 35px;background:linear-gradient(90deg,#ffffff70,#ffffff08 48%,#ffffff6b);box-shadow:inset -10px 0 22px #bcd4dc2b,3px 10px 18px #667d7420;z-index:2}.vessel-rim{position:absolute;top:-10px;left:-4px;width:calc(100% + 8px);height:21px;border:2px solid #8ba6b1;border-radius:50%;background:linear-gradient(#f8fcfa8c,#e1eeed60);box-shadow:0 2px 2px #fff9;z-index:5}.water-body{position:absolute;left:3px;right:3px;bottom:3px;height:77%;border-radius:0 0 31px 31px;background:linear-gradient(120deg,color-mix(in srgb,var(--water) 75%,white),var(--water));opacity:.86;transition:height .6s,opacity .6s}.water-body:before{content:"";position:absolute;top:-10px;left:0;width:100%;height:21px;border-radius:50%;background:var(--water);border:1px solid var(--water-rim);box-shadow:inset 0 3px 7px #fff6}.glass-highlight{position:absolute;inset:20px auto 27px 9px;width:10px;border-radius:40%;background:linear-gradient(90deg,#fff9,#fff1);pointer-events:none;z-index:4}.vessel-ticks{position:absolute;right:8px;top:23%;height:60%;width:15px;background:repeating-linear-gradient(0deg,transparent 0 26px,#688b9b60 26px 27px);z-index:3}.particles{position:absolute;left:8%;top:21%;right:8%;bottom:6%;z-index:3}.particle{position:absolute;width:var(--particle-size);height:var(--particle-size);left:var(--px);top:var(--py);transform:translate(-50%,-50%);display:grid;place-items:center;transition:left .9s cubic-bezier(.2,.8,.2,1),top .9s cubic-bezier(.2,.8,.2,1);animation:float-ion 5.4s ease-in-out var(--delay) infinite}.particle.cation{border-radius:50%;background:radial-gradient(circle at 31% 23%,#ffdf85,#e9a53b 54%,#c78b24 91%);box-shadow:inset -3px -4px 5px #94651530,2px 4px 3px #41515620}.particle.anion{width:calc(var(--particle-size) * 1.13);border-radius:13px;clip-path:polygon(24% 0,76% 0,100% 26%,100% 74%,76% 100%,24% 100%,0 74%,0 26%);background:linear-gradient(135deg,#acb5f0,#727bd0 50%,#5660af);filter:drop-shadow(2px 4px 2px #35466330)}.particle.polyatomic{width:calc(var(--particle-size) * 1.32)}.particle>span{background:#fffdf0ed;color:#23363b;border-radius:6px;padding:5px 5px;font-size:15px;font-weight:700;line-height:1.35;white-space:nowrap;box-shadow:0 1px 3px #283b4d13}.solid .water-body{opacity:0}.solid .particle{animation:none}.solid .vessel{background:linear-gradient(90deg,#fff8,#fff2);border-style:dashed}.vial{position:absolute;left:10%;bottom:18%;height:30%;width:12%;min-width:40px;max-width:67px;border:1.5px solid #b8c4b7;border-radius:6px 6px 12px 12px;transform:rotate(-8deg);background:linear-gradient(90deg,#fff9,#ffffff45);z-index:2;box-shadow:5px 8px 7px #5563581a}.vial-cap{position:absolute;top:-11px;left:-4px;right:-4px;height:17px;border-radius:4px;background:repeating-linear-gradient(90deg,#476b65 0 3px,#567d76 3px 5px)}.vial>span{position:absolute;top:30%;left:-2px;right:-2px;font:700 11px system-ui;text-align:center;background:#fff9;padding:7px 0;border-radius:3px;z-index:2}.vial>i{position:absolute;bottom:4px;left:4px;right:4px;height:26%;background:repeating-linear-gradient(135deg,#fbfdf5 0 7px,#e4e8df 7px 9px);border-radius:2px 2px 8px 8px}.scene-state{position:absolute;left:41%;bottom:6%;font-size:12px;color:#435e5b;padding:2px 10px;background:#fff8;border-radius:6px;direction:rtl;z-index:3}.sparkle{position:absolute;font-family:system-ui;color:#a27a39;opacity:.55}.sparkle-one{right:10%;top:37%;font-size:28px}.sparkle-two{left:19%;top:33%;font-size:13px}.hero-scene{transform:rotate(-2deg);box-shadow:0 18px 34px #72644113}.hero-scene .vessel{top:20%;height:63%;width:46%;left:32%}
.passport-section{background:#fffdf7;border:1px solid var(--line);border-radius:23px;padding:26px 30px;box-shadow:var(--shadow)}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-heading h2{font-size:21px;margin-top:3px}.progress-count{font-size:27px;color:var(--teal);font-weight:750}.progress-count>span{font-size:15px;color:#7d8984}.passport{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:26px;position:relative}.passport:before{content:"";position:absolute;left:7%;right:7%;top:23px;border-top:2px dashed #d9ddd3;z-index:0}.stamp{position:relative;background:transparent;padding:0 3px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-weight:650;font-size:11px;line-height:1.7;min-width:0}.stamp:disabled{opacity:.65}.stamp-circle{width:46px;height:46px;background:#f4f3eb;border:1px solid #cbd3c9;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#718075}.stamp:not(:disabled):hover .stamp-circle{border-color:var(--coral)}.stamp.done .stamp-circle{background:var(--teal-soft);color:var(--teal);border:1px solid #82aaa9}.stamp.current .stamp-circle{border:3px solid var(--coral);background:#fff4e6;color:var(--coral)}.stamp-circle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.stamp small{font-size:10px;color:var(--teal);font-weight:500}.progress-track{height:4px;background:#e9ede6;border-radius:10px;overflow:hidden;margin-top:25px}.progress-track>span{display:block;height:100%;background:var(--teal);border-radius:10px;transition:width .4s}.passport-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px}.passport-bottom p{font-size:11px;color:var(--muted)}.passport-bottom .spark{font-size:17px}.passport-bottom button{white-space:nowrap}
.mission-rail{max-width:580px;margin:20px auto 0}.compact{margin-top:0;gap:14px}.compact .stamp-copy,.compact small{display:none}.compact .stamp-circle{width:38px;height:38px;font-size:14px}.compact .stamp{min-height:44px;justify-content:center}.compact:before{top:23px}.mission-heading{margin:24px 0 20px;max-width:720px}.mission-heading h1{font-size:30px;font-weight:750;margin-top:4px}.mission-heading p{font-size:15px;margin-top:4px;color:var(--muted)}.heading-dot{margin:0 7px;color:#91a6a3}.mission-grid{display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:start;direction:ltr}.mission-grid>section{direction:rtl;min-width:0}.visual-column{position:sticky;top:16px}.visual-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin:13px 5px 0;font-size:11px;color:var(--muted)}.motion-button{margin-inline-start:auto;background:none;min-height:36px;padding:4px;color:var(--teal);font-size:11px;text-decoration:underline;text-underline-offset:4px}.model-caption{font-size:12px;color:var(--muted);line-height:1.8;margin:12px 4px 0}.dissolve-button{display:flex;min-width:200px;margin:17px auto 0}.concept-note{margin:8px 4px 0;font-size:12px;line-height:1.9;color:var(--muted)}.concept-note summary{min-height:36px;padding:5px 0;cursor:pointer;color:var(--teal)}.concept-note p{padding:5px 0}.notebook{border:1px solid #dfddd2;border-top:5px solid #d9d4bd;border-radius:20px;background:#fffdf7;padding:22px 25px 20px;box-shadow:var(--shadow)}.notebook-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.reward-chip{border:1px solid #ebd7a6;background:#fff6de;border-radius:9px;padding:4px 9px;font-size:13px;color:#80501c;display:flex;align-items:center;gap:6px}.sample-amount{margin-top:19px;padding-bottom:19px;border-bottom:1px solid #dddccf;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sample-amount>span{font-size:12px;color:var(--muted);margin-inline-end:auto}.sample-amount>b{font-size:20px;color:var(--ink);display:flex;align-items:baseline;gap:7px}.unit-caption{font-size:12px;font-weight:500}.sample-amount>.chem{font-size:22px;color:var(--teal)}.action-instruction{font-size:14px;font-weight:650;margin-top:17px;margin-bottom:17px;line-height:1.85}.ion-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed #dadfd6}.ion-row-label{display:flex;align-items:center;gap:10px}.ion-row-label>label{font-size:11px;color:var(--muted);max-width:58px}.species-icon{min-width:49px;height:46px;display:grid;place-items:center;font-size:16px;font-weight:700}.cation-mini{background:#ffedc8;border:1px solid #ebbe68;border-radius:50%}.anion-mini{background:#e8eafd;border:1px solid #adb4db;border-radius:11px}.stepper{display:flex;align-items:center;gap:3px;background:#f1f3ed;border:1px solid #d6dcd3;border-radius:13px;padding:3px}.stepper button{width:44px;height:44px;background:white;color:var(--teal);font:500 25px system-ui;border-radius:9px;box-shadow:0 1px 2px #233e3311}.stepper button:hover:not(:disabled){background:var(--teal-soft)}.stepper output{width:30px;text-align:center;font-size:20px;font-weight:750;color:var(--ink)}.counter-summary{display:flex;justify-content:space-between;gap:20px;margin-top:15px;padding:10px 2px;font-size:11px;color:var(--muted)}.counter-summary>span{display:flex;align-items:center;gap:12px}.counter-summary b,.counter-summary bdi{font-size:19px;font-weight:700;color:var(--ink)}.action-dock{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.action-dock .primary,.action-dock .secondary{padding:10px 11px;font-size:13px;min-height:49px}.reveal-button{display:block;margin:11px auto 0;font-size:12px}.model-boundary{margin-top:16px;padding-top:14px;border-top:1px dashed #d5dad0;font-size:11px;line-height:1.85;color:var(--muted)}.mole-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed #d6dbd2}.mole-row>span:first-child{font-size:14px;font-weight:650;max-width:45%}.mole-row .chem{font-size:20px}.input-unit{display:flex;align-items:center;border:1px solid #acbdb7;border-radius:10px;background:white;padding-right:10px;gap:5px;width:145px;flex-shrink:0;font:12px system-ui;color:#5b6e6c}.input-unit input{width:100%;height:48px;min-width:0;border:0;background:transparent;border-radius:10px;color:var(--ink);padding:8px 10px;font:650 20px system-ui;font-variant-numeric:tabular-nums}.input-unit:focus-within{border-color:var(--teal);box-shadow:0 0 0 2px #0e6b7320}.input-unit input[aria-invalid="true"]{outline:2px solid #b3261e}.field-note{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.8}.feedback{margin-top:20px;padding:17px;background:#eef3f1;border:1px solid #c4d8d1;border-radius:13px;scroll-margin-bottom:120px}.feedback h2{font-size:16px;font-weight:750;outline:none}.feedback>p{font-size:13px;margin-top:8px;line-height:1.9}.feedback.incorrect{background:#fff2e8;border-color:#eac2a6}.feedback.incorrect h2{color:#9b3a20}.feedback.success,.feedback.revealed{background:#eaf4ed;border-color:#a8c8b3}.feedback.success h2{color:#17613d}.feedback.hint{background:#edf4fa;border-color:#c3d9e7}.reward-line{color:#755018;font-weight:650}.guided-tag{font-size:10px;background:white;padding:3px 6px;border:1px solid #bbcfbf;border-radius:5px}.equation{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;font:500 17px system-ui;margin-top:14px;padding:10px 0;border-top:1px solid #b9cfc2}.equation .phase{font-size:11px;color:#536965}.equation-term{white-space:nowrap}.reaction-arrow{position:relative;font-size:28px;padding-top:13px;margin:0 4px}.reaction-arrow small{position:absolute;left:50%;top:0;transform:translateX(-50%);font:10px system-ui}.equation-plus{margin:0 2px}.working{display:flex;flex-direction:column;gap:7px;margin-top:8px;font:12px system-ui;color:#405954;text-align:left}.working>span{line-height:1.8}.working .working-total{font-family:IonArabic,system-ui,sans-serif;text-align:right;direction:rtl;margin-top:5px;border-top:1px dashed #afc5b7;padding-top:7px;font-size:12px}.working b{font-weight:750;color:var(--ink)}
.site-footer{max-width:1180px;margin:0 auto;padding:26px 0 28px;display:flex;align-items:center;flex-wrap:wrap;gap:20px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.site-footer>a{min-height:44px;display:flex;align-items:center;gap:8px;color:var(--teal);font-weight:650}.site-footer>p{margin-inline-start:auto;font-size:10px;line-height:1.8}.site-footer button{font-size:11px}.completion{max-width:850px;margin:auto;padding:55px 30px;text-align:center}.completion-seal{width:114px;height:114px;background:#e4eee1;border:2px solid #729688;border-radius:50%;outline:1px dashed #729688;outline-offset:-8px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto 27px;transform:rotate(-8deg);box-shadow:4px 7px 0 #e2dfcd}.completion-seal>span{font-size:43px;line-height:1.1;color:var(--teal)}.completion-seal>b{font-size:16px;color:var(--teal)}.completion h1{font-size:32px;margin:12px 0}.completion>p{font-size:14px;color:var(--muted);max-width:600px;margin:0 auto}.finish-stats{display:flex;justify-content:center;gap:60px;margin:29px 0}.finish-stats>span{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px}.finish-stats b{font-size:28px;color:var(--teal)}.finish-actions{display:flex;justify-content:center;gap:12px;margin:32px 0}.completion .teacher-note{font-size:12px;margin-top:28px}.completion .text-link{display:inline-flex;align-items:center;margin-top:5px;font-size:13px}.reset-link{display:block;margin:28px auto 0;color:var(--muted);font-size:11px}
dialog{width:min(650px,calc(100% - 32px));max-height:min(90dvh,900px);margin:auto;padding:25px;border:1px solid #d4dacd;border-radius:24px;color:var(--ink);background:var(--canvas);box-shadow:0 24px 80px #132b3633;overscroll-behavior:contain}dialog::backdrop{background:#18323065;backdrop-filter:blur(5px)}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.sheet-header h2{font-size:21px}.close-button{width:44px;height:44px;border-radius:50%;background:#e9ebe0;font:26px system-ui;color:var(--ink);flex-shrink:0}.sheet-note{font-size:13px;color:var(--muted);margin:16px 0;line-height:1.9}.shop-balance{display:flex;align-items:center;justify-content:center;gap:9px;margin:20px 0 12px;font-size:13px}.shop-balance b{font-size:32px;color:#875715}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.palette-card{border:1px solid #d6dccf;border-radius:16px;padding:10px;background:#fffdf7;text-align:center}.palette-preview{position:relative;height:112px;background:var(--bench);border-radius:10px;display:grid;place-items:center;overflow:hidden}.palette-preview:before{content:"";position:absolute;left:-20%;top:-40%;width:100%;height:150%;border-radius:50%;background:#fff5}.mini-beaker{height:72px;width:56px;border:2px solid var(--water-rim);border-radius:3px 3px 13px 13px;position:relative;background:#fff5;box-shadow:3px 4px 8px #3446361a}.mini-beaker i{position:absolute;inset:22px 3px 3px;background:var(--water);border-radius:0 0 9px 9px;border-top:1px solid var(--water-rim)}.mini-beaker span{position:relative;top:29px;color:#625427;font-size:20px}.palette-card h3{font-size:14px;margin:10px 0}.palette-card button{width:100%;font-size:12px;min-height:46px;padding:7px}.selected-palette{background:var(--teal-soft);color:var(--teal);border-radius:10px;border:1px solid #b7ccbf!important;opacity:1!important}.palette-card>p{font-size:10px;color:var(--muted);margin-top:6px}.source-copy p{font-size:14px;line-height:1.9;margin-top:18px}.source-copy hr{border:0;border-top:1px solid var(--line);margin:20px 0}.source-copy a{margin-top:20px;display:inline-flex;align-items:center}.reset-actions{display:flex;gap:12px;margin-top:25px}.reset-actions>button{flex:1}.noscript{padding:35px;line-height:2}
@keyframes float-ion{0%,100%{translate:0 0}50%{translate:0 -6px}}.motion-paused .particle{animation-play-state:paused}
@media(max-width:1250px){#workspace,.site-footer{margin-inline:32px}.hero{gap:24px}.hero h1{font-size:36px}.hero-copy{padding-inline-end:0}.mission-grid{gap:24px}.notebook{padding:20px}.lab-scene{height:445px}}
@media(min-width:768px) and (max-width:1023px){.hero{grid-template-columns:1fr 1fr;gap:20px;min-height:490px}.hero-art .lab-scene{height:340px;--particle-size:40px}.hero h1{font-size:30px}.tagline{font-size:17px}.hero-intro{font-size:13px}.hero-cta{min-width:190px}.mission-grid{grid-template-columns:1fr 1fr;gap:20px}.lab-scene{height:380px;--particle-size:39px}.particle>span{font-size:12px}.notebook{padding:16px}.ion-row-label>label{display:none}.stepper button{width:44px}.stepper output{width:25px}.vessel{width:52%;left:26%}.lab-tag{font-size:10px;right:12px;top:17px}.specimen-label{left:15px;top:17px}.specimen-label>b{font-size:20px}.tiny-label{font-size:7px}.mission-heading h1{font-size:27px}}
@media(max-width:767px){.topbar{min-height:70px;padding:12px 16px;gap:10px}.brand{gap:7px;font-size:10px}.brand img{width:34px;height:34px}.top-actions{gap:8px}.quiet{font-size:10px;padding:0 3px}.wallet{padding:4px 10px;gap:5px}.wallet b{font-size:17px}.wallet-label{display:none}.wallet .spark{font-size:19px}#workspace{margin-inline:16px;padding-bottom:24px}.hero{grid-template-columns:1fr;gap:23px;padding:26px 0 32px;min-height:0}.hero-copy{text-align:center;padding:0}.hero h1{font-size:32px;margin-top:7px;line-height:1.7}.tagline{font-size:15px;margin-top:1px;line-height:1.8}.hero-intro{font-size:12px;margin:11px auto 0;max-width:320px;line-height:1.9}.hero-cta{min-height:49px;margin-top:19px;min-width:220px;font-size:14px}.hero-meta{justify-content:center;margin-top:19px;gap:22px;font-size:11px}.no-account{font-size:10px;margin-top:5px}.hero-art .lab-scene{height:285px;--particle-size:41px;transform:rotate(-1.5deg)}.hero-legend{font-size:10px;margin-top:11px}.lab-scene{height:270px;border-radius:24px;--particle-size:38px}.vessel{top:24%;height:59%;width:45%;left:31%;border-radius:4px 4px 25px 25px}.hero-scene .vessel{height:60%;top:23%}.water-body{border-radius:0 0 22px 22px}.particles{top:19%;left:7%;right:7%}.particle>span{font-size:12px;padding:4px}.vessel-rim{height:16px;top:-8px}.water-body:before{height:16px;top:-8px}.specimen-label{left:19px;top:17px;gap:5px}.tiny-label{font-size:7px;letter-spacing:.4px}.specimen-label>b{font-size:21px}.lab-tag{right:14px;top:17px;font-size:10px;padding:4px 8px;max-width:45%}.vial{left:12%;height:27%;bottom:18%;width:12%;min-width:35px}.vial>span{font-size:9px;padding:5px 0}.scene-state{left:40%;bottom:5%;font-size:10px}.vessel-ticks{width:10px;right:5px;background:repeating-linear-gradient(0deg,transparent 0 18px,#688b9b60 18px 19px)}.glass-highlight{width:7px;left:6px}.sparkle-one{font-size:22px}.passport-section{padding:19px 15px;border-radius:18px}.section-heading h2{font-size:18px}.section-heading .eyebrow{font-size:10px}.progress-count{font-size:23px}.passport{gap:5px;margin-top:21px}.stamp{font-size:8px;padding:0;gap:7px}.stamp-copy{line-height:1.7;max-width:50px}.stamp-circle{width:38px;height:38px;font-size:15px}.stamp small{font-size:8px}.passport:before{top:19px}.passport-bottom{align-items:flex-start;gap:10px;flex-direction:column;margin-top:10px}.passport-bottom p{font-size:10px}.passport-bottom button{font-size:11px;align-self:flex-end;min-height:32px}.progress-track{margin-top:17px}.mission-rail{margin-top:12px}.compact{margin-top:0;gap:8px}.compact .stamp-circle{width:33px;height:33px;font-size:13px}.compact:before{top:22px}.compact .stamp{min-height:44px}.mission-heading{margin:13px 0 15px}.mission-heading .eyebrow{font-size:10px}.mission-heading h1{font-size:24px;margin-top:2px;line-height:1.5}.mission-heading p{font-size:12px;line-height:1.85;margin-top:5px}.mission-grid{grid-template-columns:1fr;gap:18px}.visual-column{position:static}.visual-toolbar{font-size:10px;gap:13px;margin:8px 3px 0}.motion-button{font-size:10px;min-height:32px}.dissolve-button{min-height:46px;margin-top:9px;font-size:13px}.model-caption{font-size:10px;line-height:1.8;margin-top:7px}.concept-note{font-size:11px;margin-top:2px}.concept-note summary{min-height:32px;padding:3px 0}.notebook{padding:17px 16px;border-radius:17px}.notebook-heading .eyebrow{font-size:11px}.sample-amount{margin-top:13px;padding-bottom:13px}.sample-amount>span{font-size:11px}.sample-amount>b{font-size:19px}.sample-amount>.chem{font-size:22px}.action-instruction{font-size:12px;margin-top:13px;margin-bottom:8px;line-height:1.8}.ion-row{padding:11px 0}.ion-row-label>label{font-size:10px;max-width:75px}.species-icon{font-size:15px;min-width:47px;height:43px}.stepper button{width:44px;height:44px}.stepper output{width:29px;font-size:19px}.counter-summary{font-size:10px;margin-top:11px}.action-dock{position:fixed;left:0;right:0;bottom:var(--p21-app-tabbar-space,0px);z-index:100;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#f8f6eff5;backdrop-filter:blur(12px);border-top:1px solid #d6dcd0;box-shadow:0 -5px 20px #172f2810;grid-template-columns:1fr 1fr;gap:10px}.action-dock .primary,.action-dock .secondary{min-height:46px;font-size:12px;padding:10px}.in-mission{padding-bottom:calc(82px + env(safe-area-inset-bottom) + var(--p21-app-tabbar-space,0px))}.reveal-button{font-size:11px;margin-top:12px;min-height:44px}.model-boundary{font-size:10px;margin-top:11px;padding-top:11px}.feedback{padding:14px;margin-top:15px;scroll-margin-bottom:110px}.feedback h2{font-size:15px}.feedback>p{font-size:12px}.equation{font-size:16px}.mole-row .chem{font-size:19px}.mole-row>span:first-child{font-size:12px}.input-unit{width:139px}.field-note{font-size:10px}.site-footer{margin-inline:16px;padding:17px 0 24px;gap:7px 19px;font-size:10px}.site-footer>a{font-size:11px}.site-footer>p{width:100%;margin:0;font-size:10px}.site-footer button{font-size:10px}.completion{padding:34px 0}.completion h1{font-size:26px}.completion>p{font-size:12px}.completion .passport{gap:6px}.finish-stats{gap:45px;margin:24px 0}.finish-stats b{font-size:26px}.finish-stats>span{font-size:10px}.finish-actions{flex-direction:column;gap:12px;margin:25px 15px}.completion-seal{width:95px;height:95px}.completion .teacher-note{font-size:11px}.completion .text-link{font-size:12px}.reset-link{font-size:10px}dialog{padding:19px;max-height:calc(100dvh - 32px);border-radius:20px}.sheet-header h2{font-size:18px}.sheet-note{font-size:12px}.palette-grid{gap:10px}.palette-card{padding:8px}.palette-preview{height:97px}.palette-card h3{font-size:12px}.palette-card button{font-size:10px;min-height:46px}.palette-card>p{font-size:9px}.source-copy p{font-size:12px}.reset-actions{flex-direction:column}}
@media(min-width:400px) and (max-width:767px){.lab-scene{height:300px;--particle-size:41px}.hero-art .lab-scene{height:310px}.mission-heading p{font-size:13px}}
@media(max-width:350px){.brand>span{display:none}.ion-row-label>label{display:none}.passport{gap:3px}.stamp-circle{width:33px;height:33px}.hero h1{font-size:29px}.lab-tag{font-size:9px}.specimen-label>b{font-size:18px}.lab-scene{--particle-size:34px}.particle>span{font-size:11px}.stepper output{width:24px}.hero-cta{min-width:210px}.palette-card button{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-scene{transform:none}.primary:hover:not(:disabled){transform:none}}

/* Keep the working ledger close to its model, with explanatory notes after the task. */
@media(min-width:768px){.mission-grid .notebook{grid-column:2;grid-row:1 / 3}.scene-notes{grid-column:1}.visual-column{position:static}.scene-notes{margin-top:-18px}}
@media(max-width:767px){.observation-mission .lab-scene{height:210px}.observation-mission .vessel{width:48%;left:29%}.mission-grid{gap:12px}.scene-notes{order:3}.mission-heading{margin:8px 0 12px}.mission-heading p,.action-instruction,.feedback>p{font-size:13px}.notebook{padding:12px 14px}.sample-amount{margin-top:7px;padding-bottom:8px}.dissolve-button{margin-top:5px}.visual-toolbar{margin-top:3px}.model-caption,.model-boundary{font-size:12px}.scene-notes .concept-note{font-size:12px}.scene-notes{margin-bottom:10px}}

.particle.dense{--particle-size:35px}.particle.dense>span{font-size:12px;padding:3px}
@media(max-width:767px){.particle.dense{--particle-size:29px}.particle.dense>span{font-size:11px;padding:2px}}

.stepper button[aria-disabled="true"]{opacity:.5;cursor:default}.motion-paused .particle,.motion-paused .water-body{transition:none}

/* Final screenshot review: safe installed chrome, larger copy and clear locked states. */
.input-unit:has(input:disabled){background:#e9f2eb;border-color:#abc4b4}.input-unit input:disabled{color:#0e6b73;opacity:1;-webkit-text-fill-color:#0e6b73}.stepper:has(button:disabled) output{color:#0e6b73}.resume-context{font-size:13px;line-height:1.8;color:var(--teal);margin-top:12px}
.solid .particles:before{content:"";position:absolute;left:16%;right:16%;top:54%;height:43%;border:1px solid #b9beb6;border-radius:6px;background:repeating-linear-gradient(90deg,#e1e4dc66 0 13px,#fbfcf633 13px 25px);box-shadow:0 4px 5px #6b796329;z-index:-1}
[data-palette="gold"]{--water:#f3d28a;--water-rim:#b5862e;--bench:#f3eddf;--bench-edge:#d4bc8a}
@media(min-width:768px){.mission-grid{grid-template-rows:max-content 1fr}.scene-notes{align-self:start}.before-observe{display:none}}
@media(max-width:767px){
.in-mission{padding-bottom:0}.in-mission .site-footer{padding-bottom:calc(106px + env(safe-area-inset-bottom,0px))}.poli21-static-app .in-mission .site-footer{padding-bottom:106px}.poli21-static-app .action-dock{padding-bottom:10px}.feedback,.ion-row,.mole-row{scroll-margin-bottom:calc(116px + var(--p21-app-tabbar-space,0px))}
.before-observe{display:none}.mission-grid .vessel{width:56%;left:27%}.mission-grid .particles{left:5%;right:5%}.mission-grid .particle>span{padding:3px;background:#fffdf0d9}.mission-grid .particle.polyatomic{width:calc(var(--particle-size) * 1.5)}
.hero-intro,.mission-heading p,.action-instruction,.feedback>p{font-size:14px}.hero-cta,.action-dock .primary,.action-dock .secondary{font-size:15px}.brand,.quiet,.no-account,.hero-legend,.hero-meta,.visual-toolbar,.lab-tag,.scene-state,.counter-summary,.ion-row-label>label,.field-note,.site-footer,.site-footer>a,.site-footer>p,.site-footer button,.sheet-note,.palette-card button,.palette-card>p,.notebook-heading .eyebrow,.sample-amount>span,.reveal-button{font-size:12px}.model-caption,.model-boundary,.concept-note{font-size:13px}.motion-button,.concept-note summary,.passport-bottom button{min-height:44px;font-size:12px}
.passport:not(.compact){grid-template-columns:repeat(3,1fr);row-gap:19px}.passport:not(.compact):before{display:none}.stamp{font-size:11px}.stamp-copy{max-width:none}.stamp small,.guided-tag,.passport-bottom p,.finish-stats>span,.reset-link{font-size:12px}.completion .passport{gap:18px 8px}.palette-card h3{font-size:14px}
.poli21-static-app .observation-mission .lab-scene{height:180px}
}

/* The world owns site navigation. This compact utility row still owns the
   mission map and local palette shop; the chemistry model keeps its colours. */
html[data-world-embed] .topbar {
  max-width:none;
  min-height:52px;
  margin:0;
  padding:4px 12px;
  border-color:var(--world-embed-line);
  background:var(--world-embed-ink);
}
html[data-world-embed] .top-actions {
  width:100%;
  justify-content:space-between;
  gap:12px;
}
html[data-world-embed] :is(.quiet,.wallet) {
  min-height:44px;
  border:1px solid var(--world-embed-line);
  border-radius:14px;
  background:var(--world-embed-raised);
  color:var(--world-embed-text);
}
html[data-world-embed] .quiet { padding:0 12px; font-size:12px }
html[data-world-embed] .wallet { padding:4px 12px; color:var(--world-embed-gold) }
html[data-world-embed] .wallet .spark { color:var(--world-embed-gold) }
html[data-world-embed] .topbar button:focus-visible { outline-color:var(--world-embed-gold) }
html[data-world-embed] .hero { min-height:0; padding:24px 0; gap:24px }
html[data-world-embed] .hero-cta { margin-top:16px }
html[data-world-embed] .hero-meta { margin-top:14px }
html[data-world-embed] .primary {
  border:1px solid #b4cc88;
  background:var(--world-embed-primary);
  color:var(--world-embed-on-primary);
  box-shadow:none;
}
html[data-world-embed] .primary:hover:not(:disabled) { background:#e6f6c7 }
html[data-world-embed] .primary:active:not(:disabled) { box-shadow:none }
html[data-world-embed] .action-dock {
  border-color:var(--world-embed-line);
  background:var(--world-embed-ink);
  backdrop-filter:none;
}
html[data-world-embed] .action-dock .secondary {
  border-color:var(--world-embed-line);
  background:var(--world-embed-raised);
  color:var(--world-embed-text);
}
html[data-world-embed] .action-dock button:focus-visible { outline-color:var(--world-embed-gold) }
/* Sources, palette choices and reset confirmation are game panels too. Only
   their shell changes: the palette previews retain the real bench/water hues. */
html[data-world-embed] dialog {
  --ink:var(--world-embed-text);
  --muted:var(--world-embed-muted);
  --line:var(--world-embed-line);
  --teal:var(--world-embed-gold);
  border-color:var(--world-embed-line);
  border-radius:28px;
  background:var(--world-embed-ink);
  color:var(--world-embed-text);
  box-shadow:0 22px 60px #06121066;
}
html[data-world-embed] dialog::backdrop {
  background:#061214b3;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-world-embed] dialog :is(.close-button,.secondary) {
  min-height:44px;
  border:1px solid var(--world-embed-line);
  background:var(--world-embed-raised);
  color:var(--world-embed-text);
}
html[data-world-embed] dialog .close-button {
  min-width:44px;
  color:var(--world-embed-gold);
}
html[data-world-embed] dialog .secondary:hover:not(:disabled) { background:#263b3d }
html[data-world-embed] dialog :is(.shop-balance b,.spark,.text-link) { color:var(--world-embed-gold) }
html[data-world-embed] dialog .palette-card {
  border-color:var(--world-embed-line);
  background:var(--world-embed-raised);
}
html[data-world-embed] dialog .selected-palette {
  border-color:var(--world-embed-primary)!important;
  background:#273d35;
  color:var(--world-embed-primary);
}
html[data-world-embed] dialog .source-copy p { font-size:13px }
html[data-world-embed] dialog :is(button,a):focus-visible { outline-color:var(--world-embed-gold) }
@media(max-width:767px) {
  html[data-world-embed] #workspace { margin-inline:12px }
  html[data-world-embed] .hero { padding:20px 0 }
  html[data-world-embed] .hero h1 { font-size:30px; line-height:1.55 }
  html[data-world-embed] .action-dock { padding:10px 12px }
}
@media(max-height:500px) and (min-width:768px) {
  html[data-world-embed] .hero { align-items:start; padding:14px 0 18px }
  html[data-world-embed] .hero-copy { padding-top:0 }
  html[data-world-embed] .hero h1 { margin-top:6px; font-size:28px; line-height:1.4 }
  html[data-world-embed] .hero-intro { margin-top:12px }
  html[data-world-embed] .hero-cta { margin-top:12px }
  html[data-world-embed] .hero-art .lab-scene { height:240px }
}