: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}.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-body{grid-template-columns:1fr 1fr;display:grid}@media (width<=720px){.playground-body{grid-template-columns:1fr}}.pg-editors{border-right:3px solid var(--lavender);flex-direction:column;display:flex}@media (width<=720px){.pg-editors{border-right:none;border-bottom:3px solid var(--lavender)}}.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}.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)}