/* ==========================================================================
   Portfolio redesign engine — obsidian + signal-lime, no-scroll shell.
   One page, five in-page views (Home / Work / Library / About / Contact)
   swapped by JS, each filling the viewport exactly via the flex-fill rule
   below. Only .work-scroll (the projects list) scrolls internally.
   ========================================================================== */

:root,
:root[data-theme="dark"]{
  --bg:#0B0C10;
  --surface:#16171B;
  --surface-2:#0E0F12;
  --text:#F2F0EA;
  --accent:#D6FF3F;
  --accent-rgb:214,255,63;
  --accent-ink:#0B0C10;
  --text-dim:rgba(242,240,234,.68);
  --text-faint:rgba(242,240,234,.52);
  --line:rgba(242,240,234,.1);
  --line-strong:rgba(242,240,234,.22);
  --card-grad:linear-gradient(160deg,#16171B,#0E0F12);
  --surface-tint:rgba(255,255,255,.04);
  --bg-veil:rgba(11,12,16,.98);
  --code-bg:#0a0b0d;
  --code-text:#d8dbe0;
  --code-com:#7c8390;
  --code-str:#8fe3a8;
  --code-num:#ffcb6b;
  --code-kw:#ff9ecb;
  --code-fn:#a5c8ff;
  --backdrop:rgba(4,4,6,.72);
  --type-once:#7FE0A8;
  --type-hover:#E0A85C;
}

/* Light theme: a calm warm off-white (not stark white — easier on the eyes
   for long viewing) with the signal-lime accent darkened to an olive shade.
   The raw brand lime (#D6FF3F) is far too pale to read against a light
   background, so light mode gets its own darker accent + white-on-accent
   ink instead of reusing dark mode's near-black ink. */
:root[data-theme="light"]{
  --bg:#EDEBE2;
  --surface:#F8F6F0;
  --surface-2:#E3E0D3;
  --text:#232419;
  --accent:#516B00;
  --accent-rgb:81,107,0;
  --accent-ink:#FFFFFF;
  --text-dim:rgba(35,36,25,.76);
  --text-faint:rgba(35,36,25,.66);
  --line:rgba(35,36,25,.13);
  --line-strong:rgba(35,36,25,.26);
  --card-grad:linear-gradient(160deg,#F8F6F0,#EAE7D9);
  --surface-tint:rgba(35,36,25,.045);
  --bg-veil:rgba(237,235,226,.98);
  --code-bg:#e9e6d9;
  --code-text:#26281c;
  --code-com:#6f7362;
  --code-str:#0d7a4a;
  --code-num:#a4620a;
  --code-kw:#a8256e;
  --code-fn:#3a5bb0;
  --backdrop:rgba(30,32,20,.45);
  --type-once:#15803D;
  --type-hover:#B3540C;
}

/* One sizing scale for every control on the site, so controls that sit
   side by side always line up and the same kind of control is the same size
   on every page. Phones / touch screens get larger touch targets, and 16px
   field text so iOS doesn't zoom the page when a field is focused. */
:root{
  --ctl-h:36px;        /* panel controls: fields, dropdowns, small buttons, segmented toggles, tabs */
  --ctl-h-sm:30px;     /* compact controls (small icon buttons) */
  --ctl-r:10px;        /* control corner radius */
  --ctl-fs:13px;       /* control text */
  --ctl-fs-sm:12px;    /* labels, captions */
  --field-h:42px;      /* page-level fields (library search, contact form) */
  --field-fs:14px;
  --btn-h:48px;        /* main call-to-action buttons */
  --pill-h:32px;       /* pills and chips (filters, socials, "open" chips) */
  --icon-h:36px;       /* round icon buttons (theme, language, close, scroll) */
}
@media (max-width:560px),(pointer:coarse){
  :root{ --ctl-h:44px; --ctl-h-sm:40px; --field-h:44px; --field-fs:16px; --pill-h:40px; --icon-h:44px; }
}

*{box-sizing:border-box;}
/* `hidden` always hides, even on components that set their own display. */
[hidden]{display:none!important;}
html,body{height:100%;margin:0;overscroll-behavior:none;}
body{background:var(--bg);color:var(--text);font-family:'Sora',sans-serif;transition:background .25s ease,color .25s ease;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:'Unbounded',sans-serif;margin:0;font-weight:700;letter-spacing:-.01em;}
button{font:inherit;}
::selection{background:var(--accent);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media (hover:hover) and (pointer:fine){ body{cursor:none;} }

/* .magnetic/.tilt only set a transition + display:inline-flex for the hover
   effect — kept early in the cascade (before component rules) so a later
   component-specific `display` override always wins by source order,
   instead of a same-specificity tie going to whichever happens to load last. */
.magnetic{transition:transform .35s cubic-bezier(.2,.9,.25,1);display:inline-flex;}
.tilt{transition:transform .35s cubic-bezier(.2,.9,.25,1);}
@media (prefers-reduced-motion: reduce){
  .magnetic,.tilt,.photo-ring{transition:none !important;animation:none !important;}
}

/* ---------------- Arabic / RTL ---------------- */
[dir="rtl"] body{font-family:'IBM Plex Sans Arabic','Sora',sans-serif;}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:'Noto Kufi Arabic','Unbounded',sans-serif;letter-spacing:0;}
[dir="rtl"] .eyebrow,[dir="rtl"] .fx-status,[dir="rtl"] .foot-item,[dir="rtl"] .wc-tag,[dir="rtl"] .work-count,
[dir="rtl"] .hero-welcome-line,[dir="rtl"] .photo-caption,[dir="rtl"] .step-n{font-family:'IBM Plex Mono',monospace;}
.arrow-glyph{display:inline-block;}
[dir="rtl"] .arrow-glyph{transform:scaleX(-1);}

/* ---------------- app shell: exactly one viewport, no page scroll ---------------- */
.app{position:relative;height:100vh;height:100dvh;width:100%;overflow:hidden;z-index:1;
  display:flex;flex-direction:column;}
.fx-canvas-slot{position:fixed;inset:0;z-index:0;pointer-events:none;}
.fx-canvas-slot canvas{opacity:.9;display:block;width:100%;height:100%;}

/* Phones commonly run 650-900px tall in portrait; rather than clip real
   content against the strict no-scroll rule, let the app fall back to a
   normal scrolling page below the desktop/landscape range. Desktop and
   landscape stay strictly scroll-free. */
@media (max-height:900px) and (max-width:600px), (max-height:640px){
  .app{height:auto;min-height:100vh;min-height:100dvh;overflow-y:auto;overflow-x:hidden;}
  .view.is-active{min-height:calc(100vh - 1px);min-height:calc(100dvh - 1px);}
  /* Once the page can actually scroll, trailing content (the last About
     step, the Contact socials, …) can land right where the fixed getbutton
     chat bubble sits at the bottom-right — reserve room below it so the
     two never overlap. */
  .view.is-active{padding-bottom:110px;}
  /* These stages vertically-center their content for the strict no-scroll
     desktop layout. Once content overflows into a real scrolling page here,
     centering means the initial scroll position (0) lands mid-content
     instead of at its top — e.g. About's first step could render at the
     very bottom of the first screen, already covered by the chat bubble
     before the visitor has scrolled at all. Flow from the top instead.
     (".app" bumps specificity above the unconditional .about-stage/
     .contact-stage rules declared later in the file — same specificity
     would otherwise lose the tie by source order, the same trap as the
     .magnetic bug above.) */
  .app .about-stage, .app .contact-stage{align-items:flex-start;justify-content:flex-start;}
  /* Padding-bottom alone only protects the very end of the page, but the
     chat bubble covers that same physical bottom-right column for the
     full scroll height of the page — a mid-page item (a step, a social
     link) can still land there at some scroll position. Reserve a
     permanent gutter matching that column, on the physical right
     regardless of text direction, so nothing can ever be laid out under
     it in the first place. */
  .app .shell{padding-right:90px;}
  .app .work-grid, .app .grid{padding-right:0;}
}
/* The same scrolling page for any screen whose active stage content doesn't
   fit its height (a tablet in landscape, a short laptop window). app.js
   measures that and sets html.fit-scroll - see fitView(). */
html.fit-scroll .app{height:auto;min-height:100vh;min-height:100dvh;overflow-y:auto;overflow-x:hidden;}
html.fit-scroll .view.is-active{min-height:calc(100vh - 1px);min-height:calc(100dvh - 1px);padding-bottom:110px;}
html.fit-scroll .app .about-stage, html.fit-scroll .app .contact-stage{align-items:flex-start;justify-content:flex-start;}
html.fit-scroll .app .hero-stage, html.fit-scroll .app .about-stage, html.fit-scroll .app .contact-stage{flex:1 0 auto;padding-block:20px 28px;}
html.fit-scroll .app .shell{padding-right:90px;}
html.fit-scroll .app .work-grid, html.fit-scroll .app .grid{padding-right:0;}

/* custom cursor */
.fx-cursor{position:fixed;top:0;left:0;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--accent);pointer-events:none;z-index:9999;
  transform:translate(-999px,-999px);
  transition:width .22s cubic-bezier(.2,.8,.2,1),height .22s cubic-bezier(.2,.8,.2,1),background .22s ease;
  mix-blend-mode:difference;}
.fx-cursor.is-hover{width:46px;height:46px;background:rgba(var(--accent-rgb),.14);}

/* ---------------- nav ---------------- */
.fx-nav{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,4vw,44px);flex-shrink:0;gap:12px;}
.fx-logo{font-family:'Unbounded',sans-serif;font-weight:700;font-size:16px;display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--text);padding:0;}
.fx-logo .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 1px var(--accent);}
.fx-navlinks{display:flex;align-items:center;gap:2px;background:var(--surface-tint);
  border:1px solid var(--line);border-radius:99px;padding:4px;}
