h10 {font-size: 105% !important; text-shadow: none !important;}
h11 {font-size: 65% !important;}

:root{
  --font-sans: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace, -apple-system, BlinkMacSystemFont, system-ui;
  --font-serif: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace;
  --font-mono: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace; }
:root { --font-special: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace; }

body.in-project #projectPage,
body.in-project #projectPage * {
  font-family: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace !important;
  font-weight: 400;
  line-height: 26px;
  font-size: 20px;
}
@media (max-width: 1000px){
body.in-project #projectPage,
body.in-project #projectPage * {
  line-height: 26px;
  font-size: 18px;
}
}
body.in-project :is(p, li, blockquote, figcaption, .ps-caption, .p-meta, .intro, .text, .copy, .credits, #pp-title){
  font-family: var(--font-special) !important;
  font-size: 30px;
  font-weight: 400;
}
@media (max-width: 1000px){
body.in-project :is(p, li, blockquote, figcaption, .ps-caption, .p-meta, .intro, .text, .copy, .credits, #pp-title){
  font-size: 25px;
}
}
body.in-project .ps-caption, .caption{
  font-family: var(--font-special) !important;
  font-size: 18px !important;
  font-weight: 400;
}
@media (max-width: 1000px){
body.in-project .ps-caption, .caption{
  font-size: 16px !important;
}
}
body.in-project :is(h1,h2,h3,h4,h5,h6){
  font-family: var(--font-special) !important;
  font-weight: 400;
}
body.in-project .pp-actions{
  font-family: var(--font-special) !important;
  font-size: 20px !important;
  font-weight: 400;
}
#news-inner{
      font-family: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace !important;
font-size: 90% !important;
    margin-top: 0px !important;
}
#news-inner a{
      font-family: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace !important;

}
#abouttxt{
  font-family: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace !important;
  font-weight: 400;
  line-height: 26px;
  font-size: 20px;
  padding: 0px;
  margin: -5px;
}
@media (max-width: 1000px){
#abouttxt{
  font-size: 18px;
  line-height: 22px;
}
}
.body .proj, .body .list, .body .title{
  border-bottom: 0px !important;
  text-decoration: none !important;
}
h3{
  margin-top: -5px !important;
  padding-bottom: 5px !important;
}
.about-link{
  margin-top: 2px !important;
}

    :root{
      --pad:18px;
      --ticker-h:40px;
      --crumb-h:40px; 
      --balloon-size:240px;
      --z-ui:1000;
      --z-slider:-1;
      --glow: rgba(184,184,184,.6);
      --glow-strong: rgba(154,154,154,.4);
      --btn-bg:#fff;
      --btn-fg:#000;
      --head-gap: 8px; 

      
      --dreaming:#09c9cb; --glitching:#b60000; --carrying:#c0b217;
      --alter-egos:#007d83; --collab:#000000; --spaces:#0000FF; --communities:#000000; --curated:#6b004b;

      
      --dreaming-tint:#d5ffff; --glitching-tint:#ffd6d6; --carrying-tint:#fdfad5;
      --alter-egos-tint:#a2f8fc; --collab-tint:#f3f3f3; --spaces-tint:#b5b5ff;
      --communities-tint:#f3f3f3; --curated-tint:#ffcbef;

      
      --slider-margin:16px; 
      --fs-cap-safe: clamp(56px, 7vh, 96px);
    }

    *{ box-sizing:border-box; }
    html,body{font-family:var(--font-sans); height:100%;}
    body{
      margin:0; background:#fff; color:#000; overflow:hidden;
      font-family:"Times New Roman", Times, serif;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      -webkit-tap-highlight-color:transparent;
    }

::-moz-selection { 
  color: white;
  background: #0000FF;
}

::selection {
  color: white;
  background: #0000FF;
}

a.previewlink,
.previewlink a,
a.previewlink:visited,
.previewlink a:visited,
a.previewlink:hover,
.previewlink a:hover,
a.previewlink:focus,
.previewlink a:focus,
a.previewlink:active,
.previewlink a:active {
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

#projecttext {font-size: 40px !important;}

.spacerm5 {margin-top: -5px;}
.spacerm10 {margin-top: -10px;}
.spacerm15 {margin-top: -15px;}
.spacerm20 {margin-top: -20px;}
.spacerm25 {margin-top: -25px;}
.spacerm30 {margin-top: -30px;}
.spacer5 {margin-bottom: 5px;}
.spacer10 {margin-bottom: 10px;}
.spacer12 {margin-bottom: 12px;}
.spacer15 {margin-bottom: 15px;}
.spacer20 {margin-bottom: 20px;}
.spacer25 {margin-bottom: 25px;}
.spacer30 {margin-bottom: 30px;}
.spacermobm5 {margin-top: -5px;}
.spacermobm10 {margin-top: -10px;}
.spacermobm15 {margin-top: -15px;}
.spacermob5 {margin-top: 5px;}
.spacermob10 {margin-top: 10px;}
.spacermob15 {margin-top: 15px;}
.spacermob20 {margin-top: 20px;}
.spacermob25 {margin-top: 25px;}
.spacermob30 {margin-top: 30px;}
.spacermob40 {margin-top: 40px;}
.spacermob50 {margin-top: 50px;}
.spacermob5, .spacermob10, .spacermob15, .spacermob20, .spacermob25, .spacermob30, .spacermob40, .spacermob50, .spacermobm5, .spacermobm10 {display: none;}

@media (max-width: 791px){
.spacermob5, .spacermob10, .spacermob15, .spacermob20, .spacermob25, .spacermob30, .spacermob40, .spacermob50, .spacermobm5, .spacermobm10 {display: block;}
}

#projectPage .logo-row{
  display:flex;
  align-items:center;       
  gap:.75rem;               
  flex-wrap:wrap;           
}
#projectPage .logo-row img{
  height: var(--logo-h, 24px);  
  width:auto;                   
  object-fit:contain;
  display:block;                
}
#projectPage .logo-row a{       
  text-decoration:none;
  line-height:0;                
}

