:root{color-scheme:dark;--bg:#101416;--surface:#171d20;--line:#2b3439;--text:#f2f2eb;--muted:#839097;--mint:#9ee9d8;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}body{margin:0;height:100dvh;min-height:480px;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:14px Arial,Helvetica,sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:disabled{opacity:.25;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,#stage:focus-visible{outline:2px solid var(--mint);outline-offset:5px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.symbols{position:absolute;width:0;height:0;overflow:hidden}header{height:88px;flex:none;padding:0 3.2vw;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:16px}.a-mark{width:45px;height:45px;stroke:var(--text);stroke-width:3.5;overflow:visible}.a-mark circle{fill:var(--mint);stroke:none}.a-left{stroke-dasharray:100;stroke-dashoffset:0;animation:drawA 1.6s var(--ease)}.a-cross{stroke:var(--mint);animation:crossA 1.8s var(--ease)}.brand:hover .a-mark{transform:rotate(-8deg);transition:transform .5s var(--ease)}.brand:hover .a-cross{animation:crossA .7s var(--ease)}.brand>span{font-size:11px;letter-spacing:2px;font-weight:700}.brand small{display:block;font-size:8px;color:var(--muted);font-weight:400;letter-spacing:1.4px;margin-top:7px}.header-middle{font-size:8px;letter-spacing:1.6px;color:var(--muted);display:flex;align-items:center;gap:9px}.location{margin-left:5px}.live-dot{width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px #9ee9d830}.header-actions{display:flex;align-items:center;gap:15px}.icon{width:44px;height:44px;display:grid;place-items:center;position:relative;border-radius:50%;color:var(--muted);transition:background .2s,color .2s}.icon:hover{background:#263236;color:var(--mint)}.sound-off{position:absolute;left:10px;top:21px;width:25px;height:2px;background:var(--muted);transform:rotate(-45deg);box-shadow:0 2px var(--bg)}#sound[aria-pressed=true] .sound-off{display:none}.index-button{display:flex;align-items:center;gap:24px;font-size:11px;letter-spacing:.3px;border:1px solid var(--line);border-radius:4px;padding:12px 16px;min-height:44px}.index-button svg{width:17px;height:17px;color:var(--mint);transition:transform .5s var(--ease)}.index-button:hover svg{transform:rotate(90deg)}main{flex:1;min-height:0;display:flex;padding:0 3.2vw;gap:25px}#rail{width:42px;flex:none;display:flex;flex-direction:column;justify-content:center;gap:15px;border-right:1px solid var(--line);padding-right:20px}#rail button{width:22px;min-height:34px;position:relative;color:#68757c;font-size:9px;letter-spacing:1px;transition:color .3s}#rail button::after{content:'';position:absolute;right:-21px;top:50%;width:2px;height:0;background:var(--mint);transition:height .4s var(--ease),top .4s var(--ease)}#rail button[aria-current=true]{color:var(--mint)}#rail button[aria-current=true]::after{height:26px;top:4px}#rail button:hover{color:var(--text)}#rail button span{position:absolute;left:33px;top:6px;background:var(--mint);color:var(--bg);padding:6px 10px;font-size:9px;z-index:7;white-space:nowrap;opacity:0;transform:translateX(-5px);pointer-events:none;transition:.2s}#rail button:hover span,#rail button:focus-visible span{opacity:1;transform:translateX(0)}.showcase{flex:1;min-width:0;display:flex;flex-direction:column}.project-heading{height:88px;flex:none;position:relative;display:grid;grid-template-columns:auto 1fr;align-content:center;column-gap:25px;row-gap:7px}.project-meta{display:flex;gap:16px;font-size:9px;letter-spacing:1.4px;color:var(--mint);grid-column:1/-1}#count{color:var(--muted)}h1{margin:0;font-size:23px;font-weight:400;letter-spacing:-.6px;line-height:1.3}#interaction-hint{align-self:center;justify-self:end;font-size:8px;color:var(--muted);letter-spacing:1.3px}#stage{flex:1;min-height:0;position:relative;background:#0e1113;isolation:isolate;overflow:hidden;touch-action:pan-y}#canvas{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;transition:opacity .25s var(--ease),transform .35s var(--ease)}#canvas>svg{display:block;width:100%;height:100%;stroke:none;fill:initial;stroke-width:initial;stroke-linecap:initial;stroke-linejoin:initial;overflow:hidden}#canvas.leaving{opacity:0;transform:translateY(-10px) scale(.99)}.stage-corner{position:absolute;width:9px;height:9px;border-color:#56666c;z-index:4;pointer-events:none;opacity:.5}.tl{top:0;left:0;border-top:1px solid;border-left:1px solid}.tr{top:0;right:0;border-top:1px solid;border-right:1px solid}.bl{bottom:0;left:0;border-bottom:1px solid;border-left:1px solid}.br{bottom:0;right:0;border-bottom:1px solid;border-right:1px solid}#stage.zoomed{overflow:auto;touch-action:pan-x pan-y}#stage.zoomed #canvas{width:200%;height:200%;right:auto;bottom:auto}#stage.zoomed .stage-corner{display:none}.motion-unit{transform-box:fill-box;transform-origin:center;transition:filter .3s,transform .5s var(--ease)}.motion-unit[data-inspect]{cursor:pointer}.motion-unit[data-inspect]:hover{filter:drop-shadow(0 8px 10px #0003);transform:translateY(-5px) scale(1.012)}#detail-tag{position:absolute;pointer-events:none;z-index:6;background:var(--mint);color:#101416;font-size:9px;letter-spacing:1px;border-radius:50%;width:78px;height:78px;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .2s,transform .3s var(--ease);box-shadow:0 5px 20px #0003}#detail-tag.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}#loader,#error{position:absolute;inset:0;background:#101416;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;z-index:5;color:var(--muted);font-size:9px;letter-spacing:2px}#loader[hidden],#error[hidden]{display:none}.loader-a{font-size:52px;font-weight:400;color:var(--mint);animation:loaderPulse 1s ease-in-out infinite alternate}#error button{padding:14px;color:var(--mint);border:1px solid var(--line);font-size:12px}.stage-controls{height:65px;flex:none;display:flex;justify-content:space-between;align-items:center}.view-tools{display:flex;align-items:center;gap:17px}.text-button{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;min-height:44px}.text-button:hover{color:var(--mint)}.text-button svg{width:17px;height:17px}.plus{font-size:22px;font-weight:300}.tool-divider{height:14px;width:1px;background:var(--line)}.transport{display:flex;align-items:center;gap:22px}#slide-number{font-size:11px;font-variant-numeric:tabular-nums;color:var(--mint);min-width:16px}.nav-arrow{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s}.nav-arrow:hover:not(:disabled){border-color:var(--mint);background:#233331}.reverse{transform:rotate(180deg)}footer{height:61px;flex:none;margin:0 3.2vw;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line)}.film-toggle{display:flex;gap:10px;align-items:center;font-size:10px;color:var(--muted);min-height:44px}.stack-icon{font-size:27px;line-height:1}.toggle-plus{color:var(--mint);font-size:16px}.footer-center{font-size:8px;letter-spacing:1px;color:#65757c}.footer-center i{margin:0 10px;color:#3f5058}.contact{font-size:11px}.contact span{color:var(--mint);margin-left:18px}#progress{height:2px;flex:none;background:var(--line)}#progress>span{display:block;background:var(--mint);height:100%;width:2.5%;transition:width .6s var(--ease)}#film{position:fixed;bottom:63px;left:3.2vw;right:3.2vw;z-index:8;background:#182023ee;backdrop-filter:blur(14px);border:1px solid #425057;padding:18px;box-shadow:0 -20px 60px #0004;animation:rise .35s var(--ease)}#film[hidden]{display:none}.film-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.6px;color:var(--muted);margin-bottom:10px}.film-top button{min-width:32px;min-height:32px}#film-items{display:flex;gap:12px;overflow:auto;padding:3px 0 12px;scroll-snap-type:x mandatory}#film-items button{flex:0 0 145px;text-align:left;scroll-snap-align:start;padding:0}#film-items img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border:1px solid var(--line)}#film-items span{font-size:9px;color:var(--muted);display:block;margin-top:8px}#film-items button[aria-current=true] img{border-color:var(--mint)}dialog{background:var(--bg);color:var(--text);border:1px solid var(--line);padding:35px;width:min(1180px,94vw);max-height:92dvh;border-radius:7px;overscroll-behavior:contain}dialog::backdrop{background:#030607e8;backdrop-filter:blur(5px)}dialog[open]{animation:rise .35s var(--ease)}.index-head,.detail-head{display:flex;justify-content:space-between;align-items:center}.overline{font-size:8px;letter-spacing:2px;color:var(--mint)}h2{font-size:54px;font-weight:400;letter-spacing:-2px;margin:12px 0 28px}h2>span{font-size:22px;color:#52666e;letter-spacing:-1px;margin-left:10px}#filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}#filters button{border-bottom:1px solid var(--line);padding:12px 14px;color:var(--muted);font-size:11px}#filters button[aria-pressed=true]{color:var(--mint);border-color:var(--mint)}#cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}#cards button{text-align:left;padding:0;min-width:0}#cards img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border:1px solid var(--line);transition:transform .4s var(--ease),border-color .3s}#cards button:hover img{transform:translateY(-5px);border-color:var(--mint)}#cards button[aria-current=true] img{border-color:var(--mint)}.card-label{display:flex;gap:10px;font-size:11px;line-height:1.5;color:#acb8bb;margin-top:12px}.card-label b{color:var(--mint);font-weight:400}#detail{width:min(1250px,96vw);padding:20px 28px}#detail h2{font-size:18px;letter-spacing:0;margin:7px 0 18px}.detail-image{overflow:auto;max-height:72dvh;background:#090c0e;display:flex;align-items:flex-start;justify-content:center}.detail-image img{display:block;max-width:100%;max-height:72dvh;object-fit:contain;width:auto;height:auto}.detail-foot{display:flex;justify-content:space-between;padding-top:17px;color:var(--muted);font-size:8px;letter-spacing:1.3px}#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,10px);opacity:0;background:var(--mint);color:var(--bg);border-radius:30px;padding:13px 20px;font-size:11px;pointer-events:none;z-index:30;transition:.25s}#toast.show{opacity:1;transform:translate(-50%,0)}@keyframes drawA{from{stroke-dashoffset:100;opacity:0}to{stroke-dashoffset:0;opacity:1}}@keyframes crossA{0%,35%{transform:translateX(-12px);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes loaderPulse{to{opacity:.25;transform:scale(.95)}}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.header-middle{display:none}.footer-center{display:none}main{gap:18px}#interaction-hint{font-size:7px;letter-spacing:.5px}h1{font-size:20px}}@media(max-width:600px){body{min-height:420px}header{height:74px;padding:0 18px;gap:8px}.brand{gap:9px}.a-mark{width:34px;height:34px}.brand>span{font-size:9px;letter-spacing:1.2px}.brand small{font-size:6px;letter-spacing:.6px;margin-top:5px}.header-actions{gap:4px}.header-actions .icon{width:36px;height:40px}.header-actions .icon svg{width:20px}.index-button{padding:10px;gap:10px;font-size:10px}.index-button svg{width:15px}main{padding:0 17px;gap:0}#rail{display:none}.project-heading{height:86px;grid-template-columns:1fr;row-gap:8px}h1{font-size:18px;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-meta{font-size:8px}#interaction-hint{display:none}#stage{min-height:0}.stage-controls{height:64px}.view-tools{gap:12px}.text-button{font-size:9px;gap:6px}.view-tools .icon{width:32px}.transport{gap:14px}.nav-arrow{width:37px;height:37px}.transport svg{width:19px}footer{height:58px;margin:0 18px;padding-bottom:env(safe-area-inset-bottom);gap:10px}.contact{font-size:10px}.contact span{margin-left:5px}.film-toggle{font-size:9px;gap:7px}#film{bottom:61px;left:12px;right:12px;padding:13px}#film-items button{flex-basis:120px}dialog{padding:22px 18px}h2{font-size:40px}h2>span{font-size:17px}.overline{font-size:6px;letter-spacing:1.5px}#cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.card-label{font-size:10px;gap:6px}#filters{gap:3px}#filters button{padding:10px;font-size:10px}#detail{padding:17px}.detail-foot{font-size:7px;line-height:1.8}.detail-foot>span{display:none}#detail-tag{display:none}}
@media(orientation:landscape) and (max-height:550px){body{min-height:300px}header{height:46px}.brand small,.header-middle{display:none}.a-mark{width:29px;height:29px}.brand>span{font-size:9px}.index-button{padding:5px 12px;min-height:33px}main{padding:0 20px;gap:14px}#rail{gap:2px;width:30px;padding-right:12px}#rail button{min-height:26px}#rail button::after{right:-9px}.project-heading{height:47px;grid-template-columns:auto 1fr;gap:5px 20px}.project-meta{font-size:7px;grid-column:1}h1{font-size:13px;align-self:center}#interaction-hint{display:none}.stage-controls{height:43px}.text-button{min-height:32px}.nav-arrow{width:31px;height:31px}footer{height:37px}.film-toggle{min-height:30px}.footer-center{display:none}.view-tools .icon{height:32px}#film{bottom:40px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-unit[data-inspect]:hover{transform:none!important}#detail-tag{display:none}}
@media(max-width:600px){#stage[aria-busy=false]:not(.zoomed)::after{content:'TAP A WORK TO EXPLORE';position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:1.6px;color:#71838a;white-space:nowrap;pointer-events:none}}
.live-scene [data-role="grain-texture"],.live-scene [data-role="background-lines"]{pointer-events:none}