@charset "UTF-8";
/*
 * Fluxarium editorial theme.
 *
 * Home: a calm, image-led gallery inspired by editorial curation.
 * Detail: documentation-first, navigable and task-oriented.
 * This layer intentionally does not run on the full-screen /play route.
 * Built on top of site.css to preserve shared demo primitives and the
 * existing WebGL lifecycle without rewriting its engine.
 */
body[data-page="home"],body[data-page="effect"],body[data-page="about"]{
  --bg:#f8f8f6;
  --panel:#fff;
  --panel-2:#f4f4f1;
  --line:#e6e5df;
  --text:#1b1c1a;
  --muted:#686b68;
  --dim:#818580;
  --accent:#262827;
  --accent-2:#262827;
  --radius:7px;
  color-scheme:light;
  color:var(--text);
  background:#f8f8f6;
  background-image:none;
}
body:not(.play-mode) .site-grain{display:none}
body:not(.play-mode) ::selection{background:#d4d4ce;color:#111}
body:not(.play-mode) a:hover{color:#080908}
body:not(.play-mode) .site-wrap{width:min(calc(100% - 96px),1400px)}
body:not(.play-mode) .site-header{
  height:75px;
  border-bottom:1px solid #e5e5e0;
  background:transparent;
}
body:not(.play-mode) .brand{
  gap:8px;
  font-size:22px;
  font-weight:670;
  letter-spacing:-.065em;
  color:#181918;
}
body:not(.play-mode) .brand-symbol{
  border:none;
  box-shadow:none;
  background:none;
  color:#1a1b1a;
  width:26px;height:29px;
  font-size:24px;
  font-weight:400;
}
body:not(.play-mode) .brand-dot{color:#1b1c1a}
body:not(.play-mode) .main-nav{gap:29px;color:#575a56;font-size:13px;font-weight:520}
body:not(.play-mode) .main-nav a{color:#535653}
body:not(.play-mode) .main-nav a:hover{color:#111;text-decoration:underline;text-underline-offset:5px}
body:not(.play-mode) .lang-toggle{
  border:1px solid #deded7;
  padding:9px 14px;
  background:#fff;
  color:#292b28;
  font-size:12px;
  border-radius:6px;
}
body:not(.play-mode) .lang-toggle:hover{background:#f1f1ed;border-color:#bdbeb7}
body:not(.play-mode) .site-footer{
  border-top:1px solid #e4e4df;
  padding:23px 0 32px;
  color:#626560;
  font-size:12px;
}
body:not(.play-mode) .site-footer .muted,body:not(.play-mode) .site-footer>span:nth-child(2){color:#93958f}
body:not(.play-mode) .eyebrow{
  color:#747771;
  font-size:11px;
  font-weight:610;
  letter-spacing:.125em;
}
body:not(.play-mode) .title-period{color:inherit}
/* Home / Minimal Gallery-inspired editorial cover */
.gallery-intro{padding:86px 0 71px;border-bottom:0}
.gallery-kicker{
  display:flex;gap:12px;align-items:center;
  font:600 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.15em;color:#6c706b;
  margin-bottom:28px;
}
.kicker-mark{font-size:17px;line-height:1;letter-spacing:0;color:#2c2f2b}
.gallery-intro-row{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.45fr);
  align-items:end;
  gap:45px;
}
.gallery-intro h1{
  margin:0;
  font-size:clamp(52px,6.8vw,104px);
  letter-spacing:-.073em;
  line-height:1.015;
  font-weight:545;
  color:#20211f;
}
.gallery-intro h1 em{
  display:inline;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.08em;
  color:#343630;
}
.gallery-description{
  margin:0 0 5px;
  max-width:340px;
  color:#70736d;
  font-size:14px;
  line-height:1.8;
}
body[data-page=home] .collection{padding:0 0 103px}
body[data-page=home] .collection-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  border-top:1px solid #dcdcd6;
  border-bottom:1px solid #e7e7e2;
  padding:15px 0;
  margin:0;
}
body[data-page=home] .category-filters{gap:4px}
body[data-page=home] .filter-button{
  color:#6d706b;
  background:transparent;
  font-size:12px;
  padding:9px 14px;
  border-radius:5px;
  border:1px solid transparent;
  font-weight:520;
}
body[data-page=home] .filter-button:hover{background:#ededeb;color:#252725}
body[data-page=home] .filter-button.active{
  background:#222420;color:#fff;border-color:#222420;
}
body[data-page=home] .search-field{
  width:267px;
  min-height:39px;
  border:1px solid #dfdfd9;
  background:#fff;
  color:#747772;
  border-radius:6px;
  padding:0 12px;
  gap:10px;
}
body[data-page=home] .search-field input{
  background:transparent;
  color:#292b28;
  font-size:12px;
}
body[data-page=home] .search-field kbd{
  background:#f5f5f2;border:1px solid #e0e0db;
  color:#797c75;
}
body[data-page=home] .collection-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding:29px 0 19px;
  color:#777a73;
  font:600 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.11em;
}
body[data-page=home] .section-aside{
  color:#777a73;margin:0;
  font:500 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  display:block;
}
body[data-page=home] .effect-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:50px 26px;
}
body[data-page=home] .effect-card{
  border:0;
  background:transparent;
  border-radius:0;
  min-width:0;
  box-shadow:none;
  overflow:visible;
  display:flex;
  flex-direction:column;
  transform:none;
  transition:none;
}
body[data-page=home] .effect-card:hover,
body[data-page=home] .effect-card:focus-within{
  transform:none;box-shadow:none;border-color:transparent;
}
body[data-page=home] .effect-card:first-child{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(275px,.75fr);
  column-gap:32px;
  align-items:stretch;
}
body[data-page=home] .card-visual{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:1.52;
  border:1px solid #e2e3df;
  border-radius:6px;
  background:#191a1b;
  box-shadow:none;
  min-height:0;
}
body[data-page=home] .effect-card:first-child .card-visual{
  aspect-ratio:auto;
  min-height:390px;
}
body[data-page=home] .card-index{
  top:18px;left:18px;
  color:#e8e8ea;opacity:.78;
  font-size:10px;letter-spacing:.12em;
}
body[data-page=home] .card-badge{
  top:14px;right:15px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(25,27,30,.56);
  color:#f0f0f0;
  border-radius:3px;
  padding:6px 9px;
  font-size:10px;
  letter-spacing:.04em;
  backdrop-filter:blur(10px);
}
body[data-page=home] .card-preview-note{
  border:0;border-radius:3px;
  background:rgba(10,12,16,.5);
  color:#f0f0f0;
  font-size:10px;letter-spacing:0;
  bottom:18px;left:18px;
}
body[data-page=home] .card-preview-action{
  right:14px;bottom:14px;
  min-height:36px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:4px;
  color:#222;
  background:rgba(255,255,255,.94);
  backdrop-filter:none;
  font-size:11px;
  font-weight:640;
}
body[data-page=home] .card-preview-action:hover,
body[data-page=home] .card-preview-action:focus-visible{
  color:#000;background:#fff;border-color:#fff;
  transform:none;
}
body[data-page=home] .card-body,
body[data-page=home] .card-body-link{
  background:transparent;
  border:0;
  color:#212320;
  padding:18px 0 0;
  gap:0;
  display:flex;
  flex-direction:column;
}
body[data-page=home] .effect-card:first-child .card-body-link{
  padding:20px 8px 10px 0;
}
body[data-page=home] .card-label{
  color:#82847e;
  font-size:11px;
  font-weight:550;
  letter-spacing:.09em;
  margin:0 0 14px;
}
body[data-page=home] .card-title-row{gap:15px;align-items:baseline}
body[data-page=home] .card-title{
  color:#1c1e1b;
  font-size:clamp(25px,2.2vw,34px);
  font-weight:585;
  line-height:1.13;
  letter-spacing:-.053em;
}
body[data-page=home] .effect-card:first-child .card-title{font-size:clamp(31px,3vw,45px)}
body[data-page=home] .card-arrow{font-size:23px;color:#575a55}
body[data-page=home] .card-description{
  color:#767a74;
  font-size:13px;
  max-width:42ch;
  line-height:1.78;
  margin:19px 0 21px;
  min-height:0;
}
body[data-page=home] .card-tags{gap:7px;margin-top:3px}
body[data-page=home] .card-tag{
  background:transparent;
  color:#797c76;
  font-size:10px;
  border:1px solid #dcddd7;
  border-radius:3px;
  padding:6px 9px;
}
body[data-page=home] .card-open-label{
  width:max-content;
  border-bottom:1px solid #292b29;
  padding:0 0 5px;
  margin-top:auto;
  padding-top:25px;
  font-size:12px;
  color:#252725;
  font-weight:650;
}
body[data-page=home] .card-body-link:hover .card-open-label{color:#111;border-color:#111}
body[data-page=home] .upcoming-card{display:none}
body[data-page=home] .empty-state{background:#fff;border-color:#ddd; color:#656860}
body[data-page=home] .empty-state h3{color:#212220}
.gallery-end{
  display:flex;justify-content:space-between;gap:25px;
  border-top:1px solid #e2e2dd;
  padding:26px 0 61px;
  font-size:12px;
  color:#828680;
}
.gallery-end a{color:#393c37;text-decoration:underline;text-underline-offset:4px}

/* Detail / Motion Primitives inspired documentation shell */
body[data-page=effect] .docs-layout{
  display:grid;
  grid-template-columns:198px minmax(0,1fr);
  gap:52px;
  padding:45px 0 100px;
  align-items:start;
}
body[data-page=effect] .docs-sidebar{
  position:sticky;top:28px;
  min-height:70vh;
  padding:7px 21px 0 0;
  border-right:1px solid #e5e5df;
  color:#636762;
  align-self:start;
  font-size:12px;
}
.docs-sidebar .docs-back{
  display:inline-flex;
  padding:5px 0 28px;
  font-size:12px;
  color:#575a55;
  font-weight:580;
}
.docs-nav-group{margin:0 0 33px}
.docs-nav-group a{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:5px;
  padding:10px 12px;
  margin:3px 0;
  font-size:12px;
  color:#555954;
  line-height:1.3;
}
.docs-nav-group a:hover{color:#171816;background:#eeefeb}
.docs-nav-group a.docs-active{
  color:#20221f;
  background:#eceeea;
  font-weight:650;
}
.docs-nav-dot{
  display:inline-block;
  width:5px;height:5px;
  border-radius:50%;
  background:#232522;
}
.docs-nav-heading{
  padding:0 11px;
  margin:0 0 15px;
  font:600 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.095em;
  color:#888b84;
}
.docs-sidebar-foot{padding:0 10px;margin-top:65px;color:#a1a39e;font-size:11px;line-height:1.8}
body[data-page=effect] .docs-content{min-width:0;max-width:1090px;width:100%}
body[data-page=effect] .breadcrumbs{
  color:#848781;
  display:flex;align-items:center;gap:12px;
  font-size:12px;
  padding:3px 0 28px;
}
body[data-page=effect] .breadcrumbs a{color:#6a6d68}
body[data-page=effect] .breadcrumbs a:hover{color:#222}
body[data-page=effect] .effect-intro{
  padding:0 0 34px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  border-bottom:1px solid #e4e5df;
}
body[data-page=effect] .effect-intro h1{
  font-size:clamp(40px,4vw,63px);
  font-weight:570;
  letter-spacing:-.062em;
  color:#1b1d1a;
  margin:14px 0 12px;
}
body[data-page=effect] .effect-intro .eyebrow{
  margin:0;
  display:flex;
  align-items:center;
  gap:16px;
  color:#777b74;
}
.docs-version{
  color:#a0a39c;
  letter-spacing:0;
  font:11px ui-monospace,SFMono-Regular,Consolas,monospace;
}
body[data-page=effect] .effect-intro p:not(.eyebrow){
  max-width:570px;
  color:#6d716b;
  font-size:13px;
  line-height:1.75;
}
body[data-page=effect] .intro-actions{
  padding:0 0 2px;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
body:not(.play-mode) .button{
  border-radius:5px;
  font-size:12px;
  padding:11px 15px;
  min-height:39px;
  font-weight:630;
  transition:background .14s,border-color .14s,color .14s;
  transform:none;
}
body:not(.play-mode) .button:hover{transform:none}
body:not(.play-mode) .button-primary{
  background:#262825;color:#fff!important;
  border:1px solid #262825;
  box-shadow:none;
}
body:not(.play-mode) .button-primary:hover{background:#444743}
body:not(.play-mode) .button-outline{
  background:#fff;color:#333632;
  border:1px solid #dfdfd9;
}
body:not(.play-mode) .button-outline:hover{
  border-color:#aeb0a9;background:#f5f5f2;
}
.docs-preview-section{padding:40px 0 0}
.docs-section-heading{
  display:flex;
  align-items:center;justify-content:space-between;
  gap:20px;margin-bottom:20px;
}
.docs-section-heading>div{display:flex;align-items:center;gap:12px}
.docs-number{
  color:#979a93;
  font:11px ui-monospace,SFMono-Regular,Consolas,monospace;
}
.docs-section-heading h2{
  margin:0;
  color:#282a27;
  font-size:17px;
  font-weight:650;
  letter-spacing:-.025em;
}
.docs-section-heading p{
  margin:0;
  color:#8a8d87;
  font-size:11px;
  text-align:right;
}
body[data-page=effect] .workbench{
  display:grid;
  grid-template-columns:minmax(0,1fr) 278px;
  align-items:start;
  gap:16px;
}
body[data-page=effect] .demo-column{min-width:0}
body[data-page=effect] .fx-stage{
  height:500px;
  min-height:360px;
  background:#191a1b;
  border:1px solid #e1e0da;
  border-radius:6px;
  box-shadow:none;
}
body[data-page=effect] .stage-topline{color:#d2d4d4;font-size:9px;letter-spacing:.12em}
body[data-page=effect] .status-dot{background:#b5ddab;box-shadow:none;width:6px;height:6px}
body[data-page=effect] .stage-hint{font-size:12px}
body[data-page=effect] .stage-info{
  padding:13px 2px 0;
  color:#4e524c;
  font-size:10px;
  gap:18px;
}
body[data-page=effect] .stage-info .muted{color:#959a90}
body[data-page=effect] .stage-info strong{font-weight:600;color:#3a3c37}
.docs-preview-footnote{
  margin:14px 0 0;
  color:#8a8d86;
  font-size:11px;
  line-height:1.7;
}
body[data-page=effect] .control-panel{
  border:1px solid #e4e5df;
  background:#fff;
  border-radius:6px;
  padding:21px 19px;
  color:#252724;
  box-shadow:none;
}
body[data-page=effect] .control-panel .panel-heading{gap:8px}
body[data-page=effect] .control-panel .panel-heading .eyebrow{font-size:10px;color:#888b86;letter-spacing:.085em}
body[data-page=effect] .panel-heading h2{
  font-size:20px;
  font-weight:650;
  color:#232522;
}
body[data-page=effect] .panel-symbol{font-size:20px;color:#92958f}
body[data-page=effect] .panel-subtitle{
  margin:10px 0 21px;
  color:#8c8f89;
  font-size:11px;
}
body[data-page=effect] .control-group{margin:0 0 17px}
body[data-page=effect] .control-group>label,
body[data-page=effect] .control-label-row>label{
  color:#51554f;
  font-size:11px;
  font-weight:630;
}
body[data-page=effect] .control-label-row output{
  color:#2b2c29;
  font:11px ui-monospace,Consolas,monospace;
}
body[data-page=effect] .control-group select{
  height:37px;
  background-color:#fafaf8;
  color:#2f322d;
  font-size:11px;
  border:1px solid #dedfd9;
  border-radius:4px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23636b62' stroke-width='1.5'/%3E%3C/svg%3E");
}
body[data-page=effect] .control-group input[type=range]{accent-color:#252825}
body[data-page=effect] .toggle-line{
  border-color:#e9eae5;
  color:#3a3d38;
}
body[data-page=effect] .toggle-line strong{font-size:11px;color:#494c46}
body[data-page=effect] .toggle-line small{color:#999c95}
body[data-page=effect] .toggle-track{border-color:#cacdc6;background:#deded9}
body[data-page=effect] .toggle-track:after{background:#fff}
body[data-page=effect] .toggle-line input:checked+.toggle-track{background:#343835;border-color:#343835}
body[data-page=effect] .panel-actions{border-top:1px solid #ebebe6}
body[data-page=effect] .button-quiet{
  border:1px solid #e3e4df;
  background:#fafaf8;
  color:#4e514c;
  font-size:11px;
}
body[data-page=effect] .button-quiet:hover{border-color:#b9bdb5;background:#f1f2ef}
body[data-page=effect] .panel-footnote{
  color:#91958e;font-size:10px;
}
body[data-page=effect] .effect-bottom{
  margin:58px 0 0;
  padding:42px 0 20px;
  border-top:1px solid #e1e2dc;
  grid-template-columns:minmax(0,1.4fr) minmax(200px,1fr);
  gap:55px;
}
body[data-page=effect] .effect-bottom .docs-section-heading{margin:0 0 26px}
body[data-page=effect] .effect-bottom h3{
  font-size:22px;
  font-weight:595;
  letter-spacing:-.035em;
  margin:0 0 13px;
}
body[data-page=effect] .effect-bottom p:not(.eyebrow){
  font-size:12px;color:#787c75;
  line-height:1.85;
}
body[data-page=effect] .credits{
  border-left:1px solid #e5e6e1;
  padding-left:27px;
}
body[data-page=effect] .credits .docs-nav-heading{padding:0;margin:3px 0 16px}
body[data-page=effect] .credits a{
  color:#454943;text-decoration:underline;
  text-decoration-color:#b8bcb4;
  text-underline-offset:3px;
}
/* About remains aligned with the new minimal theme. */
body[data-page=about] .about-main{padding:95px 0 115px;min-height:65vh}
body[data-page=about] .about-main h1{
  font-weight:550;
  color:#1f211d;
}
body[data-page=about] .about-main h1 em{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  color:#343630;
  background:none;
  -webkit-background-clip:initial;
  -webkit-text-fill-color:currentColor;
}
body[data-page=about] .about-lede{color:#6a6e67;margin-bottom:38px}
/* Responsive behaviour */
@media(max-width:1180px){
 body[data-page=effect] .docs-layout{grid-template-columns:170px minmax(0,1fr);gap:29px}
 body[data-page=effect] .workbench{grid-template-columns:minmax(0,1fr) 256px}
 body[data-page=effect] .fx-stage{height:455px}
}
@media(max-width:970px){
 body:not(.play-mode) .site-wrap{width:calc(100% - 52px)}
 .gallery-intro{padding:70px 0 54px}
 .gallery-intro-row{grid-template-columns:1.4fr .6fr;gap:30px}
 .gallery-intro h1{font-size:clamp(50px,7vw,77px)}
 body[data-page=home] .effect-card:first-child{grid-template-columns:1.15fr .85fr;gap:23px}
 body[data-page=home] .effect-card:first-child .card-visual{min-height:310px}
 body[data-page=effect] .docs-layout{grid-template-columns:1fr;padding:28px 0 70px;gap:24px}
 body[data-page=effect] .docs-sidebar{
  position:static;display:flex;align-items:center;gap:16px;min-height:auto;
  border-right:0;border-bottom:1px solid #e3e4de;
  padding:0 0 15px;flex-wrap:wrap;
 }
 .docs-sidebar .docs-back{padding:6px 14px 6px 0;border-right:1px solid #e5e6e1}
 .docs-sidebar .docs-nav-group{margin:0;display:flex;align-items:center}
 .docs-nav-group .docs-nav-heading{display:none}
 .docs-nav-group a{margin:0;font-size:11px;padding:8px 10px}
 .docs-sidebar-foot{display:none}
 body[data-page=effect] .docs-on-this-page{margin-left:auto}
 body[data-page=effect] .effect-intro{padding:0 0 28px}
 body[data-page=effect] .workbench{grid-template-columns:minmax(0,1fr) 275px}
 body[data-page=effect] .fx-stage{height:480px}
}
@media(max-width:700px){
 body:not(.play-mode) .site-wrap{width:calc(100% - 36px)}
 body:not(.play-mode) .site-header{height:65px}
 body:not(.play-mode) .brand{font-size:20px}
 body:not(.play-mode) .main-nav{gap:13px}
 body:not(.play-mode) .nav-github{display:none}
 body:not(.play-mode) .lang-toggle{padding:7px 10px}
 .gallery-intro{padding:55px 0 45px}
 .gallery-intro-row{display:block}
 .gallery-intro h1{font-size:clamp(47px,9.6vw,70px)}
 .gallery-description{margin-top:23px;max-width:480px}
 body[data-page=home] .collection-toolbar{gap:12px}
 body[data-page=home] .category-filters{width:100%;overflow:auto;flex-wrap:nowrap}
 body[data-page=home] .search-field{width:100%}
 body[data-page=home] .effect-grid{grid-template-columns:1fr;gap:37px}
 body[data-page=home] .effect-card:first-child{grid-column:auto;display:flex;flex-direction:column;gap:0}
 body[data-page=home] .effect-card:first-child .card-visual{aspect-ratio:1.5;min-height:0}
 body[data-page=home] .effect-card:first-child .card-body-link{padding:17px 0 0}
 body[data-page=home] .effect-card:first-child .card-title{font-size:31px}
 body[data-page=home] .card-description{max-width:65ch;margin:12px 0 14px}
 body[data-page=home] .card-open-label{padding-top:18px}
 body[data-page=home] .collection{padding-bottom:65px}
 .gallery-end{padding:22px 0 42px}
 body[data-page=effect] .docs-on-this-page{margin:0}
 body[data-page=effect] .docs-sidebar{gap:8px}
 body[data-page=effect] .breadcrumbs{padding:4px 0 26px}
 body[data-page=effect] .effect-intro{display:block}
 body[data-page=effect] .effect-intro h1{font-size:46px}
 body[data-page=effect] .intro-actions{justify-content:flex-start;margin-top:20px}
 body[data-page=effect] .workbench{grid-template-columns:1fr}
 body[data-page=effect] .fx-stage{height:440px}
 body[data-page=effect] .control-panel{padding:22px}
 body[data-page=effect] .docs-section-heading{align-items:start}
 .docs-section-heading p{max-width:190px}
 body[data-page=effect] .effect-bottom{grid-template-columns:1fr;gap:23px}
 body[data-page=effect] .credits{border-left:0;border-top:1px solid #e3e4df;padding:23px 0 0}
}
@media(max-width:430px){
 .gallery-intro h1{font-size:45px}
 .gallery-kicker{font-size:9px}
 body[data-page=home] .card-preview-note{bottom:12px;left:9px;font-size:8px}
 body[data-page=home] .card-preview-action{bottom:9px;right:8px;padding:8px;font-size:10px}
 body[data-page=effect] .docs-on-this-page{display:none}
 body[data-page=effect] .fx-stage{height:345px;min-height:315px}
 body[data-page=effect] .docs-preview-section{padding-top:29px}
 .docs-preview-footnote{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .gallery-intro h1 em{animation:none}
}