@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Tangerine:wght@400;700&display=swap";:root{--guide-script: "Tangerine", "Segoe Script", cursive;--guide-script-weight: 700;--guide-display: "Cormorant Garamond", Georgia, serif;--guide-title-size: 64px;--guide-title-top: 16px;--guide-title-color: #14142b}.guide-title{position:absolute;top:var(--guide-title-top);left:0;right:0;text-align:center;font-family:var(--guide-script);font-style:normal;font-weight:var(--guide-script-weight, 400);font-size:var(--guide-title-size);line-height:1;color:var(--guide-title-color);white-space:nowrap}.guide-title.flow{position:static;margin:-.3in 0 .4in}.guide-page .position-glyph{filter:none!important}.guide-layout{display:flex;min-height:100vh;padding-top:64px;background:#05070d;color:#dbdee5;font-family:Inter,system-ui,sans-serif}.guide-sidebar{position:fixed;top:64px;left:0;width:13.75rem;height:calc(100vh - 64px);overflow-y:auto;overflow-x:clip;background:#080b1499;border-right:1px solid oklch(.3 .04 270 / .3);backdrop-filter:blur(24px);padding:1.5rem 0;z-index:10}.guide-content{flex:1;margin-left:13.75rem;display:grid;grid-template-columns:[full-start] minmax(1.5rem,1fr) [breakout-start] minmax(0,6rem) [prose-start] min(90ch,100%) [prose-end] minmax(0,6rem) [breakout-end] minmax(1.5rem,1fr) [full-end];padding-bottom:6rem;position:relative}.guide-content>*{grid-column:prose}.guide-footer-bleed{background:#05070d;display:flow-root}@media(min-width:769px){.guide-content>.guide-page-route{grid-column:full}}.guide-content h1{font-family:Inter,system-ui,sans-serif;font-size:clamp(2.4rem,1.8rem + 2vw,4.2rem);font-weight:750;font-variation-settings:"opsz" 32;letter-spacing:-.04em;line-height:1.05;color:#eceef5;margin:0;padding:3rem 0 2rem;text-align:center;grid-column:full}.guide-content>h1:first-of-type{font-family:var(--guide-script, "Cormorant Garamond", Georgia, serif);font-weight:var(--guide-script-weight, 700);font-variation-settings:normal;letter-spacing:0;line-height:.95;font-size:clamp(3rem,2rem + 5vw,4.6rem);padding:2rem 0 1.5rem}.guide-content h2{font-family:Inter,system-ui,sans-serif;font-size:clamp(1.3rem,1rem + .8vw,1.75rem);font-weight:650;font-variation-settings:"opsz" 24;letter-spacing:-.015em;margin:0 0 1rem;padding-bottom:0;border-bottom:none;color:#d2d7e5}.guide-content h3{font-size:clamp(1.05rem,.95rem + .3vw,1.25rem);font-weight:600;font-variation-settings:"opsz" 20;margin:2rem 0 .75rem;color:#b3bdd8}.guide-content p{font-size:clamp(.95rem,.9rem + .2vw,1.1rem);font-variation-settings:"opsz" 16;line-height:1.72;margin:0 0 1.25rem;color:#a2a4ab;font-weight:370}.guide-content p strong{color:#b0c2f9;font-weight:600}.guide-content ul,.guide-content ol{color:#a2a4ab;font-size:clamp(.95rem,.9rem + .2vw,1.1rem);line-height:1.72;font-weight:370;margin:0 0 1.25rem;padding-left:1.5rem}.guide-content li{margin-bottom:.5rem}.guide-content li strong{color:#b0c2f9;font-weight:600}.type-dual-shift{color:oklch(.72 .15 220)}.type-shift{color:#7f82e8}.type-cross-shift{color:#23ba7d}.type-dash{color:#e78b30}.type-dual-dash{color:oklch(.7 .15 190)}.type-static{color:#7b808d}.hand-blue{color:#1c69e3}.hand-red{color:#de3b3d}.guide-section{grid-column:full;display:grid;grid-template-columns:subgrid;margin-bottom:2rem;padding:2rem 0;background:#0a0d1566;border:1px solid oklch(.3 .04 270 / .1);border-radius:20px;backdrop-filter:blur(12px);box-shadow:0 8px 32px #00000240,inset 0 1px #3f475e0f}.guide-section>*{grid-column:prose;padding:0 2rem}.guide-section>h2,.guide-section>h3{text-align:center}.guide-section>h2+h3{margin-top:.35rem}.guide-section>h2{margin-bottom:.35rem}@supports (animation-timeline: view()){.guide-section{animation:guide-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 30%}@keyframes guide-reveal{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}}.guide-diagram{display:flex;flex-direction:column;align-items:center;margin:1.5rem 0}.guide-diagram img{max-width:20rem;width:100%;height:auto;border-radius:8px;background:#07090f99;border:1px solid oklch(.3 .04 270 / .12);padding:1rem}.guide-diagram figcaption{font-size:.85rem;color:#5f636f;margin-top:.75rem;text-align:center}.guide-pictograph-grid{display:grid;gap:.75rem;margin:1.5rem 0}.guide-pictograph-grid .column-headers{display:contents}.guide-pictograph-grid .column-header{font-weight:600;font-size:.9rem;text-align:center;color:#68718a;padding-bottom:.25rem}.guide-pictograph-grid .row-label{display:flex;flex-direction:column;justify-content:center;font-weight:600;font-size:.9rem;color:#b3bdd8;padding-right:.75rem}.guide-pictograph-grid .row-sublabel{font-weight:400;font-size:.8rem;color:#5f636f;display:block}.guide-pictograph{display:flex;flex-direction:column;align-items:center;gap:.25rem}.guide-pictograph .pictograph-wrapper{border-radius:10px;overflow:hidden;background:#07090f80;transition:border-color .2s ease,box-shadow .2s ease}.guide-pictograph.bordered .pictograph-wrapper{border:1px solid oklch(.3 .04 270 / .15)}.guide-pictograph.bordered .pictograph-wrapper:hover{border-color:#435ab859;box-shadow:0 0 24px #364ba71a}.guide-pictograph .pictograph-label{font-size:.85rem;font-weight:600;color:#68718a;text-align:center}.guide-pictograph.size-sm .pictograph-wrapper{width:7.5rem;height:7.5rem}.guide-pictograph.size-md .pictograph-wrapper{width:11.25rem;height:11.25rem}.guide-pictograph.size-lg .pictograph-wrapper{width:17.5rem;height:17.5rem}.guide-sequence-player{margin:1.5rem 0;padding:1rem;background:#0a0d1580;border:1px solid oklch(.3 .04 270 / .15);border-radius:12px}.guide-sequence-player .player-label{font-weight:600;font-size:.95rem;margin-bottom:.75rem;color:#b3bdd8}.guide-sequence-player .beat-strip{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem}.guide-sequence-player .beat-cell{flex-shrink:0;cursor:pointer;border-radius:6px;transition:box-shadow .15s ease}.guide-sequence-player .beat-cell.active{box-shadow:0 0 0 3px #6684fb}.guide-sequence-player .beat-cell.start-position{opacity:.7}.guide-sequence-player .controls{display:flex;align-items:center;gap:.75rem;margin-top:.75rem}.guide-sequence-player .play-btn{width:2.25rem;height:2.25rem;border-radius:50%;border:2px solid oklch(.6 .04 270);background:none;color:#b3bdd8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.guide-sequence-player .play-btn:hover{background:#12161f66}.guide-sequence-player .beat-dots{display:flex;gap:.25rem}.guide-sequence-player .beat-dot{width:.5rem;height:.5rem;border-radius:50%;background:#2a2d38;cursor:pointer;border:none;padding:0}.guide-sequence-player .beat-dot.active{background:#6684fb}.guide-sequence-player .speed-toggle{font-size:.8rem;color:#5f636f;cursor:pointer;border:1px solid oklch(.3 .04 270 / .3);border-radius:6px;padding:2px 8px;background:none}.guide-nav{padding:0 .75rem}.guide-nav .nav-title{font-weight:700;font-size:.95rem;padding:.5rem .75rem;margin-bottom:1.5rem;color:#869bdd;display:flex;align-items:center;gap:8px}.guide-nav .nav-title a{color:#869bdd;text-decoration:none}.guide-nav .chapter-group{margin-bottom:.5rem}.guide-nav .chapter-title{display:flex;align-items:center;gap:10px;width:100%;font-weight:500;font-size:.85rem;padding:.55rem .75rem;color:#6d717e;background:none;border:none;border-radius:10px;cursor:pointer;text-align:left;text-decoration:none;transition:all .15s ease}.guide-nav .chapter-title:hover{background:#12161f66;color:#a4adc8}.guide-nav .chapter-title.active{color:#becdf6;background:#151a2966}.guide-nav .section-list{list-style:none;padding:0;margin:.25rem 0 .5rem}.guide-nav .section-link{display:block;font-size:.78rem;padding:.35rem .75rem .35rem 2.25rem;color:#515561;text-decoration:none;border-radius:8px;transition:all .1s ease;font-weight:400;position:relative}.guide-nav .section-link:hover{color:#858fa8;background:#12161f4d}.guide-nav .section-link.active{color:#9eb5f8;font-weight:550;background:#1a21354d}.guide-nav .section-link.active:before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:3px;height:14px;background:#6684fb;border-radius:2px}.guide-pictograph .fallback-badge{font-size:.65rem;color:#e18528;background:#331b064d;padding:1px 6px;border-radius:3px}.guide-pictograph .fallback-img{width:100%;height:100%;object-fit:contain}.guide-step-active{z-index:10;transform:scale(1.06);box-shadow:0 0 12px #fbbf2499,0 0 0 3px #fbbf24e6;pointer-events:none;animation:guideStepRingIn .4s ease-out forwards}@keyframes guideStepRingIn{0%{box-shadow:0 0 #fbbf2400,0 0 #fbbf2400;transform:scale(1)}50%{transform:scale(1.08)}to{box-shadow:0 0 12px #fbbf2499,0 0 0 3px #fbbf24e6;transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.guide-step-active{animation:none;transform:none}}@media(max-width:768px){.guide-sidebar{display:none}.guide-sidebar.open{display:block;position:fixed;top:64px;width:100%;height:calc(100vh - 64px);z-index:50;background:#05070d;backdrop-filter:blur(24px)}.guide-content{margin-left:0;grid-template-columns:[full-start] minmax(1rem,1fr) [breakout-start] 0 [prose-start] min(65ch,100%) [prose-end] 0 [breakout-end] minmax(1rem,1fr) [full-end]}.guide-pictograph.size-sm .pictograph-wrapper{width:6.25rem;height:6.25rem}.guide-pictograph.size-md .pictograph-wrapper{width:8.75rem;height:8.75rem}.guide-pictograph.size-lg .pictograph-wrapper{width:13.75rem;height:13.75rem}.guide-pictograph-grid{overflow-x:auto}.guide-nav .section-link{min-height:44px;display:flex;align-items:center}.guide-nav .chapter-title{min-height:44px}}@media(min-width:1680px){html:has(.guide-layout):not(:has(.mkt-shell)){font-size:clamp(16px,calc(16px + (100vw - 1680px) * 8 / 2160),24px)}.guide-layout{justify-content:center}.guide-sidebar{position:sticky;left:auto;flex:0 0 13.75rem}.guide-content{margin-left:0;flex:0 1 118rem;grid-template-columns:[full-start] minmax(1.5rem,1fr) [breakout-start] minmax(0,14rem) [prose-start] min(90ch,100%) [prose-end] minmax(0,14rem) [breakout-end] minmax(1.5rem,1fr) [full-end]}.guide-content>.guide-diagram,.guide-content>.guide-pictograph-grid,.guide-content>.guide-sequence-player,.guide-section>.guide-diagram,.guide-section>.guide-pictograph-grid,.guide-section>.guide-sequence-player{grid-column:breakout}html:has(.guide-layout):not(:has(.mkt-shell)) header>.inner,html:has(.guide-layout):not(:has(.mkt-shell)) .site-footer>.inner{max-width:min(131.75rem,92vw)}}