.properties-page{background:var(--cream);color:var(--ink)}
.properties-hero{display:grid;gap:42px;padding:54px 0 76px;align-items:center}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:24px;color:var(--muted);font-size:13px}.breadcrumb a{color:var(--purple);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}
.properties-hero h1{font:700 clamp(43px,9vw,72px)/1.04 'Fredoka';letter-spacing:-.03em;margin:10px 0 22px}.properties-hero h1 em{color:var(--purple);font-style:normal}.properties-hero>div:first-child>p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:17px}.properties-hero strong{color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:27px}
.number-stage{position:relative;min-height:340px;border-radius:34px;background:#e9e6ff;overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(91,75,219,.08)}
.number-stage:before,.number-stage:after{content:'';position:absolute;border:2px dashed rgba(91,75,219,.18);border-radius:50%}.number-stage:before{width:260px;height:260px}.number-stage:after{width:410px;height:410px}
.mini-card{position:absolute;z-index:2;left:11%;top:25%;padding:15px 18px;border-radius:18px;background:#fff;box-shadow:0 14px 28px rgba(43,35,104,.16);font:700 24px 'Fredoka';transform:rotate(-7deg)}.mini-card.second{left:auto;right:11%;top:25%;transform:rotate(7deg)}
.stage-arrow{position:relative;z-index:2;color:var(--purple);font:700 42px 'Fredoka'}.number-stage>strong{position:absolute;z-index:2;bottom:74px;font:700 34px 'Fredoka';color:#41359d}.number-stage>small{position:absolute;z-index:2;bottom:28px;left:50%;transform:translateX(-50%);width:85%;text-align:center;color:#4c4580;font-weight:700}
.concept-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.concept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px}.concept-grid>div{display:grid;justify-items:center;gap:4px;padding:24px 8px;text-align:center}.concept-grid span{font-size:28px}.concept-grid strong{font:700 17px 'Fredoka'}.concept-grid small{color:var(--muted)}
.properties-section{padding:82px 0 92px}.section-intro{max-width:780px;margin-bottom:34px}.section-intro h2,.warning-layout h2,.quiz-layout>div:first-child h2,.remember-card h2,.share-panel h2{font:700 clamp(31px,6vw,47px)/1.12 'Fredoka';margin:7px 0 12px}.section-intro>p:last-child{color:var(--muted);font-size:16px}
.property-card{display:grid;gap:25px;position:relative;margin-top:24px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 16px 40px rgba(43,35,104,.07);overflow:hidden}.property-badge{display:flex;align-items:center;gap:8px}.property-badge small{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted)}.property-badge strong{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#ece9ff;color:var(--purple);font:700 21px 'Fredoka'}
.property-name{display:inline-flex;padding:6px 11px;border-radius:20px;background:#ece9ff;color:var(--purple);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.property-copy h2{font:700 clamp(28px,5vw,39px)/1.1 'Fredoka';margin:13px 0 10px}.property-copy>p{color:var(--muted)}
.associative .property-name,.associative .property-badge strong{background:#fff3c7;color:#785b00}.distributive .property-name,.distributive .property-badge strong{background:#dff7e8;color:#23734a}
.formula-grid{display:grid;gap:12px;margin:22px 0}.formula-grid>div{padding:16px;border-radius:17px;background:#f8f7ff;border:1px solid #ebe8ff;overflow-x:auto}.formula-grid small{display:block;color:var(--muted);margin-bottom:4px}.formula-grid strong{display:block;min-width:max-content;font:700 clamp(18px,4vw,24px) 'Fredoka';color:#4437a7}.formula-grid span{display:block;margin-top:6px;color:#5d5878;font-size:13px}.associative .formula-grid>div{background:#fffaf0;border-color:#f7e8b0}.associative .formula-grid strong{color:#715700}.distributive .formula-grid>div{background:#f4fbf6;border-color:#d9f2e2}.distributive .formula-grid strong{color:#226b47}
.memory-tip{padding:13px 15px;border-radius:15px;background:#f2f0ff;color:#4b4278}.associative .memory-tip{background:#fff5d6;color:#6d5611}.distributive .memory-tip{background:#eaf8ef;color:#276345}
.property-visual{min-height:190px;border-radius:23px;background:#ece9ff;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;overflow:hidden}.property-visual:before{content:'';position:absolute;width:180px;height:180px;border:2px dashed rgba(91,75,219,.18);border-radius:50%}.property-visual>*{position:relative;z-index:1}.swap-visual span{display:grid;place-items:center;width:65px;height:65px;border-radius:20px;background:#fff;font:700 31px 'Fredoka';box-shadow:0 12px 25px rgba(43,35,104,.12)}.swap-visual i{font:700 34px 'Fredoka';font-style:normal;color:var(--purple)}
.associative .property-visual{background:#fff4ca;flex-wrap:wrap;padding:22px}.group-visual span{padding:10px;border-radius:14px;background:#fff;font:700 18px 'Fredoka'}.group-visual b{color:#7a5c00}.group-visual i{width:100%;text-align:center;color:#9a7200;font:700 30px 'Fredoka';font-style:normal}
.distributive .property-visual{background:#def5e6}.gift-visual{flex-wrap:wrap;padding:24px}.gift-visual strong{font:700 35px 'Fredoka';color:#226b47;width:100%;text-align:center}.gift-visual span{display:grid;place-items:center;min-width:54px;height:54px;padding:0 8px;border-radius:17px;background:#fff;font:700 24px 'Fredoka'}.gift-visual i{width:100%;text-align:center;font:700 24px 'Fredoka';font-style:normal;color:#34885e}
.warning-section{padding:80px 0;background:#2c2654;color:#fff}.warning-layout{display:grid;gap:32px}.warning-layout>div:first-child>p:last-child{color:#d6d1ef;max-width:610px}.warning-layout .eyebrow{color:#bcb5ff}.wrong-right-grid{display:grid;gap:12px}.wrong-right-grid article{padding:18px;border-radius:18px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12)}.wrong-right-grid span{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fbd97c}.wrong-right-grid strong{display:block;margin:8px 0 4px;font:700 clamp(17px,4vw,22px) 'Fredoka';overflow-x:auto}.wrong-right-grid small{color:#d8d4eb}
.lab-section{padding:86px 0}.lab-grid{display:grid;gap:24px}.number-controls{padding:23px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(43,35,104,.06)}.number-controls label{display:block;padding:14px 0}.number-controls label+label{border-top:1px solid var(--line)}.number-controls label>span{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.number-controls output{display:grid;place-items:center;min-width:42px;height:34px;padding:0 8px;border-radius:10px;background:#ece9ff;color:var(--purple);font-weight:800}.number-controls input{width:100%;accent-color:var(--purple)}
.live-results{display:grid;gap:12px}.live-results article{padding:20px;border-radius:20px;background:#ece9ff}.live-results article:nth-child(2){background:#fff3c7}.live-results article:nth-child(3){background:#dff7e8}.live-results small{display:block;margin-bottom:6px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.live-results strong{display:block;font:700 clamp(16px,3.6vw,22px)/1.35 'Fredoka';overflow-wrap:anywhere}
.quiz-section{padding:82px 0;background:#fff}.quiz-layout{display:grid;gap:32px;align-items:start}.quiz-layout>div:first-child>p:last-child{color:var(--muted)}.quiz-card{padding:24px;border-radius:25px;background:var(--cream);border:1px solid var(--line)}.quiz-progress{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.quiz-card h3{font:700 clamp(23px,5vw,31px)/1.18 'Fredoka';margin:22px 0}.quiz-options{display:grid;gap:10px}.quiz-options button{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:700 15px inherit;text-align:left;cursor:pointer}.quiz-options button:hover:not(:disabled){border-color:var(--purple);transform:translateY(-1px)}.quiz-options button.correct{background:#e4f8eb;border-color:#76c895}.quiz-options button.wrong{background:#ffe8e4;border-color:#ee9a8b}.quiz-options button:disabled{cursor:default}.quiz-feedback{min-height:48px;margin:15px 0;color:#5e5875}.quiz-card>.button{margin-top:5px}
.remember-section{display:grid;gap:20px;padding:82px 0}.remember-card{padding:28px;border-radius:27px;background:#ece9ff}.remember-card ol{display:grid;gap:11px;padding-left:22px;margin:20px 0 0}.remember-card li{padding-left:5px}.remember-card.mnemonic{background:#fff3c7}.remember-card.mnemonic>span{font-size:42px}.remember-card.mnemonic p:last-child{color:#665718}
.properties-share{padding:72px 0;background:var(--purple);color:#fff}.share-panel{display:grid;gap:18px;align-items:center}.share-panel .eyebrow{color:#d6d1ff}.share-panel h2{margin-bottom:6px}.share-panel p:not(.eyebrow){color:#dedaff}.share-panel .button{justify-self:start;background:#fff;color:var(--purple)}#shareFeedback{min-height:20px;margin:0;color:#e9e6ff;font-size:13px}
@media(min-width:760px){.properties-hero{grid-template-columns:1.08fr .92fr;gap:62px;padding:76px 0 102px}.property-card{grid-template-columns:74px minmax(0,1.45fr) minmax(230px,.75fr);align-items:center;padding:31px}.property-badge{align-self:start;display:grid;justify-items:center}.formula-grid{grid-template-columns:1fr 1fr}.warning-layout{grid-template-columns:.75fr 1.25fr;align-items:start}.wrong-right-grid{grid-template-columns:1fr 1fr}.lab-grid{grid-template-columns:.72fr 1.28fr}.quiz-layout{grid-template-columns:.7fr 1.3fr}.remember-section{grid-template-columns:1fr 1fr}.share-panel{grid-template-columns:1fr auto;column-gap:26px}.share-panel>#shareFeedback{grid-column:2}}
@media(max-width:620px){.concept-grid{grid-template-columns:1fr}.concept-grid>div{grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:13px;padding:16px}.concept-grid span{grid-row:1/3}.number-stage{min-height:300px}.mini-card{font-size:19px;left:7%;top:25%}.mini-card.second{left:auto;right:7%}.stage-arrow{font-size:33px}.property-card{padding:22px}.property-visual{min-height:155px}.warning-section,.lab-section,.quiz-section,.remember-section{padding-top:66px;padding-bottom:66px}}