.demo-browser[data-astro-cid-o5epy4jq]{padding:4px;background-color:#232f2f;border-radius:8px;inline-size:fit-content;margin:auto;padding-block-start:24px;position:relative}.demo-browser-svg[data-astro-cid-o5epy4jq]{inline-size:36px;position:absolute;inset-block-start:8px;inset-inline-start:8px}.demo-browser-content[data-astro-cid-o5epy4jq]{--min-inline:160px;--max-inline:calc(100cqi - 4px * 2);inline-size:var(--max-inline);block-size:14em;min-inline-size:var(--min-inline);max-inline-size:var(--max-inline);background-color:#b9caca;border-end-end-radius:4px;border-end-start-radius:4px;margin:auto;display:grid;overflow:auto;.--resize[data-astro-cid-o5epy4jq] &{resize:both}.--block-auto[data-astro-cid-o5epy4jq] &{block-size:auto}}.toolbar-container[data-astro-cid-ilnctelb]{padding:var(--space-m);align-items:center;display:grid}.toolbar-fieldset[data-astro-cid-ilnctelb]{inline-size:fit-content;font-family:var(--font-family-en);font-size:var(--font-size-p-s);margin-inline:auto;padding-block-end:1lh;line-height:1.2}.toolbar-legend[data-astro-cid-ilnctelb]{color:#042020;margin-block-end:8px;display:block}.toolbar[data-astro-cid-ilnctelb]{color:#003d3d;border:1px solid;inline-size:fit-content;margin-inline:auto;display:flex}.toolbar-item[data-astro-cid-ilnctelb]{anchor-scope:all}.toolbar-item[data-astro-cid-ilnctelb]:not(:last-child){border-inline-end:1px solid}.toolbar-btn[data-astro-cid-ilnctelb]{anchor-name:--toolbar-btn;background-color:#fffc;display:block}.toolbar-btn[data-astro-cid-ilnctelb]:hover{background-color:#fff6}.toolbar-btn[data-astro-cid-ilnctelb] svg{fill:currentColor}.toolbar-tip[data-astro-cid-ilnctelb]{position-anchor:--toolbar-btn;position-try-fallbacks:flip-block;justify-self:anchor-center;color:#fff;text-align:center;background-color:#000;border-radius:4px;padding-block:4px;padding-inline:8px;position:absolute;inset-block-start:calc(anchor(outside) + 8px);&[aria-hidden=true]{display:none}}.menu[data-astro-cid-dihjy4dq]{block-size:fit-content;padding:var(--space-xs);color:#042020;font-family:var(--font-family-en);background-color:#fff;border-block-end:1px solid;position:relative}.menu-list[data-astro-cid-dihjy4dq]{gap:var(--space-xs);grid-template-columns:repeat(3,auto) 1fr;display:grid}.menu-list[data-astro-cid-dihjy4dq]:last-child{justify-items:end}.menu-list-target[data-astro-cid-dihjy4dq]{padding-block:var(--space-xs);border-radius:8px;padding-inline-start:var(--space-xs);padding-inline-end:calc(var(--space-xs) + 16px);line-height:1.1;transition:none;display:block;position:relative}.menu-list-target[data-astro-cid-dihjy4dq]:hover{color:#042020;background-color:#daf6f6}.menu-list-item[data-astro-cid-dihjy4dq]:has(.menu-sub:popover-open)>.menu-list-target[data-astro-cid-dihjy4dq]{color:#042020;background-color:#daf6f6}.menu-sub-item[data-astro-cid-dihjy4dq]:has(.menu-sub:popover-open)>.menu-sub-target[data-astro-cid-dihjy4dq]{color:#042020;background-color:#daf6f6}.menu-list-target[data-astro-cid-dihjy4dq]:after{content:"";clip-path:polygon(0 0,100% 0,50% 100%);background-color:currentColor;block-size:5px;inline-size:7px;margin-block:auto;display:block;position:absolute;inset-block:0;inset-inline-end:8px}.menu-list-item[data-astro-cid-dihjy4dq]:has(.menu-sub:popover-open) .menu-list-target[data-astro-cid-dihjy4dq]:after{rotate:180deg}.menu-sub[data-astro-cid-dihjy4dq]{position-anchor:auto;position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;min-inline-size:anchor-size(inline);background-color:#fff;border:1px solid;padding:4px;inset-block-start:calc(anchor(end) + 4px);inset-inline-start:anchor(start);&.--options{inset-inline-start:unset;inset-inline-end:anchor(end)}&:popover-open{flex-direction:column;gap:4px;display:flex}.menu-sub[data-astro-cid-dihjy4dq] &{inset-block-start:anchor(inside);inset-inline-start:anchor(outside)}}.menu-sub-target[data-astro-cid-dihjy4dq]{inline-size:100%;color:#042020;text-align:start;white-space:nowrap;cursor:pointer;padding-block:4px;padding-inline-start:var(--space-xs);padding-inline-end:calc(var(--space-xs) + 16px);line-height:1.1;transition:none;display:block;position:relative;&:hover{color:#fff;background-color:#073131}}.menu-sub-target[data-astro-cid-dihjy4dq].--btn:after{content:"";clip-path:polygon(0 0,100% 50%,0 100%);background-color:currentColor;block-size:7px;inline-size:5px;margin-block:auto;display:block;position:absolute;inset-block:0;inset-inline-end:8px}.menu-list-target[data-astro-cid-dihjy4dq].--options{aspect-ratio:1;border-radius:50%;block-size:100%}.menu-list-target[data-astro-cid-dihjy4dq].--options:after{clip-path:none;background-color:#0000;background-image:url("data:image/svg+xml;utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" fill=\"black\"><circle cx=\"20\" cy=\"13\" r=\"2\"/><circle cx=\"20\" cy=\"20\" r=\"2\"/><circle cx=\"20\" cy=\"27\" r=\"2\"/></svg>");background-position:50%;background-repeat:no-repeat;background-size:auto 100%;block-size:100%;inline-size:100%;inset:0}.menu-spacer[data-astro-cid-dihjy4dq]{background-color:#b9caca;padding-block-end:10em}.nav[data-astro-cid-rkaqh4pa]{color-scheme:light;color:#042020;background-color:#fff;border-block-end:1px solid;block-size:fit-content;max-inline-size:100%;position:relative;overflow-x:auto}[data-nav-columns=static] .nav[data-astro-cid-rkaqh4pa]{position:static}.nav-list[data-astro-cid-rkaqh4pa]{grid-template-columns:repeat(5,1fr);display:inline-grid;[data-nav-columns=auto] &{grid-template-columns:repeat(5,auto)}[data-nav-columns=col-3-1fr] &{grid-template-columns:repeat(3,1fr)}.nav[data-astro-cid-rkaqh4pa].--no-containing &{grid-template-columns:repeat(8,auto)}}.nav-target[data-astro-cid-rkaqh4pa]{padding:var(--space-s);color:inherit;font-family:var(--font-family-en);text-align:center;text-transform:uppercase;cursor:pointer;text-decoration:none;display:block;background:0 0!important}.nav-chaser[data-astro-cid-rkaqh4pa]{inset-inline:anchor(inside);position-anchor:var(--nav-target);pointer-events:none;background-color:#007575;block-size:4px;transition:inset .4s;display:block;position:absolute;inset-block-end:anchor(inside);.nav[data-astro-cid-rkaqh4pa].--no-containing &{transition-property:inset-inline}}.nav[data-astro-cid-rkaqh4pa]{--nav-target:--nav-current}.nav-target[data-astro-cid-rkaqh4pa].--current{anchor-name:--nav-current}.nav[data-astro-cid-rkaqh4pa]:has(.nav-target:is(:hover,:focus-visible)){--nav-target:--nav-item}.nav-target[data-astro-cid-rkaqh4pa]:is(:hover,:focus-visible){anchor-name:--nav-item}.card-container[data-astro-cid-ue7s4oxw]{background-color:#9296ab}.card[data-astro-cid-ue7s4oxw]{column-gap:var(--space-m);row-gap:var(--space-s);grid-template-rows:auto 1fr auto;grid-template-columns:repeat(auto-fit,minmax(10em,1fr));display:grid}.card-item[data-astro-cid-ue7s4oxw]{--feat-color:#f19409;anchor-name:--card-item;anchor-scope:all;grid-template-rows:subgrid;inline-size:100%;max-inline-size:240px;padding:var(--space-s);color:#042020;font-family:var(--font-family-en);font-size:var(--font-size-p-s);background-color:#fff;border-radius:8px;grid-row:span 3;margin-inline:auto;display:grid;overflow:clip;&.--high{--feat-color:#1ea446}&.--low{--feat-color:#1b6ef3}}.card-item[data-astro-cid-ue7s4oxw] .shape:before{z-index:revert}.card-image[data-astro-cid-ue7s4oxw]{margin-block-start:calc(-1 * var(--space-s));margin-inline:calc(-1 * var(--space-s))}.card-link[data-astro-cid-ue7s4oxw]{anchor-name:--card-link;color:#fff;text-align:center;cursor:pointer;background-color:#003d3d;border-radius:100vmax;padding-block:4px;text-decoration:none;transition:background-color .2s;display:block}.card-link[data-astro-cid-ue7s4oxw]:before,.card-link[data-astro-cid-ue7s4oxw]:after{content:"";position-anchor:--card-item;position-area:center;border-radius:8px;place-self:stretch stretch;display:block;position:absolute}.card-link[data-astro-cid-ue7s4oxw]:before{border:2px solid var(--feat-color);opacity:0;pointer-events:none;transition-property:opacity,scale;transition-duration:.2s;transition-timing-function:ease;scale:1.05}.card-link[data-astro-cid-ue7s4oxw]:after{opacity:0;mix-blend-mode:hard-light;background-color:#1b6ef3;transition:opacity .2s}[data-card-link-guide=true] .card-link[data-astro-cid-ue7s4oxw]:after{opacity:1}.card-icon[data-astro-cid-ue7s4oxw]{position-anchor:--card-link;border:2px solid var(--feat-color);color:#000;font-size:var(--font-size-p-xs);background-color:#eaf5f5;border-radius:100vmax;padding-inline:8px;transition:translate .2s;position:absolute;inset-block-start:calc(anchor(inside) - 1em);inset-inline-end:calc(anchor(inside) - 8px)}.card-icon[data-astro-cid-ue7s4oxw]:after{content:"";clip-path:polygon(0 0,100% 0,0 100%);aspect-ratio:1;background-color:var(--feat-color);inline-size:8px;margin-inline:auto;display:block;position:absolute;inset-block-end:-8px;inset-inline-end:8px}.card-item[data-astro-cid-ue7s4oxw]:hover .card-link[data-astro-cid-ue7s4oxw]{background-color:#066}.card-item[data-astro-cid-ue7s4oxw]:hover .card-link[data-astro-cid-ue7s4oxw]:before{opacity:1;scale:1}.card-item[data-astro-cid-ue7s4oxw]:hover .card-icon[data-astro-cid-ue7s4oxw]{translate:0 -4px}.timetable[data-astro-cid-nkypgq4h]{--border-color:#b3e6e6;padding-block:var(--space-l);font-family:var(--font-family-en);font-size:var(--font-size-p-s);text-align:center;overflow-wrap:break-word;word-wrap:break-word;background-color:#384c4c;line-height:1.4;display:block}.timetable-table[data-astro-cid-nkypgq4h]{background-color:#7f9f9f;grid-template-columns:auto repeat(3,minmax(8em,1fr));gap:2px;padding:2px;display:grid;position:relative;overflow-x:auto}.timetable-time[data-astro-cid-nkypgq4h]{font-size:var(--font-size-p-xs)}.timetable-guide[data-astro-cid-nkypgq4h]{background:#0e1515;block-size:100%;padding:8px}.timetable-guide[data-astro-cid-nkypgq4h].--time{grid-column:1;min-block-size:5em}.timetable-item[data-astro-cid-nkypgq4h]{background-color:#003d3d;flex-direction:column;justify-content:center;gap:4px;padding:4px;display:flex;position:absolute}.timetable-guide-line[data-astro-cid-nkypgq4h]{z-index:10;opacity:0;mix-blend-mode:hard-light;pointer-events:none;transition:opacity .2s;display:block;position:absolute}[data-timetable-guide=true] .timetable-guide-line[data-astro-cid-nkypgq4h]{opacity:1}.timetable-guide-line[data-astro-cid-nkypgq4h].--stage{border-inline-start:1px solid var(--border-color);inset-block:2px}.timetable-guide-line[data-astro-cid-nkypgq4h].--time{inset-inline:2px;border-block-start:1px solid var(--border-color);inset-inline-end:anchor(--stage-dev end)}.timetable-guide-line[data-astro-cid-nkypgq4h].--table{z-index:9;border:2px solid var(--border-color);background-color:#577575;inset:0;inset-inline-end:calc(anchor(--stage-dev end) - 2px)}.slider-container[data-astro-cid-7vraisp3]{anchor-name:--slider-container;padding-block:var(--space-l);background-color:#000;border-block:1px solid #007575;container-type:inline-size}.slider[data-astro-cid-7vraisp3]{max-inline-size:200px;margin:auto}image-slider[data-astro-cid-7vraisp3]{--gap:4px;padding-inline:25cqi;display:block}.slider-track[data-astro-cid-7vraisp3]{anchor-name:--slider-track;scroll-snap-type:inline mandatory;scroll-behavior:smooth;scrollbar-width:none;display:flex;overflow-x:auto}.slider-item[data-astro-cid-7vraisp3]{--feat-color:#f19409;scroll-snap-align:start;flex:0 0 100%;margin-inline-start:var(--gap);&.--high{--feat-color:#1ea446}&.--low{--feat-color:#1b6ef3}&:first-child{margin-inline-start:0}& .shape:before{z-index:0}}.slider-item-image[data-astro-cid-7vraisp3]{anchor-name:--slider-image;aspect-ratio:1;object-fit:cover;block-size:auto;inline-size:100%}.slider-caption[data-astro-cid-7vraisp3]{font-family:var(--font-family-en);font-size:var(--font-size-p-s);margin-block-start:8px}.slider-btn[data-astro-cid-7vraisp3]{--btn-size:min(50px, calc(20cqi - 20px));--btn-color:white;--btn-color-hover:teal;inset-block:anchor(--slider-image inside);place-items:center;align-self:anchor-center;inline-size:var(--btn-size);block-size:var(--btn-size);border:2px solid var(--btn-color);cursor:pointer;background:0 0;border-radius:50%;padding:4px;transition:background-color .2s;display:grid;position:absolute;&.--prev{inset-inline-end:calc(anchor(--slider-track outside) + 20px)}&.--next{inset-inline-start:calc(anchor(--slider-track outside) + 20px)}}.slider-btn-svg[data-astro-cid-7vraisp3]{block-size:auto;inline-size:18px}.slider-btn-svg[data-astro-cid-7vraisp3] path[data-astro-cid-7vraisp3]{fill:none;stroke:var(--btn-color);stroke-linecap:round;stroke-linejoin:round;stroke-width:1px;transition:stroke .2s}@media (hover){.slider-btn[data-astro-cid-7vraisp3]:hover{background-color:var(--btn-color-hover)}.slider-btn[data-astro-cid-7vraisp3]:hover path[data-astro-cid-7vraisp3]{stroke:#fff}}.slider-guide[data-astro-cid-7vraisp3]{opacity:0;mix-blend-mode:hard-light;pointer-events:none;background-color:#577575;transition:opacity .2s;position:fixed;&.--inline{inset-block:anchor(--slider-image inside);inset-inline:anchor(--slider-container inside);border-block:1px solid #b3e6e6}&.--block{inset-block:anchor(--slider-container inside);inset-inline:anchor(--slider-track inside);border-inline:1px solid #b3e6e6}}[data-slider-guide=true] .slider-guide[data-astro-cid-7vraisp3]{opacity:1}.tour[data-astro-cid-wyhl3hyq]{--space:min(10cqi, 40px);anchor-name:--tour;contain:content;padding:var(--space);color:#042020;background-color:light-dark(#fff,#0000);overflow:clip}.tour-inner[data-astro-cid-wyhl3hyq]{gap:var(--space);font-family:var(--font-family-en);flex-direction:column;display:flex}.tour-1[data-astro-cid-wyhl3hyq]{gap:8px;inline-size:fit-content;display:flex}.tour-shape[data-astro-cid-wyhl3hyq]{aspect-ratio:1;background-color:#1ea446;inline-size:20px;&.--square{scale:.94}&.--circle{background-color:#1b6ef3;border-radius:50%;scale:.98}&.--triangle{clip-path:polygon(50% 0,100% 100%,0 100%);background-color:#f19409;translate:-2px -1px}}.tour-2[data-astro-cid-wyhl3hyq]{line-height:1.8}.tour-3[data-astro-cid-wyhl3hyq]{inline-size:fit-content;margin-inline:auto}.tour-btn[data-astro-cid-wyhl3hyq]{--btn-bg:#003d3d;--border-color:#395656;--shadow-size:4px;--shadow-color:oklch(from var(--btn-bg) calc(l - .06) c h);border:1px solid var(--border-color);inline-size:fit-content;min-inline-size:120px;box-shadow:0 var(--shadow-size) 0 var(--shadow-color);background-color:var(--btn-bg);color:#fff;text-transform:uppercase;cursor:pointer;translate:0 calc(-1 * var(--shadow-size));border-radius:8px;padding-block:8px;padding-inline:16px;transition-property:box-shadow,background-color,translate;transition-duration:.2s;transition-timing-function:ease;display:block}.tour-btn[data-astro-cid-wyhl3hyq]:hover{background-color:oklch(from var(--btn-bg) calc(l + .05) c h)}.tour-btn[data-astro-cid-wyhl3hyq]:active{--shadow-size:0;translate:0}.tour[data-astro-cid-wyhl3hyq]{--tour-item:--tour-1}[data-astro-cid-wyhl3hyq][data-demo-tour="1"]{anchor-name:--tour-1}[data-astro-cid-wyhl3hyq][data-demo-tour="2"]{anchor-name:--tour-2}[data-astro-cid-wyhl3hyq][data-demo-tour="3"]{anchor-name:--tour-3}.tour-guide-container[data-astro-cid-wyhl3hyq]{transition:opacity .2s;&[hidden]{display:none}@starting-style{opacity:0}}.tour-guide[data-astro-cid-wyhl3hyq]{inset:calc(anchor(inside) - 8px);anchor-name:--tour-guide;position-anchor:var(--tour-item);border-radius:8px;position:absolute;box-shadow:0 0 0 200vmax #000c}.tour-guide-bg[data-astro-cid-wyhl3hyq]{position:absolute;inset:0}.tour-guide-content[data-astro-cid-wyhl3hyq]{position-anchor:--tour-guide;position-area:end span-end;position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline, end span-all;gap:var(--space-m);inline-size:min(20em,80cqi);padding:var(--space-s);font-size:var(--font-size-p-s);background-color:#fff;border:4px solid #c2d6d6;border-radius:8px;display:grid;position:absolute;inset-block:16px}.tour-guide-header[data-astro-cid-wyhl3hyq]{grid-template-columns:1fr auto;display:grid}.tour-guide-step[data-astro-cid-wyhl3hyq]{color:#007575;font-family:var(--font-family-en);text-transform:uppercase;font-weight:700}.tour-guide-close-target[data-astro-cid-wyhl3hyq]{border:1px solid;inline-size:20px;margin-inline-start:auto;padding:4px;display:block}.tour-guide-controls[data-astro-cid-wyhl3hyq]{font-family:var(--font-family-en);margin-inline-start:auto}.tour-guide-pager[data-astro-cid-wyhl3hyq]{gap:var(--space-s);grid-template-columns:repeat(2,1fr);display:grid}.tour-guide-pager-btn[data-astro-cid-wyhl3hyq]{margin-block:calc(-1 * var(--space-xs));padding-block:var(--space-xs);place-items:center;gap:4px;display:flex}.tour-guide-pager-btn[data-astro-cid-wyhl3hyq][hidden]{visibility:hidden}.tour-guide-pager-btn[data-astro-cid-wyhl3hyq][data-demo-tour-btn=back]{flex-direction:row-reverse}.tour-guide-pager-btn-svg[data-astro-cid-wyhl3hyq]{block-size:auto;inline-size:8px}.tour-guide-pager-btn-svg[data-astro-cid-wyhl3hyq] path[data-astro-cid-wyhl3hyq]{fill:none;stroke:currentColor;stroke-width:1px;transition:stroke .2s}.tour-footer[data-astro-cid-wyhl3hyq]{background-image:radial-gradient(#85adad 12%,#0000 13%);background-size:10px 10px;min-block-size:5lh}::view-transition-group(tour-content){overflow:clip}::view-transition-old(tour-content),::view-transition-new(tour-content){object-fit:none;block-size:100%;overflow:clip}:root:active-view-transition-type(tour){& .tour{view-transition-name:tour-guide}& .tour-guide-content{view-transition-name:tour-content}}.chords[data-astro-cid-edkznu7k]{--fret-count:8;--last-fret:--fret-8;background-color:#9296ab}.chords-tabs-container[data-astro-cid-edkznu7k]{font-family:var(--font-family-en);font-size:var(--font-size-p-s);position:relative;overflow-x:auto}.chords-tabs[data-astro-cid-edkznu7k]{anchor-name:--chords;grid-template-columns:repeat(var(--fret-count), minmax(60px, 1fr));border-inline-end:1px solid #fff;margin-block:1.4lh;margin-inline-start:24px;display:grid}.chords-tabs-guide[data-astro-cid-edkznu7k].--string{grid-column:1;min-block-size:20px}.chords-tabs-guide[data-astro-cid-edkznu7k].--string:last-child{min-block-size:0}.chords-bg[data-astro-cid-edkznu7k],.chords-fret[data-astro-cid-edkznu7k],.chords-string[data-astro-cid-edkznu7k]{pointer-events:none;position:absolute}.chords-bg[data-astro-cid-edkznu7k]{inset-block:anchor(inside);anchor-name:--chords-bg;position-anchor:--chords;background-color:#062d2d;inset-inline-start:anchor(inside);inset-inline-end:anchor(var(--last-fret) inside)}.chords-fret[data-astro-cid-edkznu7k]{inset-block:anchor(--chords inside);border-inline-start:1px solid #fff;inset-inline-start:anchor(start)}.chords-fret[data-astro-cid-edkznu7k].--first{border-inline-end:1px solid #fff;inline-size:8px}.chords-string[data-astro-cid-edkznu7k]{border-block-start:1px solid #fff;inset-block-start:anchor(inside);inset-inline-start:anchor(--chords inside);inset-inline-end:anchor(var(--last-fret) inside)}.chords-fret-num[data-astro-cid-edkznu7k]{text-align:center;position:absolute;inset-block-start:calc(anchor(inside) - 1.4lh);inset-inline-start:anchor(inside);inset-inline-end:anchor(inside)}.chords-press[data-astro-cid-edkznu7k]{--size:12px;--press:open;&.--press-1{--string:--string-1}&.--press-2{--string:--string-2}&.--press-3{--string:--string-3}&.--press-4{--string:--string-4}&.--press-5{--string:--string-5}&.--press-6{--string:--string-6}}.chords-press-item[data-astro-cid-edkznu7k]{inline-size:var(--size);aspect-ratio:1;background-color:#fff;border:1px solid #fff;border-radius:50%;position:absolute;inset-block-start:calc(anchor(var(--string) inside) - var(--size) / 2);inset-inline-start:calc(anchor(var(--press) center) - var(--size) / 2)}@container style(--press:open){.chords-press-item[data-astro-cid-edkznu7k]{background-color:#0000}}@container style(--press:mute){.chords-press-item[data-astro-cid-edkznu7k]{background-color:#0000;background-image:url(/assets/img/blog/anchor-positioning-02/icon-mute.svg);background-size:contain;border:none}}[data-chords=c] .chords-press[data-astro-cid-edkznu7k]{&.--press-1{--press:open}&.--press-2{--press:--fret-1}&.--press-3{--press:open}&.--press-4{--press:--fret-2}&.--press-5{--press:--fret-3}&.--press-6{--press:mute}}[data-chords=d] .chords-press[data-astro-cid-edkznu7k]{&.--press-1{--press:--fret-2}&.--press-2{--press:--fret-3}&.--press-3{--press:--fret-2}&.--press-4{--press:open}&.--press-5,&.--press-6{--press:mute}}[data-chords=e] .chords-press[data-astro-cid-edkznu7k]{&.--press-1,&.--press-2{--press:open}&.--press-3{--press:--fret-1}&.--press-4,&.--press-5{--press:--fret-2}&.--press-6{--press:open}}[data-chords=f] .chords-press[data-astro-cid-edkznu7k]{&.--press-1,&.--press-2{--press:--fret-1}&.--press-3{--press:--fret-2}&.--press-4,&.--press-5{--press:--fret-3}&.--press-6{--press:--fret-1}}[data-chords=g] .chords-press[data-astro-cid-edkznu7k]{&.--press-1{--press:--fret-3}&.--press-2,&.--press-3,&.--press-4{--press:open}&.--press-5{--press:--fret-2}&.--press-6{--press:--fret-3}}[data-chords=a] .chords-press[data-astro-cid-edkznu7k]{&.--press-1{--press:open}&.--press-2,&.--press-3,&.--press-4{--press:--fret-2}&.--press-5{--press:open}&.--press-6{--press:mute}}[data-chords=b] .chords-press[data-astro-cid-edkznu7k]{&.--press-1{--press:--fret-2}&.--press-2,&.--press-3,&.--press-4{--press:--fret-4}&.--press-5{--press:--fret-2}&.--press-6{--press:mute}}.chords-radio[data-astro-cid-edkznu7k]{background-color:#042020;grid-template-columns:repeat(auto-fit,minmax(5em,1fr));gap:8px;padding:16px;display:grid}.chords-radio-label[data-astro-cid-edkznu7k]{--btn-bg:#003d3d;--shadow-size:4px;--shadow-color:black;row-gap:var(--space-xs);padding:var(--space-s);box-shadow:0 var(--shadow-size) 0 var(--shadow-color);background-color:var(--btn-bg);font-family:var(--font-family-en);font-size:var(--font-size-p-s);cursor:pointer;translate:0 calc(-1 * (var(--shadow-size) - 2px));border:1px solid #007575;justify-items:center;line-height:1.1;transition-property:background-color,translate;transition-duration:.2s;transition-timing-function:ease;display:grid;position:relative}.chords-radio-label[data-astro-cid-edkznu7k]:has(.chords-radio-input:checked){--shadow-size:1px;background-color:oklch(from var(--btn-bg) calc(l + .05) calc(c + .05) h);translate:0}.chords-radio-input[data-astro-cid-edkznu7k]{appearance:none;background-color:#000;border:2px solid #007575;border-radius:0;block-size:16px;inline-size:16px;position:relative}.chords-radio-input[data-astro-cid-edkznu7k]:after{content:"";aspect-ratio:1;background-color:#0000;inline-size:8px;margin:auto;transition:background-color .1s;display:block;position:absolute;inset:0}.chords-radio-input[data-astro-cid-edkznu7k]:checked:after{background-color:#ffc400}:root:active-view-transition-type(chords){& .chords-tabs-container{view-transition-name:chords}}.sugoroku[data-astro-cid-h6agp527]{--game-color:#00f5f5;--game-bg-light:#1888d8;--game-bg-dark:#00243d;--game-goal-light:#2395e7;--game-goal-dark:#003c66;--ease-bounce:linear(0, .062, .221, .432, .657, .866, 1.038, 1.162, 1.236, 1.262, 1.251, 1.213, 1.159, 1.1, 1.043, .996, .962, .94, .931, .933, .942, .956, .971, .986, .999, 1.009, 1.015, 1.018, 1.018, 1.016, 1.012, 1.008, 1.004, 1.001, .998, .996, .995, .995, .996, .997, .998, .999, 1, 1);padding-block:calc(var(--space-m) + 5rem);background:radial-gradient(circle, var(--game-bg-light), var(--game-bg-dark)), linear-gradient(0deg, var(--game-bg-dark), transparent);background-blend-mode:multiply;border-block:1px solid #395656;position:relative;overflow-y:clip}.live-demo.--grid:has(demo-sugoroku){background:#000}.sugoroku-board[data-astro-cid-h6agp527]{anchor-name:--board;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(2,1fr);grid-template-areas:"s1.""s2 s3"".s4""s6 s5""s7.""s8 s8""s8 s8";gap:4px;max-inline-size:min(160px,60cqi);margin-inline:auto;display:grid}.sugoroku-step[data-astro-cid-h6agp527]{aspect-ratio:1;background-color:var(--game-bg-dark);color:var(--game-color);mix-blend-mode:hard-light;font-family:var(--font-family-8bit);font-size:var(--font-size-p-xs);border:2px solid;border-radius:8px;padding:8px;line-height:1.1}.sugoroku-step-label[data-astro-cid-h6agp527]{opacity:1;[data-astro-cid-h6agp527][data-sugoroku-move=goal] &{opacity:0}}.sugoroku-player[data-astro-cid-h6agp527]{--player-font-size:2rem;position-anchor:--step-1;position-area:center;max-block-size:1lh;max-inline-size:2em;font-size:var(--player-font-size);text-align:center;place-items:center;display:grid;position:absolute;inset:0;overflow:clip}.sugoroku-controls[data-astro-cid-h6agp527]{--btn-bg:#003d3d;--border-color:#395656;--shadow-size:4px;--shadow-color:oklch(from var(--btn-bg) calc(l - .06) c h);padding:0}.sugoroku-dice-container[data-astro-cid-h6agp527]{gap:var(--space-m);padding:var(--space-m);flex-direction:column;grid-area:dice;align-self:center;place-items:center;display:flex}.sugoroku-dice[data-astro-cid-h6agp527]{aspect-ratio:1;color:#000;cursor:pointer;outline:4px solid var(--border-color);background-color:#fff;border:4px solid #000;border-radius:8px;place-items:center;inline-size:100%;max-inline-size:68px;display:grid}.sugoroku-btn-container[data-astro-cid-h6agp527]{gap:var(--space-m);flex-flow:row-reverse wrap;justify-content:center;display:flex}.sugoroku-btn[data-astro-cid-h6agp527]{border:2px solid var(--border-color);background-color:#000;border-radius:12px;padding:2px;display:block}.sugoroku-btn-inner[data-astro-cid-h6agp527]{border:1px solid var(--border-color);inline-size:100%;min-inline-size:120px;box-shadow:0 var(--shadow-size) 0 var(--shadow-color);background-color:var(--btn-bg);text-transform:uppercase;cursor:pointer;translate:0 calc(-1 * var(--shadow-size));border-radius:8px;padding-block:8px;padding-inline:16px;transition-property:box-shadow,background-color,translate;transition-duration:.2s;transition-timing-function:ease;display:block;&.--last{align-self:end}}.sugoroku-btn[data-astro-cid-h6agp527]:hover .sugoroku-btn-inner[data-astro-cid-h6agp527]{background-color:oklch(from var(--btn-bg) calc(l + .05) c h)}.sugoroku-btn[data-astro-cid-h6agp527]:active .sugoroku-btn-inner[data-astro-cid-h6agp527]{--shadow-size:0;translate:0}.sugoroku-dice-svg-face[data-astro-cid-h6agp527]{opacity:0;[data-astro-cid-h6agp527][data-sugoroku-dice-face="1"] &.--1,[data-astro-cid-h6agp527][data-sugoroku-dice-face="2"] &.--2,[data-astro-cid-h6agp527][data-sugoroku-dice-face="3"] &.--3,[data-astro-cid-h6agp527][data-sugoroku-dice-face="4"] &.--4,[data-astro-cid-h6agp527][data-sugoroku-dice-face="5"] &.--5,[data-astro-cid-h6agp527][data-sugoroku-dice-face="6"] &.--6{opacity:1}}.sugoroku-player-radio[data-astro-cid-h6agp527]{padding:var(--space-m);padding-block-start:0}.sugoroku-player-radio-legend[data-astro-cid-h6agp527]{text-transform:uppercase;margin-block-end:var(--space-xs);display:block}.sugoroku-player-radio-list[data-astro-cid-h6agp527]{grid-template-columns:repeat(auto-fit,minmax(4.5em,1fr));justify-items:center;gap:4px;display:grid}.sugoroku-player-radio-label[data-astro-cid-h6agp527]{--shadow-color:black;--player-font-size:var(--font-size-p-l);gap:var(--space-xs);aspect-ratio:1;inline-size:100%;padding:var(--space-s);border:solid 1px var(--border-color);font-family:var(--font-family-en);font-size:var(--player-font-size);cursor:pointer;place-items:center;line-height:1.1;display:grid;position:relative}.sugoroku-player-radio-emoji[data-astro-cid-h6agp527]{text-align:center;transition:font-size .1s;position:absolute}.sugoroku-player-radio-label[data-astro-cid-h6agp527]:has(input:checked),.sugoroku-player-radio-label[data-astro-cid-h6agp527]:hover{--player-font-size:2rem}.sugoroku-player-radio-input[data-astro-cid-h6agp527]{appearance:none;cursor:pointer;background:0 0;border:none;position:absolute;inset:0}.sugoroku-player-radio-label[data-astro-cid-h6agp527]:has(input:checked){anchor-name:--checked-player}.sugoroku-player-radio-chaser[data-astro-cid-h6agp527]{--s:8px;inset-block:anchor(inside);inset-inline:anchor(inside);position-anchor:--checked-player;mask:conic-gradient(#000 0 0) content-box, conic-gradient(at var(--s) var(--s),#0000 75%,#000 0) 0 0/calc(100% - var(--s)) calc(100% - var(--s));mix-blend-mode:hard-light;pointer-events:none;background-color:#15c1c11a;border:2px solid #15c1c1;transition:inset .1s;display:block;position:absolute}.sugoroku[data-astro-cid-h6agp527]{[data-astro-cid-h6agp527][data-sugoroku-move=goal] &{--game-bg-light:var(--game-goal-light);--game-bg-dark:var(--game-goal-dark)}[data-astro-cid-h6agp527][data-sugoroku-over] &{--game-bg-light:black;--game-bg-dark:black}}.sugoroku-player[data-astro-cid-h6agp527]{[data-astro-cid-h6agp527][data-sugoroku-move=goal] &{font-size:calc(var(--player-font-size) * 2)}}.sugoroku-achive-message[data-astro-cid-h6agp527]{color:#fff;font-family:var(--font-family-8bit);font-size:var(--font-size-p-m);letter-spacing:.1em;text-align:center;text-transform:uppercase;text-shadow:0 0 20px var(--game-bg-dark);padding-block:2rem;line-height:1.1;position:absolute;inset-block-end:anchor(--board start);inset-inline:0;translate:0 -100%}.sugoroku-achive-audience[data-astro-cid-h6agp527]{flex-wrap:wrap;flex-wrap:balance;justify-content:center;gap:8px;padding:2rem;line-height:1.1;display:flex;position:absolute;inset-block-start:anchor(--board end);inset-inline:0;translate:0 100%}.sugoroku-achive-message[data-astro-cid-h6agp527],.sugoroku-achive-audience[data-astro-cid-h6agp527]{visibility:hidden;transition-property:visibility,translate;transition-duration:.6s;transition-timing-function:var(--ease-bounce);[data-astro-cid-h6agp527][data-sugoroku-move=goal] &{visibility:visible;transition-delay:.6s;translate:0}}.sugoroku-achive-audience-item[data-astro-cid-h6agp527]{&[aria-hidden=true]{display:none}[data-astro-cid-h6agp527][data-sugoroku-move=goal] &{animation:.2s wave;animation-delay:calc(1.2s + (var(--index) + 1) * 50ms)}}@keyframes wave{50%{translate:0 -100%}to{translate:0}}@container stage (inline-size>=540px){.sugoroku-board[data-astro-cid-h6agp527]{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(7,1fr);grid-template-areas:".s3 s4 s5.s8 s8""s1 s2.s6 s7 s8 s8";max-inline-size:100%}}:root{view-transition-name:none;&::view-transition{pointer-events:none}}:root:active-view-transition-type(player){& .sugoroku-player{view-transition-name:player}}:root:active-view-transition-type(goal){& .sugoroku-step-label{view-transition-name:match-element}& .sugoroku-player{view-transition-name:goal}}:root:active-view-transition-type(move){& .sugoroku{view-transition-name:sugoroku;view-transition-group:contain}& .sugoroku-player{view-transition-name:move}}:root:active-view-transition-type(dice){& .sugoroku-dice-face{view-transition-name:dice}}::view-transition-group(player),::view-transition-group(move){animation-duration:.4s;animation-timing-function:linear(0, .083, .263, .465, .649, .796, .902, .971, 1.011, 1.029, 1.035, 1.032, 1.026, 1.019, 1.013, 1.007, 1.004, 1.001, 1, .999, .999, .999, .999, .999, 1, 1, 1, 1);overflow:clip}::view-transition-old(player){animation-name:slideToBottom}::view-transition-new(player){animation-name:slideFromTop}::view-transition-group(dice){animation-duration:.2s;overflow:clip}::view-transition-old(dice){animation-name:slideToBottom}::view-transition-new(dice){animation-name:slideFromTop}@keyframes slideToBottom{to{translate:0 100%}}@keyframes slideFromTop{0%{translate:0 -100%}}.demo-stage{container:stage/inline-size}@supports not (anchor-name:--supports){.demo-stage:after{content:"このデモは、お使いのブラウザには対応していません 🙇‍♂️";padding:var(--space-m);text-align:center;background-color:teal;display:block}.demo-stage>*{display:none}}.demo-container{padding:var(--space-l);display:block;container-type:inline-size}.demo-check-list{padding-block:var(--space-s);padding-inline:var(--space-m);font-family:var(--font-family-en);font-size:var(--font-size-p-s);background-color:#042020;justify-content:end;line-height:1.4;display:flex}.demo-check-list-item{gap:var(--space-xs);text-transform:uppercase;cursor:pointer;grid-template-columns:auto 1fr;align-items:center;display:grid}.demo-check-list-item input[type=checkbox]{appearance:none;background-color:#000;border:2px solid #007575;border-radius:0;block-size:16px;inline-size:16px;position:relative}.demo-check-list-item input[type=checkbox]:checked:after{content:"";aspect-ratio:1;background-color:#ffc400;inline-size:8px;margin:auto;display:block;position:absolute;inset:0}@container stage (inline-size>=540px){.demo-check-list{padding-inline:var(--space-l)}}.demo-controls{padding:var(--space-m);font-family:var(--font-family-en);font-size:var(--font-size-p-s);background-color:#042020;&:not(#_) :not(pre)>code{background-color:#0000!important}}.demo-select{gap:var(--space-xs);flex-wrap:wrap;justify-content:center;align-items:center;line-height:1.2;display:flex}.demo-select-inner{max-inline-size:460px;position:relative}.demo-select-inner:after{content:"";pointer-events:none;background-image:url("data:image/svg+xml;utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"12\" fill=\"%2392dddd\"><path d=\"M3,0l3,4H0L3,0Z\"/><path d=\"M3,12L0,8h6l-3,4Z\"/></svg>");background-size:auto 100%;block-size:12px;inline-size:6px;margin-block:auto;display:block;position:absolute;inset-block:0;inset-inline-end:16px}.demo-select select{text-overflow:ellipsis;inline-size:fit-content;max-inline-size:240px;padding-block:var(--space-xs);text-align:center;white-space:nowrap;border:2px solid #007575;padding-inline:2.4em;overflow:hidden}