/* Apple-inspired typography and spacing; Duolingo-inspired learning controls. */
:root{--bg:#f5f5f7;--paper:#fff;--ink:#1d1d1f;--muted:#6e6e73;--line:#e5e5e7;--green:#438c09;--soft:#eff8e5;--red:#c43c36;--radius:20px}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",sans-serif;background:var(--bg)}.app{max-width:960px;padding:26px 40px 112px}header{margin-bottom:48px}.brand{font-size:20px;font-weight:700;letter-spacing:-.5px}.brand>span{background:#1d1d1f;border-radius:9px;width:34px;height:34px}.badge{color:#6e6e73}.page-heading{margin-bottom:30px}.page-heading h1{font-size:36px;font-weight:700;letter-spacing:-1px}.page-heading>span{font-size:14px}.panel{border:0;border-radius:22px;padding:28px;box-shadow:0 2px 12px #00000003}.sectiontitle h2{font-size:21px;font-weight:650}.sectiontitle{margin-bottom:22px}.scope-options{gap:14px}.scope-option{border:2px solid #e7e7e9;border-radius:15px;padding:19px 15px;background:#fff;box-shadow:0 3px 0 #e7e7e9;transition:transform .1s,background .15s,border-color .15s}.scope-option:hover{background:#f9faf7}.scope-option:active{transform:translateY(3px);box-shadow:none}.scope-option span{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:650}.scope-option.chosen{background:#f1f9e9;border-color:#9acb72;box-shadow:0 3px 0 #9acb72;color:#356d11}.unit-check{display:grid;place-items:center;width:21px;height:21px;border:2px solid #d9dadc;border-radius:6px;color:transparent;font-size:13px}.chosen .unit-check{background:#58a917;border-color:#58a917;color:white}.scope-option small{margin-top:14px;color:#6e6e73;font-size:13px}.scope-hint{margin-top:22px;color:#86868b}.start-row{padding:22px 2px 0;margin:0 0 52px}.primary{background:#3f8508;color:#fff;border:1px solid #397506;box-shadow:0 4px 0 #2b6100;border-radius:14px;font-size:16px;font-weight:700;min-height:52px;padding:14px 30px;transition:transform .1s,box-shadow .1s,background .1s}.primary:hover{background:#387808}.primary:active:not(:disabled){transform:translateY(4px);box-shadow:none}.primary:disabled{opacity:1;color:#9a9b9c;background:#e5e5e7;border-color:#e5e5e7;box-shadow:0 4px 0 #d4d4d6}.secondary{background:white;border:2px solid #e5e5e7;border-radius:14px;box-shadow:0 3px 0 #ddd;font-size:16px}.catalog{border:0;padding:0}.catalog>h2{font-size:23px;font-weight:650;margin-bottom:22px;letter-spacing:-.5px}.catalog-unit{background:white;border:0;border-radius:17px;margin:12px 0;padding:0 24px}.catalog-unit summary{padding:22px 0;font-weight:600}.catalog-unit summary small{font-weight:400}.catalog-unit summary:after{content:'⌄';font-size:20px;font-weight:400}.catalog-unit[open] summary:after{content:'⌃'}.catalog-concepts{gap:9px}.catalog-term{border-radius:10px;border-color:#e6e6e8;background:#fafafa;font-size:15px;padding:11px 14px}.catalog-term:hover{background:#eff7e8;border-color:#abd48e}.record-row{padding:20px 4px}.record-row strong{font-weight:600}.record-row>span{color:#6e6e73}.record-row small{font-size:13px}nav{border-top:1px solid #dedee1;background:#ffffffdf;gap:80px;padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}nav button{padding:7px 18px;gap:5px;border-radius:12px;color:#86868b;min-width:80px}nav button.active{color:#4a8e17;background:#f0f8e9}nav em{display:grid;place-items:center;height:23px}nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}body:has(.quiz){background:white}.app:has(.quiz){max-width:840px;padding-bottom:140px}.app:has(.quiz)>header{display:none}.quiz{max-width:660px;padding-top:4px}.quiztop{gap:18px;margin:0 0 38px}.close{font-size:28px;color:#afb0b1}.bar{height:14px;border-radius:10px;background:#ebebed}.bar i{background:#69c72c;position:relative;transition:width .3s}.bar i:after{content:'';position:absolute;top:3px;left:5px;right:5px;height:4px;border-radius:4px;background:#ffffff45}.quiztop small{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.question-type{gap:12px;margin-bottom:17px}.question-type strong{background:#eef8e4;color:#4e861e;font-size:13px;border-radius:7px;padding:6px 10px}.question-type.multi strong{background:#fff2d4;color:#9a6809}.question-type span{font-size:13px;color:#86868b}.quiz .question{font-size:26px;line-height:1.6;letter-spacing:-.5px;font-weight:650;margin-bottom:32px}.options{gap:14px}.option{border:2px solid #e5e5e7;border-radius:15px;box-shadow:0 3px 0 #e5e5e7;padding:17px 20px;font-size:17px;line-height:1.8;display:flex;align-items:center;gap:15px;transition:background .12s,border-color .12s,box-shadow .12s,transform .1s}.option:hover:not(:disabled){border-color:#ced9c4;background:#fafcf8}.option:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #d0d4cc}.option.selected{background:#f0f9e8;border-color:#a5ce82;box-shadow:0 3px 0 #a5ce82}.option.correct{background:#f0f9e8;border-color:#8fc969;box-shadow:0 3px 0 #8fc969}.option.wrong{background:#fff1ef;border-color:#eda49a;box-shadow:0 3px 0 #eda49a}.option-symbol{width:29px;height:29px;display:grid;place-items:center;border:2px solid #e0e1e2;border-radius:8px;flex-shrink:0;font-size:13px;font-weight:600;line-height:1;color:#8b8c8e}.selected .option-symbol{border-color:#8ebd67;color:#528528;background:#e2f2d6}.option-copy{flex:1}.feedback{border:0;border-radius:18px;padding:24px;background:#f1f8ea;margin-top:35px}.feedback.bad{background:#fff3ee}.feedback>b{font-size:18px;color:#498216}.feedback.bad>b{color:#b84b36}.feedback>div{line-height:1.95}.feedback .contrast{font-size:15px;line-height:1.95;color:#565b52}.tags span{background:#e6eedd;color:#6f7866;font-size:12px}.bad .tags span{background:#f5e8df}.framework{background:white;border:1px solid #e1e8da;border-radius:14px;padding:22px}.framework>b{font-size:16px}.time-axis strong{font-weight:600}.time-axis small{font-size:13px}.time-axis li:before{background:#7da45d}.time-axis li{border-color:#c8d8b9}.table-scroll{border-radius:8px}thead{background:#f0f4ea}th,td{border-color:#e5e9de}.cause-chain span{background:#f3f6ed;border-radius:9px}.term{color:#3c6a27;border-color:#8ba87a}.term:hover{background:#e3efda}.quizfooter{position:fixed;z-index:8;bottom:0;left:0;right:0;display:flex;justify-content:flex-end;margin:0;padding:20px max(24px,calc((100vw - 660px)/2)) max(24px,env(safe-area-inset-bottom));border-top:1px solid #ebebed;background:#fffffff2;backdrop-filter:blur(16px)}.quizfooter .primary{min-width:180px}.interaction-caption{font-size:13px;color:#86868b}.sort-row{border:2px solid #e5e5e7;border-radius:13px;box-shadow:0 2px 0 #e5e5e7;padding:10px 14px}.sort-handle{background:#f4f5f2;border-radius:9px;color:#87977e}.sort-label{font-size:16px}.sort-row.dragging{box-shadow:0 12px 30px #28341b20;border-color:#99bf7d}.wireboard{gap:56px;margin-top:5px}.wire-col{gap:22px;grid-auto-rows:minmax(108px,auto)}.wire-node{border:2px solid #e5e5e7;border-radius:15px;box-shadow:0 3px 0 #e5e5e7;font-size:16px;line-height:1.75;padding:18px 12px;background:white}.wire-node.selected{background:#eef8e5;border-color:#a0cd7b;box-shadow:0 3px 0 #a0cd7b}.wire-node.connected{border-color:#b2c8a4;box-shadow:0 3px 0 #b2c8a4}.wire-node.target{background:#e8f6dc;border-color:#81b755;box-shadow:0 3px 0 #81b755}.wire-node.wire-wrong{border-color:#e6a393;box-shadow:0 3px 0 #e6a393}.wire-node small{font-size:12px;color:#b84b36}.wire-tools{margin-top:10px}.wire-tools span,.text-button{color:#86868b;font-size:13px}.concept-dialog{border-radius:24px;padding:30px;box-shadow:0 25px 100px #00000020}.concept-dialog h2{font-size:28px;font-weight:650;letter-spacing:-.5px}.concept-dialog>p{font-size:17px;line-height:1.95}.concept-dialog .tip{background:#f2f5ee;border-radius:13px}.concept-era,.eyebrow{color:#86868b}.concept-close{color:#86868b;background:#f2f2f4;border-radius:50%;font-size:24px}.concept-dialog::backdrop{background:#1d1d1f55;backdrop-filter:blur(7px)}.catalog-term ruby rt,.wire-node ruby rt{font-size:9px}
@media(max-width:700px){.app{padding:22px 20px 110px}header{margin-bottom:36px}.brand{font-size:18px}.badge{font-size:12px}.page-heading{margin-bottom:26px;align-items:center}.page-heading h1{font-size:30px;letter-spacing:-.7px}.page-heading>span{font-size:13px}.panel{padding:22px 20px;border-radius:20px}.sectiontitle h2{font-size:19px}.scope-options{gap:12px}.scope-option{padding:16px 12px;border-radius:13px}.scope-option span{font-size:15px;gap:8px}.scope-option small{font-size:12px;margin-top:13px}.scope-hint{font-size:12px}.start-row{padding-top:20px;margin-bottom:40px}.start-row>span{font-size:13px}.primary{min-height:51px;padding:13px 26px;font-size:16px;border-radius:13px}.catalog>h2{font-size:21px;margin-bottom:18px}.catalog-unit{padding:0 19px;border-radius:15px}.catalog-unit summary{font-size:15px;padding:21px 0}.catalog-unit summary small{font-size:12px}.app:has(.quiz){padding:22px 20px 145px}.quiz{padding-top:0}.quiztop{margin-bottom:30px;gap:14px}.quiz .question{font-size:23px;line-height:1.65;margin-bottom:28px;letter-spacing:-.3px}.question-type{margin-bottom:17px}.option{font-size:16px;padding:16px;gap:12px;border-radius:14px}.option-symbol{width:27px;height:27px}.quizfooter{padding:17px 20px max(23px,env(safe-area-inset-bottom))}.quizfooter .primary{width:100%;min-width:0}.wireboard{gap:38px}.wire-col{grid-auto-rows:minmax(108px,auto);gap:22px}.wire-node{font-size:15px;padding:16px 9px;border-radius:13px}.feedback{padding:21px 18px;border-radius:16px;font-size:16px}.feedback .contrast{font-size:15px}.framework{padding:19px 14px}.framework>b{font-size:15px}.time-axis strong{font-size:15px}table{font-size:14px}nav{gap:32px}nav button{min-width:80px;padding:6px 15px}.concept-dialog{padding:27px 24px;border-radius:22px}.concept-dialog>p{font-size:16px}.concept-dialog h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}