:root{--paper:#f6f0f8;--ink:#222131;--purple:#6241a2;--lilac:#e5dbfb;--orange:#ff965a;--dark:#2b1c3d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:radial-gradient(ellipse at top,#fffaf4,var(--paper) 60%);color:var(--ink);font:17px/1.6 "Segoe UI",system-ui,sans-serif}a{color:var(--purple)}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}h1{font-size:clamp(3rem,7.6vw,6.5rem);line-height:.96;letter-spacing:-.065em}h2{font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.045em}h3{font-size:1rem}header{position:sticky;top:0;z-index:3;background:#faf4f9ef;border-bottom:1px solid #e9deee;backdrop-filter:blur(12px)}.wrap{width:min(1100px,calc(100% - 36px));margin:auto}.bar{height:64px;display:flex;justify-content:space-between;align-items:center;gap:16px}.logo{font-weight:850;font-size:26px;letter-spacing:-.06em;text-decoration:none;color:var(--ink)}.logo b{color:#dc7249}.bar nav{display:flex;align-items:center;gap:18px;font-size:.85rem}.bar nav a{font-weight:700;text-decoration:none}.hero{display:grid;grid-template-columns:1.14fr 1fr;gap:40px;align-items:center;padding:76px 0 42px}.tag{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:800;color:var(--purple);margin-bottom:12px}.hero h1 span{color:var(--purple)}.hero p{margin:20px 0;max-width:45ch}.hero figure{margin:0;position:relative}.shot{border-radius:24px;box-shadow:0 18px 46px #45236918;border:1px solid #e6d9ec;background:#f8f3fa;width:100%}.buttons{display:flex;flex-wrap:wrap;gap:9px}.btn{display:inline-block;background:var(--purple);color:#fff;border:1px solid transparent;border-radius:12px;text-decoration:none;padding:10px 15px;font-size:.92rem;font-weight:750}.btn.line{background:#fff;color:var(--purple);border-color:#e0d2ec}.btn.orange{background:var(--orange);color:#311c36}.tip{display:flex;align-items:center;gap:13px;background:#fff7ec;border:1px solid #f4dfcf;padding:12px 14px;border-radius:16px;font-size:.92rem;line-height:1.45;margin:20px 0}.tip img{width:45px;flex:none;image-rendering:pixelated}.tip a{font-weight:750}.toc{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 44px}.toc a{background:#fff;border:1px solid #e6d9ec;border-radius:999px;padding:6px 13px;text-decoration:none;font-weight:700;font-size:.88rem}.section{margin:0 0 20px;border:1px solid #eadff0;background:#fff9;border-radius:25px;padding:clamp(18px,4vw,34px);box-shadow:0 14px 38px #422a5d0b}.section p{margin-top:12px;max-width:70ch}.grid{display:grid;grid-template-columns:1.35fr .9fr;gap:26px;margin-top:24px;align-items:start}.grid.nopic{grid-template-columns:1fr}.codebox{margin-bottom:12px;background:#292037;color:#faf2ff;border-radius:14px;overflow:hidden}.codehead{padding:9px 12px;background:#38284b;display:flex;align-items:center;gap:8px;justify-content:space-between}.codehead h3{line-height:1.3}.codehead button{border:1px solid #a990c6;background:#493761;color:#fff;border-radius:8px;padding:5px 10px;cursor:pointer;font-weight:700;flex:none}pre{padding:12px;margin:0;overflow:auto;font-size:13px;line-height:1.6;tab-size:2}code{font-family:Consolas,ui-monospace,monospace}.links{display:flex;flex-wrap:wrap;gap:8px 15px;margin-top:16px;font-size:.9rem}.links a{font-weight:700}.section figcaption{font-size:.75rem;color:#625572;margin-top:7px}.section figure{margin:0}.done{margin-top:36px;border-radius:25px;padding:clamp(20px,6vw,50px);background:radial-gradient(ellipse at bottom right,#704763,var(--dark) 75%);color:#fff;position:relative}.done h2{max-width:17ch}.done p{margin:12px 0 18px;max-width:53ch}.done img{width:60px;margin-bottom:16px}.done .tag{color:#ffb688}footer{padding:24px 0 35px;display:flex;gap:14px;justify-content:space-between;font-size:.88rem}.guide-friend{position:fixed;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:8px;background:#fff7ed;border:1px solid #efd5c0;padding:8px 12px;border-radius:14px;box-shadow:0 4px 18px #44265025;text-decoration:none;font-size:.83rem;color:var(--ink);font-weight:700}.guide-friend img{width:28px}.guide-friend:hover img{transform:translateY(-3px)}:focus-visible{outline:3px solid #9251ca;outline-offset:3px}@media(max-width:760px){.hero,.grid{grid-template-columns:1fr;gap:17px}.hero{padding-top:42px}.hero .shot{max-height:360px;object-fit:contain}.bar nav{gap:9px}.bar nav a:first-child{display:none}.toc{padding-bottom:20px}.guide-friend{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@keyframes pet-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.tip img,.done img,.guide-friend img{animation:pet-bob 2.9s ease-in-out infinite;will-change:transform}
.section:nth-of-type(even) .tip img{animation-delay:-1.05s}
@media(prefers-reduced-motion:reduce){.tip img,.done img,.guide-friend img{animation:none;will-change:auto}}

.hero,.grid{min-width:0}
.hero>*,.grid>*{min-width:0}
.grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr)}
.grid.nopic{grid-template-columns:minmax(0,1fr)}
@media(max-width:760px){.hero,.grid{grid-template-columns:minmax(0,1fr)}}