:root{--pink:#ff5da2;--pink-deep:#ff2e8b;--pink-pale:#ffd6ec;--pink-ultra-pale:#fff0f7;--cyan:#3fd1ff;--cyan-deep:#00b8e6;--cyan-pale:#bdeeff;--mint:#7fe8c3;--mint-pale:#d3fbec;--lemon:#fff27a;--lemon-deep:#ffd93d;--lavender:#d9c8ff;--ink:#5b4a63;--ink-soft:#8a7a91;--white:#fffdfb;--purple-deep:#6a3b7a;--radius-lg:28px;--radius-md:18px;--radius-sm:12px;--shadow-pop:0 5px 0 #ff5da259, 0 12px 24px #ff5da22e;--shadow-pop-cyan:0 5px 0 #00b8e659, 0 12px 24px #00b8e62e;--shadow-card:0 4px 18px #b478aa29;--font-main:"M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;--font-mono:"SF Mono", "Menlo", "Consolas", "Courier New", monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;font-family:var(--font-main);color:var(--ink);overflow-wrap:anywhere;word-break:normal;line-break:strict;background:radial-gradient(circle at 12% 8%, #ffffff8c 0 6px, transparent 7px), radial-gradient(circle at 38% 22%, #fff6 0 4px, transparent 5px), radial-gradient(circle at 68% 6%, #ffffff80 0 5px, transparent 6px), radial-gradient(circle at 88% 30%, #fff6 0 4px, transparent 5px), radial-gradient(circle at 22% 55%, #fff6 0 5px, transparent 6px), radial-gradient(circle at 78% 70%, #ffffff73 0 5px, transparent 6px), radial-gradient(circle at 50% 90%, #fff6 0 4px, transparent 5px), linear-gradient(160deg, var(--cyan-pale) 0%, #dff1ff 28%, var(--pink-ultra-pale) 60%, var(--pink-pale) 100%);background-size:220px 220px,180px 180px,260px 260px,200px 200px,240px 240px,210px 210px,190px 190px,100% 100%;background-attachment:fixed;margin:0;line-height:1.85}img{max-width:100%}a{color:var(--pink-deep)}h1,h2,h3,h4{font-family:var(--font-main);color:var(--purple-deep);font-weight:800;line-height:1.4}p{margin:0 0 1em}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.page-wrap{max-width:920px;margin:0 auto;padding:0 20px 80px}main{display:block}section{margin:56px 0}.site-header{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:3px dashed var(--pink-pale);background:#fffdfbdb;position:sticky;top:0}.header-inner{align-items:center;gap:16px;max-width:1000px;margin:0 auto;padding:12px 20px;display:flex}.brand{color:var(--pink-deep);white-space:nowrap;align-items:center;gap:8px;font-size:1.3rem;font-weight:800;text-decoration:none;display:flex}.brand .chick{font-size:1.6rem}.menu-toggle{background:var(--pink);color:#fff;cursor:pointer;width:44px;height:44px;box-shadow:var(--shadow-pop);border:none;border-radius:999px;margin-left:auto;font-size:1.3rem;display:none}.site-nav{margin-left:auto}.site-nav .nav-top{align-items:flex-start;gap:8px;margin:0;padding:4px 2px;list-style:none;display:flex}.site-nav .nav-top>li{position:relative}.site-nav a{white-space:nowrap;background:var(--white);border:2px solid var(--pink-pale);color:var(--purple-deep);border-radius:999px;padding:8px 16px;font-size:.88rem;font-weight:700;text-decoration:none;transition:transform .15s,background .15s,color .15s;display:inline-block}.site-nav a:hover{background:var(--pink-pale);transform:translateY(-2px)}.site-nav a[aria-current=page]{background:linear-gradient(135deg, var(--pink), var(--pink-deep));border-color:var(--pink-deep);color:#fff}.nav-group{position:relative}.nav-group summary{white-space:nowrap;background:var(--white);border:2px solid var(--pink-pale);color:var(--purple-deep);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;gap:4px;padding:8px 16px;font-size:.88rem;font-weight:700;list-style:none;display:inline-flex}.nav-group summary::-webkit-details-marker{display:none}.nav-group summary:after{content:"▾";font-size:.7em;transition:transform .15s}.nav-group[open] summary:after{transform:rotate(180deg)}.nav-group summary:hover{background:var(--pink-pale)}.nav-group[open] summary{background:var(--pink-pale);border-color:var(--pink-deep)}.nav-group:has(a[aria-current=page]) summary{border-color:var(--pink-deep)}.nav-dropdown{flex-direction:column;gap:4px;margin:0;list-style:none;display:flex}.nav-group .nav-dropdown a{box-sizing:border-box;text-align:left;width:100%;display:block}@media (width>=761px){.nav-dropdown{z-index:60;background:var(--white);border:2px solid var(--pink-pale);border-radius:var(--radius-md);min-width:160px;box-shadow:var(--shadow-card);padding:8px;position:absolute;top:calc(100% + 8px);left:0}}@media (width<=760px){.menu-toggle{display:inline-block}.site-nav{order:3;width:100%;display:none}.site-nav.is-open{display:block}.site-nav .nav-top{flex-direction:column;align-items:stretch}.nav-group summary,.site-nav a{box-sizing:border-box;width:100%}.nav-dropdown{padding:6px 0 6px 16px}.header-inner{flex-wrap:wrap}}.ribbon-heading{color:#fff;text-align:center;background:linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);box-shadow:var(--shadow-pop);border-radius:999px;align-items:center;gap:8px;margin:0 auto 28px;padding:14px 40px;font-size:1.4rem;font-weight:800;display:inline-flex;position:relative}.ribbon-heading:before,.ribbon-heading:after{content:"";background:inherit;border-radius:4px;width:18px;height:calc(100% - 12px);position:absolute;top:6px}.ribbon-heading:before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%);left:-8px}.ribbon-heading:after{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,60% 50%);right:-8px}.ribbon-heading.cyan{background:linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);box-shadow:var(--shadow-pop-cyan)}.section-head{text-align:center;margin-bottom:32px}.section-lead{text-align:center;max-width:640px;color:var(--ink-soft);margin:0 auto}.btn{font-family:var(--font-main);color:#fff;cursor:pointer;background:linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);box-shadow:var(--shadow-pop);border:none;border-radius:999px;align-items:center;gap:6px;padding:12px 28px;font-size:1rem;font-weight:800;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(2px);box-shadow:0 2px #ff5da259}.btn.cyan{background:linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);box-shadow:var(--shadow-pop-cyan)}.btn.ghost{color:var(--pink-deep);border:2px solid var(--pink-pale);box-shadow:none;background:#fff}.btn.small{padding:8px 18px;font-size:.85rem}.card{background:var(--white);border:3px solid var(--pink-pale);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px}.card.cyan-border{border-color:var(--cyan-pale)}.card-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;display:grid}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tip-box{background:var(--lemon);border-radius:var(--radius-md);color:#6b5a1a;margin:20px 0;padding:18px 22px 18px 60px;font-size:.95rem;position:relative}.tip-box:before{content:"💡";font-size:1.4rem;position:absolute;top:16px;left:18px}.tip-box.pink{background:var(--pink-pale);color:var(--purple-deep)}.tip-box.pink:before{content:"🎀"}.tip-box.mint{background:var(--mint-pale);color:#1c6b52}.tip-box.mint:before{content:"✨"}.window{border-radius:var(--radius-md);box-shadow:var(--shadow-card);margin:18px 0;overflow:hidden}.window-bar{background:#4a3557;align-items:center;gap:6px;padding:10px 14px;display:flex}.window-bar .dot{border-radius:50%;width:11px;height:11px}.window-bar .dot.pink{background:var(--pink)}.window-bar .dot.lemon{background:var(--lemon-deep)}.window-bar .dot.mint{background:var(--mint)}.window-bar .window-title{color:#d9c8e6;font-size:.78rem;font-family:var(--font-mono);margin-left:8px}.window-copy{color:#f4e9fb;font-size:.75rem;font-family:var(--font-main);cursor:pointer;background:#ffffff24;border:none;border-radius:999px;margin-left:auto;padding:4px 12px;font-weight:700}.window-copy:hover{background:#ffffff42}pre.code-block,.terminal pre{color:#f4ecfb;font-family:var(--font-mono);background:#2e2138;margin:0;padding:18px 20px;font-size:.88rem;line-height:1.7;overflow-x:auto}.terminal pre{color:#b9f7cf;background:#241a2c}.terminal pre .prompt{color:#ff9ecf;-webkit-user-select:none;user-select:none}.terminal pre .comment{color:#8c7a99}code{font-family:var(--font-mono);background:var(--pink-ultra-pale);border-radius:6px;padding:.1em .4em;font-size:.92em}pre code{background:0 0;padding:0}pre.code-block .token.tag,pre.code-block .token.selector,pre.code-block .token.keyword{color:#ff9ecf}pre.code-block .token.attr-name,pre.code-block .token.property,pre.code-block .token.function{color:#8fe8ff}pre.code-block .token.attr-value,pre.code-block .token.string,pre.code-block .token.number{color:#d6ff9e}pre.code-block .token.punctuation,pre.code-block .token.operator{color:#cbb9d8}pre.code-block .token.comment{color:#8c7a99;font-style:italic}pre.code-block .token.doctype,pre.code-block .token.important{color:#ffd93d}pre.code-block .token.class-name,pre.code-block .token.atrule{color:#ffb5e0}.roadmap{flex-wrap:wrap;justify-content:center;gap:18px;padding:10px 0;display:flex}.roadmap-step{width:148px;color:var(--ink);text-align:center;flex-direction:column;align-items:center;gap:10px;text-decoration:none;display:flex;position:relative}.roadmap-step .num{background:var(--white);border:4px solid var(--pink);width:64px;height:64px;box-shadow:var(--shadow-pop);border-radius:50%;justify-content:center;align-items:center;font-size:1.7rem;transition:transform .15s;display:flex}.roadmap-step:nth-child(3n+2) .num{border-color:var(--cyan);box-shadow:var(--shadow-pop-cyan)}.roadmap-step:nth-child(3n) .num{border-color:var(--lemon-deep);box-shadow:0 5px #ffd93d59,0 12px 24px #ffd93d2e}.roadmap-step:hover .num{transform:scale(1.08)rotate(-4deg)}.roadmap-step .label{color:var(--purple-deep);font-size:.88rem;font-weight:800}.roadmap-step .desc{color:var(--ink-soft);font-size:.76rem}.roadmap-group-label{text-align:center;color:var(--purple-deep);margin:0 0 12px;font-weight:800}.roadmap-group-label.second{margin-top:32px}code-playground{display:block}.playground{border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:3px solid var(--lavender);background:#fff;margin:24px 0;display:block;overflow:hidden}.playground-label{background:linear-gradient(135deg, var(--lavender), #c9b6ff);color:var(--purple-deep);align-items:center;gap:8px;padding:12px 18px;font-size:.95rem;font-weight:800;display:flex}.playground-task{background:var(--lemon);color:#6b5a1a;border-bottom:3px dashed var(--lavender);align-items:flex-start;gap:8px;padding:12px 18px;font-size:.85rem;font-weight:700;line-height:1.7;display:flex}.playground-task-icon{flex:none}.playground-task-content{grid-template-columns:1fr auto;align-items:center;gap:4px 14px;width:100%;display:grid}.playground-task-meta{color:#8a6c16;letter-spacing:.04em;grid-column:1/-1;font-size:.72rem}.playground-task-text{font-size:.9rem}.task-next{background:var(--white);color:#6b5a1a;font:inherit;white-space:nowrap;cursor:pointer;border:2px solid #d9bd39;border-radius:999px;padding:7px 14px;font-size:.78rem;font-weight:800}.task-next:hover,.task-next:focus-visible{background:#fffbe0}.playground-body{grid-template-columns:1fr 1fr;display:grid}@media (width<=720px){.playground-body{grid-template-columns:1fr}.pg-preview-area{border-bottom:3px solid var(--lavender);order:-1}}.pg-editors{border-right:3px solid var(--lavender);flex-direction:column;display:flex}@media (width<=720px){.pg-editors{border-bottom:none;border-right:none}}.pg-tabs{background:#f6f0ff;gap:4px;padding:8px 8px 0;display:flex}.pg-tab{font-family:var(--font-mono);color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:10px 10px 0 0;padding:8px 16px;font-size:.8rem;font-weight:700}.pg-tab[aria-selected=true]{color:#f4ecfb;background:#2e2138}.pg-panels{min-height:var(--pg-height,320px);background:#2e2138;flex:1;position:relative}.pg-panel{display:none;position:absolute;inset:0}.pg-panel.is-active{display:block}.pg-panel .cm-editor{height:100%;font-family:var(--font-mono)}.pg-panel .cm-editor.cm-focused{outline:none}.pg-panel .cm-scroller{font-family:var(--font-mono)}.pg-preview-area{flex-direction:column;display:flex}.pg-preview-area iframe{width:100%;min-height:var(--pg-height,320px);background:#fff;border:none;flex:1}.resizable-preview .pg-preview-area{align-items:flex-start}.resizable-preview .pg-preview-area iframe{resize:horizontal;width:100%;min-width:220px;max-width:100%;overflow:auto}.pg-console{border-top:2px solid var(--pink-pale);color:#d8cbe4;font-family:var(--font-mono);background:#201828;max-height:110px;padding:6px 12px;font-size:.76rem;overflow-y:auto}.pg-console:empty:before{content:"console.log の出力はここに出るよ〜";color:#6f5f7c}.pg-console .log-line{white-space:pre-wrap;word-break:break-all;border-bottom:1px dashed #3a2c46;padding:2px 0}.pg-console .log-line.warn{color:var(--lemon-deep)}.pg-console .log-line.error{color:#ff8fa3}.pg-toolbar{background:#f6f0ff;align-items:center;gap:8px;padding:8px 12px;display:flex}.pg-toolbar .btn{padding:6px 16px;font-size:.78rem}.pg-toolbar .pg-status{color:var(--ink-soft);margin-left:auto;font-size:.72rem}.hero{text-align:center;padding:60px 0 20px}.hero .kicker{border:2px dashed var(--pink);color:var(--pink-deep);background:#fff;border-radius:999px;margin-bottom:18px;padding:6px 18px;font-size:.85rem;font-weight:700;display:inline-block}.hero h1{background:linear-gradient(135deg, var(--pink-deep), var(--cyan-deep));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 16px;font-size:clamp(2rem,6vw,3.2rem)}.hero h1 .emoji-fix{-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:initial;color:initial}.hero h1 .term{-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:initial;color:var(--purple-deep)}.hero p.lead{color:var(--ink-soft);max-width:560px;margin:0 auto 28px;font-size:1.1rem}.hero-actions{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.mascot-row{letter-spacing:.5em;margin:30px 0;font-size:2.2rem}.site-footer{text-align:center;color:var(--ink-soft);padding:40px 20px 60px;font-size:.85rem}.site-footer .heart{color:var(--pink)}.step{gap:18px;margin:26px 0;padding-left:4px;display:flex;position:relative}.step .step-num{background:linear-gradient(135deg, var(--pink), var(--pink-deep));color:#fff;width:42px;height:42px;box-shadow:var(--shadow-pop);border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:800;display:flex}.step .step-body{flex:1}.step .step-body h3{margin:6px 0 10px;font-size:1.15rem}.badge{background:var(--mint-pale);color:#1c6b52;border-radius:999px;margin-right:6px;padding:3px 12px;font-size:.72rem;font-weight:800;display:inline-block}.badge.new{background:var(--lemon);color:#6b5a1a}.badge.caution{background:var(--pink-pale);color:var(--pink-deep)}.text-center{text-align:center}.start-here,.lesson-plan{border:3px solid var(--cyan-pale);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);background:#fffdfbf5;padding:28px}.start-here h2,.lesson-plan h2{margin:0 0 8px}.eyebrow{color:var(--cyan-deep);letter-spacing:.06em;margin-bottom:6px;font-size:.78rem;font-weight:800;display:block}.tiny-steps{counter-reset:tiny-step;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0;padding:0;list-style:none;display:grid}.tiny-steps li{counter-increment:tiny-step;border:2px solid var(--pink-pale);border-radius:var(--radius-md);background:var(--pink-ultra-pale);min-width:0;padding:16px}.tiny-steps li:before{content:counter(tiny-step);background:var(--pink);color:#fff;border-radius:50%;place-items:center;width:28px;height:28px;margin-bottom:8px;font-weight:800;display:grid}.tiny-steps strong{color:var(--purple-deep);margin-bottom:4px;display:block}.tiny-steps span{color:var(--ink-soft);font-size:.86rem;line-height:1.65;display:block}.lesson-goal{border-radius:var(--radius-md);background:var(--mint-pale);color:#1c6b52;align-items:flex-start;gap:12px;margin:18px 0;padding:14px 16px;display:flex}.lesson-goal strong{white-space:nowrap}.lesson-outline{border-top:2px dashed var(--pink-pale);margin-top:14px;padding-top:14px}.lesson-outline summary{color:var(--purple-deep);cursor:pointer;font-weight:800}.lesson-outline ol{margin-bottom:0}.sample-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0;display:grid}.sample-item{border:2px solid var(--pink-pale);border-radius:var(--radius-md);background:var(--white);min-width:0;padding:14px}.sample-item code{margin-bottom:8px;display:inline-block}.sample-item p{margin:0;font-size:.88rem;line-height:1.65}.sample-result{border-top:1px dashed var(--pink-pale);color:var(--ink-soft);margin-top:8px;padding-top:8px;font-size:.8rem;display:block}.practice-stack{gap:14px;display:grid}.practice-step{border:3px solid var(--pink-pale);border-radius:var(--radius-md);background:var(--white);box-shadow:var(--shadow-card);overflow:hidden}.practice-step:nth-child(2n){border-color:var(--cyan-pale)}.practice-step>summary{color:var(--purple-deep);cursor:pointer;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 18px;list-style:none;display:grid}.practice-step>summary::-webkit-details-marker{display:none}.practice-step>summary:after{content:"＋";color:var(--pink-deep);font-size:1.3rem;font-weight:800}.practice-step[open]>summary{background:var(--pink-ultra-pale);border-bottom:2px dashed var(--pink-pale)}.practice-step:nth-child(2n)[open]>summary{border-bottom-color:var(--cyan-pale);background:#f0fbff}.practice-step[open]>summary:after{content:"－"}.practice-num{background:var(--pink);color:#fff;border-radius:50%;place-items:center;width:34px;height:34px;font-weight:800;display:grid}.practice-step:nth-child(2n) .practice-num{background:var(--cyan-deep)}.practice-step>summary strong,.practice-step>summary small{display:block}.practice-step>summary small{color:var(--ink-soft);margin-top:2px;font-size:.8rem}.practice-step-body{padding:18px}.practice-step-body>p:first-child{margin-bottom:12px}.practice-step-body .playground{--pg-height:220px;margin-bottom:4px}.concept-after{border-left:5px solid var(--cyan-deep);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#f0fbff;margin:16px 2px 0;padding:14px 16px}.concept-after>strong{color:var(--purple-deep);margin-bottom:6px;display:block}.concept-after>p{margin:0}.first-clue{border:2px solid var(--cyan-pale);border-radius:var(--radius-md);background:#f5fcff;margin-bottom:18px;padding:16px 18px}.first-clue>strong{color:var(--purple-deep);margin-bottom:10px;display:block}.first-clue>p{margin:10px 0 0}.color-name-picks{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.color-name-picks span{border-radius:var(--radius-sm);background:var(--white);align-items:center;gap:8px;min-width:0;padding:10px 12px;display:flex}.color-name-picks i{border:2px solid #5b4a6329;border-radius:50%;flex:none;width:28px;height:28px}.color-name-picks.compact{margin:12px 0 16px}.color-library{border:2px dashed var(--cyan-pale);border-radius:var(--radius-md);background:var(--white);margin-top:14px;padding:12px 14px}.color-library>h3{color:var(--purple-deep);margin:0;font-size:1rem;font-weight:800}.color-library-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0;display:grid}.color-library-grid>span{border:1px solid var(--pink-pale);border-radius:var(--radius-sm);background:#fffdfb;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:1px 8px;min-width:0;padding:8px;display:grid}.color-library-grid i{border:2px solid #5b4a6333;border-radius:50%;grid-row:1/span 2;width:28px;height:28px}.color-library-grid code,.color-library-grid small{overflow-wrap:anywhere}.color-library-grid small{color:var(--ink-soft)}.color-library>p{margin-bottom:8px}.reference-link{margin-top:4px;font-weight:800;display:inline-block}.concept-reveal{border:2px dashed var(--pink-pale);border-radius:var(--radius-md);background:var(--white);margin-top:14px;padding:12px 14px}.concept-reveal summary{color:var(--purple-deep);cursor:pointer;font-weight:800}.concept-reveal ul,.concept-reveal ol,.concept-reveal p{margin-bottom:0}.research-guide ol{padding-left:1.4em}.research-guide li+li{margin-top:8px}.hex-anatomy{font-family:var(--font-mono);justify-content:center;align-items:stretch;gap:6px;margin:16px 0;display:flex}.hex-anatomy>span{border-radius:var(--radius-sm);place-items:center;min-width:62px;padding:8px 10px;display:grid}.hex-anatomy strong{font-size:1.35rem}.hex-anatomy small{font-family:var(--font-body);font-weight:800}.hex-anatomy .hex-mark{min-width:auto;color:var(--purple-deep);padding-inline:4px;font-size:1.55rem;font-weight:800}.hex-red{color:#9b2231;background:#ffe4e7}.hex-green{color:#17663a;background:#e1f7e9}.hex-blue{color:#175c8d;background:#e3f3ff}.hex-rules{margin:0 0 12px;padding-left:1.4em}.hex-rules li+li{margin-top:6px}.lesson-path-more{border:3px dashed var(--cyan-pale);border-radius:var(--radius-lg);background:#f5fcffd1;margin:56px 0;overflow:hidden}.lesson-path-more>summary{color:var(--purple-deep);cursor:pointer;grid-template-columns:minmax(0,1fr) auto;gap:3px;padding:18px 22px;list-style:none;display:grid}.lesson-path-more>summary::-webkit-details-marker{display:none}.lesson-path-more>summary span{font-weight:800}.lesson-path-more>summary small{color:var(--ink-soft)}.lesson-path-more>summary:after{content:"＋ ひらく";color:var(--cyan-deep);grid-area:1/2/span 2;align-self:center;font-size:.85rem;font-weight:800}.lesson-path-more[open]>summary{border-bottom:2px dashed var(--cyan-pale);background:#f0fbff}.lesson-path-more[open]>summary:after{content:"－ とじる"}.lesson-path-more-body{padding:0 22px 8px}.tag-reference{border:2px dashed var(--pink-pale);border-radius:var(--radius-md);background:#fffdfbcc;margin:24px 0 0;padding:16px 18px}.reference-intro{margin:16px 0 12px}.property-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.property-reference-group{border:2px solid var(--pink-pale);border-radius:var(--radius-md);background:var(--white);margin:0;padding:14px}.property-reference-group h3{color:var(--purple-deep);margin:0 0 10px;font-size:1rem}.property-reference-group dl,.property-reference-group p{margin:0}.property-reference-group dl>div{border-top:1px dashed var(--pink-pale);grid-template-columns:minmax(7em,.8fr) minmax(0,1.2fr);align-items:center;gap:8px;padding:8px 0;display:grid}.property-reference-group dt{font-weight:700}.property-reference-group dd{margin:0}.property-reference-group dl+p,.property-reference-group p+p{margin-top:10px}.nesting-head{margin-top:52px}.nesting-lesson{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;display:grid}.nesting-copy>p,.indent-note>p{margin-top:0}.nesting-map{margin-top:18px}.nesting-parent{border:3px solid var(--cyan-pale);border-radius:var(--radius-md);color:var(--ink-soft);background:#f5fcff;gap:10px;padding:16px;display:grid}.nesting-child{border-left:5px solid var(--pink);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--white);color:var(--ink);margin-left:22px;padding:10px 12px}.indent-note{border-radius:var(--radius-md);background:var(--pink-ultra-pale);padding:16px}.indent-note>strong{color:var(--purple-deep);margin-bottom:8px;font-size:1.05rem;display:block}.indent-note .code-block{margin:14px 0 8px}.indent-marker{color:var(--pink-deep);font-size:.82rem;font-weight:700}.nesting-tip{margin-top:18px}.practice-summary-head{margin-top:52px}.pause-note{color:var(--ink-soft);text-align:center;margin:22px 0 0;font-size:.88rem}main>section{scroll-margin-top:92px}@media (width<=720px){.start-here,.lesson-plan{padding:22px 18px}.tiny-steps,.sample-grid,.feature-grid,.playground-task-content{grid-template-columns:1fr}.task-next{justify-self:start}.lesson-goal{display:block}.lesson-goal strong{margin-bottom:4px;display:block}.practice-step>summary{gap:10px;padding:14px}.practice-step-body{padding:14px}.practice-step-body .playground{--pg-height:200px}.color-name-picks{grid-template-columns:1fr}.color-library-grid,.property-reference-grid{grid-template-columns:1fr 1fr}.property-reference-group{grid-column:1/-1}.property-reference-group dl>div{grid-template-columns:1fr;gap:4px}.hex-anatomy{gap:3px}.hex-anatomy>span{min-width:52px;padding-inline:7px}.lesson-path-more>summary{grid-template-columns:minmax(0,1fr) auto;padding:16px}.lesson-path-more-body{padding:0 14px 4px}.nesting-lesson{grid-template-columns:1fr}.nesting-child{margin-left:14px}}.no-break{word-break:keep-all}.term{color:inherit;cursor:help;word-break:keep-all;border-bottom:2px dotted;font-weight:700;display:inline-block;position:relative}.term:focus-visible{outline:2px solid var(--cyan-deep);outline-offset:3px;border-radius:4px}.term-tip{background:var(--purple-deep);color:#fff;width:max-content;max-width:min(260px,78vw);box-shadow:var(--shadow-card);opacity:0;visibility:hidden;pointer-events:none;z-index:30;text-align:left;white-space:normal;border-radius:12px;padding:10px 14px;font-size:.78rem;font-weight:500;line-height:1.6;transition:opacity .15s,transform .15s;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)translateY(4px)}.term-tip:after{content:"";border:6px solid #0000;border-top-color:var(--purple-deep);position:absolute;top:100%;left:50%;transform:translate(-50%)}.term:hover .term-tip,.term:focus .term-tip,.term.is-open .term-tip{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}table.compat{border-collapse:collapse;width:100%;margin:18px 0;font-size:.88rem}table.compat th,table.compat td{border:2px solid var(--pink-pale);text-align:left;padding:8px 12px}table.compat th{background:var(--pink-ultra-pale)}