.navlink{height:var(--icon-h);display:inline-flex;align-items:center;padding:0 15px;border-radius:99px;font-size:13px;font-weight:600;color:var(--text-dim);
  transition:color .2s ease, background .25s ease;background:none;border:none;cursor:pointer;font-family:'Sora',sans-serif;}
.navlink.is-active{background:var(--accent);color:var(--accent-ink);}
.navlink:hover{color:var(--text);}
@media (max-width:840px){ .fx-navlinks{display:none;} }
.fx-status{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;padding:8px 12px;white-space:nowrap;}
.fx-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#6EF0A0;box-shadow:0 0 8px 1px #6EF0A0;}

.fx-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}

.fx-menu-btn{display:none;width:var(--icon-h);height:var(--icon-h);border-radius:10px;border:1px solid var(--line);
  background:var(--surface-tint);color:var(--text);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
@media (max-width:840px){ .fx-menu-btn{display:inline-flex;} }
.fx-menu-btn svg{width:18px;height:18px;}

.fx-toggles{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.fx-toggle{width:var(--icon-h);height:var(--icon-h);border-radius:50%;border:1px solid var(--line);background:var(--surface-tint);
  color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.fx-toggle:hover{color:var(--accent);border-color:var(--accent);}
.fx-toggle svg{width:16px;height:16px;}
.fx-toggle-lang{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;width:var(--icon-h);height:var(--icon-h);
  padding:0;border-radius:50%;direction:ltr;}

/* Below 840px the nav switches to the hamburger + off-canvas menu; the
   status pill no longer fits on the same row as the logo and the
   toggles/menu button, so it wraps onto its own line under the logo
   instead of competing for horizontal space (which used to overflow
   the viewport and get clipped). */
@media (max-width:840px){
  .fx-nav{flex-wrap:wrap;row-gap:8px;}
  .fx-status{order:5;flex-basis:100%;}
}
/* With 44px touch targets the logo + four round buttons only just fit one
   row on a phone - tighter gaps keep them on it down to 360px wide. */
@media (max-width:420px){
  .fx-nav{padding-inline:14px;column-gap:8px;}
  .fx-right{gap:6px;}
  .fx-toggles{gap:4px;}
}

.fx-mobile-nav{position:fixed;inset:0;z-index:50;background:var(--bg-veil);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;}
.fx-mobile-nav.is-open{opacity:1;pointer-events:auto;}
.fx-mobile-nav .navlink{font-size:20px;height:auto;padding:14px 28px;}
.fx-mobile-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:10px;
  border:1px solid var(--line);background:transparent;color:var(--text);font-size:18px;cursor:pointer;}

.shell{max-width:1180px;margin:0 auto;width:100%;padding-inline:clamp(18px,4vw,44px);}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 14px;}

/* ---------------- buttons ---------------- */
.btn-signal{background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;font-family:'Sora',sans-serif;
  height:var(--btn-h);padding:0 24px;border-radius:12px;border:1px solid var(--accent);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:none;}
.btn-line{border:1px solid var(--line-strong);color:var(--text);font-weight:600;font-size:14px;height:var(--btn-h);padding:0 24px;
  border-radius:12px;background:transparent;font-family:'Sora',sans-serif;cursor:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn-line:hover{border-color:var(--accent);color:var(--accent);}
@media (hover:none){ .btn-signal,.btn-line,.navlink{cursor:pointer;} }
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}

/* ---------------- view switching ---------------- */
/* <main> wraps the views without adding a layout box of its own */
.app-main{display:contents;}
.view{display:none;flex:1;min-height:0;position:relative;z-index:2;flex-direction:column;}
.view.is-active{display:flex;}

/* ---------------- home ---------------- */
.hero-stage{flex:1;min-height:0;display:flex;align-items:center;}
.hero-stage .shell{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;width:100%;}
@media (max-width:820px){ .hero-stage .shell{grid-template-columns:1fr;gap:22px;} }
@media (max-width:600px){ .hero-stage{padding-block:18px;} .photo-frame{--photo-size:170px;} }
@media (max-width:360px){ .photo-frame{--photo-size:140px;} }
.hero-copy h1{font-size:clamp(30px,4.6vw,54px);line-height:1.12;}
.hero-copy .lede{margin-top:18px;font-size:15px;line-height:1.75;color:var(--text-dim);max-width:52ch;}
.hero-welcome-line{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-faint);}
.hero-photo{display:flex;flex-direction:column;align-items:center;gap:22px;}
/* Back to the original treatment: a square (rounded-corner) photo with a
   circular dashed ring around it — not a fully circular photo. Fixed pixel
   width+height (not aspect-ratio) so the frame is reliably a perfect square
   no matter what its children do. The whole avatar (ring+photo, as one
   unit) still zooms on hover. This element is deliberately NOT ".tilt" —
   engine.js's 3D-tilt effect sets its own inline `transform` on every
   mousemove, which would fight this CSS `:hover` scale. */
/* Resting state is a slight tilt + black & white; hover straightens it out,
   zooms in, and brings the color back — the "editorial photo card" look. */
.photo-frame{position:relative;width:var(--photo-size,220px);height:var(--photo-size,220px);border-radius:30px;
  cursor:pointer;transform:rotate(12deg);transition:transform .5s cubic-bezier(.22,1.1,.36,1);}
.photo-frame:hover{transform:rotate(0deg) scale(1.1);}
.photo-ring{position:absolute;inset:-14px;border:1px dashed rgba(var(--accent-rgb),.45);border-radius:50%;
  animation:fxspin 16s linear infinite;transition:border-color .35s ease,box-shadow .35s ease;z-index:1;}
.photo-inner{position:absolute;inset:0;border-radius:30px;background:var(--card-grad);
  border:1px solid var(--line);overflow:hidden;transition:box-shadow .5s ease;z-index:2;}
.photo-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);transition:filter .45s ease;}
.photo-frame:hover .photo-ring{border-color:var(--accent);box-shadow:0 0 18px 1px rgba(var(--accent-rgb),.28);}
.photo-frame:hover .photo-inner{box-shadow:0 14px 34px -6px rgba(var(--accent-rgb),.35);}
.photo-frame:hover .photo-inner img{filter:grayscale(0);}
.photo-caption{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-faint);}
@keyframes fxspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .photo-frame{transition:none;transform:rotate(0deg);}
  .photo-frame:hover{transform:none;}
  .photo-inner img{filter:none;transition:none;}
}

.hero-foot{position:relative;z-index:2;flex-shrink:0;display:flex;gap:22px;flex-wrap:wrap;align-items:center;
  padding:16px clamp(18px,4vw,44px) 20px;justify-content:space-between;}
/* Physical (not logical) right-side clearance: the fixed getbutton chat
   bubble always sits at the bottom-right of the SCREEN regardless of text
   direction, so whichever group ends up physically on the right — foot-chips
   in RTL, share-row in LTR — needs the same clearance either way. */
.hero-foot{padding-right:calc(clamp(18px,4vw,44px) + 76px);}
.foot-chips{display:flex;gap:10px;flex-wrap:wrap;}
.foot-item{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-faint);
  border:1px solid var(--line);border-radius:99px;padding:7px 12px;}
.foot-item:hover{color:var(--accent);border-color:var(--accent);}
.share-row{display:flex;gap:8px;align-items:center;}
.share-row .share-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-faint);margin-inline-end:2px;}
.share-icon{width:var(--ctl-h-sm);height:var(--ctl-h-sm);border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;
  justify-content:center;color:var(--text-dim);font-size:12px;}
