.sb-card { align-items:center; cursor:pointer; }
/* Colour belongs to Mark scheme focus; the surrounding card stays white. */
#notes-content-1-1 [data-card-tone="0"] { --card-bg:#F2F7FE; --card-border:#CFE0FA; --card-accent:#1B6EF3; }
#notes-content-1-1 [data-card-tone="1"] { --card-bg:#F2FAF5; --card-border:#BEE5CC; --card-accent:#27814A; }
#notes-content-1-1 [data-card-tone="2"] { --card-bg:#FFF5EB; --card-border:#F2D2AE; --card-accent:#B85B14; }
#notes-content-1-1 [data-card-tone="3"] { --card-bg:#FFFBEB; --card-border:#EBDD9C; --card-accent:#94700C; }
#notes-content-1-1 [data-card-tone="4"] { --card-bg:#FEF2F2; --card-border:#F3C7CA; --card-accent:#BD3746; }
#notes-content-1-1 [data-card-tone="5"] { --card-bg:#F7F3FC; --card-border:#DBCCEE; --card-accent:#7950A6; }
#notes-content-1-1 .nb-block[data-card-tone] {
    background:#fff !important;
    border-color:#E4EBF5 !important;
}
#notes-content-1-1 [data-card-tone] .unit11-mark-focus {
    background:var(--card-bg);
    border-left-color:var(--card-accent);
}
#notes-content-1-1 .nb-block-title { font-size:18px; line-height:1.4; }
#notes-content-1-1 .nb-block-desc { font-size:16px; line-height:1.65; }
#notes-content-1-1 .unit11-mark-focus,
#notes-content-1-1 .sb-extra,
#notes-content-1-1 .reveal-content-box { font-size:15px; line-height:1.65; }
.sb-earth-label { fill:#526442; font:700 10px Inter,Arial,sans-serif; }
.sb-card .nb-block-body { align-self:center; }
.sb-card:not(.is-open) .sb-diagram { position:relative; }
.sb-card:not(.is-open) .sb-replay {
    position:absolute; top:4px; right:5px; z-index:5; margin:0;
    padding:3px 4px; border-radius:4px; background:rgba(255,255,255,.9);
}
.sb-card-toggle { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.sb-card-toggle { font:inherit; line-height:inherit; }
.sb-card-toggle:focus-visible { outline:2px solid #1b6ef3; outline-offset:5px; border-radius:3px; }
.unit11-mark-focus { display:block; margin-top:12px; font-size:13px; line-height:1.6; }
.unit11-mark-focus b { display:block; margin-bottom:3px; }
.sb-key-points { margin:0; padding-left:18px; }
.sb-key-points li { margin:0 0 8px; }
.sb-key-blue { color:#1b6ef3; }
.sb-key-orange { color:#ad5d12; }
.sb-conservation { margin-top:10px; }
@media(max-width:640px) {
    #mapThreeColumnContainer.unit11-three-points.lesson-view-mode .directory-left-sidebar {
        position:absolute !important; width:280px !important; min-width:0 !important;
        transform:translateX(-105%) !important; opacity:0 !important; pointer-events:none !important;
        visibility:hidden; z-index:100;
    }
    #mapThreeColumnContainer.unit11-three-points.lesson-view-mode .directory-left-sidebar.drawer-open {
        transform:translateX(0) !important; opacity:1 !important; pointer-events:auto !important; visibility:visible;
    }
    #mapThreeColumnContainer.unit11-three-points .sidebar-collapse-circle { display:none; }
    #mapThreeColumnContainer.unit11-three-points #btnToggleChaptersSidebar { display:inline-flex !important; }
    #mapThreeColumnContainer.unit11-three-points .chapters-drawer-backdrop.active { display:block !important; }
    #mapThreeColumnContainer.unit11-three-points .nb-block--concept { flex-direction:column; align-items:stretch; }
    #mapThreeColumnContainer.unit11-three-points .nb-block-diagram { align-self:center; max-width:100%; }
}
.sb-card-kicker { display:block; margin-bottom:4px; color:#1b6ef3; font-size:10px; font-weight:800; letter-spacing:.1em; }
.sb-card-title { display:block; color:#0b2545; font-family:Georgia,'Times New Roman',serif; font-size:18px; font-weight:700; line-height:1.3; }
.sb-expand-icon { display:inline-block; margin-left:5px; font-family:Arial,sans-serif; font-size:13px; color:#1b6ef3; }
.sb-card .nb-block-desc { margin:8px 0; }
.sb-definition { margin:0; color:#42597a; font-size:13px; line-height:1.45; }
.sb-definition strong { color:#123e7c; }
.sb-vocab { display:grid; gap:3px; margin-top:9px; color:#42597a; font-size:12px; line-height:1.35; }
.sb-vocab strong { color:#123e7c; }
.sb-extra { display:grid; grid-template-rows:0fr; max-width:60ch; margin-top:0; color:#42597a; font-size:13px; line-height:1.55; opacity:0; transform:translateY(-5px); transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),margin-top .45s cubic-bezier(.2,.7,.2,1),opacity .2s ease,transform .3s ease; }
.sb-extra-inner { min-height:0; overflow:hidden; }
.sb-card.is-open .sb-extra { grid-template-rows:1fr; margin-top:14px; opacity:1; transform:translateY(0); transition-delay:0s,0s,.18s,.18s; }
.sb-extra p { margin:0 0 9px; }
.sb-exam-line { background:#f2f7fe; border-left:3px solid #1b6ef3; border-radius:7px; padding:10px 12px; color:#0b2545; }
.sb-diagram { width:170px; transition:width .5s cubic-bezier(.22,1,.36,1); }
.sb-card.is-open .sb-diagram { width:425px; }
.sb-visual { position:relative; }
.sb-animation { position:relative; width:100%; border:1px solid #dfebf7; border-radius:10px; overflow:hidden; background:#f8fbff; container-type:inline-size; transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .25s ease,box-shadow .35s ease; }
.sb-visual:hover .sb-animation,.sb-visual:focus-within .sb-animation { transform:translateY(-2px) scale(1.015); border-color:#83b3f4; box-shadow:0 7px 18px rgba(27,110,243,.13); }
.sb-zoom { position:absolute; inset:0; width:100%; border:0; border-radius:10px; background:transparent; cursor:zoom-in; }
.sb-card.is-open .sb-zoom { cursor:zoom-out; }
.sb-zoom span { position:absolute; right:8px; bottom:8px; padding:6px 9px; border:1px solid rgba(255,255,255,.42); border-radius:6px; background:rgba(11,37,69,.68); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); color:white; font:700 10px/1 Inter,Arial,sans-serif; opacity:0; transform:translateY(5px); transition:opacity 180ms ease-out,transform 220ms cubic-bezier(.23,1,.32,1); pointer-events:none; }
.sb-visual:hover .sb-zoom span,.sb-zoom:focus-visible span { opacity:1; transform:translateY(0); }
.sb-zoom:focus-visible { outline:3px solid #1b6ef3; outline-offset:3px; }
.sb-zoom-ripple { position:absolute; z-index:3; top:50%; left:50%; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.94); color:#1b6ef3; box-shadow:0 4px 14px rgba(11,37,69,.18); font:800 17px/1 Arial,sans-serif; opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity 180ms ease-out,transform 220ms cubic-bezier(.23,1,.32,1); pointer-events:none; }
.sb-zoom-ripple b { font:inherit; }
.sb-zoom-ripple::before,.sb-zoom-ripple::after { content:""; position:absolute; inset:-1px; border:2px solid rgba(27,110,243,.48); border-radius:50%; opacity:0; }
@media(hover:hover) and (pointer:fine) {
    .sb-visual:hover .sb-zoom-ripple,.sb-zoom:focus-visible .sb-zoom-ripple { opacity:1; transform:translate(-50%,-50%) scale(1); }
    .sb-visual:hover .sb-zoom-ripple::before,.sb-zoom:focus-visible .sb-zoom-ripple::before { animation:sb-ripple 850ms cubic-bezier(.23,1,.32,1) 1; }
    .sb-visual:hover .sb-zoom-ripple::after,.sb-zoom:focus-visible .sb-zoom-ripple::after { animation:sb-ripple 850ms 120ms cubic-bezier(.23,1,.32,1) 1; }
}
@media(hover:none) { .sb-zoom-ripple { top:auto; left:auto; right:7px; bottom:7px; opacity:.9; transform:none; } }
.nb-diagram-interactive { position:relative; cursor:zoom-in; }
.nb-block.read-completed .nb-diagram-interactive { cursor:zoom-out; }
.nb-diagram-interactive::before { content:"↗"; position:absolute; z-index:4; top:50%; left:50%; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.94); color:#1b6ef3; box-shadow:0 4px 14px rgba(11,37,69,.18); font:800 17px/1 Arial,sans-serif; opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity 180ms ease-out,transform 220ms cubic-bezier(.23,1,.32,1); pointer-events:none; }
.nb-diagram-interactive::after { content:"Click to enlarge"; position:absolute; z-index:4; right:8px; bottom:8px; padding:6px 9px; border:1px solid rgba(255,255,255,.42); border-radius:6px; background:rgba(11,37,69,.68); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); color:#fff; font:700 10px/1 Inter,Arial,sans-serif; white-space:nowrap; opacity:0; transform:translateY(5px); transition:opacity 180ms ease-out,transform 220ms cubic-bezier(.23,1,.32,1); pointer-events:none; }
.nb-block.read-completed .nb-diagram-interactive::before { content:"↙"; }
.nb-block.read-completed .nb-diagram-interactive::after { content:"Click to reduce"; }
@media(hover:hover) and (pointer:fine) {
    .nb-diagram-interactive:hover::before { opacity:1; transform:translate(-50%,-50%) scale(1); animation:nb-diagram-ripple 850ms cubic-bezier(.23,1,.32,1) 1; }
    .nb-diagram-interactive:hover::after { opacity:1; transform:translateY(0); }
}
@keyframes nb-diagram-ripple { 0%{box-shadow:0 4px 14px rgba(11,37,69,.18),0 0 0 0 rgba(27,110,243,.5)}100%{box-shadow:0 4px 14px rgba(11,37,69,.18),0 0 0 24px rgba(27,110,243,0)} }
.sb-meters { display:grid; gap:4px; padding:7px 8px 6px; background:#fff; border-bottom:1px solid #e3ebf5; opacity:0; transform:translateY(-6px); }
.sb-meter { display:grid; grid-template-columns:42px 1fr; gap:5px; align-items:center; color:#294260; font:700 10px/1.1 Inter,Arial,sans-serif; }
.sb-meter i { display:block; height:7px; border-radius:5px; overflow:hidden; background:#e9eef5; }
.sb-meter b { display:block; height:100%; border-radius:5px; }
.sb-gpe-fill { width:92%; background:#d77a1d; }
.sb-ke-fill { width:8%; background:#1b6ef3; }
.sb-scene-wrap { position:relative; }
.sb-energy-intro { position:absolute; z-index:2; top:4px; left:50%; width:92%; transform:translateX(-50%); pointer-events:none; }
.sb-energy-name { display:flex; align-items:baseline; justify-content:center; gap:4px; color:#42597a; font:600 7px/1.25 Inter,Arial,sans-serif; opacity:0; transform:translateY(5px); }
.sb-energy-name strong { font-weight:900; }
.sb-energy-name-gpe strong { color:#bb6717; }
.sb-energy-name-ke strong { color:#1b6ef3; }
.sb-scene { display:block; width:100%; height:auto; }
.sb-orange-boundary,.sb-blue-boundary,.sb-trail { opacity:0; }
.sb-drop-arrow { opacity:0; transform-origin:181px 188px; }
.sb-callout { position:absolute; z-index:2; padding:3px 5px; border:1px solid currentColor; border-radius:5px; background:rgba(255,255,255,.97); box-shadow:0 2px 8px rgba(11,37,69,.08); font:800 8px/1.15 Inter,Arial,sans-serif; white-space:nowrap; opacity:0; transform:translateY(4px); }
.sb-callout::before { content:""; position:absolute; top:50%; left:-15px; width:14px; border-top:2px solid currentColor; }
.sb-callout::after { content:""; position:absolute; top:calc(50% - 3px); left:-17px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:6px solid currentColor; }
.sb-callout-blue { left:54%; top:39%; color:#1b6ef3; }
.sb-callout-orange { left:59%; top:12%; color:#bd6a18; }
.sb-label-full { display:none; }
.sb-transfer { position:absolute; z-index:2; top:43%; left:62%; right:4%; display:flex; flex-direction:column; align-items:center; gap:5px; padding:6px 4px; border-radius:7px; background:rgba(255,255,255,.94); box-shadow:0 2px 12px rgba(11,37,69,.08); font:800 10px/1 Inter,Arial,sans-serif; white-space:nowrap; opacity:0; }
.sb-transfer-gpe,.sb-transfer-ke { display:flex; flex-direction:column; align-items:flex-start; gap:3px; opacity:0; }
.sb-transfer-gpe { color:#bb6717; }
.sb-transfer-ke { color:#1b6ef3; }
.sb-transfer b { display:block; font-size:8px; line-height:1.15; }
.sb-replay { display:block; margin:6px 0 0 auto; padding:3px 1px; border:0; background:transparent; color:#1b6ef3; font:700 11px Inter,Arial,sans-serif; cursor:pointer; }
.sb-replay:hover { text-decoration:underline; }
.sb-card.is-open .sb-meter { grid-template-columns:57px 1fr; font-size:12px; }
.sb-card.is-open .sb-meter i { height:10px; }
.sb-card.is-open .sb-energy-intro { top:8px; }
.sb-card.is-open .sb-energy-name { gap:7px; font-size:13px; line-height:1.45; }
.sb-card.is-open .sb-callout { padding:7px 9px; font-size:12px; line-height:1.2; }
.sb-card.is-open .sb-label-short { display:none; }
.sb-card.is-open .sb-label-full { display:block; }
.sb-card.is-open .sb-transfer { gap:10px; padding:12px 10px; font-size:24px; }
.sb-card.is-open .sb-transfer b { font-size:16px; }
@media(max-width:640px) { .sb-card.is-open .sb-transfer b { font-size:13px; } }
.sb-playing .sb-meters { animation:sb-meters-in 24s cubic-bezier(.23,1,.32,1) 1 forwards; }
.sb-playing .sb-energy-name-gpe { animation:sb-name-gpe 24s cubic-bezier(.23,1,.32,1) 1 forwards; }
.sb-playing .sb-energy-name-ke { animation:sb-name-ke 24s cubic-bezier(.23,1,.32,1) 1 forwards; }
.sb-playing .sb-gpe-fill { animation:sb-gpe 24s linear 1 forwards; }
.sb-playing .sb-ke-fill { animation:sb-ke 24s linear 1 forwards; }
.sb-playing .sb-blue-boundary { animation:sb-blue 24s linear 1 forwards; }
.sb-playing .sb-orange-boundary { animation:sb-orange 24s linear 1 forwards; }
.sb-playing .sb-faller { animation:sb-fall 24s cubic-bezier(.77,0,.175,1) 1 forwards; }
.sb-playing .sb-drop-arrow { animation:sb-arrow 24s ease-in-out 1 forwards; }
.sb-playing .sb-trail { animation:sb-trail 24s linear 1 forwards; }
.sb-playing .sb-callout-blue { animation:sb-callout-blue 24s linear 1 forwards; }
.sb-playing .sb-callout-orange { animation:sb-callout-orange 24s linear 1 forwards; }
.sb-playing .sb-transfer { animation:sb-transfer-panel 24s linear 1 forwards; }
.sb-playing .sb-transfer-gpe { animation:sb-gpe-text 24s ease 1 forwards; }
.sb-playing .sb-transfer-ke { animation:sb-ke-text 24s ease 1 forwards; }
@keyframes sb-meters-in { 0%,22%{opacity:0;transform:translateY(-6px)}27%,100%{opacity:1;transform:translateY(0)} }
@keyframes sb-name-gpe { 0%,27%{opacity:0;transform:translateY(5px)}31%,56%{opacity:1;transform:translateY(0)}60%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes sb-name-ke { 0%,39%{opacity:0;transform:translateY(5px)}43%,56%{opacity:1;transform:translateY(0)}60%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes sb-gpe { 0%,75%{width:92%}87%,100%{width:12%} }
@keyframes sb-ke { 0%,75%{width:8%}87%,100%{width:88%} }
@keyframes sb-blue { 0%,8%{opacity:0;stroke-dashoffset:80}14%,100%{opacity:1;stroke-dashoffset:0} }
@keyframes sb-orange { 0%,57%{opacity:0;stroke-dashoffset:130}64%,100%{opacity:1;stroke-dashoffset:0} }
@keyframes sb-callout-blue { 0%,14%{opacity:0;transform:translateY(4px)}17%,23%{opacity:1;transform:translateY(0)}25%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes sb-callout-orange { 0%,64%{opacity:0;transform:translateY(4px)}67%,71%{opacity:1;transform:translateY(0)}73%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes sb-fall { 0%,75%{transform:translateY(0)}77%{transform:translateY(-2px)}87%,100%{transform:translateY(58px)} }
@keyframes sb-arrow { 0%,70%{opacity:0;transform:translateY(-5px) scale(.55,.45)}72%,74%{opacity:1;transform:translateY(0) scale(.8,.7)}73%,75%{opacity:1;transform:translateY(-6px) scale(.8,.7)}77%{opacity:1;transform:translateY(0) scale(1,.8)}84%{opacity:1;transform:translateY(0) scale(1.45,1.2)}88%,100%{opacity:0;transform:translateY(0) scale(1.45,1.2)} }
@keyframes sb-trail { 0%,77%{opacity:0}81%,86%{opacity:1}89%,100%{opacity:0} }
@keyframes sb-transfer-panel { 0%,87%{opacity:0}90%,100%{opacity:1} }
@keyframes sb-gpe-text { 0%,89%{opacity:0;transform:scale(.92)}92%,100%{opacity:1;transform:scale(1)} }
@keyframes sb-ke-text { 0%,92%{opacity:0;transform:scale(.92)}95%,100%{opacity:1;transform:scale(1)} }
@keyframes sb-ripple { 0%{opacity:.72;transform:scale(.72)}100%{opacity:0;transform:scale(2.15)} }
@media(max-width:640px) { .sb-diagram{width:110px}.sb-card.is-open{flex-wrap:wrap}.sb-card.is-open .sb-diagram{width:min(100%,350px);margin:auto}.sb-meter{grid-template-columns:26px 1fr;font-size:8px}.sb-meters{padding:4px}.sb-replay{font-size:10px}.sb-card.is-open .sb-callout{font-size:10px}.sb-card.is-open .sb-transfer{font-size:17px} }
@media(prefers-reduced-motion:reduce) { .sb-diagram,.sb-extra,.sb-animation,.sb-zoom span,.sb-zoom-ripple,.nb-diagram-interactive::before,.nb-diagram-interactive::after{transition:none}.sb-visual:hover .sb-animation,.sb-visual:focus-within .sb-animation{transform:none}.sb-playing .sb-meters,.sb-playing .sb-energy-name,.sb-playing .sb-gpe-fill,.sb-playing .sb-ke-fill,.sb-playing .sb-blue-boundary,.sb-playing .sb-orange-boundary,.sb-playing .sb-faller,.sb-playing .sb-drop-arrow,.sb-playing .sb-trail,.sb-playing .sb-callout,.sb-playing .sb-transfer,.sb-playing .sb-transfer-gpe,.sb-playing .sb-transfer-ke,.sb-playing .sb-transfer-gpe b,.sb-playing .sb-transfer-ke b,.sb-visual:hover .sb-zoom-ripple::before,.sb-visual:hover .sb-zoom-ripple::after,.nb-diagram-interactive:hover::before{animation:none}.sb-meters{opacity:1;transform:none}.sb-gpe-fill{width:12%}.sb-ke-fill{width:88%}.sb-blue-boundary,.sb-orange-boundary,.sb-transfer,.sb-transfer-gpe,.sb-transfer-ke{opacity:1}.sb-energy-name{opacity:0}.sb-faller{transform:translateY(58px)} }