@import url('/assets/css/video-player.css?v=1');
@font-face{font-family:Tiempos;src:url('/assets/type/tiempos-text-web-regular.woff2')}*{box-sizing:border-box}body{margin:0;background:#f5f3ee;color:#25251f;font:14px system-ui,sans-serif;overflow:hidden}header{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:24px 28px;pointer-events:none;z-index:2}header a,header span{pointer-events:auto}a{color:inherit}header a{text-decoration:none;font:22px Tiempos,Georgia,serif}small{font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-left:12px;opacity:.5}canvas{display:block;width:100vw;height:100dvh;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}canvas:focus-visible{outline:2px solid #888;outline-offset:-4px}footer{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;max-width:calc(100% - 24px);padding:8px;background:#fffefaeF;border:1px solid #ddd9cf;border-radius:12px;box-shadow:0 4px 24px #00000008;z-index:2}footer label{white-space:nowrap;padding-left:8px}button,select{font:inherit;color:inherit;background:transparent;border:0;border-radius:6px;padding:10px;cursor:pointer}button:hover,select:hover{background:#eae7df}button:focus-visible,select:focus-visible{outline:2px solid #888}.zoom{display:flex;white-space:nowrap}#hint{position:fixed;top:66px;left:28px;opacity:.5;font-size:12px;pointer-events:none}#status{position:fixed;top:45%;left:0;width:100%;text-align:center;pointer-events:none}dialog{border:1px solid #ddd9cf;border-radius:12px;background:#f5f3ee;color:inherit;width:550px;max-width:95vw;max-height:80dvh;padding:24px}dialog::backdrop{background:#0005}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h1{font:24px Tiempos,Georgia,serif}#project-list h2{font-size:14px;margin-top:28px}#project-list a{display:block;padding:8px 0;text-decoration:none;border-bottom:1px solid #ddd9cf}@media(max-width:600px){header{padding:20px}#hint{left:20px;right:20px;font-size:11px}footer{gap:2px;bottom:12px;font-size:12px;padding:4px}button,select{padding:10px 7px}small{display:none}}

:root{color-scheme:light dark;--page:#fff;--ink:rgb(15,10,10);--panel:#fffffff2;--line:rgba(15,10,10,.15);--hover:#f0f0f0;--tip:rgb(15,10,10);--tip-ink:#fff}
@media(prefers-color-scheme:dark){:root{--page:rgb(15,16,17);--ink:rgb(230,230,230);--panel:#17191cf2;--line:rgba(230,230,230,.16);--hover:#232529;--tip:#e6e6e6;--tip-ink:#0f1011}}
body,dialog{background:var(--page);color:var(--ink)}footer{background:var(--panel);border-color:var(--line)}dialog,#project-list a{border-color:var(--line)}button:hover,select:hover{background:var(--hover)}select option{background:var(--page);color:var(--ink)}

.time-video{display:none;position:fixed;z-index:1;object-fit:contain;margin:0;padding:0;}

/* Use the index reveal navigation, permanently visible on the timeline. */
.nav-left li:nth-child(1) a::before {
    background-image: url('../icons/featured.svg');
}
.nav-left li:nth-child(2) a::before {
    background-image: url('../icons/information.svg');
}
.nav-left li:nth-child(3) a::before {
    background-image: url('../icons/writing.svg');
}
/* .nav-right li:nth-child(1) a::before {
    background-image: url('../icons/logo-vc.svg');
} */
.nav-right li:nth-child(1) a::before {
    background-image: url('../icons/nonlinear.svg');
}
.nav-right li:nth-child(2) a::before {
    background-image: url('../icons/particular.svg');
}
.nav-right li:nth-child(3) a::before {
    background-image: url('../icons/active-matrix.svg');
}
.nav-left li a::before,
.nav-right li a::before,
.nav-center li a::before {
    position: relative;
    top: -0.25px;
}
.reveal-nav {
    position: fixed;
    top: 1rem;
    background-color: rgba(224, 224, 224, 0.25);
    border-radius: 0.25rem;
    z-index: 1000;
    transform: translateY(calc(-100% - 1.1rem));
    overflow: hidden;
    transition: transform 0.3s ease-in-out, background-color 0.2s ease;
    /* backdrop-filter: blur(0.5rem) brightness(1.05); */
    backdrop-filter: blur(0.25rem) brightness(1.25);
    /* background-color: rgba(255, 255, 255, 0.35); */
}
.reveal-nav.reveal-nav-left {
    left: 2rem;
}
.reveal-nav.reveal-nav-right {
    right: 2rem;
}
.reveal-nav.reveal-nav-center {
    left: 50%;
    transform: translateX(-50%) translateY(calc(-100% - 1.1rem));
}
.reveal-nav.reveal-nav-center.visible {
    transform: translateX(-50%) translateY(0);
}

.reveal-nav.visible {
    transform: translateY(0);
}

.reveal-nav ul {
    border-radius: 0.25rem;
    padding: 0.25rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
    /* background-color: transparent !important; */
    backdrop-filter: brightness(1.1);
}

.reveal-nav ul li a.active, 
.reveal-nav ul li a:hover {
    background-color: rgba(var(--background-color), 0.5);
    border-radius: calc(var(--border-radius) * 0.75);
    box-shadow: 0.125rem 0.125rem 0.25rem rgba(var(--text-color), 0.1);
}
.reveal-nav ul li a {
    display: inline-block;
    margin: 0;
    /* padding: 0 0.4rem 0.2rem 0.2rem; */
    padding: 0.2rem 0.4rem 0.2rem 0.2rem;
    font-size: 0.86rem;
    text-decoration: none;
    color: rgba(var(--text-color), 1);
    font-weight: 700;
    cursor: pointer;
    position: relative;
    display: flex;
  align-items: center;
  justify-content: center;
}

.reveal-nav a::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: 0.5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.reveal-nav.reveal-nav-right a {
    padding: 0.2rem;
}

@media (prefers-color-scheme: dark) {
    .reveal-nav {
        background-color: rgba(35, 37, 41, 0.35);
        backdrop-filter: blur(0.25rem) brightness(2);
    }
    .reveal-nav ul {
        backdrop-filter: brightness(1.3);
    }
    .reveal-nav ul li a.active, 
    .reveal-nav ul li a:hover {
        background-color: rgba(var(--background-color), 0.5);
        /* background-color: transparent !important;
        backdrop-filter: brightness(0.1); */
        border-radius: calc(var(--border-radius) * 0.75);
        box-shadow: -0.125rem -0.125rem 0.25rem rgba(var(--text-color), 0.1);
    }
    .reveal-nav ul li a:hover {
        opacity: 1;
    }
    .reveal-nav ul li a {
        color: rgba(var(--text-color), 1);
        opacity: 0.9;

    }
    .reveal-nav a::before {
        filter: invert(1);
    }
}


:root{--background-color:255,255,255;--text-color:15,10,10;--border-radius:.25rem}
@media(prefers-color-scheme:dark){:root{--background-color:15,16,17;--text-color:230,230,230}}
.reveal-nav{font-family:Lato,sans-serif;line-height:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
footer[hidden]{display:none}
@media(max-width:600px){.reveal-nav.reveal-nav-left{left:.5rem}.reveal-nav.reveal-nav-right{right:.5rem}.reveal-nav ul{gap:0}.reveal-nav ul li a{font-size:.75rem;padding:.2rem}.reveal-nav a::before{width:16px;height:16px}}

#status{position:fixed;inset:0;width:100%;display:flex;align-items:center;justify-content:center;margin:0;background:var(--page);z-index:1001;pointer-events:none}#status[hidden]{display:none}#status img{display:block;width:27px;height:27px}

#time{position:relative;z-index:1}

#zoom-level{position:fixed;bottom:16px;left:16px;z-index:1002;padding:6px 9px;border-radius:4px;background:var(--panel);color:var(--ink);font:12px Lato,sans-serif;pointer-events:none}

#zoom-level{display:none}
.reveal-nav.reveal-nav-left{left:1rem}
.reveal-nav.reveal-nav-right{right:1rem}

/* View switcher uses the same icon size and theme treatment as the other menus. */
.reveal-nav-center .nav-center a[href="/"]::before{background-image:url('../icons/scroll.svg')}
.reveal-nav-center .nav-center a[href="/pan"]::before{background-image:url('../icons/pan.svg')}
.reveal-nav-center .nav-center a{line-height:20px}
@media(max-width:600px){
    .reveal-nav.reveal-nav-center{top:3.5rem}
    .reveal-nav-center .nav-center a{line-height:16px}
}

#pan-tuning{position:fixed;bottom:1rem;right:1rem;z-index:1000;width:290px;max-width:calc(100vw - 2rem);max-height:65dvh;overflow:auto;padding:12px;border:1px solid #8884;border-radius:6px;background:rgba(var(--background-color),.94);color:rgb(var(--text-color));font:13px Lato,sans-serif;box-shadow:0 4px 20px #0002;backdrop-filter:blur(8px)}
#pan-tuning summary{cursor:pointer;font-weight:700}#pan-tuning p{font-size:12px;opacity:.75;margin:10px 0}#pan-tuning label{display:block;margin:12px 0}#pan-tuning output{float:right;font-variant-numeric:tabular-nums}#pan-tuning input{display:block;width:100%;margin:7px 0;accent-color:#888}#pan-tuning button{border:1px solid #8885;padding:7px;margin-right:6px;font-size:12px}#pan-tuning textarea{width:100%;height:160px;color:inherit;background:transparent}

.pan-media-loader{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:3}.pan-media-loader[hidden]{display:none}


.pan-media-loader svg{display:block;width:100%;height:100%}

.pan-media-loader .loadingCircle{fill:var(--loader-color)}

.pan-media-loader .pan-loading-dot{transform-box:fill-box;transform-origin:center;animation:pan-loader-pulse 1.75s linear infinite}
@keyframes pan-loader-pulse{0%,28.5714286%,100%{transform:scale(1)}14.2857143%{transform:scale(1.65)}}