body.bw #projectPage .logo-row img.invert-on-bw { 
  filter: invert(1);
}

    
    body, header, .footerbar, .balloon, button, a{ user-select:none; }
    .scroll, #projectPage, #printArea{ user-select:text; }

    
    body.bw{ background:#000; color:#fff; }
    body.bw .frame{ background:#000; color:#fff; }

    
    body.bw button.icon{ background:#fff !important; color:#000 !important; }

    
    .about-link{ color:#000; }
    body.bw .about-link{ color:#fff; }

    
    body.bw .site-title{ color:#fff !important; }
    body.bw .linksbar a{ color:#fff !important; }

    
    body.bw .balloon{ background:#fff !important; color:#000 !important; text-shadow:none; }

    .hide{ display:none !important; }

    
    header{ position:fixed; inset:10px 10px auto 10px; z-index:var(--z-ui); display:flex; align-items:center; justify-content:space-between; gap:10px; pointer-events:none; }
    header *{ pointer-events:auto; }
    .left-head{ display:flex; align-items:center; gap:24px;}
    .site-title{ font-weight:400; letter-spacing:.2px; text-decoration:none; color:inherit; margin-right:28px; font-size:22px; }
    @media (max-width: 1000px){.site-title{ font-weight:400; letter-spacing:.2px; text-decoration:none; color:inherit; margin-right:28px; font-size:22px;}}
    .about-link{ background:none; border:none; padding:0; font:inherit; text-transform:uppercase; cursor:pointer; }
    .about-link:hover{ text-decoration:underline; }
    
    #work-btn{ margin-left: calc(var(--head-gap) * 2 - 24px); }

    .header-right{ display:flex; align-items:center; gap:var(--head-gap); }

    
    button.icon, a.dl{ 
      border:none; background:transparent; color:var(--btn-fg);
      border-radius:28px; padding:6px 10px; cursor:pointer; 
      box-shadow:0 0 10px var(--glow-strong), 0 0 0 1px rgba(0,0,0,.25) inset;
      transition: box-shadow .15s ease, filter .15s ease;
      line-height:1;
    }
    
    button.icon:hover, a.dl:hover{ filter:brightness(.98); box-shadow:0 0 18px var(--glow), 0 0 0 1px rgba(0,0,0,.45) inset; }

    
    a.dl{
      display:none;                                   
      white-space:nowrap;
      background:#c00000;
      color:#fff !important;
      text-decoration:none;
      margin-right: calc(var(--head-gap) * 3);        
    }
    body.bw a.dl{ background:#fff; color:#000 !important; }
    body.in-category a.dl{ display:inline-flex; align-items:center; }

    
    body.slider-only .left-head{ visibility:hidden; }
    body.slider-only #mode-toggle{ visibility:hidden; }
    body.slider-only #music-btn,
    body.slider-only #gravity-btn,
    body.slider-only #random-btn{ visibility:hidden; } 
    body.slider-only header{ background:transparent !important; }

    
    #bg-slider{ position:fixed; inset:0; z-index:var(--z-slider); display:none; }
    #bg-slider.show{ display:block; }
    #bg-slider .slide{ position:absolute; inset:0; background-size:contain; background-position:center center; background-repeat:no-repeat; opacity:0; transition:opacity 1s ease; }
    #bg-slider .slide.show{ opacity:1; }

    
    .root{ position:fixed; inset:0; padding:60px var(--pad) calc(var(--pad) + var(--ticker-h)) var(--pad); display:grid; grid-template-columns:1fr 1fr; gap:var(--pad); transition:grid-template-columns .9s ease; }
    .frame{ position:relative; border:0; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 0 6px 2px var(--glow); cursor:grab; }
    .frame > .scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; padding:16px; }
    .frame.no-chrome{ box-shadow:none; background:transparent; }
    .frame h3{ margin:6px 0 18px; font-weight:400; }

    .root.three{ grid-template-columns: 1fr 1fr 1fr; }
    .root.three .frame{ box-shadow:0 0 6px 2px var(--glow); }
    .root.three .frame.no-chrome{ box-shadow:none; background:transparent; }

    
    body:not(.bw) .frame[data-cat="dreaming"]{ background:var(--dreaming-tint); }
    body:not(.bw) .frame[data-cat="glitching"]{ background:#efe1ff; }
    body:not(.bw) .frame[data-cat="carrying"]{ background:var(--carrying-tint); }
    body:not(.bw) .frame[data-cat="alter-egos"]{ background:var(--alter-egos-tint); }
    body:not(.bw) .frame[data-cat="collab"]{ background:var(--collab-tint); }
    body:not(.bw) .frame[data-cat="spaces"]{ background:var(--spaces-tint); }
    body:not(.bw) .frame[data-cat="communities"]{ background:var(--communities-tint); }
    body:not(.bw) .frame[data-cat="curated"]{ background:var(--curated-tint); }
    body:not(.bw)[data-cat] header{ background:inherit; }

    
    .balloon-stage{ position:absolute; inset:0; overflow:hidden; }
    .balloon{ position:absolute; width:var(--balloon-size); height:var(--balloon-size); border-radius:999px; display:flex; align-items:center; justify-content:center; text-align:center; padding:14px; line-height:1.1; border:0; user-select:none; box-shadow:none; cursor:pointer; text-transform:uppercase; text-shadow:0 0 8px #d0d0d0, 0 0 14px #d0d0d0; }

.balloon{
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,1) 60%,
    rgba(255,255,255,.75) 72%,
    rgba(255,255,255,.35) 86%,
    rgba(255,255,255,0) 100%);
  mask-image: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,1) 60%,
    rgba(255,255,255,.75) 72%,
    rgba(255,255,255,.35) 86%,
    rgba(255,255,255,0) 100%);
}

    .balloon .p1, .balloon .p2, .balloon .p3{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; }
    .balloon.tri .p1{ animation:triFlash 3s linear infinite; }
    .balloon.tri .p2{ animation:triFlash 3s linear infinite; animation-delay:1s; }
    .balloon.tri .p3{ animation:triFlash 3s linear infinite; animation-delay:2s; }
    @keyframes triFlash{ 0%{opacity:1} 33%{opacity:0} 100%{opacity:0} }
    .balloon.bi .p1{ animation:biFlash 2s linear infinite; }
    .balloon.bi .p2{ animation:biFlash 2s linear infinite; animation-delay:1s; }
    @keyframes biFlash{ 0%{opacity:1} 49%{opacity:1} 50%{opacity:0} 100%{opacity:0} }
    .balloon.bi .p1, .balloon.bi .p2{ animation-timing-function:steps(1,end); }
    .balloon.moving{ background:#62e969; color:#000; }
    .balloon.becoming{ background:#bdc90b; color:#000; }
    .balloon.structuring{ background:#fe907b; color:#000; }

body:not(.bw) .balloon.moving{ background: rgba(98,233,105,0.8) !important; }
body:not(.bw) .balloon.becoming{ background: rgba(189,201,11,0.8) !important; }
body:not(.bw) .balloon.structuring{ background: rgba(254,144,123,0.8) !important; }

    
    .proj{ border:0; background:#fff; color:#000; margin:0 0 16px; border-radius:12px; overflow:hidden; box-shadow:0 0 2px 1px var(--glow); transition:box-shadow .25s ease; }
    .proj:hover{ box-shadow:0 0 2px 1px rgba(154,154,154,.32); }
    .proj .img{ width:100%; aspect-ratio:16/9; background:#ddd center/cover no-repeat; position:relative; }
    .proj .img .fade{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .8s ease; }
    .proj .img .fade.show{ opacity:1; }
    .proj .body{ padding:10px 12px; }
    .proj .title{ font-weight:400; margin:0; }
    .proj .body .content{ margin-top:6px; }
    .proj .body .content > :first-child{ margin-top:0; }
    
    .content { line-height: 20px; }

    
    body.bw .proj .body .content a{ color:#000 }
    body.bw .proj .title a{ text-decoration:none; color:inherit; }

    body.bw .sort-row button:not(.active){ background:transparent !important; color:#fff !important; }
    .proj .title a{ text-decoration:none; color:inherit; }
    .proj .more{ display:none !important; }
    
    .prevlinkproj {
     border:1px solid #000; background:#fff; color:#000; margin:0 0 0px; border-radius:12px; overflow:hidden; transition:box-shadow .25s ease; width: 100%; letter-spacing: 1px; font-size: 75%; text-decoration: none !important; padding: 10px;
    }
     .prevlinkproj a {
     text-decoration: none !important; border-bottom: 0px !important;
    }
     .prevlinkproj:hover {
     background:#eee;
    }
    
    .linkproj {
     border:1px solid #000; color:#000; margin:0 0 0px; border-radius:12px; overflow:hidden; transition:box-shadow .25s ease; letter-spacing: 1px; font-size: 75% !important; text-decoration: none !important; padding: 10px;
    }
    .linkproj a {
     text-decoration: none !important; border-bottom: 0px !important;
    }
    .linkproj:hover {
    background:#eee;
    }
    
    body.bw .linkproj {
     border:1px solid #fff; color:#fff; margin:0 0 0px; border-radius:12px; overflow:hidden; transition:box-shadow .25s ease; letter-spacing: 1px; font-size: 75% !important; text-decoration: none !important; padding: 10px;
    }
    body.bw .linkproj a {
     text-decoration: none !important; border-bottom: 0px !important;
    }
    body.bw .linkproj:hover {
    background:#696969;
    }
    body.bw .prevlinkproj {
    background:#000; border:1px solid #fff;
    }
    body.bw .prevlinkproj:hover {
    }

    
    .sort-row{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 24px; }
    .sort-row button{font-family:var(--font-sans);border:none;background:transparent;color:inherit;border-radius:28px;padding:6px 10px;cursor:pointer;box-shadow:0 0 10px var(--glow-strong),0 0 0 1px rgba(0,0,0,.25) inset;transition:box-shadow .2s ease,background .2s ease;}
    .sort-row button:hover{
      box-shadow:0 0 18px var(--glow), 0 0 0 1px rgba(0,0,0,.5) inset;
    }
    .sort-row button.active{ background:rgba(0,0,0,.06); }
    
    body.bw .sort-row button{font-family:var(--font-sans);border:none;background:transparent;color:inherit;border-radius:28px;padding:6px 10px;cursor:pointer;box-shadow:0 0 10px var(--glow-strong),0 0 0 1px rgba(0,0,0,.25) inset;transition:box-shadow .2s ease,background .2s ease;}
    body.bw .sort-row button.active{ background:#333 !important; color:#fff !important; }

    
    .footerbar{ position:fixed; left:0; right:0; bottom:0; height:var(--ticker-h); display:flex; z-index:900; }
    .linksbar{ width:33.3333%; min-width:520px; background:rgba(255,255,255,0); color:#000; display:flex; align-items:center; gap:18px; padding:0 12px; font-size:14px; position:relative; z-index:2; }
    .linksbar a{ color:#000; text-decoration:none; letter-spacing:.4px; text-transform:uppercase; font-synthesis-weight: none; -webkit-font-smoothing: antialiased;}
    .linksbar a:hover{ text-decoration:underline; }
    .linksbar .seg{ flex:0 0 auto; }
    .linksbar .newslabel{ margin-left:auto; padding-left:12px; }
    .ticker{ flex:1; background:#eee; color:#000; display:flex; align-items:center; overflow:hidden; position:relative; z-index:1; }
    .ticker .inner{ position:absolute; white-space:nowrap; will-change:transform; animation:ticker 28s linear infinite; padding-left:100%; }
    .ticker:hover .inner{ animation-play-state:paused; }
    @keyframes ticker{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-100%);} }
    body.bw .linksbar{ background:rgba(0,0,0,0); color:#fff; }
    body.bw .ticker{ background:#444; color:#fff; }

    .root.hidden, .footerbar.hidden{ visibility:hidden; }
    #projectPage.hidden{ display:none !important; }
    .float-btn{ position:fixed; right:10px; bottom:calc(var(--ticker-h) + 10px); z-index:10; }
    html, body, .scroll, #projectPage{ overflow-x:hidden; }

    
    #projectPage{ position:fixed; left:var(--pad); right:var(--pad); top:45px; bottom:calc(var(--ticker-h) + var(--crumb-h)); overflow:auto; display:none; }
    #projectPage.show{ display:block; animation:fadeIn .25s ease; }
    @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
    #projectPage .title{ font-size:20px; margin:0 0 12px; font-weight:400; display:inline-block; padding-top: 20px;}
    .pp-actions{ display:inline-flex; gap:10px; margin-left:16px; vertical-align:middle; }
    .pp-actions a{ border:1px solid #000; background:#fff; color:#000; border-radius:28px; padding:4px 10px; font-size:0.8em !important; line-height:1; text-decoration:none; display:inline-flex; align-items:center; }
    .pp-actions button{font-size:0.8em !important;}
    body.bw .pp-actions a{ background:#000; color:#fff; border-color:#fff; }
    .pp-actions a:hover{ filter:brightness(.95); }
    #projectPage .grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px !important; }

    
    body:not(.bw) #projectPage[data-cat="dreaming"]{ background:var(--dreaming-tint); }
    body:not(.bw) #projectPage[data-cat="glitching"]{ background:#efe1ff; }
    body:not(.bw) #projectPage[data-cat="carrying"]{ background:var(--carrying-tint); }
    body:not(.bw) #projectPage[data-cat="alter-egos"]{ background:var(--alter-egos-tint); }
    body:not(.bw) #projectPage[data-cat="collab"]{ background:var(--collab-tint); }
    body:not(.bw) #projectPage[data-cat="spaces"]{ background:var(--spaces-tint); }
    body:not(.bw) #projectPage[data-cat="communities"]{ background:var(--communities-tint); }
    body:not(.bw) #projectPage[data-cat="curated"]{ background:var(--curated-tint); }
    body.bw #projectPage{ background:#000; color:#fff; }

    body:not(.bw)[data-cat="dreaming"]{ background:var(--dreaming-tint); }
    body:not(.bw)[data-cat="glitching"]{ background:#efe1ff; }
    body:not(.bw)[data-cat="carrying"]{ background:var(--carrying-tint); }
    body:not(.bw)[data-cat="alter-egos"]{ background:var(--alter-egos-tint); }
    body:not(.bw)[data-cat="collab"]{ background:var(--collab-tint); }
    body:not(.bw)[data-cat="spaces"]{ background:var(--spaces-tint); }
    body:not(.bw)[data-cat="communities"]{ background:var(--communities-tint); }
    body:not(.bw)[data-cat="curated"]{ background:var(--curated-tint); }

    

    
    @keyframes psAutoFade { from{opacity:0} to{opacity:1} }
    .p-slider.auto .viewport img{ animation: psAutoFade 650ms ease; }
    

.p-slider .viewport { background: #eee; }
#projectPage .p-slider .viewport { background: #eee; }

body.bw .p-slider .viewport { background: #333; }
body.bw #projectPage .p-slider .viewport { background: #333; }

body:not(.bw) #projectPage[data-cat="dreaming"] .p-slider .viewport { background: #bfeeee; } 
body:not(.bw) #projectPage[data-cat="glitching"] .p-slider .viewport { background: #e2ccff; } 
body:not(.bw) #projectPage[data-cat="carrying"] .p-slider .viewport { background: #fdf8c3; } 
body:not(.bw) #projectPage[data-cat="alter-egos"] .p-slider .viewport { background: #80e6ec; } 
body:not(.bw) #projectPage[data-cat="collab"] .p-slider .viewport { background: #e0e0e0; } 
body:not(.bw) #projectPage[data-cat="spaces"] .p-slider .viewport { background: #9ba3ff; } 
body:not(.bw) #projectPage[data-cat="communities"] .p-slider .viewport { background: #e0e0e0; } 
body:not(.bw) #projectPage[data-cat="curated"] .p-slider .viewport { background: #ffb3e6; } 

body.bw #projectPage .p-slider .viewport { background: #222 !important; }

#projectPage .p-slider.fixed .viewport img { width: 100%; height: 100%; object-fit: contain; }

body.bw #projectPage .p-slider .controls .ctrl-left,
body.bw #projectPage .p-slider .controls .ctrl-right { color: #000 !important; }

    .p-slider{ position: relative; margin:8px 0 14px; }
    .p-slider .viewport{ position:relative; overflow:hidden; display:flex; align-items:flex-start; justify-content:flex-start; aspect-ratio: 3 / 2; }
    .p-slider .viewport img{
      display:block; max-width:100%; height:auto;
      -webkit-user-drag: none; user-select:none; image-rendering:auto;
    }
    
    .p-slider:not([data-nofs]) .viewport img { cursor: zoom-in; }
    .p-slider .caption{ font-size:.95em; line-height:1.45; margin-top:6px; padding:0; background:transparent; }

    .p-slider .controls{ position:absolute; inset:0; opacity:0; transition:opacity .2s ease; pointer-events:none; z-index: 2; }
    .p-slider:hover .controls, .p-slider .viewport:hover + .controls{ opacity:1; }
    .p-slider .controls a{
      position:absolute; text-decoration:none; pointer-events:auto; user-select:none;
      font-family:"Courier New", Courier, monospace !important; 
    }

    
    .p-slider .controls .ctrl-left,
    .p-slider .controls .ctrl-right{
      display:inline-flex; align-items:center; justify-content:center;
      min-width:40px; padding:14px 10px;
      font-size:20px; line-height:1; color:#000;
      background:#dcdcdc; 
      border:1px solid #808080;
      box-shadow:
        inset -1px -1px 0 #fff,
        inset 1px 1px 0 #b5b5b5;
      border-radius:4px;
      cursor:pointer;
      transition:filter .12s ease, box-shadow .12s ease;
    }
    .p-slider .controls .ctrl-left{ left: var(--slider-margin); top:50%; transform:translateY(-50%); }
    .p-slider .controls .ctrl-right{ right: var(--slider-margin); top:50%; transform:translateY(-50%); }
    .p-slider .controls .ctrl-left:hover,
    .p-slider .controls .ctrl-right:hover{ filter:brightness(.97); }
    .p-slider .controls .ctrl-left:active,
    .p-slider .controls .ctrl-right:active{
      box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b5b5b5;
      transform:translateY(-50%);
    }
    
    body.bw .p-slider .controls .ctrl-left,
    body.bw .p-slider .controls .ctrl-right{ background:#dcdcdc; color:#000; border-color:#808080; }

    
    #ps-fs{ position:fixed; inset:0; z-index:2000; background:transparent; display:none; cursor:zoom-out; }
    #ps-fs.show{ display:block; }
    #ps-fs .imgwrap{
      position:fixed; top:0; left:2vw; right:2vw; bottom:0;
      display:flex; align-items:center; justify-content:center; padding: 12.5vh 0; overflow:visible; z-index: 3;
    }
    #ps-fs img{
      width:auto !important; height:auto !important; max-width:90vw !important; max-height:calc(100vh - 25vh) !important;
      object-fit:contain; display:block; cursor:e-resize !important; -webkit-user-drag:none; user-select:none;
      z-index: 3;
    }
    body.bw #ps-fs img{
      box-shadoww: 0 0 120px 56px rgba(255,255,255,.98), 0 0 38px 16px rgba(255,255,255,.95);
    }
    #ps-fs .cap{
      position:fixed; left:24px; right:24px; bottom:32px; color:#000; text-align:center; line-height:1.35;
      font-size:1em; z-index:3;
    }
    body.bw #ps-fs .cap{ color:#fff; }

#ps-fs .fs-grad{
  position: fixed;
  left: 0;
  
  right: calc(-1 * (100vw - 100%));
  bottom: 0;
  height: 22vh;
  pointer-events: none;
  z-index: 1;

  
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(245,245,245,0.88) 55%,
    rgba(255,255,255,1) 100%
  );
}

body.bw #ps-fs .fs-grad{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.88) 55%,
    rgba(0,0,0,1) 100%
  );
}

    
    @media (max-width:1200px){ .root.three{ grid-template-columns:1fr 1fr; } }
    @media (max-width:900px){ .root, .root.three{ grid-template-columns:1fr; } :root{ --balloon-size:180px; } }
    @media (max-width:600px){ :root{ --balloon-size:150px; } header{ inset:6px 6px auto 6px; } .float-btn{ right:6px; bottom:6px; } }

@media print {
  
  html, body { background: #fff !important; }
  body > * { display: none !important; }
  
  body::before {
    content: "This page prefers not to be paper."; 
    display: block;
    text-align: center;
    font-size: 16pt;
    line-height: 1.4;
    color: #000;
    margin-top: 50vh;
    transform: translateY(-50%);
    white-space: pre-line;
  }
  
  #home-rail, .frame, #projecttxt, .content, .title, .body, .scroll, .list, .sort-row { display: none !important; }
}

    

body:not(.in-category):not(.in-project) #about a,
body:not(.in-category):not(.in-project) #about a:visited { color: inherit !important; text-decoration: underline;  }

body.bw:not(.in-category):not(.in-project) #about a,
body.bw:not(.in-category):not(.in-project) #about a:visited{
  color:#fff !important;
  text-decoration: underline;
}
#about a:hover { text-shadow: none; }

#home-bg{
  position: fixed;
  left: var(--pad);
  right: var(--pad);
  
  top: 16.6667vh;       
  bottom: 16.6667vh;    
  top: 16.6667dvh;
  bottom: 16.6667dvh;
  background: url('/img/sohrabmk_thetransmissiondiaries.jpg') center center / contain no-repeat;
  z-index: -2;           
  pointer-events: none;
  display: none;         
}
body.home-has-bg #home-bg{ display:block; }

body.slider-only #home-bg{
  display: none !important;
}

body.home-has-bg #right.balloons-host{
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
body:not(.home-has-bg) #right.balloons-host{
  opacity: 1;
  pointer-events: auto;
}

body.in-category .proj .title a:hover,
body.in-category .proj .body .content a:hover,
body.in-category .linkproj a:hover,
body.in-category .prevlinkproj a:hover {
  text-shadow: none !important;
}

body.bw.in-category .frame .proj a,
body.bw.in-category .frame .proj a:visited{
  color: #000 !important;
}

body.bw.in-category .frame .proj .body .content a{
  color:#000 !important;
}

body.bw.in-category .frame .proj .title,
body.bw.in-category .frame .proj .title a{
  color:#fff !important;
}

body.bw .left-head a,
body.bw .left-head a:hover,
body.bw #pp-crumbs a,
body.bw #pp-crumbs a:hover,
body.bw #footerbar a,
body.bw #footerbar a:hover{
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

#about-photo{
  position:absolute;
  top: var(--pad);
  left: var(--pad);
  width: 60%;
  height: auto;
  opacity: 0;
  display: none;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 5;
}
body.about-photo-active #about-photo{ display:block; opacity:1; }

body.about-photo-active #stage{ display:none !important; }

#about-photo-wrap{
  position:absolute;
  top: var(--pad);
  left: var(--pad);
  margin-top: 10px;
  width: 60%;
  opacity: 0;
  display: none;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 5;
}
#about-photo-wrap img{
  display:block;
  width:100%;
  height:auto;
}

#about-photo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,102,255,0);  
  
  
   mix-blend-mode: overlay;  
}

body.about-photo-active #about-photo-wrap{
  display:block;
  opacity:1;
}

#about-photo-wrap { position: absolute;  }

#about-photo-wrap::after{
  z-index: 2;                 
}

#about-photo-wrap img#about-photo{
  position: static !important; 
  width: 100% !important;
  height: auto !important;
  z-index: 0 !important;       
  display: block;
}

    a, a:visited { color:#000 !important; }
    .ticker a { color:inherit !important; }
    

body.bw #projectPage a,
body.bw #projectPage a:visited{
  color:#fff !important;
}

    
    #projectPage .title { display:inline-flex; align-items:flex-end; gap:28px !important; }

    
    .sort-row button{font-family:var(--font-sans);border:none;background:transparent;color:inherit;border-radius:28px;padding:6px 10px;cursor:pointer;box-shadow:0 0 10px var(--glow-strong),0 0 0 1px rgba(0,0,0,.25) inset;transition:box-shadow .2s ease,background .2s ease;}

    
    .dl, body:not(.bw) a.dl, body:not(.bw) a.dl:visited, body:not(.bw) a.dl:hover{ color:#fff !important; }
    body.bw a.dl, body.bw a.dl:visited, body.bw a.dl:hover{ color:#000 !important; }

    
    .ticker { background:#eee !important; }
    body.bw .ticker { background:#444 !important; }

    
    .balloons-host{ box-shadow:none !important; background:transparent !important; cursor:default !important; }
    .balloons-host .scroll, .balloons-host .balloon-stage{ cursor:default !important; }

    
    .frame.dragging { opacity:.9; }
    .drop-hint{ outline: none; outline-offset: 0; }
    body.bw .drop-hint { outline-color:#fff; }

    
    .root.home-single{ grid-template-columns:1fr !important; }

    
    .about-enter { animation: aboutEnter .6s ease both; }
    @keyframes aboutEnter { from { opacity: 0 } to { opacity: 1 } }

    .about-contents-enter * { animation: aboutContents .6s ease both; animation-delay: .4s; }
    @keyframes aboutContents { from { opacity: 0 } to { opacity: 1 } }

    
    #projectPage{ right:0 !important; padding-right: var(--pad); }

    
    body.slider-only a.dl { display: none !important; }

    
    body.bw .proj .body .content a,
    body.bw .proj .title a{ text-decoration:none; color:#000 !important; }

    
    #credits-modal .content { color:#000; }
    body.bw #credits-modal .content a { color:#000 !important; }

    
    .cursor-trail{
      position:fixed; pointer-events:none; z-index:5000;
      font-size:16px; line-height:1; opacity:.55;
      transform: translate(-50%, -50%) scale(1);
      transition: opacity .35s ease, transform .35s ease;
      will-change: transform, opacity;
      filter: drop-shadow(0 0 1px rgba(0,0,0,.15));
    }
    body.bw .cursor-trail{ filter: drop-shadow(0 0 1px rgba(255,255,255,.25)); }

    
#hdr-tip{
  position: fixed;
  top: 0; right: 0;
  max-width: 100vw;   
  overflow: visible;  
  display: inline-block;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
}

    body.bw #hdr-tip{ color:#fff;  position:fixed; z-index: 4000; pointer-events: none;}
    body.slider-only #hdr-tip{ display:none !important;  position:fixed; z-index: 4000; pointer-events: none;}
    .header-right .icon, .header-right a.dl{ font-size:16px; line-height:1; padding:6px 10px; }

    

    
    body.in-category .frame .scroll,
    body.in-category .frame .scroll *{
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
    }

    
    a.dl{
      background: transparent !important;
      box-shadow: none !important;
      color: #000 !important;
      text-shadow: none;
      padding: 6px 10px !important; 
    }
    body.bw a.dl{
      color: #fff !important;
      text-shadow: none;
    }

    
    .header-right .icon{ font-size:16px; padding:6px 10px; line-height:1; }
    .float-btn.icon{ font-size:16px; padding:6px 10px; line-height:1; }

body.bw #idle-ascii pre{
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
}

.fit-in-frame{
  display:block;
  max-width:100%;
  object-position:left;
}

body.in-category .proj .img .fade { 
  transition: opacity .8s ease !important; 
  opacity: 0 !important; 
}
body.in-category .proj .img .fade.show { 
  opacity: 1 !important; 
}

body:not(.bw) a.dl, 
body:not(.bw) a.dl:visited, 
body:not(.bw) a.dl:hover{
  color:#000 !important;
}
body.bw a.dl, 
body.bw a.dl:visited, 
body.bw a.dl:hover{
  color:#fff !important;
}

.header-right .icon, 
.float-btn.icon{
  font-size:14px !important;
  padding:5px 8px !important;
  line-height:1 !important;
}

#projectPage a:hover{ 
  text-shadow: none !important;
}

#tipline{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  z-index: 99999;
  pointer-events: none;
  background: rgba(0,0,0,.75);
  color: #fff;
}
body.bw #tipline{ background: rgba(255,255,255,.9); color:#000; }

body, .root, header, .scroll, .frame, .proj, .proj .body, .proj .content, .linksbar, .pp-actions, .p-slider, .list, .sort-row, .footer, .balloon, .site-title, .about-link, nav, .credits, .news, .press, .modal, .toolbar, .controls, .caption, .pill, .icon{
  font-family: var(--font-sans);
}

#projectPage .title,
#projectPage .title a{ font-family: var(--font-serif); }

.ticker, .ticker *{ font-family: var(--font-serif); }

.frame.drop-hint::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(0,0,0,.5);
  border-radius: 16px;
  pointer-events: none;
  z-index: 5000;
}

.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9; 
}
.video-embed > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

body.bw .frame.drop-hint::after{ border-color:#fff; }
header {background: none !important;}
html, body, .root { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body, .root { overflow-x: hidden; }
}

.proj .imglink{ display:block; color:inherit; text-decoration:none; }
.proj .imglink:hover .title{ text-decoration: underline; }

.list .proj .img { 
  margin-bottom: 5px;   
}

@media (min-width: 768px){
  .list .proj .img { margin-bottom: 5px; }
}

body.in-category .frame .scroll .title{
  margin-top: 1px !important;
  font-size: 110% !important;                  
  font-synthesis-weight: none;                  
}

.linksbar{
  font-size: 100% !important;                  
}

    
    .crumbbar{
      position:fixed; left:0; right:0; bottom:var(--ticker-h);
      height: var(--crumb-h);
      display:none; z-index:901;
    }
    body.in-project .crumbbar{ display:flex; }
    .crumbbar .crumb{
      flex:1 1 33.333%;
      display:flex; align-items:center;
      padding:0 12px;
      font-size:14px; letter-spacing:.4px;
      text-transform:uppercase;
      text-decoration:none !important;
      color:#000; background:#fff;
    }
    .crumbbar .crumb:hover{ text-decoration:none; }
    .crumbbar .crumb .crumb-title{ text-decoration:none; color:inherit; }
    .crumbbar:not(.open) .crumb{ flex-direction:row; align-items:center; }
    .crumbbar .part1{ background:#eee !important; }
    
    .crumbbar{ overflow:hidden; transition: height .25s ease; }
    .crumbbar.open{ height: 50vh; } 
    .crumbbar .crumb{ flex-direction: column; align-items: flex-start; gap: 6px; }
    .crumbbar .crumb .sublist{ display:none; width:100%; margin-top:8px; }
    .crumbbar.open .crumb .sublist{ display:block; }
    .crumbbar .crumb .sublist a{
      display:block; text-decoration:none; color:inherit;
      text-transform:uppercase; font-size:14px; letter-spacing:.4px;
      margin: 2px 0;
      opacity:0; transform: translateY(-4px);
      transition: opacity .2s ease, transform .2s ease;
    }
    .crumbbar.open .crumb .sublist a.show{ opacity:1; transform:none; }
    
    body:not(.bw) .crumbbar #crumb-group[data-group="moving"]{ background:#62e969; color:#000; }
    body:not(.bw) .crumbbar #crumb-group[data-group="becoming"]{ background:#bdc90b; color:#000; }
    body:not(.bw) .crumbbar #crumb-group[data-group="structuring"]{ background:#fe907b; color:#000; }
    
    body:not(.bw) .crumbbar #crumb-cat[data-cat="carrying"]{ background:var(--carrying-tint); color:#000; }
    body:not(.bw) .crumbbar #crumb-cat[data-cat="glitching"]{ background:#efe1ff; color:#000; }
    body:not(.bw) .crumbbar #crumb-cat[data-cat="dreaming"]{ background:var(--dreaming-tint); color:#000; }
    body:not(.bw) .crumbbar #crumb-cat[data-cat="alter-egos"]{ background:var(--alter-egos-tint); color:#000; }
    body:not(.bw) .crumbbar #crumb-cat[data-cat="collab"]{ background:var(--collab-tint); color:#000; }
    body:not(.bw) .crumbbar #crumb-cat[data-cat="spaces"]{ background:var(--spaces-tint); color:#000; }
    body:not(.bw) .crumbbar #crumb-cat[data-cat="communities"]{ background:var(--communities-tint); color:#000; }
    body:not(.bw) .crumbbar #crumb-cat[data-cat="curated"]{ background:var(--curated-tint); color:#000; }
    :root{
    --crumb-title-open-offset: 8px; 
    }
    .crumbbar.open .crumb .crumb-title{
        margin-top: var(--crumb-title-open-offset);
    }
    
 white background, black text */
    body.bw .crumbbar .crumb{ background:#fff !important; color:#000 !important; }

body.slider-only #pp-crumbs { display: none !important; }

#hdr-tip { text-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 16px rgba(255,255,255,0.5); }
body.bw #hdr-tip { text-shadow: 0 0 8px rgba(0,0,0,0.85), 0 0 16px rgba(0,0,0,0.6); }

.frame a,
.frame p,
.frame span,
.frame li,
.frame h1, .frame h2, .frame h3, .frame h4, .frame h5, .frame h6,
.frame .text, .frame .content {
  -webkit-user-select: text !important;
  user-select: text !important;
}

#hdr-tip{
  text-shadow: 0 0 14px rgba(240,240,240,.95), 0 0 28px rgba(240,240,240,.85), 0 0 48px rgba(240,240,240,.65) !important;
}
body.bw #hdr-tip{
  text-shadow: 0 0 14px rgba(0,0,0,.95), 0 0 28px rgba(0,0,0,.85), 0 0 48px rgba(0,0,0,.65) !important;
}

.frame .scroll, .frame .scroll *,
#projectPage, #projectPage *{
  -webkit-user-select: text !important;
  user-select: text !important; }

.frame .scroll img,
.frame .scroll video,
.frame .scroll canvas,
.frame .scroll svg,
.frame .scroll picture,
.frame .scroll figure,
#projectPage img,
#projectPage video,
#projectPage canvas,
#projectPage svg,
#projectPage picture,
#projectPage figure,

#projectPage .slider,            #projectPage .slider * ,
#projectPage .project-slider,    #projectPage .project-slider * ,
#projectPage .fs,                #projectPage .fs * ,
#projectPage .pswp,              #projectPage .pswp * ,
#projectPage .swiper,            #projectPage .swiper * ,
#projectPage .flickity-enabled,  #projectPage .flickity-enabled * {
  -webkit-user-select: none !important;
  user-select: none !important;
}

body.bw #site-title a,
body.bw #site-title a:hover,
body.bw header .site-title a,
body.bw header .site-title a:hover,
body.bw header a[href="/"],
body.bw header a[href="/"]:hover,
body.bw .linksbar a,
body.bw .linksbar a:hover{
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#projectPage .p-single{ position:relative; margin:8px 0 14px; }
#projectPage .p-single .viewport{
  position:relative; overflow:hidden; background:#eee;
}
body.bw #projectPage .p-single .viewport{ background:#333; }
#projectPage .p-single .viewport img{
  display:block; width:100%; height:auto; object-fit:contain;
  cursor: zoom-in; 
}
#projectPage .p-single .caption{
  font-size:.95em; line-height:1.45; margin-top:6px;
}

@media print {
  
  body > * { display: none !important; }

  
  body::before {
    content: "This page prefers not to be paper."; 
    display: block;
    text-align: center;
    font-size: 16pt;
    line-height: 1.4;
    color: #000;
    margin-top: 50vh;           
    transform: translateY(-50%);
    white-space: pre-line;      
  }

  
  html, body { background: #fff !important; }
}

#float-toggle{ display:inline-flex; }

body.in-about #float-toggle{ display:none !important; }

#projectPage .p-slider:not(.fs) { 
  width: 100% !important; 
  max-width: 100% !important;
}

#projectPage .p-slider:not(.fs) .viewport {
  width: 100% !important;
  aspect-ratio: 3 / 2;          
  overflow: hidden;
  background: #eee;
}
body.bw #projectPage .p-slider:not(.fs) .viewport { background: #333; }

#projectPage .p-slider:not(.fs) .viewport > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

@keyframes psFadeIn { from { opacity: 0; } to { opacity: 1; } }
#projectPage .p-slider:not(.fs) .viewport[data-tick] {
  animation: psFadeIn .6s ease;
}

