* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
.ap-site { --paper:#fafaf9; --ink:#20211f; --muted:#777971; --line:#e6e7e1; --accent:#335bc7; --tag:#efefeb; background:var(--paper); color:var(--ink); font-family:Arial,"PingFang SC",sans-serif; min-height:100svh; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.ap-header { height:76px; padding:0 32px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; position:sticky; top:0; background:var(--paper); z-index:10; border-bottom:1px solid transparent; }
.ap-brand { display:flex; align-items:center; gap:12px; font-size:17px; letter-spacing:-.6px; font-weight:700; }
.ap-brand small { font-size:11px; padding:7px 8px; background:var(--tag); font-weight:400; letter-spacing:0; }
.ap-nav { display:flex; gap:30px; font-size:13px; }
.ap-nav a { color:var(--muted); transition:color .15s; }
.ap-nav a:hover, .ap-nav a[aria-current=page] { color:var(--ink); }
.ap-nav a[aria-current=page] { text-decoration:underline; text-underline-offset:6px; }
.ap-social { justify-self:end; font-size:12px; border-bottom:1px solid var(--ink); padding:7px 0; }
.ap-hero { height:calc(100svh - 76px); min-height:600px; max-height:950px; position:relative; margin:0 32px; }
.ap-scene { width:470px; height:430px; position:absolute; left:50%; top:43%; transform:translate(-50%,-50%); }
.ap-person { position:absolute; height:390px; width:260px; object-fit:contain; left:175px; bottom:0; }
.ap-floor { position:absolute; bottom:2px; left:40px; width:380px; height:18px; border-radius:50%; background:#28261c14; filter:blur(12px); }
.golden-trigger { position:absolute; left:2px; bottom:6px; width:210px; height:210px; padding:25px; display:grid; place-items:center; border:0; background:transparent; border-radius:50%; cursor:pointer; touch-action:none; outline-offset:-2px; }
.golden-mascot { position:relative; display:block; width:160px; height:160px; pointer-events:none; }
.golden-idle, .golden-canvas { position:absolute; inset:0; width:160px; height:160px; object-fit:contain; }
.golden-canvas { opacity:0; }
.golden-mascot[data-drawing=true] .golden-canvas { opacity:1; }
.golden-mascot[data-drawing=true] .golden-idle { opacity:0; }
.ap-intro { position:absolute; left:0; bottom:45px; }
.ap-intro h1 { font-size:clamp(40px,4vw,64px); letter-spacing:-3px; font-weight:600; line-height:1.02; margin:0 0 17px; }
.ap-intro p { font-size:14px; line-height:1.8; margin:0; color:var(--muted); }
.ap-intro .ap-visitor { margin-top:18px; font-size:12px; min-height:22px; font-variant-numeric:tabular-nums; }
.ap-work { padding:90px 32px 75px; scroll-margin-top:76px; }
.ap-section-title { text-align:center; font-size:clamp(26px,3vw,40px); letter-spacing:-1.8px; font-weight:500; color:#b4b7b0; margin:0 0 80px; }
.ap-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px 18px; }
.ap-art { display:block; aspect-ratio:55/36; border-radius:5px; overflow:hidden; transition:transform .3s; }
.ap-art img { display:block; width:100%; height:100%; object-fit:cover; }
.ap-project:hover .ap-art { transform:translateY(-4px); }
.ap-project-info { margin-top:16px; }
.ap-project-info h3 { margin:0 0 8px; font-size:23px; letter-spacing:-.7px; font-weight:500; }
.ap-project-info p { margin:0; line-height:1.8; font-size:12px; color:var(--muted); }
.ap-link { font-size:12px; border-bottom:1px solid var(--ink); padding-bottom:5px; }
.ap-project-visit { display:inline-block; margin-top:16px; }
.ap-footer { padding:80px 32px 28px; border-top:1px solid var(--line); scroll-margin-top:76px; }
.ap-footer h2 { font-size:clamp(30px,4vw,54px); font-weight:500; letter-spacing:-1.7px; margin:0 0 24px; }
.ap-footer p { color:var(--muted); font-size:14px; line-height:1.9; }
.ap-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:24px; margin-top:90px; font-size:11px; color:var(--muted); }
.ap-blog { max-width:1000px; margin:auto; padding:100px 32px 140px; }
.ap-kicker { font-size:11px; color:var(--muted); letter-spacing:2px; }
.ap-blog h1 { font-size:clamp(64px,10vw,110px); font-weight:500; letter-spacing:-6px; margin:20px 0; }
.ap-blog-intro { line-height:1.9; color:var(--muted); font-size:15px; margin-bottom:65px; }
.ap-blog-notice { font-size:12px; background:var(--tag); padding:14px 16px; margin-bottom:10px; color:var(--muted); }
.ap-post { display:grid; grid-template-columns:100px 1fr; gap:20px; padding:34px 0; border-bottom:1px solid var(--line); }
.ap-post small { font-size:11px; color:var(--muted); padding-top:9px; }
.ap-post h2 { font-size:24px; font-weight:500; letter-spacing:-.6px; margin:0 0 12px; }
.ap-post p { font-size:13px; color:var(--muted); margin:0; line-height:1.8; }
.ap-blog-back { margin-top:50px; }
@media(max-width:700px) {
 .ap-header { padding:0 20px; grid-template-columns:1fr auto; height:96px; gap:10px; }
 .ap-brand { font-size:15px; } .ap-brand small { display:none; }
 .ap-nav { grid-row:2; grid-column:1/-1; justify-content:space-between; gap:10px; padding-bottom:15px; }
 .ap-social { grid-column:2; grid-row:1; }
 .ap-hero { margin:0 20px; height:670px; min-height:0; max-height:none; }
 .ap-scene { transform:translate(-50%,-50%) scale(.76); top:37%; }
 .ap-intro { bottom:115px; } .ap-intro h1 { letter-spacing:-2px; font-size:45px; }
 .ap-work { padding:60px 20px; } .ap-section-title { margin-bottom:45px; font-size:30px; }
 .ap-grid { grid-template-columns:1fr; gap:48px; }
 .ap-footer { padding:60px 20px 25px; } .ap-bottom { margin-top:60px; }
 .ap-blog { padding:70px 20px; } .ap-blog h1 { letter-spacing:-4px; }
 .ap-post { grid-template-columns:1fr; gap:12px; } .ap-post h2 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .ap-art,.ap-nav a { transition:none; } }