/* Application layout and components. Anatomy, signal and label colours retain
   their separate meanings; brand colour belongs to the surrounding interface. */
.topbar{height:80px;padding:0 24px;gap:24px;background:var(--bg)}
.topmeta{gap:16px}.badge{font:11px var(--font-mono);letter-spacing:0;border:0;padding:0;color:var(--muted)}
main{padding:16px 24px 0}.toolbar{gap:24px;margin-bottom:16px}.toolbar h1{font-size:28px;font-weight:500;letter-spacing:-.7px;margin-bottom:4px}.toolbar p{font-size:14px;line-height:1.5}
.actions{align-items:center;gap:8px}.actions button{min-height:48px;font-size:14px}
.workspace{column-gap:16px;row-gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 296px}
.panel{background:var(--panel);border-color:var(--edge);border-radius:var(--radius)}
.anatomy .panelhead,.ultrasound .panelhead{min-height:64px;padding:8px 16px;gap:8px;flex-wrap:nowrap}
.anatomy .panelhead h2,.ultrasound .panelhead h2{flex:1 1 auto;font-size:16px}
.panelhead h2 span{font-size:15px;margin:0;font-weight:600}
.anatomy .panel-actions,.ultrasound .panel-actions{width:auto;flex:0 0 auto;gap:8px;align-items:center}
.panel-actions button{font-size:13px;min-height:44px;padding:8px 12px;background:transparent;border-color:transparent}
.panel-actions button:hover:not(:disabled){background:var(--hover)}
.panel-actions [aria-expanded=true],.panel-actions [aria-pressed=true],.panel-actions button.active{background:var(--selected);border-color:var(--brand-blue);color:var(--accent)}
.panel-actions #quiz-launch{color:var(--accent);background:var(--selected)}
.viewport,.us-expanded .ultrasound .viewport{height:clamp(300px,calc(100svh - 442px),680px)}
.anatomy .viewport{background:#0b0c0f}
.view-mode{position:absolute;left:16px;top:16px;font:11px/1.4 var(--font-mono);color:var(--muted);pointer-events:none}
.view-mode[data-original=true]{display:none}
.viewhint{font-size:12px;color:var(--muted)}
.anatomy .panelbottom,.ultrasound .panelbottom{padding:8px 16px;min-height:60px;gap:4px 16px;font-size:13px;justify-content:flex-start}
.panelbottom label{min-height:36px;gap:8px}.panelbottom .key{font-size:13px;color:var(--muted)}
.panelbottom #cap-status:empty,.panelbottom #ghost-status:empty{display:none}
.scanmeta,.scanfooter{font:11px/1.4 var(--font-mono);color:var(--muted);left:16px;right:16px}
.scanmeta{top:16px}.scanfooter{bottom:16px}
.zoom-controls{gap:8px;right:16px;bottom:56px}.zoom-controls button{border-radius:50%;background:#22242ae8;border-color:var(--input-edge)}
.ecg-panel .panelhead{padding:8px 16px;min-height:36px}.ecg-panel .panelhead h2 span{font-size:13px;font-weight:500}
.ecg-status{padding:8px 16px;gap:8px 16px;min-height:32px}.ecg-panel .quiet,.ecg-status{font-size:11px}
.controls{max-height:calc(100svh - 176px);top:16px;scrollbar-width:thin;scrollbar-color:var(--input-edge) transparent}
.controls .panelhead{padding:16px;min-height:64px}.controls .panelhead h2{font-size:16px;font-weight:600}
.controls fieldset{display:block;padding:0}
.control-section,.controls-dialog .control-section{padding:16px;border:0;margin:0}
#controls>.control-section{border-bottom:1px solid var(--edge)}
.control-group{border-bottom:1px solid var(--edge)}.control-group:last-child{border:0}
.control-group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;min-height:56px;padding:16px;font-size:14px;font-weight:600;color:var(--text)}
.control-group>summary::-webkit-details-marker{display:none}
.control-group>summary::after{content:'';width:8px;height:8px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:0 4px 4px;flex:none}
.control-group[open]>summary::after{transform:rotate(225deg);margin-bottom:-4px}
.control-group>summary:hover{background:var(--surface)}
.control-group[open]>summary{color:var(--accent)}
.control-group>.control-section{padding-top:0}
.control-section h3{color:var(--text)}.control-section .field-label{font-size:14px;margin:0 0 8px}
.range-row{margin:16px 0 0}.range-row label{font-size:13px;line-height:1.5;align-items:baseline;gap:8px}
.range-row output,.audio-volume output{font:11px/1.5 var(--font-mono);color:var(--accent)}
.range-row input[type=range]{height:28px;margin:4px 0 0}
.check-row{font-size:13px;line-height:1.5;margin:8px 0;gap:8px;min-height:36px}
.physiology-controls>.field-label:not(:first-child){margin-top:16px}
.control-section .small,.control-section .quiet{font-size:12px;line-height:1.6}
.control-section .small{margin:8px 0 0}.context-options{gap:8px;font-size:13px}
.context-options label{min-height:36px}.audio-controls{gap:16px}.audio-toggle button{font-size:13px}
.sound-section .audio-volume{margin-top:16px}.audio-volume label{font-size:13px}.audio-volume input{height:28px}
.view-guide{margin-top:8px;font-size:12px;line-height:1.6}.view-guide summary{cursor:pointer;color:var(--muted);padding:8px 0;min-height:36px}
.view-guide[open] summary{color:var(--accent)}
.learning-panel{padding:24px;margin-top:8px}
.learning-heading{display:flex;gap:16px;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.learning-heading h2{font-size:18px;font-weight:600;color:var(--text)}
.learning-heading .quiet{font-size:13px}
.learning-filters{gap:16px;margin:16px 0}.learning-filters label{font-size:13px;gap:8px}
.structure-search-label{font-size:13px;margin-bottom:8px}.structure-results{gap:8px;padding:4px;margin-top:8px}
.structure-results button,.scan-structure-list button{border-radius:8px;background:var(--surface);border:1px solid var(--edge);font-size:14px;padding:12px;min-height:48px}
.structure-results button[aria-pressed=true],.scan-structure-list button[aria-pressed=true]{background:var(--selected);border-color:var(--brand-blue);color:var(--accent)}
.structure-card{border-color:var(--edge);padding:16px;margin-top:16px;border-radius:12px;background:var(--surface)}
.structure-card h3{color:var(--text);font-size:20px;margin:8px 0}.structure-card p{font-size:14px;line-height:1.6}
.structure-actions{gap:8px}.structure-actions button{font-size:13px}
.structure-pins{gap:8px;margin-top:16px}.structure-pins:empty{display:none}
.learning-help{line-height:1.6;font-size:13px}.learning-references{margin-top:16px;color:var(--muted)}
.learning-references summary{min-height:44px;padding:12px 0}.learning-references a{color:var(--accent)}
.us-learning-modes{gap:8px;padding:4px;border-radius:12px;background:var(--bg)}
.us-learning-modes button{background:transparent;border-color:transparent;font-size:14px}
.us-learning-modes [aria-pressed=true]{background:var(--selected);border-color:var(--brand-blue);color:var(--accent)}
.us-learning-options{gap:8px 16px;font-size:13px;margin:16px 0}.us-learning-options label{min-height:36px}
#us-learning-controls{border-color:var(--edge);margin:0 0 16px;padding:0 0 16px}
.scan-structures{border-color:var(--edge);padding:16px 0;margin-bottom:16px}.scan-structures h3{color:var(--text)}
#us-learning-status{color:var(--accent);font-size:14px}.structure-labels .structure-label,.us-labels button{font-weight:500;border-radius:8px}
dialog{border-color:var(--edge);border-radius:16px;background:var(--panel);padding:24px}
.dialoghead{gap:16px;align-items:flex-start;position:sticky;top:-24px;background:var(--panel);padding:16px 0;margin:0 0 16px;z-index:2}
.dialoghead h2{font-size:24px;font-weight:500;line-height:1.4}.dialoghead .build-version{display:block;margin-top:8px}
#method-content{font-size:15px;line-height:1.7}#method-content h3{font-size:17px;color:var(--text)}
.method-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.method-reviews a{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:12px;border:1px solid var(--edge);border-radius:8px;font-size:13px;text-decoration:none}
.method-reviews a:hover{background:var(--surface)}
.method-diagnostics,.method-section{border-top:1px solid var(--edge);padding:0}
.method-diagnostics>summary,.method-section>summary{min-height:48px;padding:12px 0;font-size:14px;cursor:pointer;color:var(--accent)}
.runtime-details p{font:12px/1.6 var(--font-mono)}
.method-section>div{padding-bottom:16px}.method-section p:first-child{margin-top:0}
footer{font-size:11px;padding:16px 0 24px}
/* Keep question/answer feedback semantic; primary decisions use action blue. */
#quiz-dialog{background:var(--panel);border-color:var(--edge);border-radius:16px}
.quiz-header{padding:12px 24px;gap:16px}.quiz-header h2{font-weight:600}
#quiz-dialog .quiz-primary{background:var(--action);border-color:var(--action);color:#fff;font-weight:600}
#quiz-dialog .quiz-primary:hover:not(:disabled){background:var(--action-hover);border-color:var(--action-hover)}
#quiz-dialog .quiz-primary:disabled{background:var(--surface);border-color:var(--edge);color:var(--muted)}
#quiz-options button{background:var(--surface);border-color:var(--input-edge);border-radius:8px;font-weight:500}
#quiz-options button[aria-checked=true]{border-color:var(--accent);background:var(--selected);box-shadow:inset 0 0 0 1px var(--accent)}
#quiz-options button[aria-checked=true] .quiz-letter{background:var(--accent);border-color:var(--accent);color:#16223a}
#quiz-options button[data-result=wrong]{border-color:#e39595;background:#3b242b;color:#f4c3c3}
#quiz-options button[data-result=correct]{border-color:#72d8ad;background:#15392e;color:#c4f5df}
#quiz-dialog .quiz-secondary{color:var(--muted)}#quiz-dialog :focus-visible{outline-color:var(--accent)}
.quiz-tap-prompt{color:var(--accent);background:var(--selected);border-color:var(--brand-blue)}
#quiz-context{background:#22242aed;border-color:var(--input-edge)}
@media(max-width:1180px){
 .workspace{grid-template-columns:repeat(2,minmax(0,1fr))}.controls{max-height:none;position:static;overflow:visible}
 .controls fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
 #controls>.control-section,.control-group{border-bottom:1px solid var(--edge)}
 .us-expanded .workspace{grid-template-columns:minmax(0,1fr) 296px}.us-expanded .controls fieldset{display:block}
 .us-expanded .controls{max-height:calc(100svh - 176px);overflow:auto}
}
.mobile-layout .topbar{min-height:70px;gap:16px;padding:18px max(16px,env(safe-area-inset-right)) 18px max(16px,env(safe-area-inset-left))}
.mobile-layout .brand{gap:18px}.mobile-layout .brand-logo{width:120px;height:auto}.mobile-layout .brand-product{font-size:16px;padding-left:18px}
.mobile-layout .topmeta{display:flex}.mobile-layout .badge{display:none}.mobile-layout .topbar .build-version{font-size:10px;white-space:normal;text-wrap:balance;max-width:92px;text-align:right;margin:0}
.mobile-layout main{padding:8px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
.mobile-layout .toolbar{margin-bottom:0}.mobile-layout .actions{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;margin:0}
.mobile-layout .actions #play-heartbeat{font-size:14px;justify-content:center;min-height:44px;padding:8px 16px}
.mobile-layout .actions #reset,.mobile-layout .actions #info{font-size:0;width:44px;height:44px;padding:0;gap:0}
.mobile-layout .mobile-nav{padding:8px 0;gap:8px}.mobile-layout .mobile-view-switch{padding:4px;gap:4px;border-radius:999px;background:var(--panel)}
.mobile-layout .mobile-view-switch button{font-size:13px;padding:8px;min-height:44px}
.mobile-layout .mobile-view-switch button.active{background:var(--selected);color:var(--accent)}
.mobile-layout #open-controls{flex-shrink:0;align-self:center;background:var(--panel);border-color:var(--input-edge);padding:0;font-size:0}
.mobile-layout .anatomy .panelhead,.mobile-layout .ultrasound .panelhead{min-height:56px;padding:4px 8px;gap:8px}
.mobile-layout .panelhead h2 span{font-size:13px}.mobile-layout .panel-actions{gap:0}
.mobile-layout .panel-actions button,.mobile-layout #learn-toggle,.mobile-layout #quiz-launch,.mobile-layout #us-learn-toggle{font-size:12px;padding:8px;min-height:44px}
.mobile-layout .panel-actions [data-icon]::before{display:none}
.mobile-layout .panel-actions .icon-only::before{display:block}
.mobile-layout .panel-actions .icon-only{padding:0;font-size:0}
.mobile-layout .anatomy .panelbottom,.mobile-layout .ultrasound .panelbottom{min-height:52px;padding:4px 8px;gap:0 12px}
.mobile-layout .view-mode{font-size:10px;top:12px;left:12px}
.mobile-layout .learning-panel{padding:16px}.mobile-layout .learning-heading{display:block}.mobile-layout .learning-heading .quiet{display:block;margin-top:8px}
.mobile-layout .learning-filters{gap:16px}.mobile-layout .learning-panel select,.mobile-layout .learning-panel input[type=search]{font-size:16px}
.mobile-layout .us-learning-options{gap:8px 16px}.mobile-layout .learning-help{font-size:14px}
.controls-dialog fieldset{display:block!important}.controls-dialog .controls{background:var(--panel)}
.controls-dialog .control-group>summary{min-height:56px;padding:16px;font-size:16px}
.controls-dialog .range-row label,.controls-dialog .field-label,.controls-dialog .check-row,.controls-dialog .context-options label{font-size:16px}
.controls-dialog .range-row input[type=range],.controls-dialog .audio-volume input{height:36px}.controls-dialog .range-row output{font-size:12px}
.controls-dialog .control-section .small,.controls-dialog .view-guide{font-size:14px}
.mobile-layout #method-dialog{padding:16px}.mobile-layout .dialoghead{top:-16px}.mobile-layout .method-reviews{grid-template-columns:1fr}
.mobile-layout .ecg-panel .panelhead{min-height:36px;padding:8px}.mobile-layout .ecg-status{padding:8px;font-size:11px}
.mobile-layout.image-focus .topbar,.mobile-layout.image-focus .toolbar{display:none}
@media(max-width:360px){
 .mobile-layout .mobile-view-switch button{font-size:12px;padding:8px 6px;white-space:nowrap}
 .mobile-layout .topbar{gap:8px;padding-left:16px;padding-right:12px}.mobile-layout .brand{gap:17px}.mobile-layout .brand-product{padding-left:0;border:0;font-size:14px}
 .mobile-layout .topbar .build-version{font-size:9px;max-width:70px}.mobile-layout .panel-actions button{padding:8px 6px}
}
@media(max-width:700px){
 #quiz-dialog{border-radius:0}.quiz-header{padding:max(6px,env(safe-area-inset-top)) 12px 6px;gap:8px}
 #quiz-exit::before{display:none}.quiz-header h2{font-size:14px}.quiz-header .build-version{font-size:9px}
 .quiz-workspace{grid-template-rows:minmax(160px,1fr) minmax(0,min(442px,62dvh))}
}
@media(max-height:520px) and (min-width:600px){
 #quiz-dialog{border-radius:0}.quiz-header{padding:4px 14px}.quiz-workspace{grid-template-rows:minmax(0,1fr)}
}

/* One 24px outline icon family. Accessible names remain native button text. */
:root{--icon-pause:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%205v14M16%205v14%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=pause]{--icon:var(--icon-pause)}
:root{--icon-play:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%205%2011%207-11%207z%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=play]{--icon:var(--icon-play)}
:root{--icon-snowflake:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18M4.2%207.5l15.6%209M4.2%2016.5l15.6-9M9%205l3%203%203-3M9%2019l3-3%203%203M5%2011l4-1-1-4M16%2018l-1-4%204-1M5%2013l4%201-1%204M16%206l-1%204%204%201%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=snowflake]{--icon:var(--icon-snowflake)}
:root{--icon-reset:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%201%201%202%208M3%204v6h6%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=reset]{--icon:var(--icon-reset)}
:root{--icon-info:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v6M12%207v.1%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=info]{--icon:var(--icon-info)}
:root{--icon-expand:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203H3v5M16%203h5v5M3%2016v5h5M21%2016v5h-5%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=expand]{--icon:var(--icon-expand)}
:root{--icon-collapse:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208h5V3M21%208h-5V3M3%2016h5v5M21%2016h-5v5%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=collapse]{--icon:var(--icon-collapse)}
:root{--icon-quiz:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204h12v16H5V6M9%208h6M9%2012h6M9%2016h3%22%2F%3E%3Cpath%20d%3D%22m2%203%202%202%203-3%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=quiz]{--icon:var(--icon-quiz)}
:root{--icon-search:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22m16%2016%205%205%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=search]{--icon:var(--icon-search)}
:root{--icon-tag:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h8l10%2010-8%208L3%2011z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%22.75%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=tag]{--icon:var(--icon-tag)}
:root{--icon-sliders:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204v7m0%204v5M12%204v3m0%204v9M20%204v11m0%204v1M1%2011h6M9%207h6M17%2015h6%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=sliders]{--icon:var(--icon-sliders)}
:root{--icon-close:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%206%2012%2012M6%2018%2018%206%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=close]{--icon:var(--icon-close)}
:root{--icon-plus:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M12%205v14%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=plus]{--icon:var(--icon-plus)}
:root{--icon-minus:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=minus]{--icon:var(--icon-minus)}
:root{--icon-volume:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m11%205-6%204H2v6h3l6%204zM15%208a6%206%200%200%201%200%208M18%205a10%2010%200%200%201%200%2014%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=volume]{--icon:var(--icon-volume)}
:root{--icon-target:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M12%202v5m0%2010v5M2%2012h5m10%200h5%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=target]{--icon:var(--icon-target)}
:root{--icon-pin:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%203%2010%2010M12%206l-6%204v4l4%204h4l4-6M9%2015l-6%206%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=pin]{--icon:var(--icon-pin)}
:root{--icon-layers:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%2010%205-10%205L2%208zM2%2012l10%205%2010-5M2%2016l10%205%2010-5%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=layers]{--icon:var(--icon-layers)}
:root{--icon-back:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m10%205-7%207%207%207M3%2012h18%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=back]{--icon:var(--icon-back)}
:root{--icon-move:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M8%206l4-4%204%204M8%2018l4%204%204-4M6%208l-4%204%204%204M18%208l4%204-4%204%22%2F%3E%3C%2Fsvg%3E")}
[data-icon=move]{--icon:var(--icon-move)}
[data-icon]::before{content:'';display:inline-block;width:20px;height:20px;vertical-align:-5px;margin-right:8px;background:currentColor;mask:var(--icon) center/contain no-repeat;flex-shrink:0}
button.icon-only{position:relative;width:44px;height:44px;min-width:44px;padding:0;font-size:0;flex-shrink:0}
button.icon-only::before{position:absolute;inset:0;margin:auto;width:20px;height:20px}
#play-heartbeat[aria-pressed=true]{--icon:var(--icon-play)}
#freeze.active{--icon:var(--icon-play)}
.mobile-focus[aria-pressed=true],#enlarge-us[aria-expanded=true]{--icon:var(--icon-collapse)}
#learn-toggle[aria-expanded=true]{--icon:var(--icon-close)}
@media(max-width:900px){.actions #reset::before,.actions #info::before{margin:0;vertical-align:middle}}