/* A Mac, drawn: macOS (Sequoia) in dark mode, with Driff's pop-up timer on top.
   Laid out on a 1280 × 800 screen; --u is one of its points, so the whole desktop scales
   as a picture. Window chrome follows macOS's own measures: a 24 pt menu bar, 12 pt
   traffic lights 20 pt apart, 52 pt unified toolbars, 10 pt window corners.
   The pop-up is drawn as the app draws it (src/plugins/focus/Popup.tsx); --pu is its unit,
   which on a phone grows so it can be read under the shrunken desktop. */

.mac {
  --u: calc(100cqw / 1280);
  --pu: var(--u);
  --mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", var(--sans);
  position: relative; container-type: inline-size;
  width: min(1120px, 100%, calc((100svh - 190px) * 1.6));
  font-family: var(--mac-font); letter-spacing: 0;
}
/* The display: a thin black bezel and an aluminium edge, as box-shadow rings so they take no room. */
.mac-screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--u) * 10);
  background: #0d0c0b; color: #fff;
  box-shadow: 0 0 0 calc(var(--u) * 14) #050505, 0 0 0 calc(var(--u) * 15) #3a3633, 0 calc(var(--u) * 60) calc(var(--u) * 140) calc(var(--u) * -30) #000, 0 0 calc(var(--u) * 200) calc(var(--u) * -40) rgba(243, 178, 94, .16);
}
@media (max-width: 700px) { .mac { width: calc(100% - 10px); } }
@media (orientation: landscape) and (max-height: 500px) { .mac { width: min(100%, calc((100svh - 140px) * 1.6)); } }
.wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(.85) sepia(.18); }