.share-icon:hover{color:var(--accent);border-color:var(--accent);}
@media (max-width:700px){ .hero-foot{justify-content:center;} .foot-chips{justify-content:center;width:100%;} }

/* ---------------- work (projects) ---------------- */
.work-stage{flex:1;min-height:0;display:flex;flex-direction:column;padding-block:6px 18px;}
.work-stage .shell{display:flex;flex-direction:column;height:100%;min-height:0;}
.work-head{flex-shrink:0;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.work-count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-faint);}

.partners-band{flex-shrink:0;margin:14px 0 16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);padding-block:8px;}
.partners-band .slider{overflow:hidden;}
.partners-band .slide-track{display:flex;gap:36px;width:var(--marquee-track-width,3060px);
  animation:marquee-scroll var(--marquee-duration,40s) linear infinite;}
/* Pausing on hover (rather than just recoloring the one logo under the
   cursor) is what actually makes the hover useful — otherwise the logo has
   moved on before you can read it. */
.partners-band:hover .slide-track{animation-play-state:paused;}
/* Padding here matters: it's what keeps the hover's glass background from
   hugging the logo's own edges — the logo shrinks to fit the padded area,
   leaving visible breathing room to the box around it. */
.partners-band .slide{width:130px;height:56px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:10px 18px;opacity:.55;border-radius:14px;border:1px solid transparent;
  transition:opacity .25s ease,background .25s ease,border-color .25s ease,backdrop-filter .25s ease;}
.partners-band .slide:hover{opacity:1;background:rgba(var(--accent-rgb),.08);border-color:var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.partners-band .slide img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) brightness(1.6);transition:filter .25s ease;}
.partners-band .slide:hover img{filter:none;}
@keyframes marquee-scroll{ to{ transform:translateX(var(--marquee-scroll-distance,-1530px)); } }

.work-scroll-wrap{position:relative;flex:1;min-height:0;}
.work-scroll{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:8px;}
.work-scroll::-webkit-scrollbar{display:none;}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;
  /* As the grid scrolls internally, some card would eventually land in the
     bottom-right corner where the fixed chat bubble sits — reserve a
     physical-right gutter (see .hero-foot) so no column ever renders there.
     Cancelled below in the mobile scroll-fallback mode, where .shell's own
     gutter already covers it and doubling up would starve the grid of the
     width a 270px column needs. */
  padding-right:90px;}
.work-card{position:relative;border-radius:18px;background:var(--card-grad);
  border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;}
.work-card:hover{border-color:rgba(var(--accent-rgb),.5);}
.work-thumb{position:relative;width:100%;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden;}
.work-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.work-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1;}
.wc-tags{display:flex;flex-wrap:wrap;gap:6px;}
.wc-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3);border-radius:99px;padding:3px 9px;}
.wc-open{align-self:flex-start;margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  color:var(--accent-ink);background:var(--accent);border:none;border-radius:99px;height:var(--pill-h);padding:0 14px;display:inline-flex;
  align-items:center;gap:6px;cursor:pointer;}
@media (hover:none){ .wc-open{cursor:pointer;} }

.scroll-fade{position:absolute;left:0;right:0;height:64px;pointer-events:none;z-index:3;opacity:0;transition:opacity .25s ease;}
.scroll-fade--bottom{bottom:0;background:linear-gradient(to bottom,transparent,var(--bg));}
.scroll-fade--top{top:0;background:linear-gradient(to top,transparent,var(--bg));}
.work-scroll-wrap.can-scroll-down .scroll-fade--bottom,
.work-scroll-wrap.can-scroll-up .scroll-fade--top{opacity:1;}

.scroll-indicator{position:absolute;left:50%;transform:translateX(-50%);z-index:4;width:var(--icon-h);height:var(--icon-h);
  border-radius:50%;border:1px solid rgba(var(--accent-rgb),.5);background:var(--bg-veil);color:var(--accent);
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;}
.scroll-indicator--down{bottom:10px;animation:bob-down 1.8s ease-in-out infinite;}
.scroll-indicator--up{top:10px;animation:bob-up 1.8s ease-in-out infinite;}
.work-scroll-wrap.can-scroll-down .scroll-indicator--down{opacity:1;pointer-events:auto;}
.work-scroll-wrap.can-scroll-up .scroll-indicator--up{opacity:1;pointer-events:auto;}
@keyframes bob-down{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,5px);}}
@keyframes bob-up{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,-5px);}}
/* Reduced motion: the partner logos stop sliding and become a row you can
   scroll yourself, and the scroll arrows stop bobbing. */
@media (prefers-reduced-motion:reduce){
  .partners-band .slide-track{animation:none;}
  .partners-band .slider{overflow-x:auto;scrollbar-width:none;}
  .partners-band .slider::-webkit-scrollbar{display:none;}
  .scroll-indicator--down,.scroll-indicator--up{animation:none;}
}

/* ---------------- library (animations + function activities) ---------------- */
/* Same gallery pattern as Work: fixed header (tabs, hero, search, filter
   pills), then one scrollable box for the cards, with the same fade/arrow
   indicator. */
.lib-tabs{flex-shrink:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.lib-tab{display:flex;align-items:center;gap:12px;text-align:start;border:1px solid var(--line);min-width:0;
  background:var(--card-grad);border-radius:16px;padding:10px 14px;color:var(--text);cursor:pointer;
  font-family:inherit;transition:border-color .2s ease,background .2s ease;}
.lib-tab:hover{border-color:var(--line-strong);}
.lib-tab__icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--surface-tint);color:var(--text-dim);transition:background .2s ease,color .2s ease;}
.lib-tab__icon svg{width:18px;height:18px;}
.lib-tab__text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.lib-tab__text strong{font-family:'Unbounded',sans-serif;font-size:13px;font-weight:700;}
.lib-tab__text span{font-size:12px;color:var(--text-faint);}
.lib-tab__count{margin-inline-start:auto;flex:none;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-faint);
  border:1px solid var(--line);border-radius:99px;padding:2px 9px;}
.lib-tab__count:empty{display:none;}
.lib-tab.is-active{border-color:var(--accent);background:linear-gradient(160deg,rgba(var(--accent-rgb),.10),var(--surface) 65%);}
.lib-tab.is-active .lib-tab__icon{background:var(--accent);color:var(--accent-ink);}
.lib-tab.is-active .lib-tab__count{color:var(--accent);border-color:rgba(var(--accent-rgb),.5);}
[dir="rtl"] .lib-tab__text strong{font-family:'Noto Kufi Arabic','Unbounded',sans-serif;}

.lib-hero{flex-shrink:0;padding-top:2px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:end;}
.lib-title{font-size:clamp(20px,2.6vw,30px);line-height:1.25;}
.lib-title .accent-word{color:var(--accent);}
.lib-lede{margin-top:10px;font-size:13.5px;line-height:1.65;max-width:70ch;color:var(--text-dim);}
.hero__stats{display:flex;gap:26px;flex-wrap:wrap;}
.hero__stat b{display:block;font-family:'Unbounded',sans-serif;font-size:20px;color:var(--text);font-variant-numeric:tabular-nums;}
.hero__stat span{font-size:12px;color:var(--text-faint);}
@media (max-width:900px){ .lib-hero{grid-template-columns:1fr;} }

.lib-toolbar{flex-shrink:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;}
.lib-search{flex:1 1 260px;height:var(--field-h);display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--surface-tint);
  border-radius:var(--ctl-r);padding:0 12px;min-width:0;color:var(--text-faint);transition:border-color .2s ease;}
.lib-search svg{width:16px;height:16px;flex:none;}
.lib-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;padding:0;color:var(--text);font:inherit;font-size:var(--field-fs);}
.lib-search input::placeholder{color:var(--text-faint);}
.lib-search:focus-within{border-color:var(--accent);}

@media (max-width:560px){
  .lib-tabs{grid-template-columns:1fr;gap:8px;}
  .lib-tab{padding:8px 12px;gap:10px;}
  .lib-tab__icon{width:30px;height:30px;border-radius:9px;}
  .lib-tab__icon svg{width:15px;height:15px;}
  .lib-tab__text span{display:none;}
}

.filters{flex-shrink:0;display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 16px;}
.filter-pill{font-family:'IBM Plex Mono',monospace;font-size:12px;height:var(--pill-h);display:inline-flex;align-items:center;padding:0 14px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface-tint);color:var(--text-dim);cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;}
.filter-pill:hover{border-color:var(--line-strong);color:var(--text);}
.filter-pill.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700;}

