.kr-howto-page .kr-nav-group:first-child .kr-nav-title{color:#fff}
.kr-howto-page .kr-nav-group:first-child a[aria-current="page"]{color:#fff;font-weight:700}
.kr-howto-page .kr-page-body{grid-template-rows:auto;min-height:800px}
.howto-main{grid-column:2;grid-row:1/3;min-width:0}
.howto-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:2px 0 15px;border-bottom:2px solid #444}
.howto-eyebrow{display:block;margin-bottom:4px;color:#2a72b8;font-size:10px;font-weight:800;letter-spacing:.12em}
.howto-heading h1{margin:0;color:#222;font-size:25px;line-height:1.2}
.howto-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:#999;font-size:10px;white-space:nowrap}
.howto-breadcrumb a:hover{color:#176fc6;text-decoration:underline}
.howto-breadcrumb strong{color:#555;font-weight:600}
.howto-intro{margin:18px 0 25px;padding:14px 17px;border-left:3px solid #1978cf;background:#f5f8fc;color:#536174;font-size:12px;line-height:1.8}
.howto-list{border-top:1px solid #dedede}
.note-guide{display:grid;grid-template-columns:minmax(0,1fr) 248px;align-items:center;gap:20px;min-height:188px;padding:18px 5px 18px 0;border-bottom:1px solid #e4e7ec}
.note-copy{align-self:center;min-width:0}
.note-index{display:block;color:#4485c0;font:700 10px/1.4 Arial,sans-serif;letter-spacing:.1em}
.note-copy h2{margin:6px 0 11px;color:#1d2530;font-size:18px;line-height:1.3}
.note-copy p{max-width:450px;margin:0;color:#5c6775;font-size:12px;line-height:1.85}
.note-demo{position:relative;width:248px;height:148px;overflow:hidden;border:1px solid #263e61;border-radius:3px;background:radial-gradient(circle at 50% 48%,#285280 0,#152b4c 49%,#0b1830 100%);box-shadow:inset 0 0 20px #0008}
.note-demo::before,.note-demo::after{content:"";position:absolute;left:0;right:0;height:1px;background:#88b3ed26}
.note-demo::before{top:49px}.note-demo::after{top:99px}
.demo-track{position:absolute;left:0;right:0;top:73px;height:1px;background:#96bce748}
.demo-timeline{position:absolute;z-index:5;top:8px;bottom:8px;left:105px;width:2px;background:#cceeffbb;box-shadow:0 0 9px #72d8ff,0 0 21px #4aa9ed}
.note-sprite{position:absolute;z-index:3;top:29px;left:31px;display:block;width:88px;height:88px;background-repeat:no-repeat;background-position:left top;background-size:auto 100%;filter:drop-shadow(0 5px 8px #0009)}
.note-sprite.basic{background-image:url('/assets/howtoplay/Note_Basic.png')}
.note-sprite.drag{background-image:url('/assets/howtoplay/longnote.png')}
.note-sprite.hold{background-image:url('/assets/howtoplay/longnotehold.png')}
.note-sprite.chain{background-image:url('/assets/howtoplay/notepressstart.png')}
.note-sprite.repeat{background-image:url('/assets/howtoplay/noterepeat.png')}
.demo-trail{position:absolute;z-index:2;top:69px;left:100px;width:124px;height:10px;border-radius:999px}
.demo-trail.green{background:linear-gradient(90deg,#c8f447,#52b90c55);box-shadow:0 0 14px #b5f4418c}
.demo-trail.blue{background:linear-gradient(90deg,#3cddff,#2666e777);box-shadow:0 0 14px #53b4ff8c}
.demo-trail.violet{background:repeating-linear-gradient(90deg,#eb74fb 0 12px,#8744d0 12px 18px,transparent 18px 27px);box-shadow:0 0 12px #db66fa8c}
.demo-chain-line{position:absolute;z-index:1;top:72px;left:102px;width:132px;height:3px;background:#ffd552ad;transform:rotate(-14deg);transform-origin:left center;box-shadow:0 0 8px #ffcc4c}
.note-sprite.chain-point{z-index:2;width:51px;height:51px;background-image:url('/assets/howtoplay/notepressnote.png')}
.chain-point.one{top:52px;left:145px}.chain-point.two{top:33px;left:194px}
.kr-howto-page .kr-rank-sidebar #home-crew-guest{margin-top:27px}
.kr-howto-page .kr-rank-sidebar #home-crew-guest img{margin:0}
@media(max-width:780px){.kr-howto-page .kr-page-body{display:flex;flex-direction:column;padding:18px}.kr-howto-page .kr-rank-sidebar{display:grid;order:1}.howto-main{width:100%;order:0}}
@media(max-width:630px){.howto-heading{align-items:start;flex-direction:column;gap:8px}.note-guide{grid-template-columns:1fr;gap:12px;padding:20px 0}.note-demo{width:100%;max-width:320px}.note-copy p{max-width:none}}