.atelier-achievement { width:min(820px,calc(100vw - 40px)); scroll-behavior:smooth; }
.achievement-top { height:56px; }
.making-route { position:sticky; top:56px; z-index:2; display:flex; justify-content:center; gap:8px; padding:6px 10px 9px; background:#f8fbfff5; backdrop-filter:blur(10px); border-bottom:1px solid #d9e4ee; }
.making-route button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:72px; min-height:38px; border:0; background:none; color:#6c8299; font-size:12px; }
.making-route small { font:9px Georgia,serif; color:#aa829f; }
.making-route button[aria-current="step"] { color:#a04c85; background:#f3e8f2; border-radius:4px; }
.making-route-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:#e0eaf2; }
.making-route-progress i { display:block; width:100%; height:100%; background:#c186af; transform:scaleX(var(--making-progress,0)); transform-origin:left; }
.achievement-body { max-width:700px; margin:auto; padding:0 30px 40px; }
[data-making-stop] { scroll-margin-top:125px; }
.achievement-heading { padding-top:30px; padding-bottom:26px; border:0; }
.award-medallion { width:190px; height:210px; isolation:isolate; }
.award-orbit { top:3px; left:-5px; width:200px; height:200px; z-index:-1; }
.award-core { width:102px; height:160px; object-fit:contain; mix-blend-mode:multiply; }
.atelier-achievement :is(.award-core,.collected-potions img,#makingDraw .making-picture>img,.making-mini-lab img) { filter:url(#illustrationWhiteKey); mix-blend-mode:normal; background:transparent; }
.award-medallion>span { background:#f7fbff; padding:2px 8px; }
.award-corners img { width:80px; height:80px; }
.award-corners { top:70px; }
.award-ribbon { margin-top:0; }
.making-next { display:inline-flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:44px; padding:12px 0 4px; margin-top:14px; font-size:12px; line-height:1.8; border:0; border-bottom:1px dashed #bc94af; background:none; color:#9d5d89; }
.achievement-heading>.making-next { align-items:center; border:0; margin-top:12px; }
.achievement-heading>.making-next>span { display:block; font:22px Georgia,serif; }
.collected-potions { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:8px auto 50px; width:100%; border-block:1px dashed #bfcedf; padding:14px 0; }
.collected-potions>span:nth-child(n) { min-height:100px; padding:14px 4px 4px; background:none; border:0; border-right:1px dashed #cddbe7; box-shadow:none; border-radius:0; font-size:10px; }
.collected-potions>span:last-child { border:0; }
.collected-potions>span::before { top:0; left:8px; font-size:8px; }
.collected-potions>span::after { top:0; right:8px; font-size:9px; }
.collected-potions img { width:43px; height:60px; }
.making-process h3 { font-size:23px; line-height:1.7; max-width:440px; margin:0 auto 25px; }
.making-steps { display:block; }
.making-steps figure { display:flex; flex-direction:column; gap:0; border:0; padding:28px 0 40px; margin:0; }
.making-steps figure+figure { border-top:1px dashed #bdcfe0; }
.making-picture { width:100%; height:250px; min-height:0; border:0; margin:0 0 28px; padding:20px; }
.making-picture>img { width:340px; height:100%; max-width:100%; object-fit:contain; }
.making-steps figcaption { padding:0 32px; }
.making-steps figcaption>span { font-size:10px; }
.making-steps h4 { font:28px/1.65 "Songti SC",serif; margin:13px 0 18px; }
.making-steps p { font-size:14px; line-height:2; }
.making-steps .making-note { font-size:11px; color:#768b9f; margin-top:14px; }
.making-code { position:relative; height:265px; border:1px solid #c7d9e5; border-radius:5px; background:#edf5fb; padding-top:32px; gap:9px; }
.making-code-bar { position:absolute; top:0; left:0; right:0; height:28px; border-bottom:1px dashed #c2d1df; text-align:left; padding:7px 14px; font:9px Georgia,serif; }
.making-mini-lab { display:flex; align-items:center; justify-content:center; gap:16px; height:125px; }
.making-mini-lab img { width:70px; height:115px; object-fit:contain; mix-blend-mode:multiply; }
.making-mini-lab>span { font-size:20px; color:#ae84a0; }
.making-code>b { font-size:32px; }
.making-devices { position:relative; height:300px; padding:20px 45px 20px 0; }
.making-devices>.making-desktop-shot { width:92%; height:auto; max-height:240px; border:1px solid #b2c8d9; border-radius:5px; box-shadow:0 12px 22px #5a768e20; }
.making-devices>.making-mobile-shot { position:absolute; width:90px; height:190px; right:5px; bottom:0; border:3px solid #dbe6f0; border-radius:9px; object-fit:cover; box-shadow:0 6px 15px #5a768e20; }
.making-tech { margin:0; padding:30px 32px 28px; border:1px dashed #b2c9d9; border-radius:5px; background:#edf5fa; }
.making-tech dl { grid-template-columns:1fr; gap:24px; }
.making-tech dt { font-size:14px; }
.making-tech dd { font-size:13px; line-height:1.9; }
.making-tech h3 { font-size:23px; }
.making-credit { max-width:360px; margin:30px auto 16px; line-height:2; }
@media(max-width:650px) {
 .atelier-achievement { width:calc(100vw - 24px); }
 .achievement-body { padding:0 16px 28px; }
 .making-route { gap:0; padding-inline:3px; }
 .making-route button { flex:1; min-width:0; gap:4px; font-size:11px; }
 .award-medallion { width:170px; height:190px; }
 .award-orbit { width:180px; height:180px; }
 .award-core { height:142px; width:90px; }
 .award-corners img { width:48px; height:48px; }
 .making-steps figure { display:flex; gap:0; padding:22px 0 35px; }
 .making-steps figcaption { padding:0 8px; }
 .making-steps h4 { font-size:24px; }
 .making-steps p { font-size:13px; }
 .making-picture { height:190px; margin-bottom:22px; padding:5px; }
 .making-picture>img { max-width:100%; }
 .making-code { height:225px; padding-top:35px; }
 .making-mini-lab { gap:8px; height:100px; }
 .making-mini-lab img { width:50px; height:90px; }
 .making-devices { height:200px; padding-right:30px; }
 .making-devices>.making-mobile-shot { width:65px; height:138px; }
 .making-tech { padding:24px 16px; }
 .making-tech h3,.making-process h3 { font-size:20px; }
 .collected-potions>span:nth-child(n) { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .atelier-achievement { scroll-behavior:auto; } }
