/* The projects place is a computer: a small Linux desktop in the site's own palette. It boots, the six
   projects are its apps, a note on the desktop briefs them, and the wheel walks through the apps. */

.view--projects { overflow: hidden; padding: 0; }
.view--projects .view__back { display: none; }
.os { position: absolute; inset: 0; background: #05070d; color: #e9e6df; font-family: var(--sans); overflow: hidden; user-select: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.os pre { background: none; border: 0; border-radius: 0; }

/* Boot */
.os__boot { position: absolute; inset: 0; z-index: 3; background: linear-gradient(160deg, #0d1226, #070a15 60%, #05070d); padding: 44px 52px; font: 14px/1.6 var(--mono); color: #9aa89a; overflow: hidden; }
.os__log { margin: 0; white-space: pre-wrap; }
.os__log .t { color: #5c6470; }
.os__log .ok { color: #7fd68a; }
.os__log .em { color: #ffb15c; }
.os__splash { position: absolute; inset: 0; display: grid; place-items: center; background: #05070d; opacity: 0; transition: opacity 260ms var(--ease-out); }
.os__splash.is-on { opacity: 1; }
.os__splash > div { display: grid; justify-items: center; gap: 18px; }
.os__mark { font-family: "Caveat Brush", "Permanent Marker", cursive; font-size: 2.25rem; color: #fff3dc; letter-spacing: 0.02em; }
.os__bar { width: 220px; height: 3px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }
.os__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 900ms var(--ease-in-out); }
.os__boot.is-done { opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease-out); }
.os__skip { position: absolute; right: 28px; bottom: 22px; font: 11px var(--mono); letter-spacing: 0.16em; color: #5c6470; text-transform: uppercase; }

/* Screen */
.os__screen { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease-out);
  background:
    radial-gradient(60% 50% at 78% 22%, rgba(255, 158, 94, 0.16) 0%, rgba(255, 158, 94, 0) 60%),
    radial-gradient(50% 60% at 12% 90%, rgba(92, 147, 245, 0.1) 0%, rgba(92, 147, 245, 0) 60%),
    linear-gradient(160deg, #0d1226 0%, #070a15 55%, #05070d 100%); }
.os__screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 0.6px, transparent 0.7px); background-size: 28px 28px; }
.os.is-up .os__screen { opacity: 1; }
.os__top { position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px;
  font: 500 12px var(--mono); letter-spacing: 0.06em; color: #cfd3dc; background: rgba(5, 7, 13, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.os__top .l { display: flex; gap: 18px; align-items: center; }
.os__top .r { display: flex; gap: 16px; justify-content: end; align-items: center; }
.os__brand { color: var(--accent); font-weight: 500; }
.os__top button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 4px 8px; border-radius: 5px; }
.os__top button:hover { background: rgba(255, 255, 255, 0.08); }

/* Dock */
.os__dock { position: absolute; left: 12px; top: 54px; z-index: 30; display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(8, 10, 20, 0.62); border: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.os__dock button { position: relative; width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; border-radius: 11px; cursor: pointer; color: #e9e6df; }
.os__dock button:hover, .os__dock button:focus-visible { background: rgba(255, 255, 255, 0.09); }
.os__dock button.is-running::after { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 14px; border-radius: 2px; background: var(--c, var(--accent)); transform: translateY(-50%); }
.os__dock button[data-tip]::before { content: attr(data-tip); position: absolute; left: 58px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 6px; background: #1a2030; color: #fff; font: 12px var(--sans); opacity: 0; pointer-events: none; transition: opacity 150ms; }
.os__dock button:hover::before { opacity: 1; }
.os__dock hr { width: 32px; margin: 2px auto; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.os__glyph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 20%, #10162b); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.os__glyph svg { width: 20px; height: 20px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Desktop icons */
.os__icons { position: absolute; left: 96px; top: 56px; z-index: 10; display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 14px 6px; }
.os__icon { width: 104px; padding: 10px 4px 8px; background: none; border: 1px solid transparent; border-radius: 10px; color: #e9e6df; font: 12.5px var(--sans); cursor: pointer; display: grid; justify-items: center; gap: 8px; }
.os__icon:hover, .os__icon:focus-visible { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); outline: none; }
.os__icon .os__glyph { width: 54px; height: 54px; border-radius: 15px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.os__icon .os__glyph svg { width: 28px; height: 28px; }
.os__icon span:last-child { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.os__icons .os__icon { animation: os-pop 500ms var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes os-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.os:not(.is-up) .os__icons .os__icon { animation: none; opacity: 0; }

/* Windows */
.win { position: absolute; z-index: 20; width: min(1120px, calc(100% - 140px)); height: min(680px, calc(100% - 90px)); display: grid; grid-template-rows: 38px minmax(0, 1fr); overflow: hidden;
  background: #0e1220; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: scale(0.97) translateY(8px); transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out); pointer-events: none; }
.win.is-open { opacity: 1; transform: none; pointer-events: auto; }
.win.is-front { border-color: rgba(255, 255, 255, 0.18); }
.win__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 8px 0 14px; background: #151a2a; border-bottom: 1px solid rgba(255, 255, 255, 0.06); cursor: grab; }
.win__bar:active { cursor: grabbing; }
.win__title { text-align: center; font: 500 13px var(--sans); color: #dfe3ea; }
.win__app { font: 11px var(--mono); letter-spacing: 0.12em; color: #8a93a6; text-transform: uppercase; }
.win__ctl { display: flex; justify-content: end; gap: 4px; }
.win__ctl button { width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: #aeb5c4; cursor: pointer; font: 14px var(--sans); }
.win__ctl button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.win__ctl .x:hover { background: #c94a3d; color: #fff; }
.win__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.win__shot { position: relative; margin: 0; background: #080a12; overflow: hidden; }
.win__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity 260ms var(--ease-out); }
.win__shot img[hidden] { display: block; opacity: 0; pointer-events: none; }
.win__text { padding: 26px 26px 24px; overflow: auto; border-left: 1px solid rgba(255, 255, 255, 0.06); }
.win__tabs { display: flex; gap: 4px; margin-bottom: 18px; }
.win__tabs button { background: none; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: #aeb5c4; font: 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; cursor: pointer; }
.win__tabs button[aria-selected="true"] { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.win__eyebrow { font: 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8a93a6; margin: 0 0 10px; }
.win__name { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0 0 10px; }
.win__line { font-size: 1.0625rem; line-height: 1.35; color: #e9e6df; margin: 0 0 14px; }
.win__stat { margin: 0 0 16px; display: grid; gap: 2px; }
.win__stat b { font-size: 2rem; font-weight: 300; line-height: 1; color: var(--c); letter-spacing: -0.02em; }
.win__stat span { font: 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8a93a6; }
.win__copy { font-size: 0.9375rem; line-height: 1.55; color: #b8bfcc; margin: 0 0 18px; }
.win__links { display: flex; gap: 10px; flex-wrap: wrap; }
.win__links a { text-decoration: none; font: 500 13px var(--sans); padding: 9px 14px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; }
.win__links a:first-child { background: var(--c); border-color: var(--c); color: #05070d; }
.win__links a:hover { border-color: var(--c); }
.win__src { font: 11px var(--mono); color: #6f788a; margin: 16px 0 0; }
.win__src code { color: #aeb5c4; background: none; padding: 0; }

.win--note { width: 360px; height: 470px; grid-template-rows: 38px minmax(0, 1fr); background: #1a1712; }
.win--note .win__bar { background: #241f16; }
.note { padding: 18px 20px; overflow: auto; font: 14px/1.5 var(--sans); color: #efe6d2; }
.note h3 { margin: 0 0 4px; font: 500 1.125rem var(--sans); }
.note p { margin: 0 0 12px; color: #c9bfa8; font-size: 13px; }
.note ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.note button { width: 100%; text-align: left; display: grid; grid-template-columns: 2rem 1fr auto; gap: 8px; align-items: baseline; padding: 7px 8px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.note button:hover { background: rgba(255, 255, 255, 0.07); }
.note button i { font: 11px var(--mono); color: #a89a7c; font-style: normal; }
.note button b { font-weight: 500; }
.note button small { font: 11px var(--mono); color: var(--accent); white-space: nowrap; }
.note .note__line { grid-column: 2 / -1; color: #b3a98f; font-size: 12px; line-height: 1.35; }

.win--term { width: min(820px, calc(100% - 140px)); height: min(520px, calc(100% - 120px)); background: #0a0d16; }
.term { margin: 0; padding: 16px 20px; overflow: auto; font: 13px/1.5 var(--mono); color: #d9dfe9; white-space: pre-wrap; }
.term .p { color: #7fd68a; }
.term .c { color: #6f788a; }

.os__hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 10; font: 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #7a8294; pointer-events: none; transition: opacity 400ms; }
.os__hint kbd { font: inherit; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; padding: 1px 6px; margin-right: 4px; }
.os.has-open .os__hint { opacity: 0; }

@media (max-width: 760px) {
  .os__icons { left: 76px; top: 48px; grid-template-rows: repeat(4, auto); gap: 6px 0; }
  .os__icon { width: 84px; }
  .os__dock { top: 46px; left: 8px; padding: 6px; }
  .os__dock button { width: 42px; height: 42px; }
  .win { width: calc(100% - 12px); height: calc(100% - 46px); left: 6px !important; top: 40px !important; }
  .win__body { grid-template-columns: 1fr; grid-template-rows: 38% 1fr; }
  .win__text { padding: 18px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
  .win--note { width: calc(100% - 12px); height: calc(100% - 46px); }
  .os__hint, .os__top .r { display: none; }
}
@media (prefers-reduced-motion: reduce) { .os__icons .os__icon { animation: none; } .win { transition: none; } }

/* The wallpaper is the site's own painting of this place, held far back. */
.os__screen { background: linear-gradient(160deg, rgba(8, 12, 26, 0.86), rgba(5, 7, 13, 0.9) 60%, rgba(5, 7, 13, 0.94)), url(/media/scenes/projects-v2.webp) center / cover no-repeat #05070d; }
.os__top .l button[data-project-back] { color: #cfd3dc; }
@media (max-width: 760px) {
  .os__top { font-size: 11px; padding: 0 10px; grid-template-columns: auto 1fr; }
  .os__top .l { gap: 8px; white-space: nowrap; }
  .os__top .l > span:not(.os__brand) { display: none; }
  .os__top .os__clock { justify-self: end; }
}

/* The Overview capture is shown whole, never cropped, on a soft plate */
.win__shot { display: grid; place-items: center; background: radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%), #080a12; }
.win__shot img[data-tab="overview"] { position: static; width: calc(100% - 32px); height: auto; max-height: calc(100% - 32px); object-fit: contain; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); background: #0b0e18; }
.win__shot img[data-tab="overview"][hidden] { display: none; }
@media (max-width: 760px) {
  .os.has-open .os__dock { opacity: 0; pointer-events: none; transition: opacity 200ms; }
}

/* A case study as a window: the page's own layout inside a scrolling frame */
.win--study { width: min(1180px, calc(100% - 60px)); height: calc(100% - 64px); grid-template-rows: 38px minmax(0, 1fr); background: var(--bg); }
.win__scroll { overflow: auto; min-height: 0; outline: none; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.win--study .study { max-width: none; padding: 32px 44px 72px; }
.win--study .study__head h1 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); }
.win--study .study__capture img { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }
.win--study .study__grid { grid-template-columns: 170px minmax(0, 1fr); gap: 44px; margin-top: 56px; }
.win--study .study__rail { top: 12px; }
.win--study figure.diagram--arch { width: 100%; margin-left: 0; }
.win--study .diagram__stage { height: clamp(340px, 40vw, 560px); }
@media (max-width: 960px) { .win--study .study__grid { grid-template-columns: 1fr; gap: 24px; } .win--study .study__rail { position: static; display: flex; flex-wrap: wrap; gap: 2px 16px; } .win--study .study__rail a { border-left: 0; padding: 6px 0; } }
@media (max-width: 760px) { .win--study .study { padding: 20px 16px 48px; } .win--study .diagram__stage { height: auto; } .win--study .diagram__stage .arch { position: static; } }
@media (max-width: 760px) { .win--study { width: calc(100% - 12px); height: calc(100% - 46px); } }

/* The lock screen: what the painted laptop shows before login, in viewport units so it reads at any dock size */
.os__lock { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-rows: auto 1fr auto auto auto; padding: 3.2vw 4.2vw 3.6vw; color: #dfe8f2; opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-out), filter 260ms, box-shadow 260ms;
  background: radial-gradient(70% 60% at 30% 20%, rgba(92, 147, 245, 0.22), transparent 60%), radial-gradient(60% 50% at 80% 90%, rgba(255, 158, 94, 0.14), transparent 60%), linear-gradient(160deg, #0d1226, #070a15 60%, #05070d);
  box-shadow: inset 0 0 0 1px rgba(137, 231, 255, 0.12), inset 0 0 12vw rgba(0, 0, 0, 0.6); }
.os.is-locked .os__lock { opacity: 1; }
.os:not(.is-locked) .os__lock { transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); transform: scale(1.02); }
.os__lock-os { font: 500 1.35vw/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #7a8ca3; }
.os__lock-brand { align-self: center; font: 400 8.4vw/1 "Caveat Brush", "Permanent Marker", cursive; color: #fff3dc; text-shadow: 0 0 3vw rgba(255, 158, 94, 0.35); }
.os__lock-prompt { margin: 0; font: 500 2.1vw/1.2 var(--mono); color: #dfe8f2; }
.os__lock-prompt .p { color: #7fd68a; } .os__lock-prompt .c { color: #7fd68a; } .os__lock-prompt b { font-weight: 500; }
.os__lock-prompt i { display: inline-block; width: 0.6em; height: 1.05em; margin-left: 0.15em; vertical-align: -0.15em; background: #dfe8f2; animation: os-cursor 1.05s steps(2) infinite; }
@keyframes os-cursor { 50% { opacity: 0; } }
.os__lock-go { margin: 0.4vw 0 0; font: 500 1.7vw/1.3 var(--mono); color: #b9e9ff; opacity: 0; transform: translateY(0.4vw); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.os.is-going .os__lock-go { opacity: 1; transform: none; }
.os.is-going .os__lock-prompt i { animation: none; opacity: 0; }
.os.is-going .os__lock-hint { opacity: 0; }
.os__lock-hint { margin-top: 1vw; font: 500 1.5vw/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #89e7ff; transition: opacity 200ms; }

/* The wallpaper: the window of the site's own painting, held bright, drifting slowly, leaning with the pointer */
.os__screen { background: transparent; }
.os__screen::before { display: none; }
.os__wall { position: absolute; inset: -3%; z-index: 0; overflow: hidden; opacity: 0; transition: opacity 900ms var(--ease-out); }
.os.is-up .os__wall { opacity: 1; }
.os__wall img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 80% 22%; transform: scale(1.5); transform-origin: 80% 22%; translate: calc(var(--wx, 0) * -14px) calc(var(--wy, 0) * -10px); transition: translate 900ms var(--ease-out); animation: os-drift 80s ease-in-out infinite alternate; filter: saturate(1.08) brightness(0.92); }
@keyframes os-drift { from { transform: scale(1.5); } to { transform: scale(1.57) translate(-1%, 0.7%); } }
.os__wall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 7, 13, 0.82), rgba(5, 7, 13, 0.42) 32%, rgba(5, 7, 13, 0.1) 58%, rgba(5, 7, 13, 0.34)), linear-gradient(180deg, rgba(5, 7, 13, 0.6), transparent 22%, transparent 76%, rgba(5, 7, 13, 0.55)); }
.os__boot { z-index: 4; }
.os__screen { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .os__wall img { animation: none; transition: none; translate: 0 0; } .os__lock-prompt i { animation: none; } }

/* The boot: the mark inks in, a bar, a ledger of the six numbers */
.os__boot { display: grid; place-items: center; padding: 0; }
.os__boot-inner { display: grid; justify-items: center; gap: 22px; width: min(560px, 82vw); }
.os__mark { font: 400 clamp(3.4rem, 7.5vw, 6rem)/1 "Caveat Brush", "Permanent Marker", cursive; letter-spacing: 0.01em; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #fff3dc, #ffb884) no-repeat 0 0 / 0% 100%, linear-gradient(rgba(255, 243, 220, 0.14), rgba(255, 243, 220, 0.14)); -webkit-background-clip: text; background-clip: text;
  transition: background-size 1100ms var(--ease-out); text-shadow: none; }
.os__boot.is-ink .os__mark { background-size: 100% 100%, 100% 100%; }
.os__bar { width: 320px; height: 2px; }
.os__bar i { transition: width 180ms var(--ease-out); }
.os__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; height: 6.2em; width: 100%; align-content: end; overflow: hidden; font: 12px/1.3 var(--mono); letter-spacing: 0.04em; color: #6f788a; text-align: center; }
.os__steps li { animation: os-step 260ms var(--ease-out) both; }
.os__steps li::before { content: "✓  "; color: #7fd68a; }
.os__steps li:last-child { color: #dfe3ea; }
@keyframes os-step { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.os__boot.is-done { transition: opacity 600ms var(--ease-out); }

/* A toast, one at a time */
.os__toast { position: absolute; left: 50%; bottom: 26px; z-index: 60; transform: translate(-50%, 16px); padding: 11px 16px; border-radius: 10px; background: rgba(12, 16, 28, 0.86); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: #e9e6df; font: 13px/1.3 var(--sans); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); white-space: nowrap; max-width: calc(100% - 40px); text-overflow: ellipsis; overflow: hidden; }
.os__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* The terminal: a real prompt */
.term { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; padding: 14px 18px 12px; box-sizing: border-box; font: 13px/1.5 var(--mono); color: #d9dfe9; outline: none; }
.term__out { margin: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.term__out .err { color: #ff8a80; } .term__out .ok { color: #7fd68a; }
.term__line { display: flex; align-items: baseline; gap: 0; margin-top: 6px; white-space: pre; }
.term__in { flex: 1; min-width: 0; margin-left: 0.5ch; border: 0; background: none; color: #d9dfe9; font: inherit; outline: none; caret-color: #7fd68a; padding: 0; }
.term .p { color: #7fd68a; } .term .c { color: #6f788a; }

/* About this computer */
.win--about { width: min(460px, calc(100% - 40px)); height: auto; grid-template-rows: 38px auto; }
.about { padding: 24px 26px 22px; outline: none; }
.about__mark { display: block; font: 400 2.6rem/1 "Caveat Brush", "Permanent Marker", cursive; color: #fff3dc; margin-bottom: 6px; }
.about__ver { margin: 0 0 16px; font: 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8a93a6; }
.about__facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 16px; font-size: 13px; }
.about__facts dt { font: 500 11px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8a93a6; }
.about__facts dd { margin: 0; color: #dfe3ea; }
.about__hint { margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12.5px; color: #8a93a6; }
.about__hint code { background: rgba(255, 255, 255, 0.08); color: #dfe3ea; }
.os__top .os__brand { background: none; border: 0; padding: 4px 6px; margin-left: -6px; border-radius: 5px; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; }
.os__top .os__brand:hover { background: rgba(255, 255, 255, 0.08); }

/* Icons with a life of their own on hover */
.os__icon .os__glyph { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.os__icon:hover .os__glyph, .os__icon:focus-visible .os__glyph { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.os__icon[data-open="pulse"]:hover svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: os-draw 900ms var(--ease-out) forwards; }
.os__icon[data-open="flowos"]:hover svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: os-draw 800ms var(--ease-out) forwards; }
.os__icon[data-open="xyzzy"]:hover svg path:last-child { stroke-dasharray: 24; stroke-dashoffset: 24; animation: os-draw 600ms var(--ease-out) 120ms forwards; }
.os__icon[data-open="terminal"]:hover svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: os-draw 700ms var(--ease-out) forwards; }
.os__icon[data-open="minigoogle"]:hover svg { animation: os-sweep 800ms var(--ease-in-out); transform-origin: 44% 44%; }
.os__icon[data-open="notifly"]:hover svg { animation: os-ring 800ms var(--ease-in-out); transform-origin: 50% 12%; }
.os__icon[data-open="nexus"]:hover svg { animation: os-orbit 1000ms var(--ease-in-out); transform-origin: 50% 50%; }
.os__icon[data-open="note"]:hover svg path:last-child { stroke-dasharray: 30; stroke-dashoffset: 30; animation: os-draw 700ms var(--ease-out) forwards; }
@keyframes os-draw { to { stroke-dashoffset: 0; } }
@keyframes os-sweep { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-14deg); } 70% { transform: rotate(10deg); } }
@keyframes os-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 45% { transform: rotate(14deg); } 70% { transform: rotate(-8deg); } }
@keyframes os-orbit { to { transform: rotate(180deg); } }
.os.is-jump .os__icons .os__icon { animation: os-jump 700ms var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes os-jump { 0%, 100% { transform: none; } 40% { transform: translateY(-14px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .os__icon:hover svg, .os__icon:hover svg path, .os.is-jump .os__icon, .os__steps li { animation: none; } .os__mark { transition: none; } }
.os.is-locked .os__toast { opacity: 0; transition: none; }

/* Full window */
.win.is-max { left: 0 !important; top: 34px !important; width: 100% !important; height: calc(100% - 34px) !important; border-radius: 0; }
.win.is-max .win__bar { cursor: default; }
.win__ctl .f { font-size: 12px; }
.win__ctl .f:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.win--study.is-max { height: calc(100% - 34px) !important; }
@media (max-width: 760px) { .win__ctl .f { display: none; } }
.os__dock { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.os.has-max .os__dock { opacity: 0; transform: translateX(-24px); pointer-events: none; }