#projectPage .col, 
#projectPage .frame { min-width: 0; }

#projectPage .p-slider .viewport {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto; 
  overflow: hidden; 
}

#projectPage .p-slider .viewport img {
position:absolute; inset:0; width:100%; height:100%; object-fit:contain; 
}

// #projectPage .p-slider .viewport img { object-fit: cover; }

#projectPage .p-slider[data-adapt] .viewport {
  aspect-ratio: auto !important;
  display: block;           
  overflow: visible;        
}

#projectPage .p-slider[data-adapt] .viewport img {
  position: static !important;
  width: 100% !important;
  height: auto !important;   
  object-fit: contain !important;
  display: block !important;
}

#projectPage .p-slider[data-adapt] .controls {
  position: absolute; inset: 0; pointer-events: none;
}
#projectPage .p-slider[data-adapt] .controls a {
  pointer-events: auto;
}

body.bw a:hover,
body.dark a:hover {
  text-shadow: none !important;
}

body.bw #ps-fs .fs-grad{
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 25%,
    rgba(0,0,0,1) 100%
  ) !important;
}

body.bw #ps-fs .cap a,
body.bw #ps-fs .cap a:visited,
body.bw #ps-fs .cap a:hover,
body.bw #ps-fs .cap a:focus,
body.bw #ps-fs .cap a:active{
  color: #fff !important;
  text-shadow: none !important;
}

