:root { --radius-surface:24px; --radius-control:14px; --radius-segment:18px; --radius-round:50%; }
:root { color-scheme: dark; --ink:#e3e7f0; --muted:#9baac2; --surface:#10192a; --line:rgba(255,255,255,.16); --surface-shadow:0 16px 44px #0000001c; --focus-ring:#a9c8f2; --selected:#e4ecff; --selected-ink:#132037; --shadow:0 24px 65px #0005,0 4px 12px #0003; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:#04060c; color:var(--ink); -webkit-font-smoothing:antialiased; }
:root[data-theme="water"] { color-scheme:light; --ink:#173c4a; --muted:#294956; --surface:#f3ffff94; --line:rgba(23,60,74,.18); --surface-shadow:0 16px 44px #18485412; --focus-ring:#245e6b; --selected:#245e6b; --selected-ink:#fff; --shadow:0 24px 65px #22616c26,0 4px 12px #22616c12; background:#c3e9e9; }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
button:focus-visible { outline:3px solid #5e9bae; outline-offset:6px; }
#sky { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; background:radial-gradient(ellipse at 62% 42%,#0a1020 0%,#060a13 37%,#04060c 80%); }
[data-theme="water"] #sky { background:radial-gradient(ellipse at 23% -12%,#f3fffaee,transparent 58%),conic-gradient(from 154deg at 24% -18%,transparent 0deg,#ffffff45 7deg,transparent 14deg,#ffffff28 21deg,transparent 30deg,#ffffff38 37deg,transparent 44deg),linear-gradient(165deg,#d7f2ec 0%,#b1e2e3 42%,#80c3d1 100%); }
.preview { position:relative; min-height:100svh; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px clamp(24px,4vw,56px); }
.wordmark { font-size:24px; font-weight:650; letter-spacing:-1px; }.wordmark span { color:#7b99b2; }
.controls { display:flex; align-items:center; gap:12px; }
.themes { display:flex; padding:4px; border:1px solid var(--line); background:var(--surface); border-radius:99px; }
.themes button { min-height:40px; min-width:72px; border:0; padding:8px 16px; background:transparent; border-radius:99px; font-size:13px; }
.themes button[aria-pressed="true"] { background:var(--selected); color:var(--selected-ink); }

.scene { width:min(1080px,100%); margin:auto; padding:36px 52px 50px; }
.intro { margin-bottom:48px; }.eyebrow { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
h1 { margin:0; font-size:clamp(28px,3.2vw,42px); line-height:1.15; font-weight:450; letter-spacing:-.04em; }
.works { display:grid; grid-template-columns:1fr .84fr; align-items:start; gap:clamp(64px,12vw,160px); }
.work { display:block; width:100%; padding:0; border:0; background:transparent; text-align:left;  transition:transform 240ms ease-out; }
.work-space { margin-top:-118px; }
.panel { display:block; position:relative; width:100%; overflow:hidden; border-radius:5%; box-shadow:var(--shadow); outline:1px solid #ffffff18; }
[data-theme="water"] .panel { outline-color:#00000018; }
.panel-cities { aspect-ratio:984 / 940; background:#f8f5fb; }
.panel-space { aspect-ratio:984 / 920; background:#101111; }
.panel img { position:absolute; width:109.7561%; height:auto; max-width:none; left:-4.87805%; pointer-events:none; user-select:none; }
.panel-cities img { top:-59.57447%; }
.panel-space img { top:-61.63043%; }
.work-label { display:flex; align-items:center; justify-content:space-between; padding:16px 4px 0; gap:16px; font-size:13px; font-weight:500; color:var(--muted); }
.work-label>span:last-child { font-size:21px; }
@media (hover:hover) { .work:hover { transform:translateY(-6px); }.work:hover .work-label { color:var(--ink); } }
footer { display:flex; justify-content:space-between; gap:20px; padding:20px clamp(24px,4vw,56px) 28px; color:var(--muted); font-size:11px; }footer p { margin:0; }
dialog { width:min(580px,calc(100% - 32px)); max-height:90svh; border:1px solid var(--line); border-radius:24px; padding:24px; color:var(--ink); background:var(--surface); background-color:light-dark(#eaf6f6,#0f1726); box-shadow:var(--shadow); }
dialog::backdrop { background:#030a16b8; backdrop-filter:blur(12px); }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }h2 { font-size:20px; font-weight:500; margin:0; }.close { border:1px solid var(--line); border-radius:50%; background:transparent; width:44px; height:44px; font-size:27px; }
.prototype-note { font-size:13px; line-height:1.6; color:var(--muted); margin:20px 0 0; }
@media (min-width:1440px) { .scene { width:1180px; } }
@media (max-width:850px) { .scene { padding:32px; }.works { gap:50px; }.work-space { margin-top:-48px; }.intro { margin-bottom:50px; } }
@media (max-width:620px) { .topbar { padding:24px; align-items:flex-start; flex-wrap:wrap; }.controls { gap:8px; }.themes button { min-width:60px; padding:8px 12px; }.scene { padding:26px 32px 48px; }.intro { margin-bottom:38px; }.works { grid-template-columns:1fr; gap:42px; }.work { max-width:370px; }.work-cities { margin-left:0; }.work-space { margin-top:0; margin-left:auto; width:90%; }.work-label { font-size:12px; }footer { flex-direction:column; gap:10px; }.wordmark { flex-basis:100%; } }
@media (prefers-reduced-motion:reduce) { .work { transition:none; }.work:hover { transform:none; } }
[data-paused="true"] .work { transition:none; }[data-paused="true"] .work:hover { transform:none; }

/* Glass is on the panel surface, never global opacity on its contents. */
.panel { backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); border:1px solid #ffffff45; box-shadow:inset 0 1px 0 #ffffff80,var(--shadow); isolation:isolate; }
.panel-cities { background:#f8f5fba8; }.panel-cities img { mix-blend-mode:multiply; }
.panel-space { background:#09151bb3; }.panel-space img { mix-blend-mode:screen; }
[data-theme="water"] .panel-space { background:#122c34a8; }
[data-theme="water"] .panel-cities { background:#fbffff60; }
@supports not (backdrop-filter:blur(18px)) { .panel-cities { background:#f8f5fb; }.panel-space { background:#101b22; } }


/* Kazakh showroom navigation and bounded movable gallery. */
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid #5e9bae; outline-offset:6px; border-radius:8px; }
html { scroll-padding-top:24px; }
.wordmark { flex-shrink:0; }
.topbar nav { display:flex; gap:28px; align-items:center; margin-right:auto; margin-left:34px; font-size:13px; color:var(--muted); }
.topbar nav a { display:flex; align-items:center; min-height:44px; }
.topbar nav a:hover { color:var(--ink); }
.scene { margin:28px auto 0; }
.intro { margin-bottom:28px; }
.gallery-tools { display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:12px; }
.gallery-tools p { line-height:1.6; max-width:360px; }
#reset-layout { flex-shrink:0; min-height:44px; background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:8px 15px; font-size:12px; }
#reset-layout span { margin-left:8px; }
.works { position:relative; padding:54px 28px 90px; min-height:600px; grid-template-columns:1fr .84fr; gap:100px; align-content:start; }
.work { --dx:0px; --dy:0px; position:relative; transform:translate(var(--dx),var(--dy)); transition:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:auto; cursor:grab; }
.work:hover, [data-paused="true"] .work:hover { transform:translate(var(--dx),var(--dy)); }
.work-space { margin-top:64px; }
.work.is-dragging { cursor:grabbing; }
.work.is-dragging .panel { outline:2px solid #8eb8cf; box-shadow:0 28px 70px #0004; }
.about { width:min(976px,calc(100% - 104px)); margin:24px auto 0; padding:52px 0 72px; display:grid; grid-template-columns:1fr 1.55fr; gap:60px; border-top:1px solid var(--line); scroll-margin-top:24px; }
.about h2 { font-size:clamp(28px,3vw,36px); letter-spacing:-.035em; }
.about-content p { color:var(--muted); font-size:16px; line-height:1.75; margin:0 0 20px; }
.about-content .about-lead { color:var(--ink); font-size:22px; line-height:1.45; }
.socials { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.socials a, .social-pending { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(16px); font-size:12px; }
.socials a:hover { border-color:var(--muted); }
.socials svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.social-pending { color:var(--muted); }.social-pending small { font-size:10px; }
footer { border-top:1px solid var(--line); margin:0 clamp(24px,4vw,56px); padding-inline:0; }
footer a { min-height:44px; display:flex; align-items:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:12px; transform:translateY(-180%); z-index:100; background:var(--selected); color:var(--selected-ink); padding:14px; border-radius:8px; }
.skip-link:focus { transform:none; }
@media (max-width:1050px) { .topbar { flex-wrap:wrap; }.topbar nav { margin-left:auto; margin-right:0; }.controls { margin-left:auto; }.works { gap:50px; min-height:530px; }.about { gap:32px; } }
@media (max-width:620px) { .topbar .wordmark { flex-basis:auto; }.topbar nav { gap:18px; font-size:12px; }.controls { margin:0; width:100%; justify-content:space-between; }.scene { margin-top:8px; padding:20px 24px 0; }.gallery-tools { align-items:flex-start; gap:10px; }.gallery-tools p { font-size:11px; margin:0; max-width:175px; }#reset-layout { font-size:10px; padding-inline:10px; }.works { grid-template-columns:1fr; padding:28px 12px 80px; gap:70px; min-height:870px; }.work { width:92%; max-width:370px; }.work-space { width:86%; margin-top:0; }.about { width:calc(100% - 48px); margin-top:12px; grid-template-columns:1fr; gap:28px; padding:40px 0 44px; }.about-content p { font-size:15px; }.about-content .about-lead { font-size:20px; }.socials { gap:8px; }.socials a,.social-pending { padding:10px 12px; }.social-pending small { display:none; } }


[hidden] { display:none!important; }
.project-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.project-filters button { border:1px solid var(--line); background:var(--surface); color:var(--muted); min-height:44px; padding:10px 18px; border-radius:99px; font-size:13px; }
.project-filters button[aria-pressed="true"] { background:var(--selected); color:var(--selected-ink); border-color:transparent; }
.gallery-tools p { max-width:440px; }
.hold-hint { display:none; }.socials [aria-disabled="true"] { cursor:default; color:var(--muted); }
.empty-projects { grid-column:1/-1; align-self:center; text-align:center; padding:48px 24px; border:1px dashed var(--line); border-radius:24px; background:var(--surface); backdrop-filter:blur(16px); }
.empty-projects>span { display:block; font-size:32px; color:var(--muted); margin-bottom:24px; }
.empty-projects h2 { line-height:1.4; }.empty-projects p { color:var(--muted); line-height:1.6; font-size:14px; }
.works.is-empty { min-height:360px; }
@media (max-width:620px) { .project-filters { gap:6px; }.project-filters button { padding:8px 13px; font-size:12px; }.gallery-tools { display:block; }.gallery-tools p { max-width:none; }.hold-hint { display:block; font-size:10px; margin-top:5px; }.works.is-empty { min-height:340px; padding-inline:0; } }


.screen-tabs { display:flex; gap:6px; padding:4px; background:var(--surface); border:1px solid var(--line); border-radius:99px; }
.screen-tabs button { border:0; border-radius:99px; min-height:42px; padding:10px 18px; color:var(--muted); background:transparent; font-size:13px; white-space:nowrap; }
.screen-tabs button[aria-selected="true"] { color:var(--selected-ink); background:var(--selected); }
.screen-panel:focus-visible { outline:2px solid #5e9bae; outline-offset:4px; }
.preview { min-height:100svh; }

footer { margin-top:auto; }
@media(max-width:620px) { .topbar { gap:18px 10px; }.topbar nav { margin-left:auto; }.screen-tabs { padding:3px; gap:0; }.screen-tabs button { padding:8px 12px; font-size:12px; min-height:40px; } }


.themes { padding:4px; gap:3px; box-shadow:inset 0 1px 0 #ffffff12; }
.themes button { min-width:44px; width:44px; height:40px; padding:9px; display:grid; place-items:center; transition:background 180ms ease-out,color 180ms ease-out; }
.themes svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.themes .tiny-star { stroke-width:1.2; }
.themes button[aria-pressed="true"] { box-shadow:0 1px 5px #00000012,inset 0 1px 0 #ffffff38; }
@media(prefers-reduced-motion:reduce) { .themes button { transition:none; } }


/* Quiet author page: content first, with compact contact controls. */

.about-heading h2 { font-size:clamp(30px,3vw,40px); line-height:1.18; letter-spacing:-.04em; text-wrap:balance; }
.author-line { color:var(--muted); font-size:16px; line-height:1.6; max-width:260px; margin:22px 0 0; }
.about-content p { font-size:16px; line-height:1.8; margin-bottom:22px; }
.about-content .social-intro { font-size:14px; margin-top:30px; margin-bottom:14px; }
.socials { gap:10px; margin-top:0; }
.socials a { width:48px; height:48px; padding:12px; border-radius:15px; color:var(--ink); }
.cooperation { margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }
.cooperation h3 { font-size:22px; font-weight:500; letter-spacing:-.025em; margin:0 0 14px; }
.contact-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.contact-links a { display:flex; align-items:center; gap:10px; min-height:48px; padding:12px 15px; border:1px solid var(--line); border-radius:15px; background:var(--surface); backdrop-filter:blur(16px); font-size:13px; }
.contact-links svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.contact-links [aria-disabled="true"] { color:var(--muted); cursor:default; }
@media(max-width:620px) { .about-heading h2 { font-size:32px; }.author-line { margin-top:16px; max-width:none; }.about-content p { font-size:15px; line-height:1.75; }.cooperation { margin-top:32px; }.contact-links { gap:8px; }.contact-links a { padding:11px 12px; font-size:12px; } }


/* Independent floating controls and content blocks share the card physics. */
.float-item { --dx:0px; --dy:0px; position:relative; transform:translate(var(--dx),var(--dy)); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:auto; }
.float-item.is-dragging { cursor:grabbing; }
.intro.float-item,.about-heading.float-item,.about-content>p.float-item,.cooperation>h3.float-item,.cooperation>p.float-item { cursor:grab; }
.intro.float-item.is-dragging,.about-heading.float-item.is-dragging,.about-content>p.float-item.is-dragging { cursor:grabbing; }
.float-item.is-dragging:not(.work) { filter:drop-shadow(0 8px 12px #00000012); }
.wordmark.float-item { display:inline-block; }

.about-heading.float-item { align-self:start; }
.intro.float-item { width:fit-content; max-width:100%; }

/* Header: balanced desktop row, two intentional rows on small screens. */
.topbar {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"brand sections appearance";
  align-items:center;
  gap:20px;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:24px clamp(24px,4vw,56px);
}
.topbar .wordmark { grid-area:brand; justify-self:start; min-height:44px; display:flex; align-items:center; }
.topbar nav { grid-area:sections; justify-self:center; margin:0; display:block; }
.topbar .controls { grid-area:appearance; justify-self:end; margin:0; width:auto; gap:0; }
.topbar .screen-tabs { gap:4px; padding:4px; }
.topbar .screen-tabs button { min-height:44px; padding:10px 22px; font-size:13px; }
.topbar .themes { padding:4px; gap:3px; }
.topbar .themes button { width:44px; min-width:44px; height:44px; min-height:44px; padding:10px; }
@media(max-width:700px) {
  .topbar {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand appearance" "sections sections";
    gap:14px 20px;
    padding:18px 24px 16px;
  }
  .topbar .wordmark { font-size:23px; }
  .topbar nav { width:100%; }
  .topbar .screen-tabs { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .topbar .screen-tabs button { min-width:0; padding-inline:14px; }
}
@media(max-width:350px) {
  .topbar { padding-inline:18px; gap:12px; }
  .topbar .wordmark { font-size:21px; }
}

/* Oqýlym: a code-native reading motif in its own emerald glass surface. */
.panel-oqylym { --oq-ink:#e2faf0; display:flex; flex-direction:column; padding:26px; border-radius:24px; color:var(--oq-ink); background:radial-gradient(ellipse at 16% 0%,#a6f5ca20,transparent 60%),linear-gradient(135deg,#1e685b99,#092c33bf); border:1px solid #c3ffe43d; min-height:415px; overflow:hidden; }
.oq-top { display:flex; align-items:center; justify-content:space-between; }
.oq-category { font-size:10px; letter-spacing:.13em; text-transform:uppercase; padding:6px 10px; border-radius:99px; border:1px solid #c4f3df38; color:#c5eade; }
.oq-open { font-size:21px; line-height:1; color:#b7e9d7; }
.oq-brand { display:block; margin-top:22px; font-size:clamp(42px,4.7vw,62px); line-height:1; letter-spacing:-.065em; font-weight:620; }
.oq-brand-dot { display:none; }
.oq-tagline { display:block; font-size:14px; color:#a6d4c4; margin-top:10px; letter-spacing:.01em; }
.oq-pages { display:block; position:relative; height:193px; margin:14px -4px 2px; }
.oq-sheet { position:absolute; display:flex; flex-direction:column; border-radius:16px; border:1px solid #d6ffee66; box-shadow:0 10px 32px #00252526,inset 0 1px 0 #fff4; }
.oq-sheet-back { width:116px; height:139px; top:22px; left:52%; transform:rotate(13deg); background:linear-gradient(140deg,#b5efe430,#dbfff00d); backdrop-filter:blur(8px); }
.oq-lines { padding:32px 18px; display:grid; gap:12px; }.oq-lines i { display:block; height:3px; background:#d9fff077; border-radius:9px; }.oq-lines i:nth-child(2) { width:80%; }.oq-lines i:nth-child(4) { width:58%; background:#aeebceaa; }
.oq-sheet-front { width:133px; height:158px; top:13px; left:19%; transform:rotate(-9deg); background:linear-gradient(135deg,#edfff2df,#b7e5d9ad); color:#155a4e; backdrop-filter:blur(12px); align-items:center; justify-content:center; }
.oq-letter { position:relative; font-family:Georgia,"Times New Roman",serif; font-size:96px; line-height:.95; letter-spacing:-.08em; padding-right:6px; }
.oq-letter-dot { position:absolute; width:7px; height:7px; border-radius:50%; background:#57a790; top:10px; right:-10px; }
.oq-sheet-caption { font-size:10px; margin-top:12px; letter-spacing:.06em; color:#386d61; }
.oq-note { position:absolute; display:flex; gap:9px; align-items:center; right:4%; bottom:18px; padding:12px 14px; background:#184c48c9; backdrop-filter:blur(12px); border:1px solid #b9edda45; border-radius:12px; box-shadow:0 8px 20px #00262926; font-size:11px; line-height:1.5; color:#dbf7ea; }
.oq-note svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.oq-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:14px; border-top:1px solid #c1f6df25; color:#b4dccc; font-size:11px; margin-top:auto; }
.oq-small-arrow { font-size:18px; }
[data-theme="water"] .panel-oqylym { background:radial-gradient(ellipse at 10% 0%,#ccffda42,transparent 70%),linear-gradient(135deg,#316e60e6,#173f47e0); box-shadow:inset 0 1px 0 #ffffff66,0 24px 60px #215b5729; }
.works:has(.work-oqylym:not([hidden])) .work-cities { margin-top:70px; }
.works[data-filter="education"] { grid-template-columns:minmax(0,440px); justify-content:center; min-height:0; padding-top:30px; }
@media(max-width:850px) and (min-width:621px) { .panel-oqylym { padding:20px; }.oq-brand { font-size:46px; }.oq-pages { margin-inline:-12px; }.oq-sheet-front { left:10%; }.oq-sheet-back { left:46%; }.oq-note { right:-2px; } }
@media(max-width:620px) { .panel-oqylym { min-height:388px; padding:22px; border-radius:21px; }.oq-brand { font-size:49px; }.oq-tagline { font-size:12px; }.oq-pages { height:180px; }.oq-sheet-front { width:118px; height:143px; left:10%; }.oq-letter { font-size:84px; }.oq-sheet-back { width:102px; height:127px; left:47%; }.oq-note { right:0; padding:9px 11px; }.oq-bottom { font-size:10px; }.works:has(.work-oqylym:not([hidden])) .work-cities { margin-top:0; }.works[data-filter="education"] .work-oqylym { width:100%; }.works[data-filter="education"] { padding-inline:0; } }
@media(max-width:360px) { .oq-brand { font-size:44px; }.panel-oqylym { padding:18px; }.oq-sheet-front { left:3%; }.oq-sheet-back { left:43%; }.oq-note { right:-3px; } }


/* Transparent surface tint; typography never inherits surface opacity. */
.panel-oqylym {
  --oq-muted:#b9ddcf;
  --oq-line:#c9f5df30;
  background:radial-gradient(ellipse at 8% 0%,#b5ffd216,transparent 65%),linear-gradient(140deg,#37897138,#143d454d);
  backdrop-filter:blur(14px) saturate(1.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  border-color:#d2ffeb40;
  box-shadow:inset 0 1px 0 #e1fff54d,0 20px 55px #001a202e;
}
.oq-category,.oq-open,.oq-tagline,.oq-bottom { color:var(--oq-muted); }
.oq-category,.oq-bottom { border-color:var(--oq-line); }
.oq-sheet-front { background:linear-gradient(135deg,#edfff2b8,#b7e5d970); }
.oq-sheet-back { background:linear-gradient(140deg,#b5efe426,#dbfff008); }
.oq-note { background:#184c488f; }
[data-theme="water"] .panel-oqylym {
  --oq-ink:#174e45;
  --oq-muted:#37685d;
  --oq-line:#245c4526;
  background:radial-gradient(ellipse at 5% 0%,#ffffff52,transparent 65%),linear-gradient(140deg,#bce8d52e,#55a49524);
  border-color:#ffffffa1;
  box-shadow:inset 0 1px 0 #ffffffc2,0 20px 55px #215b571c;
}
[data-theme="water"] .oq-sheet-front { background:linear-gradient(135deg,#ffffffa3,#dbfff373); }
[data-theme="water"] .oq-sheet-back { border-color:#3c83644d; background:linear-gradient(140deg,#a5d9c34d,#ffffff12); }
[data-theme="water"] .oq-lines i { background:#3a80605c; }
[data-theme="water"] .oq-lines i:nth-child(4) { background:#438a6b8a; }
@supports not (backdrop-filter:blur(14px)) {
  .panel-oqylym { background:#173e3e; }
  [data-theme="water"] .panel-oqylym { background:#d3eade; }
}

/* One glass object: artwork and always-visible editorial caption. */
.work {
  padding:10px;
  border:1px solid #d4e9ff30;

  background:linear-gradient(145deg,#c3e2ff12,#7895b509);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:inset 0 1px 0 #ffffff26,0 20px 55px #00000026;
}
.work>.panel { border-radius:19px; box-shadow:inset 0 1px 0 #ffffff26; outline:0; }
.work-label { align-items:center; gap:14px; padding:20px 12px 14px; color:var(--ink); }
.work-copy { display:flex; flex-direction:column; gap:7px; min-width:0; }
.work-title { font-size:17px; font-weight:550; letter-spacing:-.025em; line-height:1.3; }
.work-description { display:block; font-size:13px; font-weight:400; line-height:1.6; color:var(--muted); text-wrap:pretty; }
.work-label>.work-arrow { flex:none; width:32px; height:32px; display:grid; place-items:center; font-size:19px; border:1px solid var(--line); border-radius:50%; color:var(--muted); }
.work-oqylym .panel-oqylym { min-height:330px; padding:26px; }
.work-oqylym .oq-brand { margin-top:6px; }
.work-oqylym .oq-pages { margin-top:22px; }
[data-theme="water"] .work { border-color:#ffffffb3; background:linear-gradient(145deg,#ffffff4f,#e7ffff1a); box-shadow:inset 0 1px 0 #ffffffcc,0 20px 55px #215b5717; }
@media(max-width:620px) {
 .work { padding:8px;  }
 .work>.panel { border-radius:17px; }
 .work-label { padding:17px 10px 12px; gap:10px; }
 .work-title { font-size:16px; }
 .work-description { font-size:13px; line-height:1.55; }
 .work-oqylym .panel-oqylym { padding:22px 18px; min-height:310px; }
 .work-oqylym .oq-brand { font-size:46px; }
}

/* Showroom concept covers: symbolic, not data charts or geographical models. */
html,body { overflow-x:clip; }
.work { --art:#a8cfc8; padding:0; overflow:hidden;  }
.work-cities { --art:#b5b6eb; }
.work-space { --art:#a9c5eb; }
.concept-panel,.work>.concept-panel,.work-oqylym>.concept-panel {
 display:grid; place-items:center; height:300px; min-height:0; aspect-ratio:auto;
 padding:0; border:0; border-radius:0; outline:none; background:transparent;
 color:var(--art); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.concept-halo { position:absolute; width:85%; height:90%; left:7.5%; top:3%; background:radial-gradient(ellipse,color-mix(in srgb,var(--art) 14%,transparent),transparent 68%); pointer-events:none; }
.concept-art { position:relative; width:100%; height:100%; max-width:390px; overflow:visible; }
.work .work-label { position:relative; padding:20px 24px 24px; gap:20px; background:linear-gradient(180deg,#ffffff00,#ffffff04); }
.work .work-label::before { content:""; position:absolute; top:0; left:24px; right:24px; height:1px; background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent); }
.work .work-title { font-size:19px; font-weight:520; }
.work-description { max-width:31ch; }
.art-plane { fill:currentColor; fill-opacity:.06; stroke:currentColor; stroke-opacity:.24; }
.art-front { fill:currentColor; fill-opacity:.19; stroke:currentColor; stroke-opacity:.65; stroke-linejoin:round; }
.art-side { fill:currentColor; fill-opacity:.07; stroke:currentColor; stroke-opacity:.38; stroke-linejoin:round; }
.art-detail { stroke:currentColor; stroke-opacity:.48; stroke-width:1.3; stroke-linecap:round; }
.city-right { color:#b7d7c9; }
.art-connector { stroke:currentColor; stroke-opacity:.45; stroke-width:1.3; stroke-linejoin:round; }
.art-orbit { stroke:currentColor; stroke-opacity:.24; stroke-width:1; }
.art-orbit-faint { stroke-opacity:.11; }
.art-planet { fill:currentColor; fill-opacity:.035; stroke:currentColor; stroke-opacity:.12; }
.rocket-body { fill:#aac9e6; fill-opacity:.22; stroke:currentColor; stroke-opacity:.8; stroke-width:1.3; }
.rocket-fin { fill:currentColor; fill-opacity:.1; stroke:currentColor; stroke-opacity:.5; stroke-linejoin:round; }
.rocket-window { fill:#132c43; fill-opacity:.5; stroke:currentColor; stroke-opacity:.8; stroke-width:2; }
.rocket-trail { stroke:currentColor; stroke-opacity:.5; stroke-width:2; stroke-linecap:round; }
.art-satellite { fill:currentColor; fill-opacity:.8; }
.art-star { stroke:currentColor; stroke-opacity:.7; stroke-linecap:round; }
.reading-art { position:relative; width:270px; height:260px; }
.reading-sheet { position:absolute; border:1px solid #ccefe16b; border-radius:18px; backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 #ffffff38,0 14px 25px #0015191a; }
.reading-front { width:128px; height:163px; left:47px; top:46px; transform:rotate(-12deg); background:linear-gradient(135deg,#b9e6d647,#b9e6d614); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.reading-front>span { font:100px/.95 Georgia,serif; margin-left:-5px; color:#c0dfd3; }
.reading-front small { font-size:10px; letter-spacing:.08em; margin-top:15px; }
.reading-back { display:flex; flex-direction:column; gap:14px; width:116px; height:155px; right:26px; top:62px; transform:rotate(12deg); padding:35px 20px; background:linear-gradient(140deg,#a6d8c621,#a6d8c608); }
.reading-back i { display:block; height:2px; background:currentColor; opacity:.35; }
.reading-back i:nth-child(2) { width:75%; }.reading-back i:last-child { width:55%; }
.reading-spark { position:absolute; right:31px; top:21px; font-size:38px; font-weight:200; color:#c0dfd3; opacity:.75; }
[data-theme="water"] .work { --art:#357b73; }
[data-theme="water"] .work-cities { --art:#666a9e; }
[data-theme="water"] .work-space { --art:#477e9f; }
[data-theme="water"] .city-right { color:#548b78; }
[data-theme="water"] .reading-sheet { border-color:#357b734d; box-shadow:inset 0 1px 0 #ffffff99,0 14px 25px #214f5012; }
[data-theme="water"] .reading-front { background:linear-gradient(135deg,#ffffff6b,#9ed6c629); }
[data-theme="water"] .reading-front>span,[data-theme="water"] .reading-spark { color:#3b7d70; }
[data-theme="water"] .reading-back { background:linear-gradient(135deg,#b6e1d43b,#ffffff0d); }
[data-theme="water"] .rocket-body { fill:#83b5ce; fill-opacity:.24; }
[data-theme="water"] .rocket-window { fill:#e3f4f8; fill-opacity:.65; }
@media(max-width:620px) {
 .work { width:100%; max-width:370px; padding:0;  }
 .work-space { width:100%; }
 .concept-panel,.work>.concept-panel,.work-oqylym>.concept-panel { height:260px; padding:0; }
 .work .work-label { padding:18px 20px 22px; gap:12px; }
 .work .work-title { font-size:18px; }
 .work .work-label::before { left:20px; right:20px; }
 .reading-art { transform:scale(.93); }
 .works { padding-inline:0; gap:38px; }
}

.work-buildings { --art:#a9c9e6; }
[data-theme="water"] .work-buildings { --art:#4a7c98; }

.work-stadiums { --work-accent:144,218,183; }
.work-wheels { --work-accent:213,176,237; }
.wheel-card-rotor { transform-origin:180px 125px; animation:wheel-card-turn 35s linear infinite; }
@keyframes wheel-card-turn { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .wheel-card-rotor { animation:none; } }

/* Real model miniatures float on the same translucent glass as the other covers. */
.model-preview { isolation:isolate; pointer-events:none; }
.model-preview .concept-halo { opacity:.85; }
.model-preview .model-poster,
.model-preview model-viewer {
  position:absolute; inset:8px 12px 0; width:calc(100% - 24px); height:calc(100% - 8px);
  object-fit:contain; pointer-events:none; user-select:none;
  transition:opacity .45s ease;
}
.model-preview .model-poster { opacity:1; filter:drop-shadow(0 12px 14px #00000024); }
.model-preview model-viewer { opacity:0; background:transparent; --poster-color:transparent; }
.model-preview.is-live model-viewer { opacity:1; }
.model-preview.is-live .model-poster { opacity:0; }
.work-stadiums { --art:#a5d9cf; }
.work-wheels { --art:#c1b9ed; }
[data-theme="water"] .work-stadiums { --art:#4a9585; }
[data-theme="water"] .work-wheels { --art:#8479b1; }
@media (prefers-reduced-motion:reduce) {
  .model-preview .model-poster,.model-preview model-viewer { transition:none; }
}

.work[data-category="3d"] .work-description { font-size:12.5px; line-height:1.55; max-width:34ch; }

/* Oqylym: an open glass book, sharing the model cards' transparent stage. */
.oq-book-art { --book-light:#e0fff0; --book-edge:#86cbb8; --book-ink:#d4f6e7;
  position:relative; width:100%; height:100%; max-width:380px; overflow:visible; pointer-events:none; }
.oq-book-shadow { fill:#001d1a; opacity:.17; filter:blur(10px); }
.oq-book-body { transform:translateY(-7px) rotate(-9deg); transform-origin:180px 150px;
  filter:drop-shadow(0 16px 14px #00000026); transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.oq-book-cover { stroke:var(--book-edge); stroke-width:1.3; stroke-opacity:.65; }
.oq-book-pages { fill:var(--book-light); fill-opacity:.14; stroke:var(--book-light); stroke-opacity:.4; }
.oq-book-edges { stroke:var(--book-light); stroke-opacity:.35; stroke-width:.7; }
.oq-book-surface { stroke:var(--book-light); stroke-opacity:.55; stroke-width:.8; }
.oq-book-edge { stroke:#fff; stroke-opacity:.7; stroke-width:1.5; }
.oq-book-letter { font:88px Georgia,serif; fill:var(--book-ink); }
.oq-book-ink { stroke:var(--book-ink); stroke-width:2; stroke-linecap:round; opacity:.52; }
.oq-book-ribbon { fill:#d7b98b; fill-opacity:.85; stroke:#ffefd1; stroke-opacity:.35; stroke-width:.7; }
.oq-book-leaf { transform-origin:180px 210px; transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.work-oqylym:focus-visible .oq-book-body { transform:translateY(-13px) rotate(-5deg); }
.work-oqylym:focus-visible .oq-book-leaf { transform:rotate(-3deg); }
@media(hover:hover) {
 .work-oqylym:hover .oq-book-body { transform:translateY(-13px) rotate(-5deg); }
 .work-oqylym:hover .oq-book-leaf { transform:rotate(-3deg); }
}
[data-theme="water"] .oq-book-art { --book-light:#f1fff8; --book-edge:#398d7c; --book-ink:#277366; }
[data-theme="water"] .oq-book-cover { fill-opacity:.8; }
[data-theme="water"] .oq-book-pages { fill:#d1ece2; fill-opacity:.7; stroke:#64a895; }
[data-theme="water"] .oq-book-ribbon { fill:#c49052; }
@media(prefers-reduced-motion:reduce) {
 .oq-book-body,.oq-book-leaf { transition:none; }
 .work-oqylym:is(:hover,:focus-visible) .oq-book-body { transform:translateY(-7px) rotate(-9deg); }
 .work-oqylym:is(:hover,:focus-visible) .oq-book-leaf { transform:none; }
}

.work-population { --art:#aac9e7; } .population-card-art { opacity:.82; padding:12px; } [data-theme="water"] .work-population { --art:#46788d; }
/* Real UN medium-scenario previews share one fixed scale. */
.population-card-art .card-male{fill:#81bceb}.population-card-art .card-female{fill:#d9a8c7}.population-card-art .card-bar{transition:x 650ms cubic-bezier(.2,0,0,1),width 650ms cubic-bezier(.2,0,0,1)}.population-card-art .card-year{font-variant-numeric:tabular-nums;letter-spacing:.035em}[data-theme=water] .population-card-art .card-male{fill:#286f9e}[data-theme=water] .population-card-art .card-female{fill:#9d497b}@media(prefers-reduced-motion:reduce){.population-card-art .card-bar{transition:none}}

[data-theme="water"] .population-card-art { opacity:1; }
[data-theme="water"] .population-card-art .card-year { fill:var(--muted); }

/* Search shares spring physics; its editable field keeps native text interaction. */
.project-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.project-tools .project-filters{margin:0}
.project-search{display:flex;align-items:center;gap:10px;flex:0 1 260px;min-width:190px;min-height:44px;padding-left:14px;border:1px solid var(--line);border-radius:14px;background:#c3e2ff08;backdrop-filter:blur(16px);color:var(--muted);box-shadow:inset 0 1px 0 #ffffff0d;transition:border-color 160ms ease}
.project-search:focus-within{outline:2px solid var(--muted);outline-offset:2px}
[data-theme="water"] .project-search{background:#f3ffff6b;box-shadow:inset 0 1px 0 #ffffff80}
.project-search>svg{width:18px;height:18px;flex:none}
.project-search svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.project-search input{min-width:0;width:100%;height:44px;padding:0 12px 0 0;border:0;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);border-radius:inherit}
.project-search input::placeholder{color:var(--muted);opacity:1}
.project-search input::-webkit-search-cancel-button{display:none}
.project-search button{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:12px;border:0;border-radius:50%;background:transparent;color:var(--muted)}
.project-search button svg{width:20px;height:20px}
.project-search button:hover{color:var(--ink)}
@media(max-width:760px){.project-tools{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:0}.project-search{flex:auto;width:100%;min-width:0}.project-search input{font-size:16px}}
@media(prefers-reduced-motion:reduce){.project-search{transition:none}}

/* Shared shell geometry; content illustrations and chart marks keep their own shapes. */
.work,dialog,.empty-projects{border-radius:var(--radius-surface)}
.project-search,.project-filters button,.socials a,.contact-links a{border-radius:var(--radius-control)}
.themes{border-radius:var(--radius-segment)}
.themes button{border-radius:var(--radius-control)}

.close,.project-search button,.work-label>.work-arrow{border-radius:var(--radius-round)}

/* About is one reading column, with contacts following the narrative. */
.about.screen-panel{display:grid;grid-template-columns:minmax(0,1fr);width:min(640px,calc(100% - 40px));gap:24px;margin:clamp(24px,4vw,48px) auto 0;padding:0 0 64px;border:0;min-height:0}
.about-heading h2{font-size:clamp(30px,3.2vw,40px);line-height:1.2;letter-spacing:-.035em;text-wrap:balance}
.author-line{max-width:none;margin:14px 0 0;font-size:17px;line-height:1.65}
.about-content p,.about-content .social-intro{font-size:16px;line-height:1.75;text-wrap:pretty;margin:0 0 20px}
.about-content .social-intro{margin-top:28px;margin-bottom:16px}
.about .cooperation{margin-top:32px;padding-top:24px}
.about .cooperation h3{font-size:20px;line-height:1.35;margin-bottom:12px}
.about .contact-links{margin-top:16px}
@media(max-width:620px){.about.screen-panel{gap:22px;margin-top:24px;padding-bottom:40px}.author-line{font-size:16px}.about .cooperation{margin-top:28px}}

/* Quiet public view count, aligned with the card copy in both themes. */
.work-views{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:11px;line-height:1.4;font-variant-numeric:tabular-nums;visibility:hidden;min-height:16px}
.work-views.has-count{visibility:visible}
.work-views svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}

.project-search.float-item{cursor:grab;padding-left:0}
.project-search.float-item>svg{box-sizing:content-box;padding:13px;width:18px;height:18px;margin-right:-10px;flex:none}
.project-search.float-item input{cursor:text;user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
.project-search.float-item.is-dragging{cursor:grabbing}