.g-book{--paper:var(--sp-paper);--ink:var(--sp-ink);--pen:var(--sp-sage-deep);--accent:var(--sp-terracotta-deep);--shadow:86 64 47;--display:var(--sp-font-display);--hand:var(--sp-font-hand);--endpaper:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'><g fill='%237cadd4' stroke='%237cadd4' stroke-width='2' stroke-linecap='round'><ellipse cx='18' cy='36' rx='5.2' ry='3.8' transform='rotate(-22 18 36)' stroke='none'/><path d='M22.6 34.6V16' fill='none'/><path d='M22.6 16q7 4 7.6 11' fill='none'/><ellipse cx='66' cy='86' rx='5' ry='3.6' transform='rotate(-22 66 86)' stroke='none'/><ellipse cx='82' cy='81' rx='5' ry='3.6' transform='rotate(-22 82 81)' stroke='none'/><path d='M70.4 84.6V66M86.4 79.6V61' fill='none'/><path d='M70.4 66l16-5v4.4l-16 5z' stroke='none'/></g><g fill='%23dc9b7b'><circle cx='80' cy='22' r='2.4'/><circle cx='30' cy='82' r='1.8'/><circle cx='100' cy='52' r='1.5'/><path d='M50 44l1.6 3.4 3.7.4-2.8 2.5.8 3.7-3.3-1.9-3.3 1.9.8-3.7-2.8-2.5 3.7-.4z'/></g></svg>")}main>section.g-book{max-width:none;padding:28px 10px 48px}.g-book .show-in{gap:22px;max-width:1220px;margin:0 auto;display:grid}.g-book .show-intro.sheet{margin:0;padding:36px 28px 26px}.g-book .show-intro h2{font-size:clamp(1.75rem,7vw,2.5rem)}.g-book .show-intro>p{margin-top:10px;font-size:1.125rem;font-weight:600}.g-book .book-name{gap:2px;max-width:19rem;margin-top:16px;display:grid}.g-book .book-name label{font-family:var(--display);color:var(--ink);font-size:.95rem;font-weight:600}.g-book .book-name input{border:0;border-bottom:2px dashed var(--sp-tan);width:100%;font-family:var(--hand);color:var(--pen);background:0 0;border-radius:0;margin:0;padding:2px 2px 6px;font-size:1.45rem;font-weight:500}.g-book .book-name input:focus-visible{outline-offset:6px}.g-book .show-steps{counter-reset:s;gap:6px;margin:16px 0 0;padding:0;list-style:none;display:grid}.g-book .show-steps li{counter-increment:s;font:600 1.05rem/1.3 var(--display);color:var(--ink);align-items:baseline;gap:10px;display:flex}.g-book .show-steps li:before{content:counter(s);font:600 1rem/1 var(--hand);color:var(--pen);width:1.2em}.g-book .show-steps li[aria-current]{color:var(--accent)}.g-book .small-print{color:var(--ink);margin-top:14px;font-size:.95rem;font-weight:650}@media (prefers-reduced-motion:reduce){.g-book .book-name,.g-book .small-print{display:none}}.g-book .real-pages{grid-template-columns:1fr 1fr;gap:18px 14px;margin:0;padding:0;list-style:none;display:grid}.g-book .real-pages[hidden]{display:none}.g-book .real-pages figure{margin:0}.g-book .real-pages img{background:var(--paper);width:100%;height:auto;box-shadow:0 14px 22px -14px rgb(var(--shadow) / .55), 0 1px 2px rgb(var(--shadow) / .2)}.g-book .real-pages figcaption{background:var(--paper);font:500 1rem/1.25 var(--hand);color:var(--pen);box-shadow:0 2px 4px rgb(var(--shadow) / .15);border-radius:999px;margin-top:8px;padding:3px 10px;display:inline-block}@media (width>=900px){main>section.g-book{padding:0 72px}.g-book .show-in{grid-template-columns:390px minmax(0,1fr);align-items:center;gap:48px;padding:24px 0 56px}.g-book .show-in:has(.book3d){min-height:100svh;padding:0}.g-book .show-intro.sheet{padding:44px 36px 30px}.g-book .real-pages{grid-template-columns:repeat(4,1fr)}}.g-book .book3d{--pw:min(360px, 26vw);width:calc(var(--pw) * 2);height:calc(var(--pw) * 1.415);perspective:2200px;margin:0 auto;position:relative}.g-book .book3d.single{--pw:min(340px, calc(100vw - 40px), calc((100svh - 120px) / 1.415));width:var(--pw)}.g-book .show-stage.held{align-content:center;justify-items:center;gap:12px;height:100svh;padding:12px 0 20px;display:grid}.g-book .hold-step{background:var(--paper);box-shadow:0 2px 6px rgb(var(--shadow) / .18);font:600 1rem/1.2 var(--display);color:var(--ink);border-radius:999px;margin:0;padding:6px 14px}.g-book .hold-step b{color:var(--accent);margin-right:4px}.g-book .book3d .shadow{background:radial-gradient(closest-side, rgb(var(--shadow) / .35), transparent);height:30px;position:absolute;bottom:-18px;left:50%;right:0}.g-book .book3d.single .shadow{left:0}.g-book .leaf{transform-origin:0%;width:50%;height:100%;transform-style:preserve-3d;position:absolute;top:0;left:50%}.g-book .book3d.single .leaf,.g-book .book3d.single .base{width:100%;left:0}.g-book .face,.g-book .base{background:var(--paper) center / 100% 100% no-repeat;box-shadow:0 1px 2px rgb(var(--shadow) / .25), 0 18px 28px -18px rgb(var(--shadow) / .5);position:absolute;inset:0;overflow:hidden;container-type:size}.g-book .face{-webkit-backface-visibility:hidden;backface-visibility:hidden}.g-book .face.back{transform:rotateY(180deg)}.g-book .base{width:50%;left:50%}.g-book .face .shade{opacity:0;pointer-events:none;background:linear-gradient(90deg, rgb(var(--shadow) / .4), transparent 70%);position:absolute;inset:0}.g-book .face.back .shade{background:linear-gradient(270deg, rgb(var(--shadow) / .4), transparent 70%)}.g-book .inside{background:var(--sp-blue-light) var(--endpaper) 0 0 / 56px 56px;place-items:center;display:grid}.g-book .inside img{width:46%;height:auto}.g-book .ov{font-family:var(--hand);font-variation-settings:"INFM" 85, "BNCE" 30;color:var(--pen);font-weight:520;line-height:1.1;position:absolute}.g-book .doodle{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.g-book .doodle path{fill:none;stroke:var(--accent);stroke-width:7px;stroke-linecap:round;stroke-linejoin:round}.g-tanda{--paper:var(--sp-paper);--ink:var(--sp-ink);--pen:var(--sp-sage-deep);--accent:var(--sp-terracotta-deep);--shadow:86 64 47;--display:var(--sp-font-display);--hand:var(--sp-font-hand);--black:var(--sp-black);--ease:cubic-bezier(.16, .84, .24, 1)}main>section.g-tanda{max-width:none;padding:28px 10px 40px}.g-tanda .g-spread{gap:10px;max-width:1220px;margin:0 auto;display:grid}.g-tanda .g-paper{background:var(--paper);min-width:0;box-shadow:0 18px 30px -18px rgb(var(--shadow) / .5), 0 2px 4px rgb(var(--shadow) / .16);border-radius:3px;padding:38px 22px 28px;position:relative}.g-tanda .g-paper:after{content:"";border-top:2px dotted var(--sp-sage);pointer-events:none;position:absolute;bottom:14px;left:18px;right:18px}.g-tanda .rule{pointer-events:none;width:calc(100% - 36px);height:8px;position:absolute;top:14px;left:18px;overflow:visible}.g-tanda .rule line{stroke:var(--sp-terracotta-light);stroke-width:2px}.g-tanda .rule line+line{stroke-width:1px}.g-tanda h2{margin-bottom:.55em;font-size:clamp(1.75rem,7vw,2.6rem)}.g-tanda h3{font-family:var(--display);color:var(--black);margin-bottom:16px;font-size:clamp(1.6rem,6vw,2.4rem);font-weight:650;line-height:1.05}.g-tanda .checks{gap:10px;margin:0 0 18px;padding:0;list-style:none;display:grid}.g-tanda .check{cursor:pointer;border-bottom:1.5px dotted var(--sp-blue);min-height:56px;color:var(--black);grid-template-columns:40px 1fr;align-items:center;gap:12px;padding:10px 6px;font-size:1.125rem;font-weight:700;display:grid;position:relative}.g-tanda .check input{opacity:0;width:1px;height:1px;position:absolute}.g-tanda .check svg{width:36px;height:36px}.g-tanda .check .box{fill:var(--paper);stroke:var(--ink);stroke-width:2.4px}.g-tanda .check .tick{fill:none;stroke:var(--accent);stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40px;transition:stroke-dashoffset .45s var(--ease)}.g-tanda .check input:checked+svg .tick{stroke-dashoffset:0}.g-tanda .check input:focus-visible+svg{outline:3px solid var(--sp-terracotta-deep);outline-offset:2px;border-radius:6px}.g-tanda .g-close{font:600 1.3rem/1.3 var(--hand);color:var(--pen);margin:6px 0 14px}.g-tanda .g-cta{background:var(--accent);color:var(--paper);font:600 1.125rem/1.1 var(--display);box-shadow:0 10px 22px -10px rgb(var(--shadow) / .7);border-radius:999px;align-items:center;padding:.9em 1.35em;text-decoration:none;display:inline-flex}.g-tanda .pen{font-family:var(--hand);font-variation-settings:"INFM" 80, "BNCE" 30;color:var(--pen);font-weight:500}.g-tanda .pen-lines{background-image:repeating-linear-gradient(transparent 0 calc(1.5em - 1.5px), var(--sp-blue-light) calc(1.5em - 1.5px) 1.5em);margin:0 0 16px;padding:0;font-size:1.35rem;line-height:1.5;list-style:none}.g-tanda .pen-lines li{padding-left:4px}.g-tanda .g-pace>p{max-width:46ch;font-size:1.0625rem;font-weight:650}.g-tanda .pace-art,.g-tanda .pace-art img{width:100%;max-width:420px;height:auto;margin:8px auto 0}.g-tanda .pace-staff{width:100%;height:auto;margin-top:10px;overflow:visible}.g-tanda .g-staff{fill:none;stroke:var(--sp-tan);stroke-width:1.6px}.g-tanda .pace-guide{fill:none;stroke:none}.g-tanda .pace-note ellipse{fill:var(--accent)}.g-tanda .pace-note path{fill:none;stroke:var(--accent);stroke-width:3.4px;stroke-linecap:round}@media (width>=900px){main>section.g-tanda{padding:48px 72px 24px}.g-tanda .g-spread{box-shadow:0 30px 46px -24px rgb(var(--shadow) / .5), 0 3px 6px rgb(var(--shadow) / .18);grid-template-columns:1fr 1fr;gap:0}.g-tanda .g-paper{box-shadow:none;border-radius:0;padding:56px 48px 36px}.g-tanda .g-paper:first-child{background-image:linear-gradient(to left, rgb(var(--shadow) / .1), transparent 46px);border-radius:4px 0 0 4px}.g-tanda .g-paper:nth-child(2){background-image:linear-gradient(to right, rgb(var(--shadow) / .12), transparent 46px);border-radius:0 4px 4px 0}.g-tanda .rule{width:calc(100% - 72px);top:22px;left:36px}.g-tanda .g-paper:after{bottom:18px;left:36px;right:36px}}.g-kelas{margin-block:10px;padding:28px 18px 14px}.g-kelas h2{font-size:clamp(1.75rem,7vw,2.5rem)}.g-kelas .g-lessons{margin:8px 0 0;padding:0;list-style:none;display:grid}.g-kelas li{border-top:2px solid var(--sp-sand);grid-template-columns:52px 1fr;align-items:center;gap:14px;padding:12px 0;display:grid}.g-kelas li:first-child{border-top:0}.g-kelas h3{font-size:1.125rem}.g-kelas p{margin-top:2px;font-size:.975rem;line-height:1.4}.g-lstk{aspect-ratio:1;background:var(--gloss), var(--bg);width:52px;color:var(--sp-black);rotate:var(--r);filter:var(--lift);border:4px solid #fff;border-radius:16px;place-items:center;display:grid}.g-lstk .ico{width:70%}@media (width>=900px){.g-kelas{grid-template-columns:300px 1fr;align-items:center;column-gap:56px;padding:40px 52px 30px;display:grid}.g-kelas .g-lessons{grid-template-columns:1fr 1fr;column-gap:36px;margin:0}.g-kelas li:nth-child(2){border-top:0}}