#ps-fs .ps-arrow,
#ps-fs .ps-arrow *,
#ps-fs .ps-prev,
#ps-fs .ps-next {
  -webkit-user-select: none !important; 
  -moz-user-select: none !important;    
  -ms-user-select: none !important;     
  user-select: none !important;         
}

#projectPage .p-slider .controls,
#projectPage .p-slider .controls *,
#projectPage .p-slider .ctrl-left,
#projectPage .p-slider .ctrl-right,
#projectPage .p-slider .ctrl-left *,
#projectPage .p-slider .ctrl-right *{
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important; 
}

.caption .caption-inner{
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.category-description {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 6px;
  margin-bottom: 12px;
  opacity: .85;       
  max-width: 60ch;    
}

body.page-blur{ filter: blur(8px); transition: filter 0.9s ease; }
body.page-blur.hold{ filter: blur(8px); transition: none; }

html.preblur body{ filter: blur(8px) !important; }

#home-rail .frame {
  flex: 0 0 auto;
  min-width: 520px;
  max-width: 560px;
  margin-top: 5px;
  margin-left: 4px;
  border-radius: 16px;
  color: inherit;
  box-shadow: 0 0 6px 2px var(--glow) !important;
  position: relative;
}
#home-rail .scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px;
}

#home-rail .frame{
  color: inherit;
  box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,0.1));
  border-radius: 16px;
  position: relative;
}
#home-rail .scroll{
  position:absolute; inset:0;
  overflow-y:auto; padding:16px;
}

