@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--bg:#fff;--text:#20262b;--muted:#78828a;--accent:#5bad92;--line:#e2e7e6;font:16px 'DM Sans','Noto Sans JP',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #32826b;outline-offset:5px}::selection{background:#cbeadd}.skip{position:fixed;top:-100px;left:20px;padding:12px;background:#cbeadd;z-index:10}.skip:focus{top:15px}.header{padding:0 max(3.2%,calc((100% - 1520px)/2));height:92px;display:flex;align-items:center;gap:50px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-size:1rem;font-weight:600;letter-spacing:.025em}.brand small{display:block;font-size:.75rem;font-weight:400;color:#6e777d;margin-top:5px;letter-spacing:.07em}.brand-placeholder{height:43px;width:43px;border-radius:50%;background:#e9f1ee;border:1px solid #bcd5ca;box-shadow:inset 0 0 0 7px #f7faf8}.header-link{font-size:.875rem;font-weight:500}.header-note{margin-left:auto;font-size:1rem;letter-spacing:.23em}main,footer{width:min(1520px,93.6%);margin:auto}.intro{padding:39px 0 27px;display:flex;align-items:center;gap:30px}.intro-heading{padding-right:30px;border-right:1px solid #cdd6d3;flex-shrink:0}.eyebrow{font-size:.75rem;letter-spacing:.25em;color:#707b81;margin:0 0 6px}h1{font-size:1.75rem;letter-spacing:.13em;font-weight:600;margin:0;line-height:1.5}.intro-copy{font-size:.875rem;line-height:1.95;color:#6e7880;margin:0}.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters button{background:#f3f5f6;color:#424b52;font-size:.875rem;padding:10px 20px;border:1px solid transparent;border-radius:30px;cursor:pointer;transition:background .2s,transform .2s,color .2s}.filters button>span{font-size:.75rem;color:inherit;opacity:.7;margin-left:7px}.filters button[aria-pressed=true]{background:var(--accent);color:white}.filters button:hover{background:#dceee6;transform:translateY(-2px);color:#28644f}.filters button[aria-pressed=true]:hover{background:#489a7f;color:white}#result-count{font-size:.75rem;color:#7c868c}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px 25px;align-items:start;padding-bottom:55px}.project{min-width:0}.project[hidden]{display:none!important}.project>a{display:block}.visual{aspect-ratio:16/9;position:relative;overflow:hidden;background:#f2f5f4;border:1px solid #e3e8e6}.visual>img{display:block;width:100%;height:100%;object-fit:contain;transition:filter .35s,transform .5s}.project a:hover .visual>img,.project a:focus-visible .visual>img{filter:brightness(.8);transform:scale(1.025)}.open-badge{position:absolute;right:13px;bottom:13px;padding:10px 16px;border-radius:5px;background:#183c32e8;color:white;font-size:.875rem;opacity:0;transform:translateY(8px);transition:transform .3s,opacity .3s;z-index:3}.project a:hover .open-badge,.project a:focus-visible .open-badge{opacity:1;transform:translateY(0)}.project-info{padding:13px 0 0}.project h2{font-size:.9375rem;font-weight:700;line-height:1.75;margin:0 0 10px;overflow-wrap:anywhere;color:#242c31;transition:color .2s}.project a:hover h2{color:#348569}.project-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}.channel{font-size:.875rem;color:#68727a;line-height:1.7}.tag-list{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}.type-tag{font-size:.75rem;white-space:nowrap;border-radius:3px;padding:3px 7px;line-height:1.5;font-weight:500}.video-tag{background:#dcf0e8;color:#286c56}.thumbnail-tag{background:#fff0b3;color:#795b08}.shorts-tag{background:#e9edf0;color:#52636d}.tools-tag{background:#e8e5f7;color:#5b4b91}.publish-date{display:block;text-align:right;font-size:.75rem;letter-spacing:.04em;margin-top:8px;color:#7f8991}.shorts>a{display:grid;grid-template-columns:45% 1fr;gap:15px;align-items:center}.shorts .visual{aspect-ratio:9/16}.shorts .visual>img{object-fit:cover}.shorts .project-info{padding:0}.shorts .project-meta{flex-direction:column;gap:10px}.shorts .tag-list{margin-left:0}.shorts .publish-date{text-align:left;margin-top:14px}.shorts h2{font-size:.875rem}.shorts .open-badge{font-size:.75rem;right:7px;bottom:7px;left:7px;text-align:center;padding:7px 3px}.danmaku-preview{width:100%;height:100%;position:relative;background:#edf3f5;overflow:hidden;container-type:inline-size}.comment-stage{position:absolute;inset:0;background-color:#f0f3f5;background-image:linear-gradient(45deg,#e0e6e9 25%,transparent 25%),linear-gradient(-45deg,#e0e6e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e6e9 75%),linear-gradient(-45deg,transparent 75%,#e0e6e9 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.comment-stage span{position:absolute;font-weight:800;font-size:clamp(.75rem,5cqw,1.5rem);line-height:1.1;white-space:nowrap;text-shadow:1px 1px 0 white,-1px -1px 0 white}.comment-stage span:nth-child(1){top:8%;left:6%;color:#42516c}.comment-stage span:nth-child(2){top:8%;right:6%;color:#e75b75}.comment-stage span:nth-child(3){top:33%;right:3%;color:#447ab5}.comment-stage span:nth-child(4){top:62%;left:3%;color:#40965b}.comment-stage span:nth-child(5){top:62%;right:8%;color:#977030}.danmaku-copy{position:absolute;left:0;right:0;top:31%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.danmaku-copy strong{font-size:clamp(1.35rem,9cqw,2.8rem);letter-spacing:-.055em;line-height:1.15;font-weight:700;color:#22333e;background:#f8fafbf0;padding:2px 12px}.danmaku-copy>span{font-size:clamp(.65rem,3.3cqw,.875rem);background:#f8fafbf0;color:#3e5360;padding:3px 8px}.danmaku-flow{position:absolute;bottom:0;left:0;right:0;height:20%;display:flex;align-items:center;justify-content:center;gap:10px;background:#25333f;color:#eaf2f6;font-size:clamp(.6rem,3.1cqw,.875rem)}.danmaku-flow b{color:#8bc9d5;font-weight:400}.project a:hover .comment-stage span{animation:comment-flow 3s linear infinite}.chaos-preview{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(105deg,#0e1821 67%,#20202b 67%);border:9px solid #121e27;overflow:hidden;container-type:inline-size}.chaos-preview:before{content:'';position:absolute;inset:7px;border:1px solid #394450;border-left:2px solid #ef5161;pointer-events:none}.chaos-preview>img{display:block;width:87%;height:70%;object-fit:contain;transition:transform .35s;filter:drop-shadow(0 4px 3px #0004)}.project a:hover .chaos-preview>img{transform:scale(1.04)}.chaos-caption{position:absolute;top:6%;font-size:clamp(.55rem,2.8cqw,.75rem);letter-spacing:.1em;color:#acb5c2}.chaos-bottom{position:absolute;bottom:7%;font-size:clamp(.55rem,3cqw,.8rem);color:#e4e6ec}.tools h2{font-weight:700}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0 32px;border-top:1px solid var(--line);font-size:.75rem;color:#7e878e}footer>a:first-child{font-size:.875rem;color:#424b51}footer>a:first-child>span{font-size:.75rem;margin-left:12px;color:#7e878e}footer>a:last-child{font-size:.75rem;letter-spacing:.07em}@keyframes comment-flow{from{transform:translateX(10px)}to{transform:translateX(-35px)}}@media(max-width:1200px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}.header{gap:35px}.shorts>a{gap:12px}}@media(max-width:850px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}.header{height:83px;gap:25px}.header-note{font-size:.8rem;letter-spacing:.15em}.intro{padding:30px 0 24px}.intro-copy{font-size:.875rem}.filters button{padding:9px 14px}}@media(max-width:540px){.header{height:82px;padding:0 20px;gap:14px}.brand{font-size:.9375rem;gap:10px}.brand-placeholder{width:36px;height:36px}.header-link{display:none}.header-note{font-size:.75rem;letter-spacing:.09em}main,footer{width:calc(100% - 36px)}.intro{align-items:flex-start;gap:18px;padding:28px 0 22px}.intro-heading{padding-right:18px}h1{font-size:1.25rem;letter-spacing:.08em}.eyebrow{font-size:.75rem}.intro-copy{font-size:.75rem;line-height:1.9}.filter-bar{margin-bottom:23px;gap:8px}.filters{gap:6px}.filters button{font-size:.875rem;padding:9px 13px}.filters button>span{font-size:.75rem;margin-left:5px}#result-count{display:none}.gallery{grid-template-columns:1fr;gap:30px;padding-bottom:36px}.project h2{font-size:1rem}.shorts>a{grid-template-columns:40% 1fr;gap:18px}.shorts h2{font-size:.9375rem}.publish-date{margin-top:7px}.tag-list{gap:5px}footer{flex-wrap:wrap;gap:16px;padding:24px 0}.danmaku-copy strong{font-size:9cqw}.danmaku-copy>span{font-size:3.3cqw}}@media(hover:none){.open-badge{opacity:1;transform:none;background:#183c32d9;font-size:.75rem;padding:7px 10px}.project a:hover .visual>img{transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* B reference refinement: navigation, editorial toolbar and compact work captions. */
.header{height:78px;gap:46px}.header-nav{display:flex;align-items:center;gap:0}.header-nav>a,.header-nav>button{font:400 .75rem 'DM Sans','Noto Sans JP',sans-serif;letter-spacing:.1em;padding:0 18px;color:#525b65;border:0;border-right:1px solid #ccd3dc;background:none;line-height:1.2;white-space:nowrap}.header-nav>:last-child{border-right:0}.header-nav>[aria-current]{font-weight:700;color:#20262b}.header-nav>button{cursor:default}.header-nav>a:hover{color:#39876d}.header-signature{margin-left:auto;display:flex;flex-direction:column;gap:7px;text-align:right}.header-signature small{font-size:.65rem;letter-spacing:.05em}.header-signature>span{font-size:1rem;letter-spacing:.23em}.work-toolbar{display:flex;gap:26px;align-items:center;padding:35px 0 30px}.work-toolbar .intro{padding:0;gap:24px;flex:1 1 auto}.intro-heading{padding-right:24px}.intro-copy{font-size:.75rem;white-space:nowrap}.filter-bar{margin:0;flex-shrink:0}.filters{flex-wrap:nowrap;gap:7px}.filters button{padding:10px 16px;font-size:.75rem;white-space:nowrap}.filters button>span{display:none}#result-count{display:none}.editorial-note{border-left:1px solid #ced5dd;padding-left:28px;font-size:.75rem;line-height:1.8;color:#8a929c;white-space:nowrap}.editorial-note small{display:block;font-size:.625rem;letter-spacing:.21em;margin-top:5px}.project-info{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;padding-top:12px;align-items:start}.project-info>.channel{grid-column:1;grid-row:1;color:#202a34;font-size:.875rem;font-weight:600;line-height:1.6;min-width:0}.project h2,.tools h2{grid-column:1;grid-row:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400;font-size:.875rem;line-height:1.65;margin:0;min-width:0;color:#79828d;overflow-wrap:normal}.project-details{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}.project-details .publish-date{margin:0;text-align:right;font-size:.75rem;line-height:1.6}.project-details .tag-list{margin:0;justify-content:flex-end;gap:4px}.type-tag{font-size:.6875rem;padding:2px 5px}.tools-tag{background:#e2eff9;color:#3c729a}.thumbnail-tag{background:#f4eed7;color:#81734a}.shorts .project-info{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}.shorts h2{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.7;max-height:3.4em;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;font-weight:400}.shorts .project-details{margin-top:10px;align-items:flex-start;gap:7px}.shorts .project-details .publish-date{margin:0;text-align:left}.shorts .project-details .tag-list{justify-content:flex-start}.gallery{gap:33px 25px}@media(max-width:1390px){.editorial-note{display:none}.work-toolbar{gap:20px}.work-toolbar .intro{gap:18px}.intro-copy{font-size:.75rem;white-space:normal}.filters button{padding:10px 13px}.header{gap:30px}.header-nav>a,.header-nav>button{padding:0 15px}.project-info{grid-template-columns:minmax(0,1fr) auto}.project-details .tag-list{max-width:118px}}@media(max-width:1050px){.work-toolbar{flex-wrap:wrap;gap:22px}.work-toolbar .intro{flex-basis:100%}.header{gap:20px}.header-nav>a,.header-nav>button{padding:0 11px}.header-signature>span{font-size:.875rem}.header-signature small{font-size:.625rem}.project-details .tag-list{max-width:110px}}@media(max-width:700px){.header{height:auto;min-height:114px;display:grid;grid-template-columns:1fr auto;padding:17px 20px 15px;gap:19px 12px}.header-signature{grid-column:2;grid-row:1}.header-signature small{font-size:.625rem}.header-signature>span{font-size:.75rem;letter-spacing:.16em}.header-nav{grid-column:1/-1;justify-content:center}.header-nav>a,.header-nav>button{padding:0 17px;font-size:.75rem}.work-toolbar{padding:25px 0 25px;gap:20px}.work-toolbar .intro{gap:18px}.filters{flex-wrap:wrap;gap:7px}.filters button{font-size:.8125rem;padding:9px 14px}.filter-bar{width:100%}.intro-copy{font-size:.75rem}.project h2{font-size:.875rem}.type-tag{font-size:.75rem}.project-details .tag-list{max-width:145px}.shorts h2{font-size:.875rem}.project-info{column-gap:12px}.gallery{gap:29px 20px}}
.header-signature small,.editorial-note small{font-size:.75rem}.type-tag{font-size:.75rem}.project:not(.shorts) .project-details .tag-list{max-width:none;flex-wrap:nowrap}.project:not(.shorts) .project-info{grid-template-rows:min-content min-content}

/* Softer category colors, revision 8. */
.shorts-tag{background:#fbe7e6;color:#a45758}.thumbnail-tag{background:#fbf4dc;color:#827345}.tools-tag{background:#eaf5fd;color:#3c729a}
.filters button[data-filter=shorts]{background:#fbeeed;color:#9b5657}.filters button[data-filter=shorts]:hover{background:#f5dddc;color:#8d4749}.filters button[data-filter=shorts][aria-pressed=true]{background:#c87979;color:#fff}

/* Revision 9: full-width titles, secondary tags and quiet category tabs. */
.project .project-info,.project.shorts .project-info{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:5px 10px;align-items:start}.project .project-details,.project.shorts .project-details{display:contents}.project .project-info>.channel{grid-column:1;grid-row:1;font-size:.875rem;font-weight:600}.project .project-details .publish-date,.project.shorts .project-details .publish-date{grid-column:2;grid-row:1;margin:0;text-align:right;font-size:.75rem;font-weight:400;color:#879097;line-height:1.8}.project h2,.project.shorts h2{grid-column:1/-1;grid-row:2;font-size:.9375rem;color:#626e79;margin:0;min-width:0;width:100%;font-weight:400}.project .project-details .tag-list,.project.shorts .project-details .tag-list{grid-column:1/-1;grid-row:3;justify-content:flex-start;flex-wrap:wrap;max-width:none;margin:3px 0 0;gap:5px}.project .type-tag{font-size:.75rem;line-height:1.5;padding:1px 6px;font-weight:400;border-radius:3px}.project.shorts .project-info{grid-template-columns:minmax(0,1fr);row-gap:6px}.project.shorts .project-info>.channel{grid-column:1;grid-row:1}.project.shorts h2{grid-column:1;grid-row:2;font-size:.875rem}.project.shorts .project-details .publish-date{grid-column:1;grid-row:3;text-align:left;margin-top:6px}.project.shorts .project-details .tag-list{grid-column:1;grid-row:4;margin:0}
.filters button[data-filter]{--hover-bg:#e4f1eb;--hover-ink:#39705b;background:#f3f5f6;color:#525d65;border:1px solid transparent;box-shadow:none;transform:none;transition:background .22s,color .22s,border-color .22s}.filters button[data-filter=shorts]{--hover-bg:#fbe9e8;--hover-ink:#9a5758}.filters button[data-filter=thumbnail]{--hover-bg:#fbf3da;--hover-ink:#887345}.filters button[data-filter=tools]{--hover-bg:#e8f3fc;--hover-ink:#487797}.filters button[data-filter][aria-pressed=true]{background:#e9efec;color:#2f4e41;border-color:#bdcfc5}.filters button[data-filter]:hover,.filters button[data-filter]:focus-visible{background:var(--hover-bg);color:var(--hover-ink);transform:none}.filters button[data-filter][aria-pressed=true]:hover{border-color:var(--hover-ink)}

/* Reference 10: edge-to-edge editorial gallery and two-line captions. */
main,footer{width:94.6%;max-width:none}
.header{padding-left:2.7%;padding-right:2.7%;height:64px}
.work-toolbar{padding:25px 0 22px}
.gallery{gap:25px 18px}
.filters button[data-filter=all][aria-pressed=true],.filters button[data-filter=all][aria-pressed=true]:hover{background:linear-gradient(110deg,#79bc9a 0%,#50b8a6 48%,#24b8c3 100%);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 #ffffff35}
.filters button{padding:7px 17px}
.project:not(.shorts) .project-info{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 9px;padding-top:8px}
.project:not(.shorts) .project-info>.channel{grid-column:1;grid-row:1;font-size:.8125rem;line-height:1.6}
.project:not(.shorts) h2{grid-column:1;grid-row:2;font-size:.75rem;line-height:1.65;color:#778398}
.project:not(.shorts) .project-details .publish-date{grid-column:2;grid-row:1;font-size:.6875rem;line-height:1.8;color:#8b97aa}
.project:not(.shorts) .project-details .tag-list{grid-column:2;grid-row:2;justify-content:flex-end;flex-wrap:nowrap;gap:4px;margin:0}
.project .type-tag{font-size:.625rem;line-height:1.6;padding:1px 6px;font-weight:500;border-radius:2px}
.video-tag{background:#dbf5ee;color:#48a995}
.thumbnail-tag{background:#fff4cc;color:#b49a45}
.shorts-tag{background:#ffe7e9;color:#d17b84}
.tools-tag{background:#e0f3ff;color:#60a6d1}
.project.shorts .project-info{gap:4px}
.project.shorts .project-info>.channel{font-size:.8125rem}
.project.shorts h2{font-size:.75rem;color:#778398}
.project.shorts .project-details .publish-date{font-size:.6875rem;color:#8b97aa}
.shorts>a{grid-template-columns:40% minmax(0,1fr);gap:16px}
@media(min-width:1100px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1391px){.work-toolbar .intro{flex:1}.editorial-note{margin-left:22px}.filter-bar{margin-right:1vw}}
@media(max-width:700px){.header{height:auto;padding:17px 20px 15px}.work-toolbar{padding:25px 0}.gallery{gap:28px 18px}.project .type-tag{font-size:.6875rem}.project:not(.shorts) .project-info>.channel{font-size:.875rem}.project:not(.shorts) h2{font-size:.8125rem}}
@media(max-width:540px){main,footer{width:calc(100% - 36px)}}

/* Reference 11: compact masthead, cyan accents and editorial end note. */
.video-tag{background:#d3f5f1;color:#27aaa5}
.filters button[data-filter=video]{--hover-bg:#d5f4f1;--hover-ink:#259e9c}
.filters button[data-filter=all]{--hover-bg:#dcf5ef;--hover-ink:#259e9c}
.header{height:55px;gap:34px}.brand{font-size:.8125rem;gap:11px}.brand small{font-size:.625rem;margin-top:3px}.brand-placeholder{width:38px;height:38px}.header-nav>a,.header-nav>button{font-size:.625rem;padding:0 15px;letter-spacing:.12em}.header-signature{gap:4px}.header-signature small{font-size:.5625rem}.header-signature>span{font-size:.875rem;letter-spacing:.24em}
.work-toolbar{gap:20px;padding:24px 0 20px}.work-toolbar .intro{gap:25px;flex:1;min-width:0}.intro-heading{padding-right:25px}h1{font-size:1.5rem;letter-spacing:.14em}.eyebrow{font-size:.625rem}.intro-copy{font-size:.6875rem;line-height:1.8}.filters button[data-filter]{font-size:.6875rem;padding:6px 17px}.editorial-note{display:block;margin-left:20px;padding-left:28px;font-size:.625rem;line-height:1.65;border-left:1px solid #d8dce5}.editorial-note small{font-size:.5rem;letter-spacing:.2em}.filter-bar{margin-right:0}
.project.video .open-badge,.project.shorts .open-badge{display:none}
.project h2.is-scrolling{display:block;white-space:nowrap;text-overflow:clip;-webkit-line-clamp:unset;line-clamp:unset}.title-track{display:inline-block;white-space:nowrap;will-change:transform}
@media(max-width:1099px){.editorial-note{display:none}.work-toolbar{flex-wrap:wrap}.work-toolbar .intro{flex-basis:100%}}
@media(max-width:700px){.header{height:auto;gap:16px 12px}.header-signature>span{font-size:.75rem}.header-nav>a,.header-nav>button{font-size:.6875rem}.filters button[data-filter]{padding:8px 13px}.intro-copy{font-size:.6875rem}}

/* Revision 12: vivid category accents and readable editorial ink. */
.thumbnail-tag{background:#fff0bc;color:#a8821b}
.shorts-tag{background:#ffdde3;color:#ce5872}
.tools-tag{background:#d5efff;color:#358ec4}
.filters button[data-filter=thumbnail]{--hover-bg:#fff0bc;--hover-ink:#a8821b}
.filters button[data-filter=shorts]{--hover-bg:#ffdde3;--hover-ink:#ce5872}
.filters button[data-filter=tools]{--hover-bg:#d5efff;--hover-ink:#358ec4}
.brand{font-size:1rem;font-weight:600;letter-spacing:.06em}.brand small{font-size:.6875rem;font-weight:500;letter-spacing:.025em;color:#586477}
.header-nav>a>span,.header-nav>button>span{padding:1px 3px;transition:background-color .18s,color .18s;box-decoration-break:clone}
.header-nav>a:hover>span,.header-nav>button:hover>span,.header-nav>a:focus-visible>span,.header-nav>button:focus-visible>span{background:#00b9ad;color:#fff}
.header-nav>a:hover{color:inherit}
.intro-copy,.editorial-note{color:#64718a}
.eyebrow{color:#69768c}
.project:not(.shorts) h2,.project.shorts h2{color:#626f88}
.project:not(.shorts) .project-details .publish-date,.project.shorts .project-details .publish-date{color:#73819a}
footer,footer>a:first-child>span{color:#6b7890}
@media(max-width:700px){.brand{font-size:.9375rem}}

/* Revision 13: fresh green interactions, optical date inset and chromatic tags. */
::selection{background:#a5f0ce;color:#153d31}
a:focus-visible,button:focus-visible{outline-color:#19b984}
.project a:hover h2,.project a:focus-visible h2{color:#16845b}
.open-badge{background:#15966d;color:#fff}
.project a:hover .visual,.project a:focus-visible .visual{border-color:#37c797}
.project:not(.shorts) .project-details .publish-date{padding-right:5px}
.thumbnail-tag{background:#ffedab;color:#987019}
.shorts-tag{background:#ffd9df;color:#c44862}
.tools-tag{background:#cfeeff;color:#247eaf}
.filters button[data-filter=thumbnail]{--hover-bg:#ffedab;--hover-ink:#987019}
.filters button[data-filter=shorts]{--hover-bg:#ffd9df;--hover-ink:#c44862}
.filters button[data-filter=tools]{--hover-bg:#cfeeff;--hover-ink:#247eaf}
@media(hover:none){.open-badge{background:#15966d}}

/* Final detail pass: stationary navigation and turquoise interactions. */
.project .open-badge{display:none}
.project a:hover .visual,.project a:focus-visible .visual{border-color:#e3e8e6}
.project a:hover h2,.project a:focus-visible h2{color:#008e98}
a:focus-visible,button:focus-visible{outline-color:#00a8ad}
::selection{background:#a8eeeb;color:#16494e}
.shorts-tag{background:#f8dce7;color:#ae5279}
.thumbnail-tag{background:#ffe5c9;color:#9b6b36}
.filters button[data-filter=shorts]{--hover-bg:#f8dce7;--hover-ink:#ae5279}
.filters button[data-filter=thumbnail]{--hover-bg:#ffe5c9;--hover-ink:#9b6b36}

/* Revision 15: persistent masthead and a quiet full-width footer. */
.shorts-tag{background:#f8dce7;color:#bd4d59}
.thumbnail-tag{background:#fff0c8;color:#9b7936}
.filters button[data-filter=shorts]{--hover-bg:#f8dce7;--hover-ink:#bd4d59}
.filters button[data-filter=thumbnail]{--hover-bg:#fff0c8;--hover-ink:#9b7936}
.header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #e2e7ec}
html{scroll-padding-top:75px}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
footer{width:100%;margin-top:auto;padding:12px 2.7%;min-height:43px;border-top:1px solid #e2e7ec;gap:20px}
footer .copyright{font-size:.625rem;letter-spacing:.025em;color:#78859b}
footer>a.back-top{font-size:.625rem;letter-spacing:.12em;color:#64728a;display:flex;align-items:center;gap:12px}
footer>a.back-top>span{font-size:.875rem;margin:0;color:inherit;transition:transform .2s}
footer>a.back-top:hover{color:#008e98}
footer>a.back-top:hover>span{transform:translateY(-3px)}
@media(max-width:700px){html{scroll-padding-top:125px}footer{padding:14px 18px}}

/* Revision 16: clean image clipping and brighter sky-blue categories. */
.project .visual{border:0;background:transparent;isolation:isolate;clip-path:inset(0)}
.project .visual>img{transform-origin:center;backface-visibility:hidden}
.tools-tag{background:#c5edff;color:#187fb8}
.filters button[data-filter=tools]{--hover-bg:#c5edff;--hover-ink:#187fb8}
.footer-links{display:flex;align-items:center;gap:0;margin-left:auto}
.footer-links>a{font-size:.625rem;letter-spacing:.06em;color:#64728a;padding:0 17px;border-right:1px solid #dce2ea;line-height:1.2}
.footer-links>a:last-child{border:0;padding-right:0}
.footer-links>a:hover{color:#008e98}
.footer-links .back-top{display:flex;align-items:center;gap:10px;font-size:.625rem;letter-spacing:.12em}
.footer-links .back-top>span{font-size:.875rem;transition:transform .2s}
.footer-links .back-top:hover>span{transform:translateY(-3px)}
@media(max-width:540px){footer{row-gap:14px}.footer-links>a{padding:0 12px}}

/* Revision 17: balance tool-label emphasis. */
.tools-tag{color:#428fae}
.filters button[data-filter=tools]{--hover-ink:#428fae}

/* Final palette: midpoint between the two approved tool-label blues. */
.tools-tag{color:#2d87b3}
.filters button[data-filter=tools]{--hover-ink:#2d87b3}

.brand-avatar{display:block;width:38px;height:38px;object-fit:cover;border-radius:50%;flex-shrink:0}
@media(max-width:540px){.brand-avatar{width:36px;height:36px}}

/* Keep grid rows anchored while category transitions reserve gallery height. */
.gallery{align-content:start}

/* ---- Added for the generated site (hover image, detail / about / contact pages) ---- */

/* Keep the scrollbar always shown so filtering to a short list never makes it appear/disappear,
   and keep the footer pinned to the bottom of the window on short pages. */
html{overflow-y:scroll}
body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}

/* Card hover: scale only, no darkening. Hover image fades in when one exists. */
.visual>img,.visual>.hover-img,.visual>.custom-visual{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s}
.project a:hover .visual>img,.project a:focus-visible .visual>img,
.project a:hover .visual>.custom-visual,.project a:focus-visible .visual>.custom-visual{filter:none;transform:scale(1.04)}
.visual>.custom-visual{position:absolute;inset:0}
.visual>.hover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:2}
.project a:hover .visual>.hover-img,.project a:focus-visible .visual>.hover-img{opacity:1}
.project a:hover .chaos-preview>img{transform:none}
@media(hover:none){.open-badge{display:none}.project a:hover .visual>img{transform:none}}

/* Shared page shell */
.page{max-width:980px;margin:0 auto;padding:48px 0 80px}
.page-head{margin-bottom:36px}
.page-head .eyebrow{margin-bottom:8px}
.back-link{display:inline-block;font-size:.8125rem;letter-spacing:.08em;color:#6e7880;margin-bottom:26px}
.back-link:hover{color:#008e98}

/* Work detail */
.detail-hero{position:relative;aspect-ratio:16/9;background:#f2f5f4;border:1px solid #e3e8e6;overflow:hidden}
.detail-hero iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.detail-hero>img{display:block;width:100%;height:100%;object-fit:contain}
.detail-hero>.custom-visual{position:absolute;inset:0}
.detail-hero.is-short{aspect-ratio:auto;height:min(78vh,720px);background:#10181d;border-color:#10181d}
.detail-hero.is-short iframe{left:50%;width:auto;aspect-ratio:9/16;transform:translateX(-50%)}
.detail-info{padding:26px 0 0}
.detail-info .channel{display:block;margin-bottom:6px}
.detail-info h1{font-size:1.5rem;letter-spacing:.04em;line-height:1.6}
.detail-meta{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.detail-meta .tag-list{margin-left:0}
.detail-meta time{font-size:.8125rem;color:#7c868c}
.detail-body{margin-top:30px;padding-top:28px;border-top:1px solid var(--line);font-size:.9375rem;line-height:2;color:#3a4349;white-space:pre-line}
.detail-actions{margin-top:34px}
.button{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:40px;background:#20262b;color:#fff;font-size:.875rem;letter-spacing:.06em;transition:background .2s,transform .2s}
.button:hover{background:#008e98;transform:translateY(-2px)}
.button.is-ghost{background:#f3f5f6;color:#20262b}
.button.is-ghost:hover{background:#dff1ee;color:#006f76}
.detail-pager{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:64px;padding-top:26px;border-top:1px solid var(--line)}
.detail-pager a{display:block;min-width:0}
.detail-pager a:last-child{text-align:right}
.detail-pager small{display:block;font-size:.6875rem;letter-spacing:.2em;color:#8a949a;margin-bottom:6px}
.detail-pager span{display:block;font-size:.875rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-pager a:hover span{color:#008e98}

/* About */
.about-hero{display:flex;align-items:center;gap:30px}
.about-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.about-hero h1{font-size:1.75rem;letter-spacing:.08em}
.about-hero h1 small{font-size:.875rem;font-weight:500;letter-spacing:.12em;color:#7c868c;margin-left:12px}
.about-role{margin:8px 0 0;font-size:.9375rem;font-weight:600;color:#3a4349}
.about-role span{display:block;margin-top:4px;font-size:.8125rem;font-weight:400;color:#7c868c}
.about-bio{margin-top:40px;font-size:.9375rem;line-height:2.05;color:#3a4349}
.about-bio p{margin:0 0 1em;white-space:pre-line}
.about-section{margin-top:48px}
.about-section h2{font-size:1.125rem;letter-spacing:.14em;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.about-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.about-list li{font-size:.875rem;padding:8px 16px;border-radius:30px;background:#f3f5f6;color:#3a4349}
.about-links{display:flex;gap:12px;flex-wrap:wrap}

/* Contact */
.contact-lead{font-size:.9375rem;line-height:2;color:#3a4349;margin:0 0 36px}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-card{display:block;padding:30px 28px;border:1px solid var(--line);border-radius:10px;transition:border-color .2s,transform .2s,background .2s}
.contact-card:hover{border-color:#37c797;background:#f7fbf9;transform:translateY(-3px)}
.contact-card small{display:block;font-size:.6875rem;letter-spacing:.22em;color:#8a949a}
.contact-card strong{display:block;font-size:1.125rem;margin:10px 0 8px}
.contact-card span{font-size:.8125rem;color:#6e7880;overflow-wrap:anywhere}

@media(max-width:700px){
  .page{padding:30px 0 60px;width:calc(100% - 36px)}
  .detail-info h1{font-size:1.2rem}
  .detail-hero.is-short{height:auto;aspect-ratio:9/16}
  .detail-hero.is-short iframe{left:0;width:100%;transform:none}
  .about-hero{flex-direction:column;align-items:flex-start;gap:20px}
  .about-avatar{width:96px;height:96px}
  .about-hero h1 small{display:block;margin:6px 0 0}
  .contact-cards{grid-template-columns:1fr}
  .detail-pager{grid-template-columns:1fr}
  .detail-pager a:last-child{text-align:left}
}

/* Price */
.price-notes{list-style:none;margin:0 0 44px;padding:20px 24px;background:#f3f8f6;border-radius:10px;display:grid;gap:10px}
.price-notes li{font-size:.875rem;line-height:1.85;color:#3a4349;white-space:pre-line;padding-left:18px;position:relative}
.price-notes li:before{content:'';position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.price-section{margin-top:48px}
.price-section h2{font-size:1.125rem;letter-spacing:.14em;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.price-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.price-card{padding:24px 22px;border:1px solid var(--line);border-radius:10px}
.price-card strong{font-size:.9375rem}
.price-card .price-value{font-size:1.5rem;font-weight:700;letter-spacing:.02em;color:#16845b;margin:10px 0 12px}
.price-body{font-size:.8125rem;line-height:1.85;color:#5c666d;white-space:pre-line;margin:0}
.price-row{display:grid;grid-template-columns:minmax(150px,1.1fr) 100px minmax(0,3fr) 64px 64px;gap:16px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line)}
.price-row.is-head{padding:0 4px 10px;font-size:.6875rem;letter-spacing:.12em;color:#8a949a}
.price-row.is-head span:nth-child(n+4){text-align:center}
.price-name{font-size:.875rem;font-weight:600}
.price-row .price-value{font-size:.9375rem;font-weight:700;color:#16845b;white-space:nowrap}
.price-flag{text-align:center}
.mark{display:inline-block;font-size:.8125rem;color:#b9c1c6}
.mark.is-on{width:24px;height:24px;line-height:24px;border-radius:50%;background:#dcf0e8;color:#286c56;font-weight:700}
.price-cta{margin-top:56px;padding-top:30px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.price-cta p{margin:0;font-size:.9375rem;color:#3a4349}
.contact-price{margin-top:28px}
@media(max-width:850px){.price-cards{grid-template-columns:1fr}}
@media(max-width:700px){
  .price-row.is-head{display:none}
  .price-row{grid-template-columns:1fr auto;gap:6px 12px;padding:16px 0}
  .price-row .price-body{grid-column:1/-1}
  .price-flag{grid-column:auto;text-align:left;font-size:.75rem;color:#5c666d;display:flex;align-items:center;gap:6px}
  .price-flag:before{content:attr(data-label)}
  .mark.is-on{width:20px;height:20px;line-height:20px}
}
.price-due{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;font-size:.8125rem;font-weight:600;color:#3a4349}
.price-due span{font-size:.6875rem;font-weight:500;letter-spacing:.1em;padding:2px 8px;border-radius:3px;background:#e9f4f0;color:#286c56}

/* Filter tabs: "すべて" keeps its white-on-gradient look; other selected tabs use the same
   light background + colored text as the card tags, with an outline to mark the selection (no bold, so the tab row never shifts) */
.filters button[data-filter=video]{--tag-bg:#d3f5f1;--tag-ink:#27aaa5}
.filters button[data-filter=shorts]{--tag-bg:#f8dce7;--tag-ink:#bd4d59}
.filters button[data-filter=thumbnail]{--tag-bg:#fff0c8;--tag-ink:#9b7936}
.filters button[data-filter=tools]{--tag-bg:#c5edff;--tag-ink:#2d87b3}
.filters button[data-filter]:not([data-filter=all])[aria-pressed=true],
.filters button[data-filter]:not([data-filter=all])[aria-pressed=true]:hover{background:var(--tag-bg,#e9efec);color:var(--tag-ink,#2f4e41);border-color:var(--tag-ink,#bdcfc5)}

/* Shorts card: date on the channel row (right) and tags right-aligned, like the other cards.
   One even gap between rows (the original had 4px / 10px / 4px). */
.project.shorts .project-info{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:5px 8px}
.project.shorts .project-info>.channel{grid-column:1;grid-row:1}
.project.shorts .project-details .publish-date{grid-column:2;grid-row:1;text-align:right;margin:0;padding-right:5px}
.project.shorts h2{grid-column:1/-1;grid-row:2;margin:0}
.project.shorts .project-details .tag-list{grid-column:1/-1;grid-row:3;justify-content:flex-end;margin:0}

/* Shorts card height = normal card height at every width (16:9 image + 51px text block),
   so a row containing a Shorts card is never taller than the others. */
.shorts>a{grid-template-columns:calc((100% * .5625 + 51px) * .5625) minmax(0,1fr)}
.contact-reply{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:30px;background:#f3f8f6;font-size:.8125rem;color:#286c56}