:root{color-scheme:light;--ink:#103868;--text:#24364b;--muted:#637287;--line:#dce3eb;--soft:#f5f8fb;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:16px}
*{box-sizing:border-box}
html{height:100%;overflow:hidden}
body{margin:0;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-columns:clamp(230px,26vw,350px) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:clamp(24px,3vw,44px);background:#fff;color:var(--text)}
a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #416ba3;outline-offset:4px}
.site-header{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:24px}
.brand{display:inline-block;flex:none;max-width:100%;padding:6px 0}.brand-logo{display:block;width:clamp(170px,18vw,220px);max-width:100%;height:auto;overflow:visible}
.mascot{margin:0;width:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.seated-mascot{width:min(100%,calc((100dvh - 180px)*.94),330px);aspect-ratio:660/695;flex:none;background:url('/assets/kanko-seated-still.png') center/contain no-repeat}.seated-mascot.ready{background:none}.seated-mascot canvas{display:block;width:100%;height:auto}
.motion-toggle{border:0;border-bottom:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;padding:8px;min-height:44px;flex:none;font-size:.875rem}.motion-toggle:hover{color:var(--ink);border-bottom-color:var(--ink)}
main{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px}
.samples{min-width:0;min-height:0;display:flex;flex-direction:column}
.heading-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none}.eyebrow{font:400 .875rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.035em;color:var(--muted);margin:0}.count{font:400 .875rem ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
h1{font-size:clamp(1.8rem,3.5vw,2.5rem);line-height:1.5;letter-spacing:.065em;color:var(--ink);font-weight:650;margin:12px 0 8px;flex:none}.intro{font-size:1rem;line-height:1.8;color:var(--muted);margin:0 0 24px;flex:none}
.sample-list{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink);flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#aab8c8 transparent;scroll-padding-block:8px;-webkit-overflow-scrolling:touch}.sample-list:focus-visible{outline:2px solid #416ba3;outline-offset:-2px}.sample-list li{border-bottom:1px solid var(--line)}
.sample-link{text-decoration:none;display:grid;grid-template-columns:26px minmax(0,1fr) 28px;gap:16px;align-items:center;padding:24px 12px;transition:background .2s,color .2s}.sample-link:focus-visible{outline-offset:-3px}.sample-link:hover{background:var(--soft)}.sample-number{font:.875rem ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);align-self:start;padding-top:7px}.sample-title{display:block;font-size:1.25rem;color:var(--ink);font-weight:600;line-height:1.6;overflow-wrap:anywhere}.sample-description{display:block;font-size:.875rem;color:var(--muted);line-height:1.8;margin-top:6px}.sample-arrow{font-size:1.5rem;color:var(--ink);transition:transform .2s}.sample-link:hover .sample-arrow{transform:translate(3px,-3px)}
footer{display:flex;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.6;color:var(--muted)}
@media(max-width:700px){
body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:18px;padding:16px 20px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
.site-header{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}.brand{min-width:0}.brand-logo{width:174px}.mascot{width:112px;flex:none;gap:0}.seated-mascot{width:96px}.motion-toggle{font-size:.875rem;padding:4px 0;min-height:44px;white-space:nowrap}
main{gap:10px}.heading-row{gap:10px}.eyebrow{font-size:.8125rem}h1{font-size:1.75rem;margin:6px 0 4px}.intro{font-size:.9375rem;margin-bottom:16px;line-height:1.6}.sample-link{grid-template-columns:22px minmax(0,1fr) 22px;gap:10px;padding:20px 8px}.sample-title{font-size:1.0625rem}.sample-number{padding-top:5px}footer{font-size:.75rem;padding-top:10px;gap:8px}
}
@media(max-width:700px) and (max-height:600px){body{gap:10px;padding-top:8px;padding-bottom:8px}.seated-mascot{width:60px}.mascot{flex-direction:row;width:auto;gap:8px}.motion-toggle{white-space:normal;max-width:5em;font-size:.8125rem}.brand-logo{width:148px}.intro{margin-bottom:10px}h1{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.sample-link,.sample-arrow{transition:none}.sample-link:hover .sample-arrow{transform:none}}