#home-rail .frame h3{
  text-transform: uppercase;
  letter-spacing: .02em;

  margin: 0 0 8px 0;
}
#home-rail .frame .list .title{
  line-height: 1.2;
  margin: 0 0 6px 0;
}

body:not(.bw) #home-rail .frame[data-cat="dreaming"]    { background:var(--dreaming-tint); }
body:not(.bw) #home-rail .frame[data-cat="glitching"]   { background:#efe1ff; }
body:not(.bw) #home-rail .frame[data-cat="carrying"]    { background:var(--carrying-tint); }
body:not(.bw) #home-rail .frame[data-cat="alter-egos"]  { background:var(--alter-egos-tint); }
body:not(.bw) #home-rail .frame[data-cat="collab"]      { background:var(--collab-tint); }
body:not(.bw) #home-rail .frame[data-cat="spaces"]      { background:var(--spaces-tint); }
body:not(.bw) #home-rail .frame[data-cat="communities"] { background:var(--communities-tint); }
body:not(.bw) #home-rail .frame[data-cat="curated"]     { background:var(--curated-tint); }

body.bw #home-rail .frame[data-cat] { background:#000 !important; color:#fff; }

body.bw #home-first,
body.bw #home-first *,
body.bw #home-rail .frame a{
  color:#fff !important;
}
body.bw #home-first a,
body.bw #home-rail .frame a{
  border-color:#fff !important;
}