.lib-loading{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;padding:48px 0;
  color:var(--text-faint);font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
.lib-empty{grid-column:1/-1;text-align:center;color:var(--text-faint);font-size:13px;padding:48px 16px;
  border:1px dashed var(--line-strong);border-radius:16px;}
.lib-loading .spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-strong);
  border-top-color:var(--accent);animation:lib-spin .8s linear infinite;}
@keyframes lib-spin{ to{ transform:rotate(360deg); } }

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;
  /* Same reasoning as .work-grid: reserve the chat-bubble gutter physically
     on the right, cancelled in the mobile scroll-fallback mode below where
     .shell already reserves it. */
  padding-right:90px;}
.card{background:var(--card-grad);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;text-align:start;padding:0;color:inherit;font-family:inherit;
  transition:transform .25s ease,border-color .25s ease;}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.45);}
.card__stage{height:112px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);
  border-bottom:1px solid var(--line);position:relative;perspective:800px;}
.card__shape{width:38px;height:38px;border-radius:10px;background:var(--accent);}
.card__shape.circle{border-radius:50%;}
.card__shape.text{width:auto;height:auto;background:none;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:16px;color:var(--text);}
.card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card__title-row{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.card__title{font-size:13px;font-weight:700;margin:0;}
.card__meta{font-size:12px;color:var(--text-faint);margin:0;}
.type-pill{font-family:'IBM Plex Mono',monospace;direction:ltr;font-size:9.5px;padding:2px 7px;
  border-radius:99px;border:1px solid;white-space:nowrap;flex-shrink:0;}
.type-pill.once{color:var(--type-once);border-color:var(--type-once);background:var(--surface-tint);}
.type-pill.loop{color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.1);}
.type-pill.hover{color:var(--type-hover);border-color:var(--type-hover);background:var(--surface-tint);}
.type-pill.activity{color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.1);}
[dir="rtl"] .type-pill.activity{font-family:'IBM Plex Sans Arabic',sans-serif;}

.card__chip{position:absolute;top:8px;inset-inline-start:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  font-weight:600;border-radius:99px;padding:2px 8px;border:1px solid;pointer-events:none;}
.card__chip--new{color:var(--accent);border-color:rgba(var(--accent-rgb),.55);background:var(--bg);}
[dir="rtl"] .card__chip{font-family:'IBM Plex Sans Arabic',sans-serif;}

.grid.grid--activities{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.card__stage--poster{height:auto;padding:0;aspect-ratio:16/9;}
.card__poster{display:block;width:100%;height:100%;}
.card__poster .pvb{fill:var(--surface-2);}
.card__poster .pvi{fill:var(--surface);stroke:var(--line-strong);stroke-width:.8;}
.card__poster .pva{fill:var(--accent);}
.card__poster .pvs{stroke:var(--accent);stroke-width:1.6;fill:none;}
.card__poster .pvw{stroke:#E5484D;stroke-width:1.6;fill:none;}
.card__poster .pvt{fill:var(--line-strong);}
.card__poster .pvk{fill:var(--text);stroke:var(--surface);stroke-width:2.4;}
.card__poster .pvx{fill:var(--text);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;}
.card__poster .pvtrack{stroke:var(--line-strong);stroke-width:7;fill:none;stroke-linecap:round;}
.card__poster .pvfill{stroke:var(--accent);stroke-width:7;fill:none;stroke-linecap:round;}
.card__poster .pvneedle{stroke:var(--text);stroke-width:3;stroke-linecap:round;}
.card__poster .pvhub{fill:var(--text);}
.card__poster .pva,.card__poster .pvs,.card__poster .pvfill{transition:filter .25s ease;}
.card--activity:hover .card__poster :is(.pva,.pvs,.pvfill),.card--activity:focus-visible .card__poster :is(.pva,.pvs,.pvfill){filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.6));}
@media (prefers-reduced-motion:reduce){ .card__poster .pva,.card__poster .pvs,.card__poster .pvfill{transition:none;} }

/* ---- Function Activity popup: 95% of the screen, sample + side panel ---- */
.act-backdrop{position:fixed;inset:0;z-index:210;background:var(--backdrop);display:grid;place-items:center;padding:2.5vh 2.5vw;}
.act-backdrop[hidden]{display:none;}
/* At this size the popup reaches the corner where the chat bubble sits, so
   the bubble steps aside until the popup closes. */
html.act-open [id^="gb-widget"]{display:none!important;}
.act-modal{width:100%;height:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
.act-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);flex-shrink:0;}
.act-head__text{min-width:0;flex:1;}
.act-head__text h3{font-size:17px;margin:0;}
.act-head__text p{margin:2px 0 0;font-size:12px;color:var(--text-faint);}
.act-head__badges:empty{display:none;}
[dir="rtl"] .act-head__text h3{font-family:'Noto Kufi Arabic','Unbounded',sans-serif;}

.act-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 420px;}
.act-stage{display:flex;flex-direction:column;min-width:0;min-height:0;padding:14px;gap:10px;border-inline-end:1px solid var(--line);}
.act-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;}
.act-tool{display:flex;align-items:center;gap:8px;}
.act-tool__label{font-size:var(--ctl-fs-sm);color:var(--text-dim);}
.act-seg{display:inline-flex;height:var(--ctl-h);border:1px solid var(--line-strong);border-radius:var(--ctl-r);overflow:hidden;}
.act-seg button{border:0;background:transparent;color:var(--text-dim);padding:0 12px;font-size:var(--ctl-fs);cursor:pointer;
  font-family:inherit;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.act-seg button:hover{color:var(--text);}
.act-seg button + button{border-inline-start:1px solid var(--line);}
.act-seg button[aria-pressed="true"]{background:rgba(var(--accent-rgb),.14);color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent);}
#actReplay{margin-inline-start:auto;}
.act-btn{border:1px solid var(--line-strong);background:var(--surface-tint);color:var(--text);border-radius:var(--ctl-r);min-height:var(--ctl-h);
  padding:0 14px;cursor:pointer;font-size:var(--ctl-fs);font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;transition:border-color .15s ease,color .15s ease,filter .15s ease;}
.act-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.act-btn:disabled{opacity:.4;cursor:not-allowed;}
.act-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;}
.act-btn--primary:hover:not(:disabled){color:var(--accent-ink);filter:brightness(1.05);}
.act-hint{margin:0;padding:9px 13px;border-radius:10px;background:rgba(var(--accent-rgb),.10);font-size:13px;color:var(--text);}
.act-frame-outer{flex:1;min-height:0;display:flex;justify-content:center;border-radius:12px;padding:10px;
  background:repeating-conic-gradient(var(--line) 0% 25%,transparent 0% 50%) 0 0/18px 18px;}