/* Menu bar */
.menubar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5; height: calc(var(--u) * 24);
  display: flex; align-items: center; gap: calc(var(--u) * 19); padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 18);
  font-size: calc(var(--u) * 13); color: #fff; text-shadow: 0 0 calc(var(--u) * 6) rgba(0, 0, 0, .25);
  background: rgba(30, 24, 20, .28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.menubar .apple { width: calc(var(--u) * 13); height: calc(var(--u) * 16); fill: #fff; margin-right: calc(var(--u) * 2); }
.menubar b { font-weight: 700; }
.mb { display: flex; gap: calc(var(--u) * 19); }
.menubar .status { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 17); }
.menubar .status svg { height: calc(var(--u) * 14); width: auto; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menubar .status .batt { height: calc(var(--u) * 12); }
/* Which app is in front decides the menus, and which window is lit. */
.mb-safari, .safari-front .mb-preview { display: none; }
.safari-front .mb-safari { display: flex; }
.safari { z-index: 1; }
.preview { z-index: 2; }
.safari-front .safari { z-index: 3; }

/* Windows */
.win {
  position: absolute; overflow: hidden; border-radius: calc(var(--u) * 10); background: #1e1e1e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .85), 0 calc(var(--u) * 14) calc(var(--u) * 36) rgba(0, 0, 0, .38);
}
.win.front { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 1px rgba(0, 0, 0, .9), 0 calc(var(--u) * 26) calc(var(--u) * 70) calc(var(--u) * 4) rgba(0, 0, 0, .6); }
.tb {
  position: relative; display: flex; align-items: center; height: calc(var(--u) * 52); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 20);
  background: #2c2c2e; border-bottom: 1px solid #0d0d0d; color: #b9b9be; font-size: calc(var(--u) * 13);
}
.lights { display: flex; gap: calc(var(--u) * 8); margin-right: calc(var(--u) * 22); }
.lights i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #4b4b4e; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .25); }
.front .lights i:nth-child(1) { background: #ff5f57; box-shadow: inset 0 0 0 .5px #e0443e; }
.front .lights i:nth-child(2) { background: #febc2e; box-shadow: inset 0 0 0 .5px #dea123; }
.front .lights i:nth-child(3) { background: #28c840; box-shadow: inset 0 0 0 .5px #1aab29; }
.tb svg { width: calc(var(--u) * 17); height: calc(var(--u) * 17); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tb .tools { margin-left: auto; display: flex; gap: calc(var(--u) * 20); }
.win:not(.front) .tb { color: #6e6e73; }
.win:not(.front) .tb .doc-title b { color: #8e8e93; }

/* Preview, with the problem set open */
.preview { left: calc(var(--u) * 64); top: calc(var(--u) * 52); width: calc(var(--u) * 780); height: calc(var(--u) * 700); }
.doc-title { display: flex; flex-direction: column; line-height: 1.2; margin-left: calc(var(--u) * 16); }
.doc-title b { font-weight: 600; color: #e5e5ea; font-size: calc(var(--u) * 13); }
.doc-title small { font-size: calc(var(--u) * 11); color: #8e8e93; }
.pdf { position: absolute; inset: calc(var(--u) * 52) 0 0; background: #262626; overflow: hidden; }
.page {
  position: absolute; left: 50%; top: calc(var(--u) * 26); width: calc(var(--u) * 560); height: calc(var(--u) * 725); transform: translateX(-50%);
  padding: calc(var(--u) * 46) calc(var(--u) * 54); background: #fff; color: #161616; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 12) rgba(0, 0, 0, .55);
  font-family: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif; font-size: calc(var(--u) * 12.2); line-height: 1.5;
}
.page .course { display: flex; justify-content: space-between; font-size: calc(var(--u) * 9.5); color: #555; border-bottom: .5px solid #999; padding-bottom: calc(var(--u) * 6); }
.page h4 { font-size: calc(var(--u) * 17); font-weight: 700; margin: calc(var(--u) * 18) 0 calc(var(--u) * 2); }
.page .due { font-size: calc(var(--u) * 10.5); font-style: italic; color: #444; margin-bottom: calc(var(--u) * 16); }
.page .q { margin-bottom: calc(var(--u) * 14); padding-left: calc(var(--u) * 30); text-indent: calc(var(--u) * -30); }
.page .q b { display: inline-block; width: calc(var(--u) * 30); text-indent: 0; }
.page .scheme { display: block; width: calc(var(--u) * 400); margin: calc(var(--u) * 4) 0 calc(var(--u) * 16) calc(var(--u) * 30); overflow: visible; }
.page .scheme path, .page .scheme line { fill: none; stroke: #161616; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.page .scheme text { font-family: "Times New Roman", Times, serif; font-size: 11px; fill: #161616; }
.page .scheme .small { font-size: 9px; }
.page .work { height: calc(var(--u) * 90); border: .5px dashed #bbb; margin: 0 0 calc(var(--u) * 14) calc(var(--u) * 30); }
/* What you've written so far in the answer box: pencil marks, drawn in by the scene */
.page .work svg { width: 100%; height: 100%; }
.page .work path { fill: none; stroke: #2a4d8f; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Safari, on a video */
.safari { left: calc(var(--u) * 360); top: calc(var(--u) * 78); width: calc(var(--u) * 870); height: calc(var(--u) * 680); background: #0f0f0f; }
.safari .tb { gap: calc(var(--u) * 14); }
.safari .lights { margin-right: calc(var(--u) * 8); }
.nav-arrows { display: flex; gap: calc(var(--u) * 14); }
.nav-arrows svg:last-child { opacity: .4; }
.address {
  position: absolute; left: 50%; top: calc(var(--u) * 11); transform: translateX(-50%);
  width: calc(var(--u) * 380); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 8);
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .09); color: #e5e5ea; font-size: calc(var(--u) * 13);
}
.address svg { position: absolute; right: calc(var(--u) * 10); width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: #8e8e93; }
.tabbar { display: flex; height: calc(var(--u) * 30); background: #1c1c1e; border-bottom: 1px solid #0d0d0d; font-size: calc(var(--u) * 12); color: #8e8e93; }
.tabbar span { flex: 1; display: flex; align-items: center; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 14); border-right: 1px solid #0d0d0d; white-space: nowrap; overflow: hidden; }
.tabbar span i { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: calc(var(--u) * 3); background: #48484a; }
.tabbar .on { background: #2c2c2e; color: #e5e5ea; }
.tabbar .on i { background: #ff0033; }

/* The video site inside it (generic, dark) */
.yt { position: absolute; inset: calc(var(--u) * 83) 0 0; padding: 0 calc(var(--u) * 22); color: #f1f1f1; font-family: var(--mac-font); }
.yt-top { display: flex; align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 46); }
.yt-top .burger { width: calc(var(--u) * 18); height: calc(var(--u) * 12); border-block: 1.5px solid #f1f1f1; position: relative; }
.yt-top .burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid #f1f1f1; transform: translateY(-50%); }
.yt-search { margin: 0 auto; display: flex; width: calc(var(--u) * 360); height: calc(var(--u) * 28); border-radius: 99px; box-shadow: inset 0 0 0 1px #303030; overflow: hidden; font-size: calc(var(--u) * 12); color: #888; }
.yt-search span { flex: 1; display: flex; align-items: center; padding-left: calc(var(--u) * 14); background: #121212; }
.yt-search i { width: calc(var(--u) * 50); background: #222; border-left: 1px solid #303030; }
.yt-top .me { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: linear-gradient(135deg, #7c5a3a, #c08a52); }
.yt-main { display: grid; grid-template-columns: calc(var(--u) * 560) 1fr; gap: calc(var(--u) * 20); margin-top: calc(var(--u) * 8); }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--u) * 10); overflow: hidden; background: #000; }
.player img { width: 100%; height: 100%; object-fit: cover; }
.player .bar { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 30); height: calc(var(--u) * 3); background: rgba(255, 255, 255, .3); }
.player .bar b { display: block; width: calc(var(--vp, .38) * 100%); height: 100%; background: #f00; position: relative; }
.player .bar b::after { content: ""; position: absolute; right: calc(var(--u) * -6); top: 50%; width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #f00; transform: translateY(-50%); }
.player .ctl { position: absolute; left: calc(var(--u) * 14); bottom: calc(var(--u) * 8); display: flex; gap: calc(var(--u) * 14); align-items: center; font-size: calc(var(--u) * 11); }
.player .ctl svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); fill: #fff; }
.vid-title { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 16.5); font-weight: 700; line-height: 1.3; }
.chan { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 12); }
.chan .av { width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%; background: linear-gradient(135deg, #2b5d7a, #8fc0d8); }
.chan small { display: block; color: #aaa; font-size: calc(var(--u) * 10.5); }
.chan .sub-btn { margin-left: calc(var(--u) * 12); padding: calc(var(--u) * 6) calc(var(--u) * 13); border-radius: 99px; background: #f1f1f1; color: #0f0f0f; font-weight: 600; font-size: calc(var(--u) * 11.5); }
.chan .likes { margin-left: auto; padding: calc(var(--u) * 6) calc(var(--u) * 13); border-radius: 99px; background: #272727; font-size: calc(var(--u) * 11.5); }
.next { display: grid; gap: calc(var(--u) * 10); align-content: start; }
.next figure { display: grid; grid-template-columns: calc(var(--u) * 132) 1fr; gap: calc(var(--u) * 9); font-size: calc(var(--u) * 11.5); line-height: 1.3; }
.next img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--u) * 7); }
.next b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.next small { display: block; color: #aaa; font-size: calc(var(--u) * 10.5); margin-top: calc(var(--u) * 3); }

/* The pointer */
.cur { position: absolute; z-index: 8; width: calc(var(--u) * 17); height: auto; left: calc(var(--u) * 520); top: calc(var(--u) * 470); transition: left 1s var(--ease), top 1s var(--ease); filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, .45)); }

/* Driff's pop-up timer (src/plugins/focus/Popup.tsx): Now's ring, 168 across, in a 300 wide
   see-through window at the top right, above everything. Drifting fills it with red like water
   in a jar (Jar.tsx); full, you're away and the disc goes red. A card under it asks things. */
.dpop {
  position: absolute; z-index: 7; top: calc(var(--u) * 30); right: calc(var(--u) * 10); width: calc(var(--pu) * 300);
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--sans); color: #f4ede2; letter-spacing: 0;
}
.dp-disc {
  position: relative; width: calc(var(--pu) * 168); aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: #0a0908; box-shadow: inset 0 0 0 1px #2d2b29, 0 calc(var(--pu) * 6) calc(var(--pu) * 18) rgba(0, 0, 0, .35);
  transition: background .6s var(--ease);
}
.dp-disc > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dp-ring { transform: rotate(-90deg); }
.dp-ring circle { fill: none; stroke-width: 3; }
.dp-ring .track { stroke: rgba(244, 237, 226, .07); }
.dp-ring .arc { stroke: var(--rc, #e6c35c); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ring, .6)); filter: drop-shadow(0 0 3px var(--rc, #e6c35c)); transition: stroke .6s; }
/* The water: a level (--jar, 0 to 1) and two waves, a little out of step */
.dp-jar .lvl { transform: translateY(calc((164 - var(--jar, 0) * 160) * 1px)); transition: transform .9s var(--ease); }
.dp-jar path { animation: wave 2.7s linear infinite; }
.dp-jar .w2 { fill: rgba(255, 69, 58, .28); animation-duration: 3.7s; animation-direction: reverse; translate: 0 -2px; }
.dp-jar .w1 { fill: rgba(255, 69, 58, .45); }
.dpop.away .dp-jar .w1 { fill: rgba(255, 69, 58, .62); }
@keyframes wave { to { transform: translateX(-117.6px); } }
.dp-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dp-head { display: flex; align-items: center; gap: calc(var(--pu) * 5); font-size: calc(var(--pu) * 9); letter-spacing: .14em; text-transform: uppercase; color: #8c8377; }
.dp-dot { width: calc(var(--pu) * 5); height: calc(var(--pu) * 5); border-radius: 50%; background: var(--good); transition: opacity .4s; }
.dp-area { margin-top: calc(var(--pu) * 3); font-size: calc(var(--pu) * 11); color: #8c8377; }
.dp-clock { margin-top: calc(var(--pu) * 1); font-size: calc(var(--pu) * 30); font-weight: 200; letter-spacing: -.035em; line-height: 1.15; font-variant-numeric: tabular-nums; transition: color .4s; }
.dp-note { margin-top: calc(var(--pu) * 1); font-size: calc(var(--pu) * 10); color: #5d564d; transition: color .4s; }
.dpop.off .dp-dot { opacity: 0; }
.dpop.away .dp-disc { background: #140504; }
.dpop.away .dp-head, .dpop.away .dp-note { color: var(--alert); }
.dpop.away .dp-clock { color: #5d564d; }
/* Its cards: one at a time, under the ring */
.dp-cards { display: grid; align-self: stretch; margin-top: calc(var(--pu) * 8); }
.dp-card {
  grid-area: 1 / 1; align-self: start; padding: calc(var(--pu) * 12); border-radius: calc(var(--pu) * 16); text-align: center;
  background: #0a0908; box-shadow: inset 0 0 0 1px #2d2b29, 0 calc(var(--pu) * 6) calc(var(--pu) * 18) rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(calc(var(--pu) * -6)); transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.dp-card.on { opacity: 1; transform: none; }
.dp-card.red { box-shadow: inset 0 0 0 1px rgba(255, 69, 58, .45), 0 calc(var(--pu) * 6) calc(var(--pu) * 18) rgba(0, 0, 0, .3); }
.dp-text { font-size: calc(var(--pu) * 14); line-height: 1.35; }
.dp-sub { margin-top: calc(var(--pu) * 2); font-size: calc(var(--pu) * 13); line-height: 1.35; color: #8c8377; }
.dp-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--pu) * 6); margin-top: calc(var(--pu) * 10); }
.dp-acts span { display: inline-flex; align-items: center; height: calc(var(--pu) * 28); padding: 0 calc(var(--pu) * 12); border-radius: calc(var(--pu) * 14); box-shadow: inset 0 0 0 1px #2d2b29; font-size: calc(var(--pu) * 12); white-space: nowrap; }
.dp-acts .solid { background: #f4ede2; color: #0a0908; box-shadow: none; }
/* The tutor's chat */
.dp-chat { text-align: left; }
.dp-chat .dp-what { font-size: calc(var(--pu) * 9); letter-spacing: .14em; text-transform: uppercase; color: #8c8377; }
.dp-chat p { margin-top: calc(var(--pu) * 8); font-size: calc(var(--pu) * 13); line-height: 1.38; }
.dp-chat .mine { margin-left: calc(var(--pu) * 32); text-align: right; color: #8c8377; }
.dp-input { display: flex; align-items: center; height: calc(var(--pu) * 32); margin-top: calc(var(--pu) * 10); padding: 0 calc(var(--pu) * 12); border-radius: calc(var(--pu) * 16); box-shadow: inset 0 0 0 1px #2d2b29; font-size: calc(var(--pu) * 13); color: #5d564d; }
.dp-tools { display: flex; justify-content: space-between; margin-top: calc(var(--pu) * 8); font-size: calc(var(--pu) * 12); color: #8c8377; }

/* Away: each screen flashes red, with a line in the middle (Overlay.tsx) */
.red-screen {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease);
}
.red-screen::before {
  content: ""; position: absolute; inset: 0; background: rgba(255, 40, 30, .16);
  box-shadow: inset 0 0 calc(var(--u) * 220) calc(var(--u) * 45) rgba(255, 59, 48, .62);
  animation: flash 1.1s ease-in-out infinite alternate;
}
@keyframes flash { from { opacity: .35; } }
.red-screen.on { opacity: 1; }
.red-card { position: relative; max-width: calc(var(--u) * 640); padding: calc(var(--u) * 28) calc(var(--u) * 36); border-radius: calc(var(--u) * 28); background: rgba(0, 0, 0, .72); text-align: center; font-family: var(--sans); color: #fff; }
.red-card b { display: block; font-size: calc(var(--u) * 40); font-weight: 300; letter-spacing: -.012em; line-height: 1.15; }
.red-card span { display: block; margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 19); color: rgba(255, 255, 255, .8); }
.red-card small { display: block; margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 13); color: rgba(255, 140, 130, .9); }

@media (max-width: 700px) {
  /* The desktop gets small on a phone, so the pop-up sits under it at a size you can read. */
  .mac { --pu: calc(min(100cqw - 8px, 330px) / 300); padding-bottom: calc(var(--pu) * 320); }
  .dpop { top: calc(100cqw * .625 + 14px); right: auto; left: 50%; transform: translateX(-50%); }
  .cur { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cur, .dp-card, .dp-jar .lvl, .red-screen { transition-duration: .01s !important; }
  .dp-jar path, .red-screen::before { animation: none; }
}