header .about-link,
header #work-btn{ display:none !important; }

#home-rail .frame,
#home-first{
  cursor: default !important;
}

body:not(.bw):not(.in-category):not(.in-project){
  background:#fff !important;
}

body.bw .proj .imglink:hover .title,
body.bw .proj .imglink:hover .title a{
  text-decoration: none !important;
  text-underline-offset: 2px;
  text-decoration-thickness: from-font;
}

body.bw .proj .title a{
  text-decoration: none !important;
  border-bottom: 0 !important;
}

body.bw.in-category .list .proj,
body.bw.in-category .list .proj .body,
body.bw.in-category .list .proj .content,
body.bw.in-category .list .proj .content *,
body.bw.in-category .list .proj p{
  color:#fff !important;
}

body.bw.in-category .list .proj .content a{
  color:#fff !important;
  border-color:#fff !important;
}

body.bw .list .proj{
  background:#000 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 0 2px 1px rgba(255,255,255,.12) !important;
}
body.bw .list .proj:hover{
  box-shadow:0 0 2px 1px rgba(255,255,255,.25) !important;
}

body.bw .list .proj .img{ background:#222 !important; }

body.bw .proj .body .content a{ color:#fff !important; }

body.bw:not(.in-category):not(.in-project) .prevlinkproj,
body.bw:not(.in-category):not(.in-project) .prevlinkproj a{
  color:#fff !important;           
  border-color:#fff !important;    
  background:#000 !important;      
}

#home-first a.tag-active { text-decoration: underline; }

body:not(.bw) #home-first a.tag-active { color:#800080 !important; }

body.bw #home-first a.tag-active { color:#FFFF00 !important; }

#home-bg{ display:none !important; }  
body.bw #home-bg{ display:block !important; }

#balloons, .balloons, .balloon,
#movement, #movement-toggle, .movement-toggle, .btn-movement,
#motion-toggle, .motion-toggle { display:none !important; }

.balloons-host,
#left.balloons-host, #right.balloons-host, #third.balloons-host {
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.is-home #left { display:none !important; }

#left.empty, #left:empty,
#left .scroll:empty { outline: none !important; box-shadow: none !important; }

[id*="movement"][class*="toggle"],
[id*="movement"][class*="btn"] { display:none !important; }

:root { --rail-grad-w: 40px; }

body.is-home #home-rail { padding-left: var(--rail-grad-w); }

#home-rail-gradient {
  position: fixed;
  pointer-events: none;
  z-index: 5;
  width: var(--rail-grad-w);
  
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
}

body.bw #home-rail-gradient {
  background: linear-gradient(to right, #000 0%, rgba(0,0,0,0) 100%);
}

body.is-home #home-rail::before { content: none !important; }
#home-rail .rail-content { -webkit-mask-image: none !important; mask-image: none !important; margin-left: 0 !important; }

body.is-home #home-first {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important; 
}