.act-frame-shell{width:100%;height:100%;transition:max-width .25s ease;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-strong);background:#F8F6F0;}
.act-frame-shell iframe{display:block;width:100%;height:100%;border:0;background:#F8F6F0;}
.act-frame-meta{font-size:12px;color:var(--text-faint);font-family:'IBM Plex Mono',monospace;direction:ltr;text-align:end;}

.act-panel{display:flex;flex-direction:column;min-height:0;background:var(--bg);}
.act-desc{margin:14px 16px 0;font-size:13px;line-height:1.7;color:var(--text-dim);cursor:pointer;border-radius:6px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.act-desc[aria-expanded="true"]{display:block;}
.act-desc:empty{display:none;}
.act-tabs{display:flex;gap:4px;padding:12px 12px 10px;border-bottom:1px solid var(--line);}
.act-tabs button{flex:1;border:1px solid transparent;background:none;border-radius:var(--ctl-r);height:var(--ctl-h);padding:0 6px;font-size:var(--ctl-fs);font-weight:600;
  color:var(--text-dim);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.act-tabs button:hover{color:var(--text);}
.act-tabs button[aria-selected="true"]{background:var(--surface);border-color:var(--line-strong);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent);}
.act-tabs__count{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;background:var(--accent);color:var(--accent-ink);
  border-radius:99px;padding:0 6px;}
.act-tabs__count:empty{display:none;}
.act-pane{flex:1;min-height:0;overflow:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:14px;}
.act-pane[hidden]{display:none;}

.act-preset-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:rgba(var(--accent-rgb),.10);}
.act-preset-row label{font-size:var(--ctl-fs);font-weight:600;white-space:nowrap;}
.act-preset-box{flex:1;min-width:140px;}
.act-preset-box[hidden]{display:none;}
.act-preset-row.is-bare{background:none;padding:0;justify-content:flex-end;}
#actControls{display:flex;flex-direction:column;gap:12px;}
/* Settings sections: a numbered menu (clearly tabs), then the open section
   with its own title, "section i of n" and previous/next buttons. */
.act-sections{display:flex;flex-direction:column;gap:8px;}
.act-sections__title{margin:0;font-size:var(--ctl-fs-sm);font-weight:600;color:var(--text-dim);}
.act-sections__menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.act-sections__btn{display:flex;align-items:center;gap:9px;min-height:var(--ctl-h);padding:5px 10px;min-width:0;
  border:1px solid var(--line-strong);border-radius:var(--ctl-r);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:var(--ctl-fs);font-weight:600;text-align:start;cursor:pointer;line-height:1.3;
  transition:border-color .15s ease,background .15s ease,color .15s ease;}
.act-sections__btn:hover{border-color:var(--accent);}
.act-sections__n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  font-family:'IBM Plex Mono',monospace;background:var(--surface-tint);border:1px solid var(--line-strong);color:var(--text-dim);}
.act-sections__label{min-width:0;overflow-wrap:anywhere;}
.act-sections__btn[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.act-sections__btn[aria-selected="true"] .act-sections__n{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--accent);}
.act-group{border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);}
.act-group[hidden]{display:none;}
.act-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 13px 10px;}
.act-group__title{margin:0;font-size:14px;outline:none;}
[dir="rtl"] .act-group__title{font-family:'Noto Kufi Arabic','Unbounded',sans-serif;}
.act-group__step{flex:none;font-size:12px;color:var(--text-faint);font-variant-numeric:tabular-nums;}
.act-group__note{margin:0 13px 12px;font-size:var(--ctl-fs-sm);line-height:1.6;color:var(--text-faint);}
.act-group__foot{display:flex;gap:8px;padding:0 13px 13px;}
.act-group__foot:empty{display:none;}
.act-group__next{margin-inline-start:auto;}
.act-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 13px 14px;align-items:end;}
.act-control{display:flex;flex-direction:column;gap:6px;min-width:0;}
.act-control[hidden]{display:none;}
.act-control--wide{grid-column:1/-1;}
.act-control label{font-size:var(--ctl-fs-sm);color:var(--text-dim);line-height:1.4;}
.act-in{width:100%;min-width:0;height:var(--ctl-h);border:1px solid var(--line-strong);background:var(--surface-tint);color:var(--text);
  border-radius:var(--ctl-r);padding:0 11px;font-size:var(--ctl-fs);font-family:inherit;transition:border-color .15s ease;}
.act-in:hover{border-color:var(--accent);}
.act-in:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);}
.act-in--mono,.act-in--id{direction:ltr;text-align:left;font-family:'IBM Plex Mono',monospace;font-size:var(--ctl-fs-sm);}
.act-in--code{height:auto;min-height:84px;padding:8px 11px;resize:vertical;direction:ltr;text-align:left;font:12px/1.5 'IBM Plex Mono',monospace;}
.act-font-sample{margin:0;padding:8px 11px;border:1px dashed var(--line-strong);border-radius:var(--ctl-r);font-size:17px;line-height:1.5;color:var(--text);}
.act-range{display:flex;align-items:center;gap:8px;height:var(--ctl-h);}
.act-range input{flex:1;min-width:0;accent-color:var(--accent);}
.act-range output{font-size:var(--ctl-fs-sm);min-width:56px;height:var(--ctl-h-sm);display:grid;place-items:center;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-strong);border-radius:8px;padding:0 6px;direction:ltr;font-family:'IBM Plex Mono',monospace;}
.act-color{display:flex;align-items:center;gap:8px;height:var(--ctl-h);}
.act-color input{width:48px;height:var(--ctl-h);border:1px solid var(--line-strong);border-radius:var(--ctl-r);padding:3px;background:var(--surface-tint);cursor:pointer;}
.act-color code{font-size:var(--ctl-fs-sm);color:var(--text-dim);direction:ltr;font-family:'IBM Plex Mono',monospace;}
.act-check{display:flex;align-items:center;gap:8px;min-height:var(--ctl-h);font-size:var(--ctl-fs);color:var(--text);cursor:pointer;}
.act-check input{width:17px;height:17px;accent-color:var(--accent);flex:none;}
.act-check code{margin-inline-start:auto;font-size:12px;color:var(--text-faint);direction:ltr;}
.act-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.act-count{font-size:12px;color:var(--text-faint);font-variant-numeric:tabular-nums;direction:ltr;font-family:'IBM Plex Mono',monospace;}
.act-rows{display:flex;flex-direction:column;gap:6px;}
.act-item-row{display:grid;gap:6px;align-items:center;}
.act-item-key{font-size:12px;color:var(--text-faint);direction:ltr;font-family:'IBM Plex Mono',monospace;min-width:48px;}
.act-mini{border:1px solid var(--line-strong);background:transparent;color:var(--text);border-radius:var(--ctl-r);width:var(--ctl-h);height:var(--ctl-h);cursor:pointer;flex:none;
  display:grid;place-items:center;font-size:15px;line-height:1;font-family:inherit;}
.act-mini:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.act-mini:disabled{opacity:.35;cursor:not-allowed;}
.act-mini.has-svg{border-color:var(--accent);color:var(--accent);}
.act-add{align-self:flex-start;}
.act-item-svg{width:100%;min-height:72px;border:1px solid var(--line-strong);background:var(--surface-tint);color:var(--text);border-radius:var(--ctl-r);
  padding:8px 11px;font:11.5px/1.45 'IBM Plex Mono',monospace;direction:ltr;resize:vertical;}
.act-pair-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;}
.act-order-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px;align-items:center;}
.act-chip-text{font-size:var(--ctl-fs);height:var(--ctl-h);display:flex;align-items:center;padding:0 11px;border-radius:var(--ctl-r);
  background:var(--surface-tint);border:1px solid var(--line);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.act-pair-arrow{color:var(--text-faint);}
.act-swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.act-swatch{position:relative;}
.act-swatch input{width:48px;height:var(--ctl-h);border:1px solid var(--line-strong);border-radius:var(--ctl-r);padding:3px;background:var(--surface-tint);cursor:pointer;display:block;}
.act-swatch__x{position:absolute;top:-7px;inset-inline-end:-7px;width:18px;height:18px;border-radius:50%;border:0;background:var(--text);
  color:var(--bg);font-size:12px;line-height:1;cursor:pointer;display:grid;place-items:center;}
.act-ta-tools{display:flex;gap:6px;}

.act-section{display:flex;flex-direction:column;gap:8px;}
.act-section[hidden]{display:none;}
.act-section h4{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin:0;}
[dir="rtl"] .act-section h4{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;font-size:12px;}
.act-section__head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.act-note{margin:0;font-size:12px;line-height:1.6;color:var(--text-faint);}
.act-action-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.act-toggles{display:flex;flex-direction:column;gap:10px;}
.act-link{border:0;background:none;color:var(--text-dim);font-size:12px;text-decoration:underline;cursor:pointer;padding:0;font-family:inherit;}
.act-log{margin:0;min-height:120px;max-height:300px;overflow:auto;background:var(--code-bg);color:var(--code-text);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;font:11.5px/1.65 'IBM Plex Mono',monospace;direction:ltr;text-align:left;white-space:pre-wrap;}
.act-log.is-empty{color:var(--text-faint);font-family:inherit;direction:inherit;text-align:start;}
.act-code-actions{display:flex;gap:8px;}
.act-code{margin:0;max-height:48vh;overflow:auto;background:var(--code-bg);color:var(--code-text);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font:11.5px/1.6 'IBM Plex Mono',monospace;direction:ltr;text-align:left;white-space:pre;}
.act-install{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.65;color:var(--text-dim);}

.act-toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--text);color:var(--bg);
  padding:9px 18px;border-radius:99px;font-size:13px;transition:opacity .2s ease,transform .2s ease;pointer-events:none;z-index:230;}
.act-toast.show{opacity:1;transform:translate(-50%,0);}

@media (max-width:1100px){
  .act-body{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;overflow:auto;}
  .act-stage{min-height:auto;border-inline-end:0;border-bottom:1px solid var(--line);}
  .act-frame-outer{flex:none;height:62vh;}
  .act-pane{overflow:visible;}
  .act-panel{min-height:auto;}
}
@media (max-width:560px){
  .act-backdrop{padding:0;}
  .act-modal{border-radius:0;}
  .act-toolbar{gap:8px 10px;}
  .act-seg button{padding:0 9px;font-size:var(--ctl-fs-sm);}
  .act-controls{grid-template-columns:minmax(0,1fr);}
  .act-frame-outer{height:58vh;padding:6px;}
}
@media (prefers-reduced-motion:reduce){ .act-frame-shell,.act-toast{transition:none;} }

