/* Native page transitions, lightweight interaction and original-work reading rooms. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none;opacity:0}
::view-transition-new(root){animation:none;opacity:1;mix-blend-mode:normal}
::view-transition-group(*){animation-duration:.65s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes soft-orbit{0%,100%{transform:translate3d(-2%,0,0) rotate(-5deg) scale(1)}50%{transform:translate3d(3%,2%,0) rotate(5deg) scale(1.06)}}
@keyframes little-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes orbit-ring{to{transform:rotate(360deg)}}
:root{--read-progress:0}
.site-header,body[data-page="project"] .site-header{position:sticky;top:0;z-index:40;transition:background .35s ease,box-shadow .35s ease;view-transition-name:site-header}
.site-header:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#f0b181,#b5cbf4,#93d1c1);transform-origin:left;transform:scaleX(var(--read-progress));opacity:.9}
.site-header.is-scrolled,body[data-page="project"] .site-header.is-scrolled{min-height:88px;background:#343d5beF;backdrop-filter:blur(18px);box-shadow:0 8px 25px #17203618}
.site-header nav>a{position:relative;transition:color .2s ease,background .2s ease,transform .2s ease}.site-header nav>a:active{transform:translateY(1px)}
.site-header nav>a:not(.nav-pdf){border-bottom-color:transparent!important}.site-header nav>a:not(.nav-pdf):after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.2,.7,.3,1)}.site-header nav>a:hover:after,.site-header nav>a[aria-current]:after{transform:scaleX(1);transform-origin:left}
.selected-work{position:relative;isolation:isolate;overflow:hidden;background:#34405d;background-image:radial-gradient(ellipse at var(--mouse-x,78%) var(--mouse-y,15%),#7793bd24,transparent 42%),radial-gradient(ellipse at 4% 5%,#b6c9f222,transparent 38%),radial-gradient(ellipse at 94% 65%,#e4ac8e14,transparent 38%)}
.selected-work:before,.other-intro:before,.work-case-hero:before{content:'';position:absolute;inset:-15%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 18% 24%,#9ec9cc1d,transparent 35%),radial-gradient(ellipse at 90% 40%,#e7bc951b,transparent 36%),repeating-radial-gradient(ellipse at 70% 10%,transparent 0 88px,#c4d0e20b 89px 90px,transparent 91px 178px);animation:soft-orbit 24s ease-in-out infinite;will-change:transform}
.selected-work:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;background-image:radial-gradient(#d6e4ef 0.5px,transparent .5px);background-size:6px 6px;mask-image:linear-gradient(180deg,#0009,transparent 72%)}
.work-heading{position:relative;align-items:center}.work-heading-title{position:relative;z-index:1}.work-heading h1{font-size:clamp(44px,5.6vw,76px);letter-spacing:-.055em}.work-heading h1 span{display:inline-block;}.work-heading h1 span+span{animation-delay:.08s;color:#f3c8a1}.work-heading>.eyebrow{}.work-heading>p{margin-left:auto;max-width:280px}.heading-signature{position:relative;flex:0 0 120px;height:110px;margin:0 10px 0 auto;display:grid;place-items:center}.heading-signature .heading-cat{position:relative;z-index:2;width:70px;height:78px;object-fit:contain;image-rendering:pixelated;animation:little-float 5s ease-in-out infinite;filter:drop-shadow(0 8px 8px #1c253448)}.signature-orbit{position:absolute;width:105px;height:105px;border:1px solid #d5ded54d;border-radius:50%;transform:rotate(-20deg)}.signature-orbit:after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;left:10px;top:12px;background:#f0c098;box-shadow:70px 60px 0 -1px #afc8db}
.project-art,.other-piece-gallery{translate:0 0;transition:translate .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}.project-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,30%),#fff3d81a,transparent 50%);opacity:0;transition:opacity .35s ease}.project-art:hover:after{opacity:1}.project-art:hover{translate:0 -3px;box-shadow:0 22px 42px #15243a60}.project-art .open-arrow{transition:transform .3s ease,background .3s ease}.project-art:hover .open-arrow{transform:rotate(-8deg) translate(2px,-2px);background:#f0c49c}.card-meta h2 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s ease,color .2s ease}.card-meta h2 a:hover{background-size:100% 1px}
.game-hero-background{transform:translateY(var(--hero-drift,0px)) scale(1.08);will-change:transform}.project-hero-voices{view-transition-name:project-voices}.project-hero-dawn{view-transition-name:project-dawn}.project-hero-echoes{view-transition-name:project-echoes}.project-hero-space{view-transition-name:project-space}.project-hero-nikki{view-transition-name:project-nikki}.game-hero-center{}.game-hero-actions>a{transition:transform .25s ease,background .25s ease}.game-hero-actions>a:hover{transform:translateY(-3px)}
.case-paper,.other-paper,.earlier-games,.work-detail-paper{background-image:radial-gradient(#b8a67e12 .7px,transparent .7px),linear-gradient(135deg,#fff9eb66,transparent 45%);background-size:9px 9px,100% 100%}.case-figure .image-button{transition:box-shadow .3s ease}.case-figure .image-button:hover{box-shadow:0 10px 24px #29354b14}.lightbox[open]{animation:viewer-in .3s ease}.lightbox::backdrop{background:#172239e8;backdrop-filter:blur(10px)}@keyframes viewer-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
.other-intro{isolation:isolate;overflow:hidden;max-width:none;width:100%;padding-inline:max(40px,calc((100vw - var(--max))/2));background:radial-gradient(ellipse at 15% 20%,#8a78a137,transparent 47%),radial-gradient(ellipse at var(--mouse-x,85%) var(--mouse-y,40%),#92b9bc24,transparent 44%),#3b4263}.other-intro h1{}.other-chapters a{position:relative;transition:transform .25s ease,color .25s ease}.other-chapters a:hover{transform:translateY(-3px)}.other-piece-copy h3 a:hover{color:#5683a0}.other-piece-copy .text-link:hover,.writing-list a:hover{color:#476e8b}
/* A different reading room for each work, using its existing palette. */
.work-case{background:var(--work-paper,#f4f0e4)}.work-case-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--work-ink,#263c55);color:var(--work-paper,#f4f0e4);padding:28px 0 58px}.work-case-hero:before{background:radial-gradient(ellipse at 20% 15%,color-mix(in srgb,var(--work-accent) 17%,transparent),transparent 45%),repeating-radial-gradient(ellipse at 85% 50%,transparent 0 75px,#ffffff08 76px 77px,transparent 78px 160px)}.work-return{font-size:11px;display:inline-block;color:var(--work-accent);margin-bottom:35px}.work-return:hover{color:white}.work-hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}.work-hero-copy .eyebrow{font-size:10px;letter-spacing:.1em;color:var(--work-accent);margin-bottom:18px}.work-hero-copy h1{font-size:clamp(35px,4.25vw,60px);font-weight:600;line-height:1.13;letter-spacing:-.045em;margin-bottom:23px;}.work-hero-copy>p:not(.eyebrow){font-size:14px;line-height:1.95;color:color-mix(in srgb,var(--work-paper) 83%,transparent);max-width:450px}.work-actions{display:flex;gap:27px;flex-wrap:wrap;margin-top:28px}.work-actions a{font-size:11px;color:var(--work-accent);padding:0 0 5px;border-bottom:1px solid color-mix(in srgb,var(--work-accent) 60%,transparent);transition:transform .25s ease}.work-actions a:hover{transform:translateY(-2px)}.work-hero-image{position:relative;background:#ffffff0a;padding:18px;min-width:0;box-shadow:0 16px 50px #0e1b3225;}.work-hero-image img{width:100%;height:380px;object-fit:contain;position:relative;z-index:2}.work-image-orbit{position:absolute;inset:-18px;border:1px solid #ffffff12;pointer-events:none;transform:rotate(-2deg);z-index:-1}.work-detail-paper{background-color:var(--work-paper);position:relative;color:#34404a}.work-detail-paper:before{content:'';position:absolute;top:-13px;height:15px;left:0;width:100%;background:var(--work-paper);clip-path:polygon(0 40%,5% 20%,10% 45%,15% 25%,20% 42%,25% 20%,30% 38%,35% 23%,40% 44%,45% 20%,50% 37%,55% 22%,60% 42%,65% 20%,70% 36%,75% 24%,80% 43%,85% 20%,90% 37%,95% 22%,100% 41%,100% 100%,0 100%)}.work-approach{display:grid;grid-template-columns:.65fr 1.35fr;gap:55px;padding:50px 0;border-bottom:1px solid #7c81732b}.work-approach>.eyebrow{font-size:10px;color:var(--work-ink);letter-spacing:.09em;padding-top:8px}.work-approach h2{font-size:30px;line-height:1.3;font-weight:600;letter-spacing:-.03em;margin-bottom:19px;color:var(--work-ink)}.work-approach p:not(.eyebrow){font-size:14px;line-height:1.95;max-width:800px;color:#5b626b}.work-gallery-section,.work-documents,.work-performance{padding:46px 0;border-bottom:1px solid #7c81732b;scroll-margin-top:90px}.detail-section-heading{margin-bottom:27px}.detail-section-heading>.eyebrow{font-size:9px;letter-spacing:.12em;color:var(--work-ink);opacity:.75}.detail-section-heading h2{font-size:36px;font-weight:600;letter-spacing:-.04em;color:var(--work-ink);margin:10px 0 12px}.detail-section-heading>p:not(.eyebrow){font-size:11px;color:#737d80}.work-gallery-images{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start}.work-gallery .image-button{background:#ffffff60}.work-gallery .image-button img{width:100%;height:auto;max-height:750px;object-fit:contain}.work-gallery figcaption{font-size:10px;color:#777f80;margin-top:10px}.work-gallery-item[hidden]{display:none!important}.work-book.book-enhanced .work-gallery-images{display:block;background:#ffffff65;min-height:200px}.work-book.book-enhanced .image-button{background:transparent;padding:20px}.work-book.book-enhanced .image-button img{max-height:min(73vh,800px);width:100%;object-fit:contain}.work-book.book-enhanced figcaption{padding:0 20px 18px;margin:0}.book-controls{display:flex;align-items:center;justify-content:center;gap:38px;margin-top:24px}.book-controls button{width:42px;height:42px;border:1px solid #7582895c;border-radius:50%;background:transparent;font-size:22px;transition:background .2s ease,color .2s ease,transform .2s ease}.book-controls button:hover{background:var(--work-ink);color:var(--work-paper);transform:translateY(-2px)}.book-page-count{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.12em}.book-pages{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:20px}.book-pages button{font-size:10px;border:0;border-bottom:1px solid transparent;background:transparent;color:#5e7079;padding:6px 9px}.book-pages button[aria-pressed=true]{color:var(--work-ink);border-color:var(--work-ink);font-weight:600}.work-documents .document-block+.document-block{margin-top:27px}.document-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;border-top:1px solid #7582893d}.document-heading h3{font-size:19px;font-weight:600;line-height:1.5;letter-spacing:-.02em}.document-heading p{font-size:10px;color:#7b8487;margin-top:4px}.document-download{font-size:11px;border:1px solid #74838c63;padding:9px 14px;display:flex;gap:20px}.document-download:hover{background:var(--work-ink);color:var(--work-paper)}.pdf-reader{border:1px solid #74838c45;background:#ffffff30}.pdf-reader summary,.diagram-detail summary{padding:17px 20px;font-size:12px;cursor:pointer;display:flex;justify-content:space-between;list-style:none}.pdf-reader summary::-webkit-details-marker,.diagram-detail summary::-webkit-details-marker{display:none}.pdf-reader[open] summary>span,.diagram-detail[open] summary>span{transform:rotate(45deg)}.pdf-reader iframe{display:block;width:100%;height:800px;max-height:84vh;border:0;background:white}.is-long-diagram .work-gallery-images{grid-template-columns:1fr}.is-long-diagram .image-button img{max-height:700px;object-fit:contain}.diagram-detail{margin-top:25px;border:1px solid #74838c45}.diagram-detail>p{font-size:11px;color:#70818a;margin:0 20px 20px}.diagram-canvas{height:650px;max-height:78vh;overflow:auto;background:white;border-block:1px solid #74838c25}.diagram-canvas img{width:2400px;max-width:none;height:auto;margin:0}.diagram-detail>.text-link{margin:20px;font-size:11px}.playlist-player{aspect-ratio:16/9;position:relative;background:#242c3a}.playlist-player>button{border:0;padding:0;position:absolute;inset:0;width:100%;height:100%;background:none;color:white;cursor:pointer}.playlist-player>button>img{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}.playlist-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border:1px solid #fff9e4;border-radius:50%;display:grid;place-items:center;font-size:25px;padding-left:4px;background:#293c5066;transition:background .25s ease,transform .25s ease}.playlist-player button:hover .playlist-play{background:#ddaf79bb;transform:translate(-50%,-50%) scale(1.08)}.playlist-label{position:absolute;left:25px;bottom:25px;font-size:11px;letter-spacing:.12em}.playlist-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.work-end-nav{display:flex;justify-content:space-between;gap:40px;align-items:center;padding:35px 0 55px}.work-end-nav>a:first-child{font-size:11px;color:#5b6e7a}.work-end-nav>a:last-child{max-width:50%;font-size:24px;display:grid;grid-template-columns:1fr auto;gap:7px 24px;align-items:center}.work-end-nav span:not([aria-hidden]){grid-column:span 2;font-size:9px;letter-spacing:.1em;color:#7b8990}.work-end-nav strong{font-size:22px;line-height:1.4;font-weight:600;letter-spacing:-.02em}.footer-email{transition:color .25s ease}.footer-email:hover{color:#f2b284!important}
@media(max-width:1050px){.heading-signature{flex-basis:90px;height:90px}.heading-signature .heading-cat{width:56px;height:65px}.signature-orbit{width:82px;height:82px}.work-heading>p{max-width:220px}.work-hero-grid{gap:35px}.work-hero-image img{height:330px}.work-hero-copy h1{font-size:44px}.work-approach{grid-template-columns:.5fr 1.5fr;gap:30px}}
@media(max-width:760px){.site-header.is-scrolled,body[data-page="project"] .site-header.is-scrolled{min-height:76px}.work-heading{padding-right:70px}.work-heading h1{font-size:43px;line-height:1.1}.work-heading h1 span{display:block}.work-heading>p{max-width:none;line-height:1.8;margin-left:0}.heading-signature{position:absolute;right:0;top:33px;width:65px;height:75px;margin:0}.heading-signature .heading-cat{width:45px;height:53px}.signature-orbit{width:63px;height:63px}.signature-orbit:after{width:5px;height:5px;left:4px;top:10px;box-shadow:42px 32px 0 -1px #bcd6eb}.other-intro{padding-inline:20px}.work-case-hero{padding:25px 0 40px}.work-return{font-size:10px;margin-bottom:26px}.work-hero-grid{grid-template-columns:1fr;gap:30px}.work-hero-copy h1{font-size:40px;line-height:1.13;margin-bottom:18px}.work-hero-copy>.eyebrow{font-size:9px;margin-bottom:14px}.work-hero-copy>p:not(.eyebrow){font-size:13px;max-width:none}.work-actions{margin-top:22px;gap:23px}.work-actions a{font-size:10px}.work-hero-image{padding:13px}.work-hero-image img{height:auto;max-height:350px;object-fit:contain}.work-image-orbit{inset:-9px}.work-approach{grid-template-columns:1fr;gap:16px;padding:33px 0}.work-approach>.eyebrow{padding-top:0;font-size:9px}.work-approach h2{font-size:27px;margin-bottom:16px}.work-approach p:not(.eyebrow){font-size:12px}.work-gallery-section,.work-documents,.work-performance{padding:34px 0}.detail-section-heading h2{font-size:30px}.work-gallery-images{grid-template-columns:1fr;gap:25px}.work-gallery .image-button img{max-height:none}.work-book.book-enhanced .image-button{padding:10px}.work-book.book-enhanced .image-button img{max-height:68vh}.work-book.book-enhanced figcaption{padding:0 10px 14px;font-size:9px}.book-controls{gap:30px;margin-top:20px}.book-pages{gap:4px}.book-pages button{padding:6px 8px;font-size:9px}.document-heading h3{font-size:17px}.document-download{font-size:10px;gap:12px;padding:9px 12px}.pdf-reader summary,.diagram-detail summary{font-size:11px;padding:15px}.pdf-reader iframe{height:70vh;max-height:700px}.diagram-canvas{height:60vh}.diagram-canvas img{width:2000px}.playlist-play{width:58px;height:58px;font-size:20px}.playlist-label{font-size:9px;left:16px;bottom:16px}.work-end-nav{align-items:flex-start;flex-direction:column;gap:25px;padding-bottom:40px}.work-end-nav>a:last-child{border-top:1px solid #74838c45;padding-top:22px;max-width:none;width:100%}.work-end-nav strong{font-size:22px}.project-art,.other-piece-gallery{transform:none!important}.game-hero-background{transform:scale(1.04);will-change:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.game-hero-background{transform:none;will-change:auto}.project-art,.other-piece-gallery{transform:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.work-heading h1 span,.work-hero-copy h1,.work-hero-image,.game-hero-center{opacity:1;filter:none;transform:none}}
html{scroll-padding-top:0}main section[id],.game-case section[id],.game-case details[id],.other-section{scroll-margin-top:105px}
.work-arknights-system .work-hero-image img,.work-gacha .work-hero-image img{object-fit:cover;object-position:top}
/* Twingo: a quiet, spacious case study around the original monochrome concept art. */
.twingo-hero{background:#e8e8de;color:#303d4b;padding:28px 0 60px;position:relative;background-image:radial-gradient(ellipse at 6% 15%,#c6d8d877,transparent 50%),radial-gradient(ellipse at 95% 95%,#e5c6b93d,transparent 45%)}.twingo-hero .work-return{color:#526e7b;margin-bottom:35px}.twingo-hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:center}.twingo-hero-grid>.twingo-hero-art{min-width:0}.twingo-hero-grid .eyebrow{font-size:9px;letter-spacing:.13em;color:#617b83;margin-bottom:25px}.twingo-hero h1{font-size:clamp(65px,7.7vw,105px);font-weight:600;letter-spacing:-.065em;line-height:1}.twingo-hero h1 span{display:block;font-size:clamp(22px,2.7vw,37px);line-height:1.35;letter-spacing:-.035em;margin-top:15px;font-weight:400;color:#5c7d86}.twingo-hero h1+p{font-size:13px;line-height:1.9;max-width:380px;margin-top:27px;color:#566672}.twingo-hero .text-link{font-size:11px;margin-top:28px;display:inline-flex;color:#3f6776}.twingo-hero-art{margin:0;padding:12px 12px 0;background:#f9f8f0;border:1px solid #a1b4b345;box-shadow:0 20px 45px #263e491a}.twingo-hero-art img{width:100%;height:auto}.twingo-hero-art figcaption{font-size:8px;letter-spacing:.1em;padding:14px 6px;color:#748184}.game-twingo .overview-copy h2{font-size:clamp(30px,3.5vw,44px);text-transform:none;letter-spacing:-.035em}.game-twingo .game-detail-primary .image-button{padding:14px;background:#fffefa}.game-twingo .game-detail-primary .source-crop{width:100%;height:auto;max-height:650px;object-fit:contain}.game-twingo .game-detail-wide .game-detail-copy{max-width:760px}.game-twingo .game-gallery-1{grid-template-columns:1fr}.game-twingo .game-gallery-1 .image-button{background:#fffefa;padding:14px}.game-twingo .game-gallery-1 img{width:100%;height:auto;max-height:none;object-fit:contain}
@media(max-width:1050px){.twingo-hero-grid{gap:35px}}
@media(max-width:760px){.twingo-hero{padding:24px 0 40px}.twingo-hero .work-return{margin-bottom:27px}.twingo-hero-grid{grid-template-columns:1fr;gap:30px}.twingo-hero-grid .eyebrow{font-size:8px;margin-bottom:19px}.twingo-hero h1{font-size:70px}.twingo-hero h1 span{font-size:28px;margin-top:12px}.twingo-hero h1+p{font-size:12px;max-width:none;margin-top:21px}.twingo-hero .text-link{margin-top:20px}.twingo-hero-art{padding:9px 9px 0}.twingo-hero-art figcaption{font-size:7px;padding:12px 4px}.game-twingo .game-detail-primary .image-button,.game-twingo .game-gallery-1 .image-button{padding:9px}.game-twingo .game-detail-primary .source-crop{max-height:none}}