.page{min-height:100dvh;display:flex;flex-direction:column}
.site-head{padding:25px 0}.site-head .wrap,.site-foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.head-label{font-size:13px;color:var(--ink-mute)}
.home-main{width:100%;flex:1}
.practice-intro{padding:28px 0 30px}
.practice-intro h1{font-size:44px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.practice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pcard{display:flex;flex-direction:column;min-width:0;background:#fff;border:2px solid transparent;border-radius:26px;padding:20px;box-shadow:var(--sh-1);transition:transform .18s,border-color .18s,box-shadow .18s}.pcard:hover{transform:translateY(-4px);border-color:var(--violet);box-shadow:var(--sh-2)}.pcard:active{transform:translateY(-1px)}
.card-art{height:142px;border-radius:16px;position:relative;overflow:hidden;margin-bottom:21px;display:flex;align-items:center;justify-content:center}.scratch .card-art{background:var(--ek-green-mint)}.python .card-art{background:var(--violet-soft)}.vibe .card-art{background:var(--ink)}
.art-blocks{transform:rotate(-6deg);display:grid;gap:3px;font:700 11px var(--f-display)}.art-blocks span{padding:8px 18px;border-radius:7px;background:var(--violet);color:var(--ink);position:relative;box-shadow:3px 3px 0 #17171c12}.art-blocks span:nth-child(2){background:#fff;margin-left:14px}.art-blocks span:nth-child(3){background:var(--mint);margin-left:14px}.art-cursor{position:absolute;right:30px;bottom:25px;width:35px;height:40px;transform:rotate(-12deg)}
.art-code{background:#fff;border-radius:12px;padding:14px 20px;transform:rotate(4deg);box-shadow:7px 8px 0 #8c7ff633;font:500 12px/1.8 var(--f-mono)}.art-code .code-key{color:var(--violet-deep)}.art-code .code-comment{color:#6b6977}
.art-prompt{position:relative;width:80%;border:1px solid #ffffff30;background:#ffffff0d;border-radius:12px;padding:16px;font:500 12px/1.6 var(--f-ui);color:white;transform:rotate(-3deg)}.art-prompt span{display:block;color:var(--mint);font:600 10px var(--f-mono);margin-bottom:8px}.art-prompt b{display:grid;place-items:center;position:absolute;right:12px;bottom:-14px;width:33px;height:33px;border-radius:10px;background:var(--mint);color:var(--ink);font-size:19px}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-title h2{font-size:25px;letter-spacing:-.02em}.card-title .badge-age{font:600 11px var(--f-ui);padding:5px 9px;background:var(--paper-2);box-shadow:none}
.pcard p{font-size:13px;line-height:1.65;color:var(--ink-soft);margin:12px 0 18px;flex:1}.tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{font-size:10px;color:var(--ink-mute);padding:4px 8px;border:1px solid var(--line);border-radius:7px}.go{display:flex;justify-content:space-between;align-items:center;font:700 14px var(--f-display);margin-top:21px;padding-top:16px;border-top:1px solid var(--line)}.go span{display:grid;place-items:center;background:var(--violet-soft);border-radius:9px;width:29px;height:29px;font-size:18px}.pcard:hover .go span{background:var(--mint)}
.site-foot{padding:27px 0;color:var(--ink-mute);font-size:11px}.site-foot p{margin:0}
@media(min-width:1600px){.card-art{height:165px}}
@media(max-width:900px){.practice-grid{gap:12px}.pcard{padding:15px}.card-title{align-items:flex-start;flex-direction:column}.card-title h2{font-size:24px}.art-code{font-size:10px;padding:12px}}
@media(max-width:640px){.site-head{padding:20px 0}.practice-intro{padding:20px 0 24px}.practice-intro h1{font-size:34px}.practice-grid{grid-template-columns:1fr;gap:16px}.pcard{padding:18px}.card-title{flex-direction:row;align-items:center}.card-art{height:138px}.pcard p{font-size:14px}.art-code{font-size:12px;padding:14px 20px}.site-foot .wrap{align-items:flex-start;flex-direction:column;gap:6px}.site-foot{padding:24px 0}}