/* ---- modal: live preview + controls + code (shared with .view content) ---- */
.modal-backdrop{position:fixed;inset:0;background:var(--backdrop);z-index:200;display:flex;align-items:center;
  justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.modal-backdrop.is-open{opacity:1;pointer-events:auto;}
.modal{width:100%;max-width:760px;max-height:86vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);color:var(--text);
  transform:translateY(14px) scale(.98);opacity:0;transition:transform .28s ease,opacity .28s ease;}
.modal-backdrop.is-open .modal{transform:translateY(0) scale(1);opacity:1;}
.modal__header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1;}
.modal__title{font-size:16px;margin:0 0 4px;font-family:'Unbounded',sans-serif;}
.modal__meta{font-size:12px;color:var(--text-faint);margin:0;}
.modal__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:16px;}
.modal__stage{height:140px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;gap:14px;perspective:800px;}
.controls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.control{display:flex;flex-direction:column;gap:6px;position:relative;}
.control label{font-size:var(--ctl-fs-sm);color:var(--text-dim);}
.control input[type="range"]{accent-color:var(--accent);width:100%;height:var(--ctl-h-sm);margin:0;}
.control input[type="color"]{width:56px;height:var(--ctl-h);border:1px solid var(--line-strong);border-radius:var(--ctl-r);padding:3px;
  background:var(--surface-tint);cursor:pointer;}
.control-check{flex-direction:row;align-items:center;gap:8px;min-height:var(--ctl-h);}
.control-check input{width:16px;height:16px;accent-color:var(--accent);}
.range-value{font-family:'IBM Plex Mono',monospace;direction:ltr;text-align:left;font-size:12px;color:var(--text-faint);}
.panel-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.panel-label{font-size:12px;color:var(--text-faint);font-weight:600;font-family:'IBM Plex Mono',monospace;}

.btn{font-family:inherit;font-size:var(--ctl-fs);font-weight:600;min-height:var(--ctl-h);padding:0 15px;border-radius:var(--ctl-r);
  border:1px solid var(--line-strong);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--surface-tint);color:var(--text);
  transition:border-color .2s ease,color .2s ease;}
.btn:hover{border-color:var(--line-strong);}
.btn-ghost{background:var(--surface-tint);}
.btn-icon{width:var(--icon-h);height:var(--icon-h);min-height:0;padding:0;justify-content:center;border-radius:50%;flex:none;}
.copy-btn.is-copied{color:var(--accent);border-color:var(--accent);}
.btn:hover:not(:disabled){border-color:var(--accent);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
/* Previous / position / next / close, shared by both library popups. */
.modal__nav{display:flex;align-items:center;gap:6px;flex:none;}
.modal__pos{min-width:52px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-faint);
  direction:ltr;font-variant-numeric:tabular-nums;}
.modal__pos[hidden]{display:none;}
.nav-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
[dir="rtl"] .nav-arrow svg{transform:scaleX(-1);}
.modal__nav .btn-icon + .btn-icon:last-child{margin-inline-start:6px;}

/* The one dropdown for the whole library (animations/js/custom-select.js). */
.custom-select{position:relative;min-width:0;}
.custom-select__trigger{width:100%;height:var(--ctl-h);font-family:inherit;text-align:start;
  background:var(--surface-tint);border:1px solid var(--line-strong);color:var(--text);border-radius:var(--ctl-r);padding:0 11px;
  font-size:var(--ctl-fs);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;
  transition:border-color .15s ease;}
.custom-select__trigger:hover{border-color:var(--accent);}
.custom-select__trigger:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);}
.custom-select.is-open .custom-select__trigger{border-color:var(--accent);}
.custom-select__trigger .chevron{width:14px;height:14px;flex:none;transition:transform .18s ease;opacity:.7;}
.custom-select.is-open .custom-select__trigger .chevron{transform:rotate(180deg);}
/* plaintext: each label takes its direction from its own first letter, so a
   mixed label like "الافتراضي (cubic-bezier(…))" reads in order and the
   ellipsis lands at its end. */
.custom-select__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;unicode-bidi:plaintext;}
.custom-select__option{unicode-bidi:plaintext;}
.has-hint{display:flex;align-items:baseline;gap:8px;min-width:0;unicode-bidi:normal;}
.custom-select__main{flex:none;}
.custom-select__hint{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:400;color:var(--text-faint);text-align:start;}
.custom-select__list{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:30;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--ctl-r);box-shadow:0 16px 40px -8px rgba(0,0,0,.35);padding:5px;
  max-height:220px;overflow-y:auto;display:none;}
.custom-select.is-up .custom-select__list{top:auto;bottom:calc(100% + 6px);}
.custom-select.is-open .custom-select__list{display:block;}
.custom-select__option{font-family:inherit;text-align:start;font-size:var(--ctl-fs);line-height:1.45;
  padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--text);}
.custom-select__option:hover{background:var(--surface-tint);}
.custom-select__option[aria-selected="true"]{color:var(--accent);font-weight:600;background:rgba(var(--accent-rgb),.08);}
.custom-select--mono .custom-select__trigger,.custom-select--mono .custom-select__option{font-family:'IBM Plex Mono',monospace;direction:ltr;text-align:left;}

/* Sequence builder (animations/js/sequence.js) */
.seq{border:1px solid var(--line-strong);border-radius:14px;background:var(--surface-tint);padding:12px 14px;display:flex;flex-direction:column;gap:12px;}
.seq[hidden]{display:none;}
.seq__head b{display:block;font-size:13.5px;}
.seq__head small{display:block;margin-top:2px;font-size:var(--ctl-fs-sm);color:var(--text-faint);line-height:1.5;}
.seq__modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.seq__mode{min-height:var(--ctl-h);padding:4px 10px;border:1px solid var(--line-strong);border-radius:var(--ctl-r);background:var(--surface);
  color:var(--text);font-family:inherit;font-size:var(--ctl-fs-sm);font-weight:600;line-height:1.3;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease;}
.seq__mode:hover{border-color:var(--accent);}
.seq__mode[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.seq__grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;}
.seq__wide{grid-column:1/-1;}
.seq__fixed{height:var(--ctl-h);display:flex;align-items:center;padding:0 11px;border-radius:var(--ctl-r);border:1px dashed var(--line-strong);
  font-size:var(--ctl-fs);color:var(--text-dim);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.seq__range{display:flex;align-items:center;gap:10px;height:var(--ctl-h);}
.seq__range input{flex:1;min-width:0;accent-color:var(--accent);margin:0;}
.seq__range .range-value{min-width:64px;text-align:end;}
.seq__total{margin:0;padding:9px 12px;border-radius:var(--ctl-r);background:rgba(var(--accent-rgb),.10);font-size:var(--ctl-fs-sm);line-height:1.6;}
@media (max-width:560px){ .seq__grid{grid-template-columns:minmax(0,1fr);} .seq__modes{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* paid parts in the sequence builder: lock + price after the name, and a notice */
.custom-select__lock{flex:none;display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto;padding:1px 7px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--text);font-size:12px;font-weight:600;line-height:1.5;}
.custom-select__lock svg{width:11px;height:11px;flex:none;}
.custom-select__label.is-locked,.custom-select__option.is-locked{display:flex;align-items:center;gap:8px;}
.custom-select__label.is-locked .custom-select__main,.custom-select__option.is-locked .custom-select__main{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.seq__locked{border:1px solid var(--line-strong);border-radius:var(--ctl-r);padding:10px 12px;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.10),transparent 70%);}
.seq__locked b{font-size:var(--ctl-fs-sm);}
.seq__locked p{margin:0;font-size:var(--ctl-fs-sm);line-height:1.7;color:var(--text-dim);}
.seq__locked-list{display:flex;gap:8px;flex-wrap:wrap;}
.seq__tip{margin:0;font-size:var(--ctl-fs-sm);line-height:1.6;color:var(--text-dim);}

.code-block{direction:ltr;text-align:left;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.6;
  background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;max-height:220px;
  overflow:auto;margin:0;white-space:pre;color:var(--code-text);}
.code-block .tok-kw{color:var(--code-kw);}
.code-block .tok-str{color:var(--code-str);}
.code-block .tok-num{color:var(--code-num);}
.code-block .tok-com{color:var(--code-com);font-style:italic;}
.code-block .tok-fn{color:var(--code-fn);}
.install{font-size:12px;color:var(--text-dim);line-height:1.8;margin:0;padding-inline-start:18px;}
.install code{direction:ltr;display:inline-block;font-family:'IBM Plex Mono',monospace;background:var(--surface-tint);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--accent);font-size:12px;}

