:root{--margin:30rem;--gap:20rem}
@media (max-width:1024px){:root{--margin:15px;--gap:10rem}}
*{margin:0;padding:0}*,*::after,*::before{box-sizing:border-box}
html{background:#fff;color:#000;font-size:calc((1/1440)*100vw);overflow:hidden}
@media (max-width:1024px){html{font-size:1px}}
body{font-family:'Roboto Mono',monospace;font-size:12rem;font-weight:400;line-height:1.21;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}
a{text-decoration:none;color:inherit}
.frame{width:100%;position:fixed;padding:var(--margin);top:0;z-index:9;font-size:12rem;text-transform:uppercase;display:flex;justify-content:space-between;pointer-events:none}
.frame h1{font-size:inherit;font-weight:normal}
.frame a{pointer-events:auto;position:relative}
.frame a::after{content:'';width:100%;height:1px;position:absolute;bottom:0;left:0;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.35,.42,0,1)}
.frame a:hover::after{transform:scaleX(1);transform-origin:100% 50%}
@media (max-width:1024px){.frame{font-size:10px}}
#hero{width:100%;height:100vh;overflow:hidden;user-select:none;-webkit-user-select:none;cursor:grab;touch-action:none}
html.dragging #hero{cursor:grabbing}
/* Image color filter. Change --img-filter on #images (or per .item) to swap the look. */
#images{--img-filter:grayscale(1);--img-filter-speed:.6s;width:100%;height:100%;position:relative}
.item{position:absolute;top:0;left:0;will-change:transform}
.item-wrapper{will-change:transform;transition:transform 2s cubic-bezier(.87,0,.13,1)}
.item-wrapper.pre{transition:none}
.item-image{overflow:hidden;position:relative;isolation:isolate}
/* Color tint: a layer in "screen" mode over the grey image. Black = no tint. Only covers the image, never the page background. */
.item-image::after{content:'';position:absolute;inset:0;background:var(--img-tint,#000);mix-blend-mode:screen;pointer-events:none;transition:background-color var(--img-tint-speed,.6s) ease}
.item-image img{display:block;width:100%;height:100%;object-fit:cover;will-change:transform;-webkit-user-drag:none;pointer-events:none;filter:var(--img-filter);transition:filter var(--img-filter-speed) ease}
.item small{width:100%;display:block;font-size:8rem;line-height:1.25;margin-top:12rem}
.line-mask{display:block;overflow:hidden;transition:transform 2s cubic-bezier(.6,.14,0,1)}
.line{display:block;transition:transform 2s cubic-bezier(.6,.14,0,1)}
small:not(.visible) .line-mask{transform:translateY(100%)}
small:not(.visible) .line{transform:translateY(110%)}

/* ---- Site menu: static, expanded, top half of the view. Home state: no item is active. ---- */
:root{--navH:56px;--menuH:57.5vh}
#navName{position:fixed;left:0;top:0;z-index:51;height:var(--navH);display:flex;align-items:center;padding:0 28px;color:#fff;font:500 18px Inter,system-ui,sans-serif;letter-spacing:-.02em}
#siteNav{position:fixed;left:0;right:0;top:0;height:var(--menuH);z-index:50;color:#fff;font:500 13px Inter,system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden}
#siteNav::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(4,4,4,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
#siteNav .wrap{width:min(1184px,100% - 64px);margin:0 auto}
#siteNav .bar{height:var(--navH);flex:none;display:flex;align-items:center}
#siteNav .cur{display:flex;align-items:center;gap:8px;background:none;border:0;color:inherit;padding:0;font:600 14px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.02em;text-transform:uppercase;margin-left:max(0px,380px - (100vw - min(1184px,100vw - 64px))/2)}
#siteNav .fq{position:absolute;right:22px;top:calc((var(--navH) - 28px)/2);display:flex;align-items:center;gap:6px}
#siteNav .fq-wave{width:32px;height:28px;padding:0;display:grid;place-items:center;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer;transition:background .2s}
#siteNav .fq-wave:hover{background:rgba(255,255,255,.16)}
#siteNav .fq-bars{display:flex;align-items:center;gap:2px;height:16px}
#siteNav .fq-bars i{width:2px;height:100%;border-radius:1px;background:currentColor;transform:scaleY(var(--h,.6));animation:fqBar calc(.9s + var(--k)*.14s) ease-in-out infinite;animation-delay:calc(var(--k)*-.23s)}
@keyframes fqBar{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
#siteNav .tunebtn{height:28px;padding:0 14px;border-radius:999px;background:none;color:inherit;border:1px solid rgba(255,255,255,.3);font:600 11px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
#siteNav .tunebtn:hover{background:#fff;color:#111;border-color:#fff}
#siteNav .inner{flex:1;min-height:0;display:flex;flex-direction:column;padding:calc(var(--menuH)*.056) 0 0}
#siteNav .tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;flex:none}
#siteNav .tile{position:relative;height:max(56px,calc(var(--menuH)*.165));border:1px solid rgba(255,255,255,.14);border-radius:6px;background:none;color:inherit;padding:0;cursor:pointer;display:grid;place-items:center;align-content:center;gap:clamp(4px,calc(var(--menuH)*.016),10px);font:500 15px 'IBM Plex Mono',ui-monospace,monospace;transition:background .2s,color .2s,border-color .2s}
#siteNav .tile>span{font-size:13px;line-height:1;opacity:.85}
#siteNav .tile small{font:500 clamp(12px,calc(var(--menuH)*.028),16px)/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.01em;opacity:.9;transition:opacity .2s}
#siteNav .tile:hover small,#siteNav .tile:focus-visible small{opacity:1}
#siteNav .tile:hover,#siteNav .tile:focus-visible{border:2px solid #fff;outline:none}
#siteNav .detail{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:6%;margin-top:calc(var(--menuH)*.07);align-items:start}
#siteNav .ico{font:500 clamp(14px,calc(var(--menuH)*.035),22px)/1 'IBM Plex Mono',ui-monospace,monospace;height:calc(var(--menuH)*.04)}
#siteNav h2{margin:calc(var(--menuH)*.04) 0 calc(var(--menuH)*.05);font:400 min(calc(var(--menuH)*.117),7vw)/1 'Playfair Display',Georgia,serif;letter-spacing:-.01em}
#siteNav .desc{margin:0 0 calc(var(--menuH)*.04);font:400 clamp(13px,calc(var(--menuH)*.028),16px)/1.5 Inter,system-ui,sans-serif;color:rgba(255,255,255,.9);min-height:1.5em}
#siteNav .links a{display:inline-flex;align-items:center;gap:12px;color:inherit;font:600 13px Inter,system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;transition:opacity .2s}
#siteNav .links a span{width:20px;height:20px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:10px}
#siteNav .note{height:calc(var(--menuH)*.42);margin-top:calc(var(--menuH)*.08);display:flex;flex-direction:column;justify-content:space-between}
#siteNav label{display:block;font:600 12px 'IBM Plex Mono',ui-monospace,monospace}
#siteNav .field{display:flex;border-bottom:1px solid rgba(255,255,255,.75);margin-top:0}
#siteNav .field input,#siteNav .field textarea{flex:1;resize:none;background:none;border:0;color:#fff;font:400 clamp(13px,calc(var(--menuH)*.028),16px)/1.4 Inter,system-ui,sans-serif;padding:clamp(6px,calc(var(--menuH)*.02),12px) 0;outline:none}
#siteNav .field ::placeholder{color:rgba(255,255,255,.45)}
#siteNav .note .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#siteNav .note .row{display:flex;align-items:center;justify-content:space-between;margin-top:0}
#siteNav .nn-msg{font:600 11px 'IBM Plex Mono',ui-monospace,monospace;color:rgba(255,255,255,.55)}
#siteNav .run{height:clamp(36px,calc(var(--menuH)*.087),50px);padding:0 clamp(32px,4vw,58px);border-radius:999px;border:0;background:#fff;color:#111;font:600 15px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.04em;cursor:pointer}
@media (max-width:760px){#siteNav .tiles{grid-template-columns:repeat(3,1fr)}#siteNav .detail{grid-template-columns:1fr}#siteNav .note{display:none}#siteNav .fq-wave{display:none}}

/* ---- Portrait: centered, sits on the bottom edge, overlaps the menu. One image per menu item; they cross-fade. ---- */
#portrait{--pu:calc(56vh / 554);position:fixed;left:50%;bottom:0;width:calc(547 * var(--pu));height:calc(554 * var(--pu));transform:translateX(-50%);z-index:60;pointer-events:none}
#portrait img{position:absolute;bottom:0;left:calc(var(--x,0) * var(--pu));width:calc(var(--w) * var(--pu));height:auto;opacity:0;transition:opacity .6s ease}
#portrait img.on{opacity:1}
#portrait img.cut{transition:none}

/* ---- Cursor (from the Covers artifact): a dot is the pointer; a small glass lens chases it and bends what is under it. ---- */
html.mouse-lens,html.mouse-lens *{cursor:none!important}
#dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#26252c;box-shadow:0 0 0 1px rgba(255,255,255,.5);pointer-events:none;z-index:2100;opacity:0;transition:opacity .35s ease,width .2s ease,height .2s ease,margin .2s ease;will-change:transform}
html.mouse-lens #dot{opacity:1}
html.on-dark #dot{background:#f6efe2;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
html.over-ui #dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;box-shadow:none;mix-blend-mode:difference}
#ring{position:fixed;left:0;top:0;border-radius:34%;corner-shape:squircle;box-sizing:border-box;pointer-events:none;z-index:2099;opacity:0;will-change:transform;
 border:1px solid rgba(30,29,36,.10);background:rgba(255,255,255,.02);
 box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -1px 2px rgba(30,29,36,.06),0 3px 10px rgba(30,29,36,.08);
 -webkit-backdrop-filter:saturate(1.15) brightness(1.02);backdrop-filter:saturate(1.15) brightness(1.02);
 transition:border-color .2s ease,background-color .2s ease,box-shadow .25s ease}
@supports (corner-shape:squircle){#ring{border-radius:50%}}
html.lens-svg #ring{backdrop-filter:url(#workLens)}
html.on-dark #ring{border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 3px 10px rgba(0,0,0,.3)}
html.over-ui #ring{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 1px 3px rgba(30,29,36,.03)}

/* ---- Pages (Works, project, player) from the Covers artifact. When a page is open, the menu folds to its top bar and the portrait hides. ---- */
html.page-open #siteNav{height:var(--navH)}
html.page-open #siteNav:not(.open) .inner{display:none}
#siteNav{transition:height .45s cubic-bezier(.2,.7,.2,1)}
html.page-open #siteNav.open{height:var(--menuH)}
html.page-open #siteNav.open .inner{animation:navIn .35s ease .08s both}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
html.page-open #portrait{opacity:0;visibility:hidden}
#portrait{transition:opacity .35s ease}
#siteNav .cur{cursor:pointer}
#indexPage{ position: fixed; inset: 0; z-index: 45; background: #fff; color: #26252c; font: 400 14px/1.55 Inter, system-ui, sans-serif; letter-spacing: -0.005em;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
#indexPage.show{ opacity: 1; visibility: visible; transition: opacity .35s ease; }
#indexPage .ix-scroll{ position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--navH); }
#indexPage .ix-grid{ position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100% - 1px); }
#indexPage .ix-nav{ padding: 0 2.6vw 40px 3vw; border-right: 1px solid #ececec; }
#indexPage .stick{ position: sticky; top: 0; padding-top: 24px; background: #fff; }
#indexPage .lbl{ display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #26252c; text-decoration: none; }
#indexPage ol{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) auto; column-gap: 12px; }
#indexPage li{ border: 0; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
#indexPage .t{ position: relative; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; white-space: nowrap; align-items: baseline; padding: 22px 0;
  border-bottom: 1px solid #e3e3e3; color: #111; text-decoration: none; font: 400 13px/1.35 Inter, system-ui, sans-serif; transition: color .3s ease, border-color .3s ease; }
#indexPage .t > span{ overflow: hidden; text-overflow: ellipsis; }
#indexPage .t > span:nth-child(4){ text-align: right; }
#indexPage ol:hover .t, #indexPage.case .t{ color: #b4b4ba; }
#indexPage ol:hover .t:hover, #indexPage .t.hov, #indexPage.case .t.on, #indexPage.case ol:hover .t:hover{ color: #111; }
#indexPage .t.on{ border-bottom-color: #111; }
#indexPage:not(.case) ol.auto .t{ color: #b4b4ba; }
#indexPage:not(.case) ol.auto .t.cur{ color: #111; }
#indexPage .t .pbar{ position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: #26252c; z-index: 2; pointer-events: none; }
#indexPage ol:hover .t:hover, #indexPage .t.hov{ border-bottom-color: rgba(38,37,44,.34); }
#indexPage .ix-map{ display: none; width: 136px; margin: 56px auto 0; position: relative; cursor: pointer; }
#indexPage.case .ix-map{ display: block; }
#indexPage .ix-mapin{ position: relative; overflow: hidden; }
#indexPage .ix-mapin > div{ position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
#indexPage .ix-frame{ position: absolute; left: -3px; right: -3px; border: 1px solid #26252c; border-radius: 2px; pointer-events: none; }
#indexPage .ix-main{ padding: 0 3vw 0; min-width: 0; }
#indexPage .ix-hero{ position: sticky; top: 24px; margin-top: 24px; }
#indexPage.case .ix-hero{ display: none; }
#indexPage .ix-prev{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
#indexPage .ix-info{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; font-size: 11px; line-height: 1.45; letter-spacing: .04em; text-transform: uppercase; color: #5d5d5d; }
#indexPage .ix-info h3{ margin: 0; font: inherit; color: #26252c; }
#indexPage .ix-info div p{ margin: 0 0 28px; }
#indexPage .ix-info .ix-meta{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-content: start; }
#indexPage .ix-info > p{ margin: 0; max-width: 46ch; }
#indexPage .ix-prev video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; background: transparent; }
#indexPage .ix-prev video.on{ opacity: 1; }
#indexPage .ix-prev i{ position: absolute; inset: -10%; opacity: 0; transition: opacity .5s ease; background-size: 140% 140%; }
#indexPage .ix-prev i.on{ opacity: 1; animation: ixPlay 7s ease-in-out infinite alternate; }
@keyframes ixPlay{ from { background-position: 0% 30%; transform: scale(1); } to { background-position: 100% 70%; transform: scale(1.06); } }
@media (max-width: 860px){#indexPage .ix-grid{ grid-template-columns: 1fr; }
#indexPage .ix-nav{ border-right: 0; padding: 0 20px; }
#indexPage .stick{ position: static; }
#indexPage .ix-map{ display: none !important; }
#indexPage ol{ grid-template-columns: minmax(0, 1fr) max-content; }
#indexPage .t > span:nth-child(2), #indexPage .t > span:nth-child(3){ display: none; }
#indexPage .t > span:nth-child(4){ grid-column: 2; }
#indexPage .ix-main{ padding: 24px 20px 0; }
#indexPage .cs-intro{ grid-template-columns: 1fr; gap: 28px; }}
@media (prefers-reduced-motion: reduce){#indexPage .ix-prev i.on{ animation: none; }}
#projPage{ position: fixed; inset: 0; z-index: 46; background: #000; color: #bdbdbd; font: 500 12px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; text-transform: uppercase;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
#projPage.show{ opacity: 1; visibility: visible; transition: opacity .35s ease; }
#projPage button, #projPage a{ background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: none; text-transform: inherit; letter-spacing: inherit; }
#projPage .pp-bar{ position: absolute; left: 0; right: 0; top: var(--navH); height: 44px; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 36px; align-items: center; padding: 0 14px; z-index: 2; }
#projPage .pp-back{ justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 22px; }
#projPage .pp-back svg{ display: block; transition: transform .25s ease; }
#projPage .pp-back:hover svg{ transform: translateX(-3px); }
#projPage .pp-x{ position: absolute; z-index: 3; right: 14px; top: calc(var(--navH) + 11px); width: 22px; height: 22px; display: grid; place-items: center; }
#projPage .pp-grid{ position: absolute; inset: calc(var(--navH) + 44px) 0 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px 60px; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 36px; row-gap: 32px; align-content: start; }
#projPage .pp-grid button{ display: block; text-align: left; }
#projPage .pp-grid .im{ aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; transition: opacity .3s ease; }
#projPage .pp-grid button:hover .im{ opacity: .8; }
#projPage .pp-grid .k{ display: block; margin-top: 8px; font-size: 10px; color: #8a8a8a; }
#projPage .pp-play{ position: absolute; inset: calc(var(--navH) + 44px) 0 0; display: none; }
#projPage.playing .pp-play{ display: block; }
#projPage.playing .pp-grid{ display: none; }
#projPage .pp-stage{ position: absolute; left: 14px; right: 14px; top: 0; bottom: 64px; }
#projPage .pp-stage i{ position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
#projPage .pp-stage i.on{ opacity: 1; }
#projPage .pp-ctl{ position: absolute; left: 14px; right: 14px; bottom: 0; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
#projPage .pp-ctl .nx{ justify-self: end; }
#projPage .pp-ctl .arr{ padding: 8px 18px; font-size: 14px; }
#projPage .pp-ctl .ct{ justify-self: center; text-align: center; padding: 0 9vw; }
#projPage .pp-ctl .ct b{ display: block; margin: 7px auto 0; width: 54px; height: 2px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; }
#projPage .pp-ctl .ct b::after{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: #bdbdbd; transition: width .3s ease; }
#projPage .pp-ctl .ct b.run::after{ transition: width linear var(--d, 4s); }
#projPage :focus-visible{ outline: 1px solid #fff; outline-offset: 3px; }
@media (max-width: 860px){#projPage .pp-grid{ grid-template-columns: repeat(2, 1fr); column-gap: 12px; }
#projPage .pp-bar{ grid-template-columns: 40px 1fr 1fr 40px; }
#projPage .pp-bar .yr{ display: none; }
#projPage .pp-ctl .ct{ padding: 0 4vw; }}
html[data-theme="dark"] #indexPage{ background: #000; color: #bdbdbd; }
html[data-theme="dark"] #indexPage .stick{ background: #000; }
html[data-theme="dark"] #indexPage .ix-nav{ border-right-color: rgba(255,255,255,.12); }
html[data-theme="dark"] #indexPage .lbl{ color: #e8e8e8; border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] #indexPage .lbl i, html[data-theme="dark"] #indexPage .lbl i::after{ border-color: #e8e8e8; }
html[data-theme="dark"] #indexPage .t{ color: #e8e8e8; border-bottom-color: rgba(255,255,255,.14); }
html[data-theme="dark"] #indexPage ol:hover .t{ color: rgba(255,255,255,.38); }
html[data-theme="dark"] #indexPage:not(.case) ol.auto .t{ color: rgba(255,255,255,.38); }
html[data-theme="dark"] #indexPage:not(.case) ol.auto .t.cur{ color: #fff; }
html[data-theme="dark"] #indexPage ol:hover .t:hover, html[data-theme="dark"] #indexPage .t.hov{ color: #fff; border-bottom-color: rgba(255,255,255,.34); }
html[data-theme="dark"] #indexPage .ix-info{ color: #9a9a9a; }
html[data-theme="dark"] #indexPage .ix-info h3{ color: #e8e8e8; }
#projPage .pp-grid .im{ clip-path: inset(50% 0 50% 0); }
#projPage .pp-grid .k{ opacity: 0; }
#projPage .pp-grid.in .im{ animation: ppOpen .7s cubic-bezier(.65,0,.2,1) both; animation-delay: calc(var(--i) * 45ms); }
#projPage .pp-grid.in .k{ animation: ppFade .5s ease both; animation-delay: calc(var(--i) * 45ms + .3s); }
@keyframes ppOpen{ from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ppFade{ from { opacity: 0; } to { opacity: 1; } }
#projPage .pp-grid{ transition: opacity .35s ease; }
#projPage.playing .pp-grid{ display: grid; opacity: 0; pointer-events: none; }
#projPage.playing .pp-grid.gone{ visibility: hidden; }
#projPage.playing .pp-stage{ animation: ppRise .8s cubic-bezier(.65,0,.2,1) .15s both; }
#projPage.playing .pp-ctl{ animation: ppFade .5s ease .55s both; }
@keyframes ppRise{ from { clip-path: inset(100% 0 0 0); transform: translateY(6%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@media (prefers-reduced-motion: reduce){#projPage .pp-grid .im, #projPage .pp-grid .k{ clip-path: none; opacity: 1; animation: none !important; }
#projPage.playing .pp-stage, #projPage.playing .pp-ctl{ animation: none; }}
#briefPage{ --bg: #fff; --fg: #26252c; --sub: #55545c; --mut: #77767e; --dim: #b4b4ba; --line: #ececec; --hov: rgba(38,37,44,.34); --tag: rgba(38,37,44,.22);
  position: fixed; inset: 0; z-index: 45; background: var(--bg); color: var(--fg); font: 400 14px/1.55 Inter, system-ui, sans-serif; letter-spacing: -0.005em;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
html[data-theme="dark"] #briefPage{ --bg: #000; --fg: #e8e8e8; --sub: #b4b4b4; --mut: #9a9a9a; --dim: rgba(255,255,255,.38); --line: rgba(255,255,255,.14); --hov: rgba(255,255,255,.34); --tag: rgba(255,255,255,.26); }
#briefPage.show{ opacity: 1; visibility: visible; transition: opacity .35s ease; }
#briefPage .bf-scroll{ position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--navH); }
#briefPage .bf-grid{ display: grid; grid-template-columns: 1fr minmax(300px, 33%); min-height: calc(100% - 1px); }
#briefPage .bf-main{ grid-column: 1; grid-row: 1; }
#briefPage .bf-side{ grid-column: 2; grid-row: 1; }
#briefPage .bf-side{ padding: 0 2.6vw 40px; border-left: 1px solid var(--line); }
#briefPage .bf-stick{ position: sticky; top: 0; box-sizing: border-box; height: calc(100dvh - var(--navH)); }
#briefPage .bf-side{ position: relative; }
#briefPage .bf-vids{ position: absolute; inset: 24px 0; z-index: 1; pointer-events: none; border-radius: 12px; overflow: hidden; }
#briefPage .bf-vids i{ position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .45s ease; }
#briefPage .bf-vids i.on{ opacity: 1; }
#briefPage .bf-vids video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#briefPage .bf-tbl li[data-v]{ cursor: pointer; }
#briefPage .bf-tbl.roles li[data-v]{ position: relative; color: var(--mut); }
#briefPage .bf-tbl.roles li[data-v].cur{ color: var(--fg); }
#briefPage .bf-tbl.roles li[data-v].cur > .y{ color: inherit; }
#briefPage .bf-tbl.roles li[data-v]::after{ content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: var(--p, 0%); background: #26252c; pointer-events: none; }
html[data-theme="dark"] #briefPage .bf-tbl.roles li[data-v]::after{ background: #fff; }
#briefPage :focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
#briefPage .bf-main{ padding: 20px 3vw 100px; min-width: 0; }
#briefPage h1{ margin: 0; font: 400 clamp(34px, 3.6vw, 56px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -0.035em; }
#briefPage .bf-sub{ margin: 22px 0 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
#briefPage .bf-lead{ margin: 22px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--sub); }
#briefPage .bf-sec{ margin-top: 20px; }
#briefPage .bf-h{ display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
#briefPage .bf-tbl{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) max-content max-content; column-gap: 24px; }
#briefPage .bf-tbl li{ display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding: 12px; margin: 0 -12px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; font-size: 13px; line-height: 1.35; transition: color .3s ease, border-color .3s ease, background .3s ease; }
#briefPage .bf-tbl li.cur, #briefPage .bf-tbl:hover li:hover{ background: rgba(255,255,255,.09); border-color: var(--ma-d, rgba(255,255,255,.3)) transparent; border-top-color: var(--ma-d, rgba(255,255,255,.3)); border-bottom-color: var(--ma-d, rgba(255,255,255,.3)); }
html[data-theme="light"] #briefPage .bf-tbl li.cur, html[data-theme="light"] #briefPage .bf-tbl:hover li:hover{ background: rgba(0,0,0,.05); }
#briefPage .bf-tbl.roles li[data-v].cur, #briefPage .bf-tbl.roles:hover li[data-v].cur:hover{ background: linear-gradient(90deg, rgba(255,255,255,.12) var(--p, 0%), rgba(255,255,255,.03) var(--p, 0%)); }
html[data-theme="light"] #briefPage .bf-tbl.roles li[data-v].cur, html[data-theme="light"] #briefPage .bf-tbl.roles:hover li[data-v].cur:hover{ background: linear-gradient(90deg, rgba(0,0,0,.07) var(--p, 0%), rgba(0,0,0,.02) var(--p, 0%)); }
html #briefPage .bf-tbl.roles li[data-v]::after{ display: none !important; }
#briefPage .bf-tbl.roles li[data-v]{ transition: color .3s ease, border-color .3s ease; }
#briefPage .bf-tbl li > .y{ color: var(--mut); }
#briefPage .bf-tbl.roles{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) max-content max-content; }
#briefPage .bf-tbl li > span:last-child{ text-align: right; }
#briefPage .bf-tbl:hover li{ color: var(--dim); }
#briefPage .bf-tbl:hover li:hover{ color: var(--fg); }
#briefPage .bf-tbl:hover li:hover > .y{ color: inherit; }
#briefPage .bf-proof{ display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px; }
#briefPage .bf-fig{ padding: 26px 0 36px; border-bottom: 1px solid var(--line); }
#briefPage .bf-fig b{ display: block; font: 400 clamp(24px, 2.2vw, 34px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -0.035em; }
#briefPage .bf-fig small{ display: block; margin-top: 16px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
#briefPage .bf-fig p{ margin: 10px 0 0; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--sub); }
#briefPage .bf-tags{ list-style: none; margin: 0; padding: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
#briefPage .bf-tags li{ display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--tag); border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0; }
@media (max-width: 860px){#briefPage .bf-grid{ grid-template-columns: 1fr; }
#briefPage .bf-main, #briefPage .bf-side{ grid-column: auto; grid-row: auto; }
#briefPage .bf-side{ border-left: 0; padding: 20px 20px 0; }
#briefPage .bf-stick{ position: relative; top: auto; height: auto; aspect-ratio: 16 / 9; }
#briefPage .bf-vids{ inset: 0; }
#briefPage .bf-main{ padding: 40px 20px 80px; }
#briefPage .bf-tbl, #briefPage .bf-tbl.roles{ grid-template-columns: minmax(0, 1fr) max-content; }
#briefPage .bf-tbl li{ row-gap: 4px; }
#briefPage .bf-tbl li > span:nth-child(2){ text-align: right; }
#briefPage .bf-tbl li > .y, #briefPage .bf-tbl li > span:last-child, #briefPage .bf-tbl li > .ind{ color: var(--mut); font-size: 12px; }
#briefPage .bf-tbl.roles li > .y{ order: 1; }
#briefPage .bf-tbl.roles li > .ind{ order: 2; text-align: right; }
#briefPage .bf-tbl.roles li > span:last-child{ display: none; }
#briefPage .bf-proof{ grid-template-columns: repeat(2, 1fr); column-gap: 24px; }}
@media (max-width: 520px){#briefPage .bf-proof{ grid-template-columns: 1fr; }}
#indexPage .ix-prev{ border-radius: 12px; }
html[data-theme="light"] #projPage{ background: #fff; color: #55545c; }
html[data-theme="light"] #projPage .pp-grid .k{ color: #8a8a90; }
html[data-theme="light"] #projPage .pp-ctl .ct b{ background: rgba(0,0,0,.12); }
html[data-theme="light"] #projPage .pp-ctl .ct b::after{ background: #26252c; }
html[data-theme="light"] #projPage :focus-visible{ outline-color: #26252c; }
html[data-theme="dark"] #indexPage .t .pbar{ background: #fff; }
html[data-mood][data-theme="light"] #indexPage, html[data-mood][data-theme="light"] #indexPage .stick, html[data-mood][data-theme="light"] #work{ background: var(--pl) !important; }
html[data-mood][data-theme="light"] #briefPage{ --bg: var(--pl); }
html[data-mood][data-theme="dark"] #indexPage, html[data-mood][data-theme="dark"] #indexPage .stick, html[data-mood][data-theme="dark"] #work{ background: var(--pd) !important; }
html[data-mood][data-theme="dark"] #briefPage{ --bg: var(--pd); }
html[data-mood][data-mood] #briefPage .bf-tbl.roles li[data-v]::after, html[data-mood][data-mood] #indexPage .t .pbar, html[data-mood][data-mood] #mNav li .bar{ background: var(--ma) !important; }
html body #playPage .pl-proof .bf-proof{ display: grid; grid-template-columns: minmax(0, 1fr); }
html body #playPage .pl-proof .bf-fig{ grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
html body #playPage .pl-proof .bf-fig.on{ opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease; }
html body #playPage .pl-proof .bf-fig{ padding: 18px 0 4px; border-bottom: 0; }
html body #playPage .pl-proof .bf-fig b{ font-size: clamp(24px, 2.1vw, 32px); }
html body #playPage .pl-proof .bf-fig small{ margin-top: 10px; }
html body #playPage .pl-proof .bf-fig p{ max-width: 34ch; font-size: 12.5px; }
html body #playPage .pl-top{ display: block; }
html body #playPage .pl-top .pl-proof{ margin-top: 0; }
@media (max-width: 1100px){html body #playPage .pl-top{ grid-template-columns: minmax(0, 1fr); }
html body #playPage .pl-top .pl-proof{ margin-top: 24px; }}
html body #playPage .pl-pc{ display: flex; align-items: center; gap: 12px; }
html body #playPage .pl-pb{ all: unset; cursor: pointer; padding: 0 4px; color: var(--mut); transition: color .2s; }
html body #playPage .pl-pb:hover{ color: var(--fg); }
html body #playPage .pl-pb:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce){html body #playPage .pl-proof .bf-fig, html body #playPage .pl-proof .bf-fig.on{ transition: none; transform: none; }}
html body #playPage .bf-grid{ grid-template-columns: 1fr 1fr; }
html body #playPage .bf-tbl.roles, html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-tbl{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) max-content; }
html body #playPage .bf-vids{ inset: 24px 0 168px; }
html body #playPage .pl-meta{ position: absolute; left: 0; right: 0; bottom: 24px; height: 122px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font: 400 11px/1.45 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
html body #playPage .pl-meta dl{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-content: start; }
html body #playPage .pl-meta dt{ color: var(--fg); }
html body #playPage .pl-meta dd{ margin: 0; }
html body #playPage .pl-meta p{ margin: 0; }
@media (max-width: 900px){html body #playPage .bf-grid{ grid-template-columns: 1fr; }
html body #playPage .bf-stick{ aspect-ratio: auto; height: calc(56vw + 160px); }
html body #playPage .bf-vids{ inset: 0 0 150px; }
html body #playPage .pl-meta{ bottom: 10px; }}
#briefPage .bf-grid{ position: relative; z-index: 1; background: var(--bg); }
#indexPage .ix-scroll{ background: inherit; }
#indexPage .ix-grid{ z-index: 1; background: inherit; }
html #indexPage .t{ padding: 12px; margin: 0 -12px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; }
html #indexPage:not(.case) ol.auto .t.cur, html #indexPage .t.hov, html #indexPage ol:hover .t:hover, html #indexPage.case .t.on{
  border-top-color: var(--ma-d, rgba(38,37,44,.5)); border-bottom-color: var(--ma-d, rgba(38,37,44,.5)); background: rgba(0,0,0,.02); }
html[data-theme="dark"] #indexPage:not(.case) ol.auto .t.cur, html[data-theme="dark"] #indexPage .t.hov, html[data-theme="dark"] #indexPage ol:hover .t:hover, html[data-theme="dark"] #indexPage.case .t.on{
  border-top-color: var(--ma-d, rgba(255,255,255,.3)); border-bottom-color: var(--ma-d, rgba(255,255,255,.3)); background: rgba(255,255,255,.03); }
html #indexPage .t.hov, html #indexPage ol:hover .t:hover, html #indexPage.case .t.on{ background: rgba(0,0,0,.05); }
html[data-theme="dark"] #indexPage .t.hov, html[data-theme="dark"] #indexPage ol:hover .t:hover, html[data-theme="dark"] #indexPage.case .t.on{ background: rgba(255,255,255,.09); }
html[data-mood] #indexPage .t .pbar, html #indexPage .t .pbar{ top: 0; bottom: 0; height: auto; z-index: -1; background: rgba(0,0,0,.05) !important; }
html[data-theme="dark"][data-mood] #indexPage .t .pbar, html[data-theme="dark"] #indexPage .t .pbar{ background: rgba(255,255,255,.09) !important; }
html #indexPage .t{ isolation: isolate; }
html[data-theme] #indexPage .t:not(.cur):not(.hov):not(.on):not(:hover), html[data-theme] #indexPage:not(.case) ol:not(.auto) .t.cur:not(.hov):not(:hover), html[data-theme] #indexPage:not(.case) .t.on:not(.cur):not(.hov):not(:hover){ border-top-color: transparent; border-bottom-color: transparent; }
html body #playPage .bf-grid{ grid-template-columns: minmax(0, 31.4fr) minmax(0, 68.6fr); }
html body #playPage .pl-top, html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-h{ display: none; }
html body #playPage .bf-main{ box-sizing: border-box; min-height: calc(100vh - var(--navH)); min-height: calc(100svh - var(--navH)); display: flex; flex-direction: column; padding-top: 56px; padding-bottom: 32px; }
html body #playPage .bf-sec[aria-labelledby="plRoles"]{ margin-top: 0; }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-tbl{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-tbl li > span:nth-child(n+3){ display: none; }
html body #playPage .bf-sec[aria-labelledby="plProof"]{ margin-top: auto; padding-top: 40px; }
html body #playPage .bf-sec[aria-labelledby="plProof"] .bf-h{ display: none; }
html body #playPage .bf-proof{ display: flex; flex-wrap: nowrap; gap: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
html body #playPage .bf-proof .pl-track{ display: flex; flex: none; animation: plmarq 48s linear infinite; }
html body #playPage .bf-proof:hover .pl-track{ animation-play-state: paused; }
html body #playPage .bf-fig{ flex: none; width: 230px; padding: 0 24px 0 0; border: 0; }
html body #playPage .bf-fig b{ font-size: 36px; }
@keyframes plmarq{ to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){html body #playPage .bf-proof .pl-track{ animation: none; }
html body #playPage .bf-proof{ overflow-x: auto; }}
html body #playPage .bf-vids{ inset: 34px 0 112px; }
html body #playPage .pl-meta{ height: 66px; bottom: 30px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html body #playPage .pl-meta dl{ grid-template-columns: max-content max-content; column-gap: 56px; }
html body #playPage .pl-meta p{ justify-self: end; max-width: 380px; }
@media (max-width: 900px){html body #playPage .bf-grid{ grid-template-columns: 1fr; }
html body #playPage .bf-main{ min-height: 0; }}
html body #playPage .bf-grid{ grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); }
html body #playPage .bf-side{ border-left: 0; padding-left: 0; padding-right: 4.2vw; }
html body #playPage .bf-main{ padding: 60px 1.6vw 32px 4.2vw; }
html body #playPage .pl-title{ margin: 0 0 40px; font: 400 36px/1.05 Inter, system-ui, sans-serif; letter-spacing: -.025em; color: var(--fg); }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-h{ display: flex; padding-left: 12px; }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-h span:last-child{ display: none; }
html body #playPage .bf-vids{ inset: 56px 0 112px; }
html body #playPage .bf-proof{ display: block; position: relative; overflow: visible; -webkit-mask-image: none; mask-image: none; min-height: 80px; }
html body #playPage .bf-sec[aria-labelledby="plProof"]{ padding-top: 24px; }
html body #playPage .bf-fig{ display: none; width: auto; padding: 0; grid-template-columns: max-content minmax(0, 1fr); column-gap: 40px; grid-template-rows: max-content 1fr; align-items: start; }
html body #playPage .bf-fig.on{ display: grid; animation: plfade .5s ease; }
html body #playPage .bf-fig b{ grid-column: 1; grid-row: 1; font-size: 44px; line-height: 1; }
html body #playPage .bf-fig small{ grid-column: 1; grid-row: 2; margin-top: 6px; }
html body #playPage .bf-fig p{ grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: 250px; font-size: 13px; line-height: 1.5; }
html body #playPage .pl-dots{ display: flex; gap: 7px; margin: 14px 0 0 calc(50% - 20px); }
html body #playPage .pl-dots button{ width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%; background: var(--fg); opacity: .25; cursor: pointer; }
html body #playPage .pl-dots button.on{ opacity: .9; }
@keyframes plfade{ from { opacity: 0; } to { opacity: 1; } }
html body #playPage .bf-side{ padding-bottom: 0; }
html body #playPage .bf-main{ padding-bottom: 40px; }
html body #playPage .pl-meta{ height: auto; bottom: 40px; align-items: end; }
html body #playPage .pl-meta dl{ align-content: end; }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-h{ padding-left: 0; }
@media (min-width: 901px){html body #playPage .bf-main{ height: calc(100vh - var(--navH)); height: calc(100svh - var(--navH)); }
html body #playPage .bf-sec[aria-labelledby="plRoles"]{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-tbl{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; align-content: start; padding: 0 12px; margin: 0 -12px; }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-tbl::-webkit-scrollbar{ display: none; }
html body #playPage .bf-sec[aria-labelledby="plProof"]{ flex: none; }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-tbl.more{ -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }}
html body #playPage .bf-main{ padding: 56px 40px 40px 56px; }
html body #playPage .bf-side{ padding: 0 56px 0 56px; border-left: 1px solid #ececec; }
html[data-theme="dark"] body #playPage .bf-side{ border-left-color: rgba(255,255,255,.12); }
html body #playPage .bf-vids{ inset: 56px 0 112px; }
html body #playPage .pl-title{ margin-bottom: 28px; }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-h{ display: none !important; }
html body #playPage .bf-main{ padding-right: 56px; }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-tbl, html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-tbl li{ margin-left: 0 !important; margin-right: 0 !important; }
html body #playPage .bf-sec[aria-labelledby="plRoles"] .bf-tbl{ padding-left: 0 !important; padding-right: 0 !important; }
#playPage .pl-dl, #playPage .pl-dr{ display: none; }
html body #playPage.detail .bf-main > :not(.pl-dl){ display: none !important; }
html body #playPage.detail .bf-main{ height: auto; min-height: calc(100svh - var(--navH)); }
html body #playPage.detail .pl-dl{ display: block; position: sticky; top: 0; animation: plfade .45s ease; }
html body #playPage.detail .bf-stick{ display: none; }
html body #playPage.detail .pl-dr{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 30px; padding: 56px 0 56px; animation: plfade .45s ease; }
#playPage .pl-back{ display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; background: none; border: 0; color: var(--mut); font: 500 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
#playPage .pl-back:hover, #playPage .pl-back:focus-visible{ color: var(--fg); }
#playPage .pl-dl h2{ margin: 0 0 40px; font: 400 36px/1.05 Inter, system-ui, sans-serif; letter-spacing: -.025em; color: var(--fg); }
#playPage .pl-dl .pl-copy p{ margin: 0 0 16px; max-width: 400px; font-size: 13px; line-height: 1.35; color: var(--mut); }
#playPage .pl-dl h3{ margin: 56px 0 6px; font: 500 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
#playPage .pl-dl dl{ margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#playPage .pl-dl .pl-r{ display: contents; }
#playPage .pl-dl .pl-r span{ padding: 12px 0; font-size: 13px; color: var(--mut); }
#playPage .pl-dl .pl-r span + span{ color: var(--fg); }
#playPage .pl-dl .dc{ display: inline-block; white-space: pre; text-align: center; vertical-align: top; line-height: inherit; }
#playPage .pl-dl .pl-r span{ white-space: nowrap; line-height: 1.35; height: calc(1.35em + 24px); box-sizing: border-box; overflow: hidden; }
#playPage .pl-dr figure{ margin: 0; }
#playPage .pl-dr figure i{ display: block; aspect-ratio: 16 / 9; border-radius: 8px; }
#playPage .pl-dr figcaption{ margin-top: 8px; font: 500 9px/1 ui-monospace, Menlo, monospace; color: var(--mut); }
@media (max-width: 900px){html body #playPage.detail .pl-dr{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }}
#plShow{ position: fixed; left: 0; right: 0; bottom: 0; top: var(--navH, 56px); z-index: 60; display: none; grid-template-rows: auto 1fr auto; background: #050505; color: #e9e9ea; font: 500 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
#plShow.on{ display: grid; animation: plfade .35s ease; }
#plShow .ps-top, #plShow .ps-bot{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 40px; white-space: nowrap; align-items: center; padding: 18px 14px; }
#plShow .ps-top > :nth-child(2){ text-align: left; }
#plShow .ps-top > :nth-child(3){ text-align: center; }
#plShow .ps-top > :nth-child(4){ text-align: right; }
#plShow button{ background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 6px; }
#plShow button:hover, #plShow button:focus-visible{ color: #fff; }
#plShow .ps-top .ps-x{ justify-self: end; font-size: 22px; line-height: 1; }
#plShow .ps-media{ margin: 0 14px; border-radius: 2px; transition: background .4s ease; }
#plShow .ps-bot{ grid-template-columns: 1fr auto auto auto 1fr; column-gap: 10vw; }
#plShow .ps-top > *{ justify-self: start; }
#plShow .ps-top .ps-back{ padding: 0; color: var(--mut, #9a9a9e); font: 500 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; }
#plShow .ps-top .ps-back:hover, #plShow .ps-top .ps-back:focus-visible{ color: #fff; }
#plShow button:focus:not(:focus-visible), #plShow:focus{ outline: none; }
#plShow .ps-bot > :first-child{ justify-self: start; }
#plShow .ps-bot > :last-child{ justify-self: end; }
#plShow .ps-n{ padding-bottom: 6px; border-bottom: 1px solid currentColor; }
#playPage .pl-dr figure{ cursor: pointer; }
#playPage .pl-dr figure:focus-visible{ outline: 1px solid var(--fg); outline-offset: 4px; }
@media (max-width: 760px){#plShow .ps-bot{ column-gap: 12px; }}
#indexPage .t .dc, #briefPage .bf-tbl .dc, #mNav .t .dc, #srch .sr-i .dc{ display: inline-block; white-space: pre; text-align: center; }
/* Brief rules copied to Works (was done at runtime in the source) */
#playPage{ --bg: #fff; --fg: #26252c; --sub: #55545c; --mut: #77767e; --dim: #b4b4ba; --line: #ececec; --hov: rgba(38,37,44,.34); --tag: rgba(38,37,44,.22);
  position: fixed; inset: 0; z-index: 45; background: var(--bg); color: var(--fg); font: 400 14px/1.55 Inter, system-ui, sans-serif; letter-spacing: -0.005em;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
html[data-theme="dark"] #playPage{ --bg: #000; --fg: #e8e8e8; --sub: #b4b4b4; --mut: #9a9a9a; --dim: rgba(255,255,255,.38); --line: rgba(255,255,255,.14); --hov: rgba(255,255,255,.34); --tag: rgba(255,255,255,.26); }
#playPage.show{ opacity: 1; visibility: visible; transition: opacity .35s ease; }
#playPage .bf-scroll{ position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--navH); }
#playPage .bf-grid{ display: grid; grid-template-columns: 1fr minmax(300px, 33%); min-height: calc(100% - 1px); }
#playPage .bf-main{ grid-column: 1; grid-row: 1; }
#playPage .bf-side{ grid-column: 2; grid-row: 1; }
#playPage .bf-side{ padding: 0 2.6vw 40px; border-left: 1px solid var(--line); }
#playPage .bf-stick{ position: sticky; top: 0; box-sizing: border-box; height: calc(100dvh - var(--navH)); }
#playPage .bf-side{ position: relative; }
#playPage .bf-vids{ position: absolute; inset: 24px 0; z-index: 1; pointer-events: none; border-radius: 12px; overflow: hidden; }
#playPage .bf-vids i{ position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .45s ease; }
#playPage .bf-vids i.on{ opacity: 1; }
#playPage .bf-vids video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#playPage .bf-tbl li[data-v]{ cursor: pointer; }
#playPage .bf-tbl.roles li[data-v]{ position: relative; color: var(--mut); }
#playPage .bf-tbl.roles li[data-v].cur{ color: var(--fg); }
#playPage .bf-tbl.roles li[data-v].cur > .y{ color: inherit; }
#playPage .bf-tbl.roles li[data-v]::after{ content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: var(--p, 0%); background: #26252c; pointer-events: none; }
html[data-theme="dark"] #playPage .bf-tbl.roles li[data-v]::after{ background: #fff; }
#playPage :focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
#playPage .bf-main{ padding: 20px 3vw 100px; min-width: 0; }
#playPage h1{ margin: 0; font: 400 clamp(34px, 3.6vw, 56px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -0.035em; }
#playPage .bf-sub{ margin: 22px 0 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
#playPage .bf-lead{ margin: 22px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--sub); }
#playPage .bf-sec{ margin-top: 20px; }
#playPage .bf-h{ display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
#playPage .bf-tbl{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) max-content max-content; column-gap: 24px; }
#playPage .bf-tbl li{ display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding: 12px; margin: 0 -12px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; font-size: 13px; line-height: 1.35; transition: color .3s ease, border-color .3s ease, background .3s ease; }
#playPage .bf-tbl li.cur, #playPage .bf-tbl:hover li:hover{ background: rgba(255,255,255,.09); border-color: var(--ma-d, rgba(255,255,255,.3)) transparent; border-top-color: var(--ma-d, rgba(255,255,255,.3)); border-bottom-color: var(--ma-d, rgba(255,255,255,.3)); }
html[data-theme="light"] #playPage .bf-tbl li.cur, html[data-theme="light"] #playPage .bf-tbl:hover li:hover{ background: rgba(0,0,0,.05); }
#playPage .bf-tbl.roles li[data-v].cur, #playPage .bf-tbl.roles:hover li[data-v].cur:hover{ background: linear-gradient(90deg, rgba(255,255,255,.12) var(--p, 0%), rgba(255,255,255,.03) var(--p, 0%)); }
html[data-theme="light"] #playPage .bf-tbl.roles li[data-v].cur, html[data-theme="light"] #playPage .bf-tbl.roles:hover li[data-v].cur:hover{ background: linear-gradient(90deg, rgba(0,0,0,.07) var(--p, 0%), rgba(0,0,0,.02) var(--p, 0%)); }
html #playPage .bf-tbl.roles li[data-v]::after{ display: none !important; }
#playPage .bf-tbl.roles li[data-v]{ transition: color .3s ease, border-color .3s ease; }
#playPage .bf-tbl li > .y{ color: var(--mut); }
#playPage .bf-tbl.roles{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) max-content max-content; }
#playPage .bf-tbl li > span:last-child{ text-align: right; }
#playPage .bf-tbl:hover li{ color: var(--dim); }
#playPage .bf-tbl:hover li:hover{ color: var(--fg); }
#playPage .bf-tbl:hover li:hover > .y{ color: inherit; }
#playPage .bf-proof{ display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px; }
#playPage .bf-fig{ padding: 26px 0 36px; border-bottom: 1px solid var(--line); }
#playPage .bf-fig b{ display: block; font: 400 clamp(24px, 2.2vw, 34px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -0.035em; }
#playPage .bf-fig small{ display: block; margin-top: 16px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
#playPage .bf-fig p{ margin: 10px 0 0; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--sub); }
#playPage .bf-tags{ list-style: none; margin: 0; padding: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
#playPage .bf-tags li{ display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--tag); border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0; }
@media (max-width: 860px){#playPage .bf-grid{ grid-template-columns: 1fr; }
#playPage .bf-main, #playPage .bf-side{ grid-column: auto; grid-row: auto; }
#playPage .bf-side{ border-left: 0; padding: 20px 20px 0; }
#playPage .bf-stick{ position: relative; top: auto; height: auto; aspect-ratio: 16 / 9; }
#playPage .bf-vids{ inset: 0; }
#playPage .bf-main{ padding: 40px 20px 80px; }
#playPage .bf-tbl, #playPage .bf-tbl.roles{ grid-template-columns: minmax(0, 1fr) max-content; }
#playPage .bf-tbl li{ row-gap: 4px; }
#playPage .bf-tbl li > span:nth-child(2){ text-align: right; }
#playPage .bf-tbl li > .y, #playPage .bf-tbl li > span:last-child, #playPage .bf-tbl li > .ind{ color: var(--mut); font-size: 12px; }
#playPage .bf-tbl.roles li > .y{ order: 1; }
#playPage .bf-tbl.roles li > .ind{ order: 2; text-align: right; }
#playPage .bf-tbl.roles li > span:last-child{ display: none; }
#playPage .bf-proof{ grid-template-columns: repeat(2, 1fr); column-gap: 24px; }}
@media (max-width: 520px){#playPage .bf-proof{ grid-template-columns: 1fr; }}
html[data-mood][data-theme="light"] #playPage{ --bg: var(--pl); }
html[data-mood][data-theme="dark"] #playPage{ --bg: var(--pd); }
html[data-mood][data-mood] #playPage .bf-tbl.roles li[data-v]::after, html[data-mood][data-mood] #indexPage .t .pbar, html[data-mood][data-mood] #mNav li .bar{ background: var(--ma) !important; }
#playPage .bf-grid{ position: relative; z-index: 1; background: var(--bg); }
#indexPage .t .dc, #playPage .bf-tbl .dc, #mNav .t .dc, #srch .sr-i .dc{ display: inline-block; white-space: pre; text-align: center; }

/* letter scramble on hover (from the Covers artifact) */
#playPage .bf-tbl .dc,#playPage .pl-dl .dc{display:inline-block;white-space:pre;text-align:center}
/* row borders on light pages (the source only had the dark-page colour) */
html[data-theme="light"] #playPage .bf-tbl li.cur,html[data-theme="light"] #playPage .bf-tbl:hover li:hover{border-top-color:var(--ma-d,rgba(38,37,44,.5));border-bottom-color:var(--ma-d,rgba(38,37,44,.5))}
#playPage .pl-dr figure{cursor:pointer}

/* page transitions between pages (browsers that support it) */
@view-transition{navigation:auto}
/* (no view-transition-name on the menu: it would turn off the menu blur) */

/* dropped-down menu on inner pages: more see-through, so the films show behind it */
html.page-open #siteNav::before{background:rgba(4,4,4,.85);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);transition:background .3s ease}

/* light grey behind the project films, shown before and between videos */
#playPage .bf-vids{background:#ececec}

/* player: the media area always fits between the top and bottom bars; films and images are cropped to fill it */
#plShow{grid-template-rows:auto minmax(0,1fr) auto}
#plShow .ps-media{position:relative;min-height:0;overflow:hidden;background-size:cover!important;background-position:center!important}
#plShow .ps-media video{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important}

/* player open: hide the top bar and let the player use the full screen */
html:has(#plShow.on) #siteNav,html:has(#plShow.on) #navName{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}
#plShow.on{top:0}