body.is-home #home-first > * {
  border-radius: 0 !important;
  clip-path: none !important;
}

body.is-home #home-rail .frame {
  min-width: 0 !important;        
  max-width: none !important;     
  width: auto !important;         
}

body.is-home #home-rail .frame {
  
  --home-cat-w-min: 260px;    
  --home-cat-w: 28vw;         
  --home-cat-w-max: 520px;    

  flex: 0 0 clamp(var(--home-cat-w-min), var(--home-cat-w), var(--home-cat-w-max)) !important;
}

@media (max-width: 1200px) {
  body.is-home #home-rail .frame { --home-cat-w: 32vw; }
}
@media (max-width: 900px) {
  body.is-home #home-rail .frame { --home-cat-w: 40vw; }
}
@media (max-width: 600px) {
  
  body.is-home #home-rail .frame {
    --home-cat-w-min: 240px;
    --home-cat-w: 88vw;
  }
}

body.is-home #home-rail .frame:last-child {
  margin-right: 2vw; 
}

@media (max-width: 1024px) {
  body.is-home #home-rail {
    
    position: relative;               
  }
  body.is-home #home-rail::after {
    content: "";
    flex: 0 0 6vw;                    
    inline-size: 6vw;                 
    block-size: 1px;                  
  }

  
  body.is-home #home-rail .frame:last-child {
    margin-right: 0 !important;
  }
}

body.is-home #home-rail .frame img,
body.is-home #home-rail .frame video,
body.is-home #home-rail .frame .preview {
  width: 100% !important;
  height: auto !important;
  display: block;
}

:root { font-variant-emoji: text; }

@supports (-webkit-touch-callout: none) {
  body.in-project #projectPage,
  body.in-project #projectPage *, body * {
    font-family: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace !important;
    font-variant-emoji: text !important;
  }

  
  * a[target="_blank"]::after,
  * .external::after,
  * .ext::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 800px){
  :root{
    --home-header-h: 60px;                   
    --home-footer-h: var(--ticker-h, 40px);  
    --split-gap: 12px;                       
    --glow-safe: 8px;                        
    --sb-h: 14px;                            
    --about-lh: 1.22;                        
  }
  
  #home-bg{ display:none !important; }  
  body.bw #home-bg{ display:none !important; }

  
  body.is-home #home-first{
    position: fixed !important;
    top: var(--home-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    bottom: var(--home-footer-h) !important;   
    padding-left: var(--pad) !important;
    padding-right: var(--pad) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 3;
  }
  
  body.is-home #home-first,
  body.is-home #home-first p,
  body.is-home #home-first li{ line-height: var(--about-lh) !important; }

  
  body.is-home #home-rail{ display:none !important; }
  body.is-home #home-rail-gradient{ display:none !important; }

  
  body.is-home:has(#home-rail .frame, #home-rail .category-frame) #home-first{
    height: calc(50dvh - var(--home-header-h) - var(--split-gap)) !important; 
    bottom: auto !important;
    transition: top .25s ease, height .25s ease;
  }
  body.is-home:has(#home-rail .frame, #home-rail .category-frame) #home-rail{
    display: flex !important;                 
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(50dvh + var(--split-gap)) !important;  
    bottom: var(--home-footer-h) !important;
    height: auto !important;

    flex-direction: row !important;
    align-items: stretch !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-gutter: stable both-edges;

    
    padding-top: var(--glow-safe) !important;
    padding-left: var(--glow-safe) !important;
    padding-right: var(--glow-safe) !important;

    
    gap: calc(var(--pad) / 2) !important;
  }

  
  body.is-home #home-rail .frame,
  body.is-home #home-rail .category-frame{
    position: relative !important;
    height: calc(100% - (var(--glow-safe) * 2)) !important;
    margin: 0 !important;                           
    flex: 0 0 clamp(260px, 88vw, 520px) !important; 
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

}

  
  body:not(.bw) a.pulse-link,
  body:not(.bw) a.pulse-link:visited{
    color: #0000FF !important;          
    text-decoration: underline;
    animation: none !important;         
  }
  body:not(.bw) a.pulse-link.tag-active,
  body:not(.bw) a.pulse-link.tag-active:visited{
    color: #800080 !important;          
  }

  
  body.bw a.pulse-link,
  body.bw a.pulse-link:visited{
    color: #8EC5FF !important;          
    text-decoration: underline;
    animation: none !important;
  }
  body.bw a.pulse-link.tag-active,
  body.bw a.pulse-link.tag-active:visited{
    color: #FFD600 !important;          
  }

  
  body.bw #home-first a.pulse-link:not(.tag-active),
  body.bw #home-first a.pulse-link:not(.tag-active):visited,
  body.bw #about a.pulse-link:not(.tag-active),
  body.bw #about a.pulse-link:not(.tag-active):visited {
    color: #8EC5FF !important;
  }

  :root { --about-grad-w: 36px; } 

  
  #left .scroll{
    scrollbar-gutter: stable;                   
    position: absolute; inset: 0;               
    overflow-y: auto; overflow-x: hidden;       
  }

  
  #left .scroll::after{
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: var(--about-grad-w);
    right: var(--sbw, 14px);   
    pointer-events: none;
    opacity: 0;                
    transition: opacity .15s ease;
    background: linear-gradient(to left,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,1) 80%);
  }
  body.bw #left .scroll::after{
    background: linear-gradient(to left,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 80%);
  }
  
  #left .scroll.has-vscroll::after{ opacity: 1; }
  

  
  body.is-home.about-has-scroll #home-rail-gradient { display: none !important; }
  
  body.is-home.about-has-scroll #home-rail::after { opacity: 0 !important; }