/* ---------------- about ---------------- */
.about-stage{flex:1;min-height:0;display:flex;align-items:center;}
.about-stage .shell{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;width:100%;}
@media (max-width:820px){ .about-stage .shell{grid-template-columns:1fr;} }
.about-copy .lede{margin-top:16px;font-size:14.5px;line-height:1.75;color:var(--text-dim);max-width:48ch;}
.about-copy h2{font-size:clamp(22px,3.2vw,34px);line-height:1.3;}
.about-cta{margin-top:22px;}
.about-steps{display:flex;flex-direction:column;gap:4px;}
.step{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:16px;}
.step:hover{background:var(--surface-tint);}
.step-n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent);padding-top:3px;}
.step h4{font-size:14.5px;font-weight:600;}
.step p{margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--text-dim);max-width:40ch;}

/* ---------------- contact ---------------- */
.contact-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;}
.contact-h{font-size:clamp(26px,4.2vw,42px);line-height:1.16;max-width:18ch;margin:6px auto 0;}
.contact-stage .lede{margin:14px auto 0;font-size:14px;color:var(--text-dim);max-width:46ch;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:26px;text-align:start;width:100%;max-width:820px;}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr;text-align:center;} }
.contact-form .form-row{margin-bottom:12px;}
.contact-form label{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-faint);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em;}
.contact-form input,.contact-form textarea{width:100%;background:var(--surface-tint);border:1px solid var(--line-strong);
  border-radius:var(--ctl-r);height:var(--field-h);padding:0 12px;color:var(--text);font-family:inherit;font-size:var(--field-fs);}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);outline:none;}
.contact-form textarea{resize:none;height:84px;padding:10px 12px;line-height:1.5;}
.contact-direct{display:flex;flex-direction:column;gap:16px;}
/* contact details card: phone, email and address as plain, selectable text.
   Each row: icon + (label over value); values start where the line starts
   (right in Arabic, left in English); a thin fading line between rows. */
.contact-card{container-type:inline-size;align-self:stretch;text-align:start;border:1px solid var(--line-strong);border-radius:16px;padding:14px 16px;
  display:flex;flex-direction:column;gap:0;background:linear-gradient(160deg,rgba(var(--accent-rgb),.08),transparent 70%);}
.contact-card__title{margin:0 0 6px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;}
[dir="rtl"] .contact-card__title{letter-spacing:0;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;font-weight:700;}
.contact-card__row{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:10px 0;}
/* social links: icon buttons under their own divider and heading */
.contact-card__social{position:relative;margin-top:4px;padding-top:12px;}
.contact-card__row + .contact-card__row::before,.contact-card__social::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.35) 25%,rgba(var(--accent-rgb),.35) 75%,transparent);}
.contact-card__subtitle{margin:0 0 9px;font-size:12px;color:var(--text-faint);}
.contact-card__icons{display:flex;flex-wrap:wrap;gap:8px;}
.contact-card__social-link{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:15px;text-decoration:none;
  color:var(--text-dim);border:1px solid var(--line-strong);background:var(--bg);transition:color .15s ease,border-color .15s ease,transform .15s ease;}
.contact-card__social-link:hover,.contact-card__social-link:focus-visible{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);}
.contact-card__icon{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:14px;
  color:var(--accent);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.25);}
.contact-card__text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.contact-card__label{font-size:12px;line-height:1.3;color:var(--text-faint);}
.contact-card__value{max-width:100%;font-family:'IBM Plex Mono',monospace;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--text);
  user-select:text;-webkit-user-select:text;overflow-wrap:anywhere;unicode-bidi:isolate;}
/* the address is words, not a code-like value */
.contact-card__value--text{font-family:inherit;font-size:14px;}
[dir="rtl"] .contact-card__value--text{font-family:'IBM Plex Sans Arabic',sans-serif;}
@media (max-width:600px){
  .contact-card{padding:12px 14px;}
  .contact-card__row{gap:10px;}
  .contact-card__icon{width:30px;height:30px;font-size:13px;}
  .contact-card__value{font-size:12px;}
  .contact-card__value--text{font-size:13px;}
}
/* the email never breaks: it shrinks to the card's width instead
   (28 monospace characters are about 17em; the icon and its gap take ~46px) */
.contact-card__value--email{white-space:nowrap;overflow-wrap:normal;font-size:min(13.5px, calc((100cqi - 46px) / 17));}
.social-row{display:flex;gap:9px;flex-wrap:wrap;}
.social-link{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;height:var(--pill-h);padding:0 14px;
  border-radius:99px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;}
.social-link:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:760px){ .social-row{justify-content:center;} }

/* ---------------- misc ---------------- */
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ==========================================================================
   Visitor account + library paywall (assets/js/account.js)
   ========================================================================== */
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.btn-accent:hover:not(:disabled){filter:brightness(1.05);color:var(--accent-ink);}
a.btn{text-decoration:none;}

/* header button: user icon, or the account's picture / initial */
.fx-toggle-account{padding:0;overflow:hidden;}
.fx-toggle-account svg{width:17px;height:17px;}
.fx-toggle-account img{width:100%;height:100%;object-fit:cover;display:block;}
.fx-toggle-account.is-signed-in{border-color:var(--accent);}
.acc-initial{display:grid;place-items:center;width:100%;height:100%;font-weight:700;font-size:14px;background:var(--accent);color:var(--accent-ink);}
.acc-initial--lg{width:44px;height:44px;border-radius:50%;font-size:18px;flex:none;}

/* cards: favorite button beside the card, price / unlocked chips */
.card-wrap{position:relative;display:flex;min-width:0;}
.card-wrap > .card{flex:1;min-width:0;}
.card-wrap:hover > .card{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.45);}
.card-fav{position:absolute;top:8px;inset-inline-end:8px;z-index:2;width:var(--ctl-h-sm);height:var(--ctl-h-sm);border-radius:50%;
  border:1px solid var(--line);background:var(--bg-veil);color:var(--text-faint);display:grid;place-items:center;cursor:pointer;
  opacity:.55;transition:opacity .2s ease,color .2s ease,border-color .2s ease,transform .25s ease;}
