.collection-hero{padding-top:58px;gap:50px}.collection-hero h1{font-size:clamp(36px,4.4vw,68px);letter-spacing:-.05em}.hero-case-button{border:0;cursor:pointer;position:relative;padding:0;width:100%;background:#f7f5ee;box-shadow:0 20px 70px #25281b16;transform:rotate(-2deg)}
.hero-case-button img{width:100%;display:block}.hero-case-button>span{position:absolute;bottom:18px;left:20px;background:#fff;padding:10px 16px;border-radius:30px;color:#232723;font-weight:700;box-shadow:0 4px 16px #0002}
.case-filters{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:30px 0 12px}.case-filters button,.player-header-actions button,.case-controls button{font:inherit;border:1px solid var(--line,#ddd);background:var(--field,#fbf9f3);border-radius:0;padding:10px 15px;cursor:pointer}.case-filters button[aria-pressed=true]{background:var(--ink,#17150f);color:#fbf9f3;border-color:var(--ink,#17150f)}.case-filters label{margin-left:auto;font-size:13px;display:flex;gap:12px;align-items:center}.case-filters select{padding:9px 12px;border:1px solid var(--ink,#17150f);border-radius:0;background:var(--field,#fbf9f3)}
.result-count{color:#6c7368;font-size:13px;margin:10px 0 22px}.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}.case-card{border:1px solid #dfe3d9;border-radius:15px;background:#fff;overflow:hidden;transition:transform .2s,box-shadow .2s}.case-card:hover{transform:translateY(-3px);box-shadow:0 14px 40px #28301d12}
.case-card-image{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#edece6;cursor:pointer}.case-card-image>img{width:100%;height:100%;object-fit:cover}.case-card-image .interior-thumb{position:absolute;width:31%;height:auto;right:12px;bottom:12px;border:2px solid #fff;border-radius:3px;box-shadow:0 3px 12px #0003}.case-card-image .watch{position:absolute;left:12px;bottom:12px;background:#fff;color:#20372b;border-radius:25px;padding:8px 12px;font-size:12px;font-weight:700}
.case-card-copy{padding:21px}.case-tag{font-size:12px;color:#6d745f;display:flex;justify-content:space-between}.case-card h3{font-size:21px;line-height:1.5;margin:12px 0}.case-card .skill-name{font-size:12px;color:#626b60;word-break:break-word}.case-card-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px;align-items:center;font-size:13px}.case-card-actions button{font:inherit;color:var(--blue,#2b47c8);background:none;border:0;padding:0;font-weight:700;cursor:pointer}
.compare-banner{display:flex;justify-content:space-between;gap:25px;align-items:center;background:#edf1e5;border:1px solid #d8dfcc;border-radius:13px;padding:30px;margin-top:38px}.compare-banner h3{font-size:23px;margin:10px 0}.compare-banner p:last-child{font-size:14px;color:#63705d}.compare-banner>div:last-child{display:flex;gap:12px;flex-shrink:0}.case-sample-note{font-size:12px;color:#6e7868;line-height:1.9;margin-top:22px}
.skill-collection{border-top:1px solid #dce1d2}.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.skill-item{background:#fff;border:1px solid #dfe3d9;border-radius:11px;padding:22px;min-width:0}.skill-item h3{font-size:18px;word-break:break-word;margin:10px 0}.skill-item .owner{font-size:12px;color:#76806d}.skill-item>p{font-size:13px;line-height:1.8;color:#5c6757}.skill-item .skill-state{font-size:11px;color:#417347;font-weight:700}.skill-item-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:17px;font-size:12px}.skill-item-actions button{font:inherit;border:0;background:#edf3e6;border-radius:5px;padding:6px 9px;cursor:pointer;color:#345b2a}.skill-item-actions a{padding:6px 0}
.skill-preview{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px;margin-bottom:16px}
#case-dialog{padding:0;border:1px solid #dedfd6;border-radius:18px;background:#fafaf6;max-width:min(1120px,calc(100vw - 32px));width:1120px;max-height:calc(100dvh - 26px);box-shadow:0 30px 100px #141e1555;overflow:auto;color:#212b22}
#case-dialog::backdrop{background:#18241bd9;backdrop-filter:blur(7px)}#case-dialog[open]{animation:float-in .22s ease-out}
.case-dialog-shell{padding:18px}.player-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:4px 4px 16px}.player-header h2{font-size:19px;line-height:1.45;margin:5px 0}.player-kicker{font-size:11px;color:#6d7967}.player-header-actions{display:flex;gap:8px;flex-shrink:0}.player-header-actions button{font-size:12px;padding:8px 10px}
.case-stage{aspect-ratio:16/9;width:100%;background:#151b15;position:relative;overflow:hidden;border-radius:6px}.case-stage>img{width:100%;height:100%;object-fit:contain}.case-stage>iframe{position:absolute;width:1280px;height:720px;left:0;top:0;border:0;transform:scale(var(--case-scale,1));transform-origin:top left}
.case-controls{display:flex;gap:8px;align-items:center;margin:12px 0}.case-controls button{font-size:12px;padding:8px 12px}.case-controls button:disabled{opacity:.35;cursor:default}.case-controls #case-counter{font-size:12px;margin-left:5px}.case-controls #case-notes{margin-left:auto}
.case-pages{display:flex;gap:8px;overflow:auto;padding:0 0 9px}.case-pages button{flex:0 0 116px;background:#fff;border:1px solid #dce0d5;border-radius:5px;padding:3px;text-align:left;cursor:pointer;font-family:inherit}.case-pages button[aria-current=true]{border:2px solid #376344;padding:2px}.case-pages img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.case-pages span{font-size:10px;display:block;padding:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#case-note{font-size:13px;line-height:1.9;background:var(--paper-deep,#e7e1d0);border-radius:0;padding:15px}.case-bottom{padding:7px 2px 0}.case-bottom>p{font-size:11px;color:#788071;margin:0 0 10px}.case-bottom>div{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.case-bottom .button{font-size:12px;padding:10px 14px}.case-bottom .text-link{font-size:12px}
#case-dialog.expanded{width:calc(100vw - 20px);max-width:none;max-height:calc(100dvh - 12px)}#case-dialog.expanded .case-stage{max-height:calc(100dvh - 300px);aspect-ratio:16/9;max-width:calc((100dvh - 300px)*16/9);margin:auto}
.case-detail{padding-top:40px;padding-bottom:70px}.detail-heading{margin:35px 0}.detail-heading h1{font-size:clamp(29px,4vw,50px);line-height:1.45}.detail-heading>p{font-size:14px;color:#6c7765;line-height:1.8;margin-top:16px}.detail-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:35px;align-items:start}.detail-cover{width:100%;border:1px solid #dce0d2;border-radius:10px}.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.detail-block{border-top:1px solid #dde2d3;padding:28px 0}.detail-block h2{font-size:23px;margin-bottom:18px}.detail-block p,.detail-block li{font-size:14px;line-height:1.9;color:#596451}.detail-block a{color:#37623d}.detail-block textarea{width:100%;min-height:260px;padding:18px;font:13px/1.9 'Noto Sans JP',sans-serif;border:1px solid #d5ddca;border-radius:8px;background:#fff;resize:vertical}.detail-block .copy-status{font-size:12px;margin-left:10px}.details-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px}
.detail-steps{padding-left:21px}.detail-data{white-space:pre-wrap;font:12px/1.8 monospace;padding:18px;background:#eff1e9;border-radius:8px;max-height:460px;overflow:auto}.case-empty{padding:45px;color:#67735d}
@keyframes float-in{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:900px){.case-grid,.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compare-banner{display:block}.compare-banner>div:last-child{margin-top:20px}.detail-layout{grid-template-columns:1fr}.collection-hero{padding-top:35px}}
@media(max-width:600px){.case-grid,.skill-grid{grid-template-columns:1fr}.case-filters label{margin-left:0;width:100%;margin-top:10px}.case-dialog-shell{padding:10px}.player-header{align-items:flex-start;gap:8px}.player-header h2{font-size:14px}.player-header-actions{gap:5px;flex-direction:column}.player-header-actions button{font-size:10px;padding:5px}.case-controls{gap:5px}.case-controls button{padding:7px 9px;font-size:11px}.case-controls #case-counter{margin-left:0}.case-pages button{flex-basis:86px}.case-bottom>div{gap:9px}.case-bottom .button{padding:9px;font-size:11px}.case-bottom .text-link{font-size:11px}#case-dialog.expanded .case-stage{max-height:none;max-width:none}.compare-banner{padding:22px}.compare-banner h3{font-size:21px}.collection-hero h1{font-size:36px}.case-hero-art{margin-top:20px}}
@media(prefers-reduced-motion:reduce){#case-dialog[open]{animation:none}.case-card,.hero-stage{transition:none}.case-card:hover{transform:none}}
.case-stage{width:min(100%,calc((100dvh - 310px)*16/9));margin-inline:auto}
.case-stage{width:min(100%,calc((100dvh - 390px)*16/9))}
.player-kicker{margin:0;line-height:1.5}.player-header h2{margin:3px 0 0}.player-header{padding-bottom:12px}
.case-pages button{width:116px;min-width:116px;max-width:116px;flex-basis:116px}.case-pages span{line-height:1.4}
#case-dialog.expanded .case-stage{width:min(100%,calc((100dvh - 230px)*16/9));max-height:none;max-width:none}
#case-dialog.expanded .case-pages,#case-dialog.expanded .case-bottom>p{display:none}
/* Original carousel instruction skills use square concept canvases. */
#case-dialog.square-preview .case-stage{aspect-ratio:1;width:min(100%,calc(100dvh - 390px))}
#case-dialog.square-preview .case-pages img{aspect-ratio:1;object-fit:contain}
#case-dialog.square-preview.expanded .case-stage{aspect-ratio:1;width:min(100%,calc(100dvh - 230px))}
.case-card-image.square-preview>img:not(.interior-thumb),.repo-image.square-preview>img{object-fit:contain}