@media (max-width: 1481px){

  
  a:has(> .linkproj),
  a:has(> .prevlinkproj),
  
  a[style*="flex:0 0 calc(50%"],
  a[style*="flex: 0 0 calc(50%"]{
    
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  
  a:has(> .linkproj) .linkproj,
  a:has(> .prevlinkproj) .prevlinkproj,
  a[style*="flex:0 0 calc(50%"] .linkproj,
  a[style*="flex: 0 0 calc(50%"] .linkproj,
  a[style*="flex:0 0 calc(50%"] .prevlinkproj,
  a[style*="flex: 0 0 calc(50%"] .prevlinkproj{
    width: 100%;
  }

  
  .linkproj, .prevlinkproj{
    
    box-sizing: border-box;
  }
}

#projectPage .small-tight{
  display: block !important;        
  font-size: 90% !important;
  line-height: 1.2 !important;     
  margin: 0 0 .5em 0;               
  padding-top: 5px !important;
}

@media (max-width: 791px){
  
  body.in-project #projectPage .grid{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  
  body.in-project #projectPage .grid .col{
    margin: 0 !important;
    padding: 0 !important;
  }

  
  body.in-project #pp-f1 > *:last-child{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body.in-project #pp-f2 > *:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  
  body.in-project #pp-f2 > .p-slider:first-child,
  body.in-project #pp-f2 > .p-single:first-child{
    margin-top: 0 !important;
  }
}

header .left-head { min-width: 0; }
header .left-head .site-title{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;            
  padding-right: 20px;
}

#music-btn{ white-space: nowrap; }

.footerbar .linksbar #credits-link{ margin-right: 10px; }

@media (max-width: 700px){
  header .left-head .site-title{
    font-size: clamp(16px, 6.2vw, 20px);
  }
}

@media (max-width: 700px){
  #music-btn{
    
    font-size: 0 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }
  #music-btn::after{
    content: "SOUND";
    
    font-size: 14px;       
    line-height: 1;
  }
}

#pp-title {margin-left: -1px !important; line-height: 1.2 !important;}

.footerbar .linksbar{
  
  --footer-link-fs: 1rem;                    
  
}

@media (max-width: 540px){
  
  .footerbar .linksbar a[href*="instagram."]{
    font-size: 0 !important;                 
    
  }
  .footerbar .linksbar a[href*="instagram."]::after{
    content: "IG";
    
    font-size: var(--footer-link-fs) !important;
    line-height: inherit;                     
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-family: inherit;
    color: currentColor;
    display: inline;                           
    vertical-align: baseline;
  }

  
  .footerbar .linksbar a[href*="linktr.ee"],
  .footerbar .linksbar a[href*="linktree"]{
    font-size: 0 !important;
  }
  .footerbar .linksbar a[href*="linktr.ee"]::after,
  .footerbar .linksbar a[href*="linktree"]::after{
    content: "LINKTREE";
    font-size: var(--footer-link-fs) !important;
    line-height: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-family: inherit;
    color: currentColor;
    display: inline;
    vertical-align: baseline;
  }
}

@media (max-width: 540px){
  .footerbar .linksbar{ min-width: 0 !important; }
}

@media (max-width: 540px){
  .linkmob{ display: inline-flex !important; }   
  body.news-on .linkmob{ display: none !important; }  
}

@media (max-width: 1000px){
  #hdr-tip{ display: none !important; }
  body.in-project #projectPage,
  body.in-project #projectPage * {
  font-family: 'Spline Sans Mono', "Courier New", Courier, ui-monospace, monospace !important;
  line-height: 23px;}
}

  
  .crumbbar #crumb-cat .sublist{ margin-bottom:0px; overflow:hidden; }

  
  .crumbbar.scrolling-cat #crumb-cat .sublist{
    max-height: var(--cat-max-h, 240px);
  }
  .crumbbar.scrolling-cat #crumb-cat .sublist .vinner{
    display:block;
    will-change: transform;
    animation: crumb-vscroll var(--cat-duration, 12s) linear infinite alternate;
    font-synthesis-weight: none; -webkit-font-smoothing: antialiased;
  }
  @keyframes crumb-vscroll{
    from{ transform: translateY(0); }
    to  { transform: translateY(calc(-4 * var(--v-overflow, 0px))); }
  }

  
  @media (max-width: 540px){
    .crumbbar.hide-cat-overflow #crumb-cat .sublist{ display:none !important; }
  }
  

header{ display:flex; justify-content:space-between; align-items:center; }
header .left-head{ flex:1 1 auto; min-width:0; }
header .left-head .site-title{ white-space:nowrap; }
header .header-right{ flex:0 0 auto; }

@supports (container-type: inline-size) {
  header{ container-type:inline-size; }

  
  :root{
    
    --title-min: 14ch;         
    --gap-need: 20px;          
    --glitch-w:  36px;         
    --others-w:  176px;        
  }

  
  @container (max-width: calc(var(--title-min) + var(--gap-need) + var(--glitch-w) + var(--others-w))){
    #gravity-btn{ display:none !important; }
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 560px){
    #gravity-btn{ display:none !important; }
  }
}

.force-italic{
font-style: italic;
}

* { user-select: none !important; -webkit-user-select: none !important; }

.selectable-text, .selectable-text *:not(img):not(figure):not(canvas):not(video) {
  user-select: text !important; -webkit-user-select: text !important;
}

#title-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.float-title{
  position:absolute; opacity:0; filter:blur(3px);
  transition: opacity .8s ease, filter .6s ease;
  white-space:nowrap; pointer-events:auto;
  text-decoration:none; 
}
.float-title.show{ opacity:1; }
.float-title:hover{ filter: blur(0); }

.balloon{ text-shadow:none !important; }

body.bw .float-title, html.bw .float-title,
body.mode-bw .float-title, html.mode-bw .float-title,
[data-mode="bw"] .float-title { color:#fff !important; }

.float-title{ text-shadow: 0 0 14px rgba(200,200,200,.95), 0 0 30px rgba(200,200,200,.75); }

body.home-has-bg:not(.bw){
  background: #f2f2f2;
}

#slider-toggle{
  display:none !important;
  visibility:hidden !important;
}

body.in-category .frame .scroll > h3:first-child{
  text-transform: uppercase !important;
  letter-spacing: .04em;
}

:root{
  --trail-size: 10px;
  --trail-life: 700ms;
  --trail-color: rgba(255,255,255,.9);
  --trail-blur: 1.5px;
}
.cursor-trail-dot{
  position: fixed;
  width: var(--trail-size);
  height: var(--trail-size);
  border-radius: 9999px;
  pointer-events: none;
  z-index: 2147483647;
  background: var(--trail-color);
  filter: blur(var(--trail-blur));
  opacity: 1;
  transform: translate(-50%,-50%);
  transition: opacity var(--trail-life) linear, transform var(--trail-life) ease-out;
  mix-blend-mode: screen;
}
html.bw .cursor-trail-dot, body.bw .cursor-trail-dot, [data-mode="bw"] .cursor-trail-dot{
  background: #fff;
  mix-blend-mode: normal;
}

  
  :root{
    --trail-color: #0000FF;
  }
  
  .cursor-trail-dot{
    mix-blend-mode: normal;
  }

.caption{
  display:block;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  font-size:inherit;
  line-height:inherit;
  box-sizing:border-box;
  padding:6px 10px;
}

.caption:empty{ display:none !important; }

.caption .caption-inner{
  display:inline-block;
  white-space:inherit;
  will-change: transform;
  transform: translateX(0);
  font-size:inherit;
  line-height:inherit;
}

.caption .caption-inner *{
  display:inline !important;
  white-space:inherit !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  margin:0; padding:0;
}