.card-fav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;}
.card-wrap:hover .card-fav,.card-fav:focus-visible{opacity:1;transform:translateY(-3px);}
.card-fav:hover{color:#E5484D;border-color:#E5484D;}
.card-fav.is-on{opacity:1;color:#E5484D;border-color:rgba(229,72,77,.6);}
.card-fav.is-on svg{fill:currentColor;}
@media (hover:none){ .card-fav{opacity:1;} }
.card__chips{position:absolute;top:8px;inset-inline-start:8px;display:flex;flex-wrap:wrap;gap:4px;pointer-events:none;max-width:calc(100% - 52px);}
.card__chips .card__chip{position:static;}
.card__chip--paid{color:var(--text);border-color:var(--line-strong);background:var(--bg);}
.card__chip--open{color:var(--type-once);border-color:var(--type-once);background:var(--bg);}

/* all / free / paid / favorites - beside the search */
.lib-access{display:inline-flex;height:var(--field-h);border:1px solid var(--line-strong);border-radius:var(--ctl-r);overflow:hidden;flex:none;}
.lib-access[hidden]{display:none;}
.lib-access button{border:0;background:transparent;color:var(--text-dim);padding:0 13px;font-family:inherit;font-size:var(--ctl-fs);cursor:pointer;white-space:nowrap;}
.lib-access button + button{border-inline-start:1px solid var(--line);}
.lib-access button:hover{color:var(--text);}
.lib-access button[aria-pressed="true"]{background:rgba(var(--accent-rgb),.14);color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent);}
@media (max-width:560px){ .lib-access{width:100%;} .lib-access button{flex:1;padding:0 6px;} }

/* lock panel in both library popups */
.lib-lock-slot[hidden]{display:none;}
.lib-lock{border:1px solid var(--line-strong);border-radius:14px;padding:14px 16px;background:linear-gradient(160deg,rgba(var(--accent-rgb),.10),transparent 70%);
  display:flex;flex-direction:column;gap:10px;}
.lib-lock__top{display:flex;align-items:center;gap:12px;}
.lib-lock__icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:var(--surface-tint);border:1px solid var(--line-strong);flex:none;}
.lib-lock__top b{display:block;font-size:14px;}
.lib-lock__price{display:inline-block;margin-top:2px;font-size:15px;font-weight:700;color:var(--accent);}
.lib-lock__was{margin-inline-start:8px;font-size:12px;color:var(--text-faint);}
.lib-lock__off{display:inline-block;margin-inline-start:8px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(var(--accent-rgb),.16);color:var(--accent);}
.acc-combo{list-style:none;margin:0;padding:10px 12px;border-radius:12px;border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:var(--ctl-fs-sm);}
.acc-combo li{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.acc-combo b{font-weight:600;white-space:nowrap;}
.acc-combo__off{padding-top:6px;border-top:1px dashed var(--line-strong);color:var(--accent);font-weight:700;}
.acc-combo__off s{color:var(--text-faint);font-weight:400;}
.lib-lock p{margin:0;font-size:var(--ctl-fs-sm);line-height:1.7;color:var(--text-dim);}
.lib-lock__actions{display:flex;gap:8px;flex-wrap:wrap;}
.act-in.is-locked{opacity:.55;cursor:not-allowed;}

/* overlays: account drawer + purchase dialog */
.acc-backdrop{position:fixed;inset:0;z-index:240;background:var(--backdrop);display:flex;opacity:0;transition:opacity .2s ease;}
.acc-backdrop[hidden]{display:none;}
.acc-backdrop.is-open{opacity:1;}
.acc-backdrop--side{justify-content:flex-end;}
.acc-backdrop--center{align-items:center;justify-content:center;padding:16px;}
html.acc-open [id^="gb-widget"]{display:none!important;}
.acc-drawer,.acc-dialog{background:var(--surface);color:var(--text);border:1px solid var(--line-strong);display:flex;flex-direction:column;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);}
.acc-drawer{width:min(420px,100%);height:100%;border-width:0;border-inline-start-width:1px;transform:translateX(24px);transition:transform .25s ease;}
[dir="rtl"] .acc-drawer{transform:translateX(-24px);}
.acc-backdrop.is-open .acc-drawer{transform:none;}
.acc-dialog{width:min(520px,100%);max-height:calc(100vh - 32px);border-radius:18px;overflow:hidden;}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex:none;}
.acc-head h3{font-size:16px;margin:0;}
.acc-body{flex:1;min-height:0;overflow:auto;padding:16px 18px 20px;display:flex;flex-direction:column;gap:14px;}
.acc-lead{margin:0;font-size:14px;font-weight:600;}
.acc-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.acc-perks li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--text-dim);}
.acc-perks__i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface-tint);border:1px solid var(--line);flex:none;}
.acc-google{min-height:44px;display:flex;justify-content:center;}
.acc-muted{margin:0;font-size:var(--ctl-fs-sm);color:var(--text-faint);text-align:center;}
.acc-dev{display:flex;flex-direction:column;gap:8px;width:100%;padding:12px;border:1px dashed var(--line-strong);border-radius:12px;}
.acc-in{width:100%;height:var(--ctl-h);border:1px solid var(--line-strong);background:var(--surface-tint);color:var(--text);border-radius:var(--ctl-r);
  padding:0 11px;font:inherit;font-size:var(--field-fs);}
.acc-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);}
.acc-in--code{direction:ltr;text-align:left;font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;text-transform:uppercase;}
.acc-profile{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-tint);}
.acc-profile img{width:44px;height:44px;border-radius:50%;flex:none;}
.acc-profile__who{flex:1;min-width:0;display:flex;flex-direction:column;}
.acc-profile__who b{font-size:14px;}
.acc-profile__who small{font-size:12px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;}
.acc-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;}
.acc-tabs button{height:var(--ctl-h);border:0;border-radius:9px;background:none;color:var(--text-dim);font:inherit;font-size:var(--ctl-fs-sm);font-weight:600;cursor:pointer;}
.acc-tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);}
.acc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.acc-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;}
.acc-item__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.acc-item__text b{font-size:13px;}
.acc-item__text small{font-size:12px;color:var(--text-faint);}
.acc-empty{padding:18px 12px;text-align:center;font-size:13px;color:var(--text-faint);border:1px dashed var(--line-strong);border-radius:12px;}
.acc-status{align-self:flex-start;font-size:12px;font-weight:600;padding:1px 8px;border-radius:99px;border:1px solid;}
.acc-status--new{color:var(--type-hover);}
.acc-status--paid{color:var(--type-once);}
.acc-status--cancelled{color:var(--text-faint);}
.acc-redeem{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px;}
.acc-redeem h4{margin:0;font-size:13px;}
.acc-redeem__form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;}
.acc-redeem__form[hidden]{display:none;}
.acc-redeem__form .acc-msg{grid-column:1/-1;}
.acc-msg{margin:0;font-size:12.5px;line-height:1.6;}
.acc-msg:empty{display:none;}
.acc-msg.is-ok{color:var(--type-once);}
.acc-msg.is-err{color:#E5484D;}
.acc-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.acc-autopay{display:flex;flex-direction:column;gap:8px;}
.acc-autopay__btn{width:100%;justify-content:center;height:var(--btn-h);font-size:15px;}
.acc-spinner{width:28px;height:28px;margin:10px auto;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--accent);animation:lib-spin .8s linear infinite;}
.acc-soon{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;border:1px dashed var(--line-strong);background:rgba(var(--accent-rgb),.08);text-align:center;}
.acc-soon b{font-size:15px;color:var(--accent);}
.acc-soon p{margin:0;font-size:var(--ctl-fs-sm);line-height:1.7;color:var(--text-dim);}
.acc-price__label{font-size:12px;color:var(--text-dim);}
.acc-price__value{font-size:22px;color:var(--accent);margin-inline-end:auto;}
.acc-seg{display:inline-flex;height:var(--ctl-h);border:1px solid var(--line-strong);border-radius:var(--ctl-r);overflow:hidden;}
.acc-seg button{border:0;background:none;color:var(--text-dim);padding:0 12px;font:inherit;font-size:var(--ctl-fs-sm);cursor:pointer;}
.acc-seg button[aria-checked="true"]{background:rgba(var(--accent-rgb),.14);color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent);}
.acc-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;}
.acc-method{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--surface-tint);color:var(--text);font:inherit;text-align:start;cursor:pointer;}
.acc-method:hover{border-color:var(--accent);}
.acc-method[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);}
.acc-method b{font-size:14px;}
.acc-method__detail{font-size:12px;color:var(--text-dim);direction:ltr;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.acc-paydetail{display:flex;align-items:center;gap:8px;}
.acc-paydetail code{flex:1;min-width:0;height:var(--ctl-h);display:flex;align-items:center;padding:0 11px;border:1px dashed var(--line-strong);
  border-radius:var(--ctl-r);font-family:'IBM Plex Mono',monospace;font-size:13px;direction:ltr;overflow:hidden;}
.acc-steps{margin:0;font-size:12.5px;line-height:1.7;color:var(--text-dim);padding:10px 12px;border-radius:12px;background:rgba(var(--accent-rgb),.08);}
.acc-form{display:flex;flex-direction:column;gap:8px;}
.acc-done{margin:0;font-size:15px;font-weight:700;color:var(--type-once);}
.acc-contact{display:flex;gap:8px;flex-wrap:wrap;}
.acc-toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--text);color:var(--bg);padding:9px 18px;
  border-radius:99px;font-size:13px;transition:opacity .2s ease,transform .2s ease;pointer-events:none;z-index:260;}
.acc-toast.show{opacity:1;transform:translate(-50%,0);}
@media (prefers-reduced-motion:reduce){ .acc-backdrop,.acc-drawer,.card-fav{transition:none;} }

/* Privacy policy links (contact section, sign-in, purchase dialog) */
/* legal links bar: the last row of the app, on every screen */
.site-legal{flex:none;position:relative;z-index:3;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 18px;
  padding:9px 16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12.5px;line-height:1.5;}
.site-legal__copy{color:var(--text-faint);}
.site-legal__links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;}
/* separators: the accent dot from the logo, with a slow, faint glow that
   breathes in unison (ambient, not a loading sequence) */
.site-legal__dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 5px 0 rgba(var(--accent-rgb),.35);animation:legal-dot-breathe 6s ease-in-out infinite;}
@keyframes legal-dot-breathe{
  0%,100%{box-shadow:0 0 5px 0 rgba(var(--accent-rgb),.3);opacity:.75;}
  50%{box-shadow:0 0 9px 1px rgba(var(--accent-rgb),.5);opacity:1;}
}
@media (prefers-reduced-motion:reduce){ .site-legal__dot{animation:none;} }
.site-legal__links a{color:var(--text-dim);text-decoration:none;}
.site-legal__links a:hover,.site-legal__links a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:600px){ .site-legal{padding:12px 16px 90px;font-size:13px;} }
.acc-privacy{text-align:center;}
.acc-privacy a{color:var(--text-dim);text-decoration:underline;text-underline-offset:3px;}