.work-detail{padding-bottom:var(--sp-16)}.state-msg{text-align:center;color:var(--text-muted);font-size:var(--fs-lead);padding-block:var(--sp-32)}#detail-content:not([hidden])+.container .back-row{display:none}.work-detail .wd-cat[data-cat=game]{--c:var(--cat-game)}.work-detail .wd-cat[data-cat=program]{--c:var(--cat-program)}.work-detail .wd-cat[data-cat=application]{--c:var(--cat-application)}.work-detail .wd-cat[data-cat=webpage]{--c:var(--cat-webpage)}.work-detail .wd-cat[data-cat=etc]{--c:var(--cat-etc)}.work-detail .wd-hero{--ink:15 27 38;--line:#ffffff24;--stage:color-mix(in oklab, var(--bg-1) 86%, hsl(var(--h,205) 45% 42%));--visual-h:440px;isolation:isolate;color:#fff;background:linear-gradient(to bottom, var(--stage) 72%, transparent);position:relative;overflow:hidden}.work-detail .wd-hero-media{z-index:-1;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,#0000);mask-image:linear-gradient(#000 62%,#0000)}.work-detail .wd-hero-bg{object-fit:cover;filter:blur(48px)brightness(.55)saturate(1.35);width:100%;height:100%;transform:scale(1.2)}.work-detail .wd-hero-media:before,.work-detail .wd-hero-media:after{content:"";z-index:1;pointer-events:none;position:absolute;inset:0}.work-detail .wd-hero-media:before{background:linear-gradient(90deg, rgb(var(--ink) / .94) 0%, rgb(var(--ink) / .86) 32%, rgb(var(--ink) / .5) 52%, rgb(var(--ink) / .12) 72%, rgb(var(--ink) / 0) 86%)}.work-detail .wd-hero[data-orient=none] .wd-hero-media{background:radial-gradient(60% 80% at 75% 45%, hsl(var(--h,205) 50% 45% / .55), transparent 70%), linear-gradient(120deg, var(--stage), hsl(var(--h,205) 40% 22%))}.work-detail .wd-hero-inner{align-items:center;gap:var(--sp-12);min-height:clamp(520px,66vh,620px);padding-block:var(--sp-12);grid-template-columns:minmax(0,560px) minmax(0,1fr);display:grid}.work-detail .wd-hero-text{flex-direction:column;align-items:flex-start;min-width:0;display:flex}.work-detail .wd-hero-text .wd-cat{color:#ffffffd1;margin-bottom:var(--sp-5)}.work-detail .wd-title-row{align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-5);max-width:100%;display:flex}.work-detail .wd-icon{aspect-ratio:1;border-radius:var(--r-icon);width:76px;box-shadow:0 0 0 1px var(--line), 0 8px 24px #00000059;flex:none;overflow:hidden}.work-detail .wd-icon>img,.work-detail .wd-icon>.wd-icon-mono{object-fit:cover;background:var(--bg-3);place-items:center;width:100%;height:100%;display:grid}.work-detail .wd-icon-mono{font-family:var(--font-display);color:var(--text-strong);font-size:2.25rem;font-weight:800}.work-detail .wd-title{min-width:0;font-family:var(--font-display);letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;color:#fff;font-size:clamp(2.25rem,3.6vw,3.5rem);font-weight:800;line-height:1.08}.work-detail .wd-summary{color:#fffc;word-break:keep-all;overflow-wrap:anywhere;font-size:clamp(1rem,.6vw + .8rem,1.125rem);line-height:1.65}.work-detail .wd-meta{margin:var(--sp-5) 0 0 -14px;font-size:var(--fs-sm);color:#ffffffb8;flex-wrap:wrap;align-items:center;gap:2px 0;font-weight:600;line-height:1.4;display:flex;overflow:hidden}.work-detail .wd-meta>*{white-space:nowrap;align-items:center;margin-left:14px;display:inline-flex;position:relative}.work-detail .wd-meta>*+:before{content:"·";color:var(--text-faint);position:absolute;left:-9px}.work-detail .wd-meta-year{font-variant-numeric:tabular-nums}.work-detail .wd-meta-flag svg{color:var(--accent-ink);margin-right:4px}.work-detail .wd-meta-featured{color:var(--accent-ink)}.work-detail .wd-meta-wip{color:var(--accent-sand-ink)}.work-detail .wd-actions{gap:var(--sp-3);margin-top:var(--sp-8);flex-wrap:wrap;display:flex}.work-detail .wd-visual{height:var(--visual-h);position:relative}.work-detail .wd-frames{transition:opacity var(--dur) var(--ease-out);position:absolute;inset:0}.work-detail .wd-hero:not([data-orient]) .wd-frames{opacity:0;animation:0s linear 3s forwards wd-reveal}@keyframes wd-reveal{to{opacity:1}}.work-detail .wd-frame{aspect-ratio:9/19.5;object-fit:cover;object-position:top;border:7px solid var(--bg-0);background:var(--bg-0);width:auto;max-width:none;height:100%;box-shadow:0 0 0 1px var(--line), 0 30px 60px #00000073;border-radius:34px;position:absolute;top:50%;left:50%;translate:-50% -50%}.work-detail .wd-hero:not([data-orient]) .wd-frame:nth-child(n+4){display:none}.work-detail .wd-frame:first-child{z-index:3}.work-detail .wd-frame:nth-child(2),.work-detail .wd-frame:nth-child(3){z-index:2;filter:brightness(.72);height:84%}.work-detail .wd-frame:nth-child(2){translate:-128% -50%;rotate:-6deg}.work-detail .wd-frame:nth-child(3){translate:28% -50%;rotate:6deg}.work-detail .wd-frames[data-n="2"] .wd-frame:first-child{translate:-72% -50%}.work-detail .wd-frames[data-n="2"] .wd-frame:nth-child(2){translate:-8% -46%;rotate:5deg}.work-detail .wd-hero[data-orient=landscape] .wd-frames .wd-frame{width:min(56vw, 720px, calc(var(--visual-h) * var(--r,1.4)));height:auto;aspect-ratio:var(--r,auto);object-fit:contain;border-radius:var(--r-md);box-shadow:0 0 0 1px var(--line), 0 40px 80px #0000008c, 0 12px 24px #0000004d;filter:none;border-width:6px;left:0;translate:0 -46%;rotate:none}.work-detail .wd-hero[data-orient=landscape] .wd-frames .wd-frame:nth-child(2){z-index:1;transform-origin:100% 0;filter:brightness(.55);translate:18% -57%;scale:.86}.work-detail .wd-poster{aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-lg);width:auto;max-width:none;height:100%;box-shadow:0 0 0 1px var(--line), 0 40px 80px #0000008c, 0 12px 24px #0000004d;position:absolute;top:50%;left:10%;translate:0 -50%;rotate:3deg}.work-detail .wd-visual-mono{font-family:var(--font-display);letter-spacing:-.04em;color:#ffffff24;place-items:center;font-size:clamp(8rem,18vw,16rem);font-weight:800;line-height:1;display:grid;position:absolute;inset:0}.work-detail .wd-body{padding-top:var(--sp-8)}.work-detail .wd-body>*+*{margin-top:var(--sp-16)}.work-detail .wd-metrics{gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.work-detail .wd-metric{gap:var(--sp-1);padding:var(--sp-4) var(--sp-5);background:var(--surface-tint);border:1px solid var(--border-soft);border-radius:var(--r-sm);flex-direction:column-reverse;display:flex}.work-detail .wd-metric dt{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600}.work-detail .wd-metric dd{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-strong);font-variant-numeric:tabular-nums;font-size:clamp(1.75rem,1.5vw + 1rem,2.25rem);font-weight:800;line-height:1.1}.work-detail .wd-head{align-items:center}.work-detail .wd-shots-ctrl{gap:var(--sp-2);margin-left:auto;display:flex}.work-detail .wd-shots-ctrl[hidden]{display:none}.work-detail .wd-shots-btn{width:40px;min-height:40px;padding:0}.work-detail .wd-shots-btn:disabled{opacity:.35;cursor:default;border-color:var(--btn-line);background:0 0}.work-detail .wd-shots{--shot-h:420px;gap:var(--sp-3);overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;display:flex;overflow-x:auto}.work-detail .wd-shots::-webkit-scrollbar{display:none}.work-detail .wd-shots.is-grabbing{cursor:grabbing;-webkit-user-select:none;user-select:none;scroll-snap-type:none}.work-detail .wd-shot{height:var(--shot-h);border-radius:var(--r-card);border:1px solid var(--border-subtle);background:var(--bg-2);cursor:zoom-in;scroll-snap-align:start;transition:border-color var(--dur-fast) var(--ease-out);flex:none;padding:0;position:relative;overflow:hidden}.work-detail .wd-shots.is-grabbing .wd-shot{cursor:grabbing}.work-detail .wd-shot:hover{border-color:var(--border-accent)}.work-detail .wd-shot:focus-visible{outline-offset:-3px;outline:3px solid #fff}.work-detail .wd-shot-img{object-fit:contain;width:auto;min-width:120px;max-width:min(80vw,760px);height:100%;display:block}.work-detail .wd-shot-zoom{right:var(--sp-3);bottom:var(--sp-3);border-radius:var(--r-sm);color:#fff;background:var(--bg-glass);border:1px solid var(--border-soft);opacity:0;width:32px;height:32px;transition:opacity var(--dur-fast) var(--ease-out);pointer-events:none;place-items:center;display:grid;position:absolute}.work-detail .wd-shot:hover .wd-shot-zoom,.work-detail .wd-shot:focus-visible .wd-shot-zoom{opacity:1}.work-detail .wd-columns{align-items:start;gap:clamp(var(--sp-8), 4vw, var(--sp-16));grid-template-columns:minmax(0,1fr) 340px;display:grid}.work-detail .wd-columns.is-side-only{grid-template-columns:minmax(0,560px)}.work-detail .wd-col-side{top:min(calc(var(--header-h) + 16px), calc(100vh - var(--side-h,0px) - 16px));position:sticky}.work-detail .wd-side{padding-block:var(--sp-1)}.work-detail .wd-side-item{padding-block:var(--sp-4)}.work-detail .wd-side-item+.wd-side-item{border-top:1px solid var(--border-subtle)}.work-detail .wd-side-label{margin-bottom:var(--sp-2);font-size:var(--fs-xs);letter-spacing:.02em;color:var(--text-muted);align-items:center;gap:6px;font-weight:700;display:flex}.work-detail .wd-side-label svg{color:var(--accent-ink)}.work-detail .wd-side-val{font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-snug);color:var(--text-base);word-break:keep-all;overflow-wrap:anywhere}.work-detail .wd-side-cf .wd-side-val{font-weight:500}.work-detail .wd-chips{flex-wrap:wrap;gap:6px;display:flex}.work-detail .wd-role-text{font-weight:500}.work-detail .wd-pager-grid{gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.work-detail .wd-pager-card{gap:var(--sp-4);color:inherit;flex-direction:column;text-decoration:none;display:flex}.work-detail .wd-pager-card.is-next{text-align:right;grid-column:2;align-items:flex-end}.work-detail .wd-pager-card:focus-visible{outline-offset:3px;outline:3px solid #fff}.work-detail .wd-pager-dir{font-size:var(--fs-sm);color:var(--text-muted);align-items:center;gap:2px;font-weight:700;display:inline-flex}.work-detail .wd-pager-work{align-items:center;gap:var(--sp-4);min-width:0;max-width:100%;display:flex}.work-detail .is-next .wd-pager-work{flex-direction:row-reverse}.work-detail .wd-pager-icon{border-radius:var(--r-icon);object-fit:cover;width:56px;height:56px;box-shadow:0 0 0 1px var(--border-soft);flex:none}.work-detail .wd-pager-mono{color:#fff;background:hsl(var(--h,205) 35% 30%);place-items:center;font-size:1.5rem;font-weight:800;display:grid}.work-detail .wd-pager-text{flex-direction:column;align-items:flex-start;gap:6px;min-width:0;display:flex}.work-detail .is-next .wd-pager-text{align-items:flex-end}.work-detail .wd-pager-title{max-width:100%;font-size:1.25rem;font-weight:800;line-height:var(--lh-snug);color:var(--text-strong);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.work-detail .wd-pager-all{margin-top:var(--sp-8);justify-content:center;display:flex}@media (width<=1100px){.work-detail .wd-hero-inner{gap:var(--sp-8);grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}}@media (width<=900px){.work-detail .wd-columns,.work-detail .wd-columns.is-side-only{grid-template-columns:minmax(0,1fr)}.work-detail .wd-col-side{position:static}}@media (width<=759.98px){.work-detail .wd-hero{--visual-h:300px}.work-detail .wd-hero-media:before{display:none}.work-detail .wd-hero-media:after{background:linear-gradient(0deg, rgb(var(--ink) / .7) 0%, rgb(var(--ink) / .2) 100%)}.work-detail .wd-hero-inner{gap:var(--sp-8);min-height:0;padding-block:var(--sp-8) var(--sp-12);grid-template-columns:minmax(0,1fr)}.work-detail .wd-visual{order:-1}.work-detail .wd-frame{border-width:5px;border-radius:22px}.work-detail .wd-frame:nth-child(3){display:none}.work-detail .wd-frames:not([data-n="1"]) .wd-frame:first-child{translate:-78% -50%}.work-detail .wd-frames:not([data-n="1"]) .wd-frame:nth-child(2){translate:-14% -46%;rotate:5deg}.work-detail .wd-hero[data-orient=landscape] .wd-visual{height:auto}.work-detail .wd-hero[data-orient=landscape] .wd-frames{position:static}.work-detail .wd-hero[data-orient=landscape] .wd-frames .wd-frame:first-child{width:100%;display:block;position:static;translate:none}.work-detail .wd-hero[data-orient=landscape] .wd-frames .wd-frame:nth-child(n+2){display:none}.work-detail .wd-poster{border-radius:var(--r-md);left:50%;translate:-50% -50%}.work-detail .wd-icon{width:56px}.work-detail .wd-title-row{gap:var(--sp-4);margin-bottom:var(--sp-4)}.work-detail .wd-title{font-size:clamp(1.75rem,7vw,2.25rem)}.work-detail .wd-summary{font-size:var(--fs-body)}.work-detail .wd-actions{margin-top:var(--sp-6);align-self:stretch}.work-detail .wd-actions .btn{flex:auto}.work-detail .wd-body>*+*{margin-top:var(--sp-12)}.work-detail .wd-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.work-detail .wd-shots{--shot-h:300px;align-items:center}.work-detail .wd-shot{height:auto}.work-detail .wd-shot-img{height:auto;max-height:var(--shot-h);max-width:80vw}.work-detail .wd-shots-ctrl{display:none}.work-detail .wd-pager-grid{grid-template-columns:minmax(0,1fr)}.work-detail .wd-pager-card.is-next{grid-column:auto}}@media (prefers-reduced-motion:reduce){.work-detail .wd-frames{transition:none}}.work-detail .prose{color:var(--text-base);font-size:var(--fs-body);line-height:var(--lh-base);word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty;max-width:46em}.work-detail .prose>:first-child{margin-top:0}.work-detail .prose h2{font-size:1.25rem;font-weight:800;line-height:var(--lh-snug);color:var(--text-strong);margin-top:var(--sp-12);margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-subtle)}.work-detail .prose h3{color:var(--text-strong);margin-top:var(--sp-8);margin-bottom:var(--sp-3);font-size:1.0625rem;font-weight:700}.work-detail .prose p{margin-bottom:var(--sp-4);color:var(--text-base)}.work-detail .prose ul,.work-detail .prose ol{padding-left:var(--sp-6);margin-bottom:var(--sp-4)}.work-detail .prose ul{list-style:outside}.work-detail .prose ol{list-style:decimal}.work-detail .prose li{margin-bottom:var(--sp-2);color:var(--text-base)}.work-detail .prose strong{color:var(--text-strong);font-weight:700}.work-detail .prose code{background:var(--bg-2);border:1px solid var(--border-subtle);color:var(--accent-ink);border-radius:4px;padding:.15em .45em;font-family:Fira Code,Consolas,monospace;font-size:.875em}.work-detail .prose pre{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--r-md);padding:var(--sp-6);margin-bottom:var(--sp-6);overflow-x:auto}.work-detail .prose pre code{font-size:var(--fs-sm);color:var(--text-base);background:0 0;border:none;padding:0}.work-detail .prose blockquote{border-left:3px solid var(--accent-ink);padding-left:var(--sp-6);margin-block:var(--sp-6);color:var(--text-muted)}.work-detail .prose a{color:var(--accent-ink);text-underline-offset:3px;text-decoration:underline}.work-detail .prose a:hover{color:var(--text-strong)}.work-detail .prose img{border-radius:var(--r-md);border:1px solid var(--border-subtle);margin-block:var(--sp-6);max-width:100%;height:auto}.work-detail .prose hr{border:none;border-top:1px solid var(--border-subtle);margin-block:var(--sp-12)}.back-row{gap:var(--sp-3);padding-top:var(--sp-8);margin-top:var(--sp-8);border-top:1px solid var(--border-subtle);flex-wrap:wrap;display:flex}.lightbox[hidden]{display:none!important}.lightbox{z-index:210;justify-content:center;align-items:center;gap:clamp(var(--sp-3), 2vw, var(--sp-5));flex-direction:column;padding:clamp(1rem,4vw,3rem);display:flex;position:fixed;inset:0}.lightbox-backdrop{-webkit-backdrop-filter:blur(8px);cursor:zoom-out;background:#0a1219eb;border:none;position:absolute;inset:0}.lightbox-figure{z-index:1;touch-action:pan-y;flex:auto;place-items:center;max-width:min(1100px,92vw);min-height:0;display:grid;position:relative}.lightbox-img{object-fit:contain;border-radius:var(--r-md);max-width:100%;max-height:100%;box-shadow:var(--shadow-lg);cursor:grab;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;will-change:transform}.lightbox-img.is-dragging{cursor:grabbing;transition:none}.lightbox-controls{z-index:2;justify-content:center;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--bg-glass);border:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(10px);flex:none;display:flex;position:relative}.lightbox-counter{text-align:center;min-width:4ch;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--text-muted);user-select:none;font-weight:700}.lightbox-nav{border-radius:var(--r-sm);width:46px;height:46px;color:var(--text-strong);background:var(--surface-tint);border:1px solid var(--border-soft);transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);flex-shrink:0;place-items:center;display:grid}.lightbox-nav:hover{background:var(--surface-tint-active);border-color:#ffffff4d}.lightbox-close{top:var(--sp-4);right:var(--sp-4);z-index:3;border-radius:var(--r-sm);width:42px;height:42px;color:var(--text-strong);background:var(--bg-glass);border:1px solid var(--border-soft);-webkit-backdrop-filter:blur(8px);transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);place-items:center;display:grid;position:absolute}.lightbox-close:hover{background:var(--surface-tint-active);border-color:#ffffff4d}@media (width<=560px){.lightbox{gap:var(--sp-3);padding:.5rem}.lightbox-controls{gap:var(--sp-3);padding:var(--sp-1) var(--sp-2)}.lightbox-nav{width:38px;height:38px}.lightbox-counter{font-size:var(--fs-xs)}}body.modal-open{overflow:hidden}.work-detail .wd-about+.wd-history{margin-top:var(--sp-12)}.work-detail .wd-history-list{margin:0;padding:0;list-style:none}.work-detail .wd-history-row{align-items:baseline;gap:var(--sp-4);padding-block:var(--sp-3);border-top:1px solid var(--border-subtle);grid-template-columns:6.5rem 6rem minmax(0,1fr);display:grid}.work-detail .wd-history-row:first-child{border-top:0}.work-detail .wd-history-date{font-variant-numeric:tabular-nums;color:var(--text-muted)}.work-detail .wd-history-kind{font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap;font-weight:600}.work-detail .wd-history-kind svg{vertical-align:-.2em;margin-right:var(--sp-1)}.work-detail .wd-history-title a{text-decoration:underline;text-decoration-color:var(--border-subtle);text-underline-offset:4px;transition:text-decoration-color .15s}.work-detail .wd-history-title a:hover,.work-detail .wd-history-title a:focus-visible{text-decoration-color:currentColor}@media (width<=759.98px){.work-detail .wd-history-row{gap:var(--sp-1);grid-template-columns:minmax(0,1fr)}}