/* Wide layouts keep their original full learning panel. Compact layouts show a live window too. */
.ss-live-learning{display:none;box-sizing:border-box;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;padding:8px 12px;background:#102b36;color:#edf8f5;border-bottom:1px solid #45636a;min-width:0}
.ss-live-learning canvas{width:112px;height:120px;object-fit:contain;display:block;background:transparent}
.ss-live-copy{min-width:0;text-align:left;line-height:1.25}
.ss-live-copy>strong{display:block;color:#d9ff61;font-size:12px;margin:0 0 4px}
.ss-live-copy .ss-live-title{display:block;font-size:16px;font-weight:800;color:#f2f9f7;margin-bottom:4px}
.ss-live-copy .ss-live-value{display:block;font-size:13px;color:#a6e8ef;font-weight:750;font-variant-numeric:tabular-nums}
.ss-live-copy .ss-live-step{font-size:14px;color:#e5f3ef;line-height:1.3;margin:5px 0 0}
@media(max-width:700px){.ss-live-learning{display:grid}}
/* The learning picture occupies its own space, never covering the road, birds, debris or buttons. */
.ss-touch-screen .ss-touch-header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr 1fr;gap:4px 8px;padding:6px 10px;background:#102b36}
.ss-touch-header>.ss-live-learning{display:grid;grid-column:1;grid-row:1/3;order:-1;padding:0;gap:10px;border:0}
.ss-touch-header>.ss-touch-science-button{grid-column:2;grid-row:1;align-self:end}
.ss-touch-header>.ss-touch-exit{grid-column:2;grid-row:2;align-self:start}
.ss-touch-header .ss-live-copy>strong{max-width:none;font-size:12px}
.ss-touch-header .ss-live-copy .ss-live-step{font-size:14px;line-height:1.3;margin:5px 0 0}
@media(max-height:650px) and (orientation:portrait){
 .ss-touch-content .ss-touch-hint{padding-block:2px}
 .ss-touch-screen .ss-touch-header{padding:4px 8px;gap:4px 6px}
 .ss-touch-header>.ss-live-learning{grid-template-columns:80px minmax(0,1fr);gap:8px}
 .ss-touch-header .ss-live-learning canvas{width:80px;height:90px}
 .ss-touch-header .ss-live-title{display:none}
 .ss-touch-header .ss-live-copy>strong{font-size:11px;margin-bottom:3px}
 .ss-touch-header .ss-live-value{font-size:12px}
 .ss-touch-header .ss-live-copy .ss-live-step{font-size:12px;line-height:1.25;margin-top:4px}
 .ss-touch-header>.ss-touch-science-button,.ss-touch-header>.ss-touch-exit{font-size:12px;min-height:44px;min-width:44px;padding:6px}
}
@media(orientation:landscape) and (max-height:600px){
 .ss-touch-screen .ss-touch-header{grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:1fr;gap:10px;padding:4px 12px}
 .ss-touch-header>.ss-live-learning{grid-column:1;grid-row:1;grid-template-columns:86px minmax(0,1fr);gap:12px}
 .ss-touch-header .ss-live-learning canvas{width:86px;height:76px}
 .ss-touch-header .ss-live-copy{display:grid;grid-template-columns:auto 1fr;gap:3px 12px}
 .ss-touch-header .ss-live-copy>strong{grid-column:1;margin:0}
 .ss-touch-header .ss-live-title{grid-column:2;font-size:14px;margin:0}
 .ss-touch-header .ss-live-value{grid-column:1/3;font-size:13px}
 .ss-touch-header .ss-live-copy .ss-live-step{grid-column:1/3;font-size:13px;margin:0}
 .ss-touch-header>.ss-touch-science-button{grid-column:2;grid-row:1;align-self:center}
 .ss-touch-header>.ss-touch-exit{grid-column:3;grid-row:1;align-self:center}
}