.component-guide { margin:0;background:#fff;color:#171717;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif; -webkit-font-smoothing:antialiased; }
.component-guide::before{display:none}.component-guide *{box-sizing:border-box}.component-guide [hidden]{display:none!important}
.component-guide .tb-brand-mark{width:48px;height:48px;display:block}.component-guide a{color:inherit}.component-guide button{font:inherit;cursor:pointer}.component-guide :is(button,a,summary):focus-visible{outline:2px solid #655cff;outline-offset:4px}
.component-guide main{width:min(1120px,calc(100% - 64px));margin:0 auto;padding:150px 0 100px}.guide-intro{text-align:center;margin-bottom:64px}.guide-intro h1,.detail-heading h1{font-size:clamp(32px,4vw,56px);line-height:1.35;letter-spacing:-.045em;margin:0 0 20px;font-weight:700}.guide-intro p,.detail-heading>p{font-size:20px;line-height:1.8;color:#727272;margin:0 auto;max-width:660px}
.component-guide h2{font-size:26px;line-height:1.5;letter-spacing:-.035em;font-weight:650;margin:0 0 24px}.guide-categories{max-width:680px;margin:0 auto 76px;text-align:center}.guide-categories>div{display:flex;gap:12px}.guide-categories a{background:#f5f5f5;border-radius:16px;padding:16px;display:flex;align-items:center;gap:12px;flex:1;text-align:left;font-weight:600;text-decoration:none}.category-symbol{font-size:24px;width:30px;text-align:center}.guide-section{margin-bottom:72px;scroll-margin-top:100px}.guide-section>h2{text-align:center}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.guide-card{text-decoration:none;display:block;min-width:0}.guide-card-art{height:220px;border-radius:20px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;gap:10px;position:relative}.guide-card h3{font-size:19px;font-weight:600;margin:16px 0 4px}.guide-card p{color:#727272;font-size:15px;line-height:1.7;margin:0}.mini-pill{display:inline-block;background:#171717;color:white;padding:12px 24px;border-radius:99px;font-size:15px}.mini-tabs{display:flex;background:#e9e9e9;border-radius:14px;padding:5px;gap:10px;font-size:14px;white-space:nowrap}.mini-tabs span{padding:9px 13px}.mini-tabs span:first-child{background:white;border-radius:10px}.mini-accordion{width:90%;display:grid;gap:8px}.mini-accordion span{display:block;padding:12px 16px;background:white;border-radius:10px;font-size:13px}.mini-slide{height:118px;width:100px;flex-shrink:0;border-radius:14px;background:#ccd8f4}.mini-slide:nth-child(2){background:#f5d7bb;transform:translateY(12px)}.mini-slide:nth-child(3){background:#d9e8d2}.mini-menu{display:grid;gap:12px;width:170px;background:white;box-shadow:0 10px 30px #0000000a;padding:20px;border-radius:16px;font-size:14px}.mini-marquee{font-size:25px;font-weight:600;white-space:nowrap;letter-spacing:-.04em}.guide-faq{max-width:720px;margin:0 auto}.guide-faq>h2{text-align:center}.guide-faq details{padding:20px 0;border-bottom:1px solid #ececec}.guide-faq summary{font-size:17px;font-weight:600;cursor:pointer}.guide-faq details p{font-size:16px;line-height:1.9;color:#666;margin:14px 0 0}.guide-back{font-size:15px;text-underline-offset:4px}.detail-heading{text-align:center;margin:40px auto}.demo-section{max-width:800px;margin:0 auto 52px}.demo-section h2{font-size:20px}.guide-live-demo{background:#f5f5f5;border-radius:24px;min-height:300px;padding:48px;display:flex;align-items:center;justify-content:center;overflow:hidden}.demo-hint{text-align:center;font-size:14px;color:#737373;margin-top:16px;line-height:1.7}.guide-explanation{max-width:680px;margin:auto}.guide-explanation h2{margin:32px 0 12px;font-size:22px}.guide-explanation p{font-size:17px;line-height:1.95;color:#5d5d5d}.guide-related{max-width:680px;margin:56px auto 0}.guide-related>div{display:flex;gap:12px;flex-wrap:wrap}.guide-related a{font-size:15px;background:#f5f5f5;border-radius:99px;padding:10px 18px;text-decoration:none}
.demo-action{border:0;border-radius:99px;background:#171717;color:white;padding:16px 28px;min-width:170px;transition:transform .18s ease,background .18s ease}.demo-action:active{transform:scale(.96)}.demo-action[aria-pressed=true]{background:#28754d}.demo-tabs{width:100%;max-width:400px}.demo-tabs [role=tablist]{display:flex;padding:5px;background:#e8e8e8;border-radius:14px;gap:4px}.demo-tabs [role=tab]{flex:1;border:0;padding:12px 6px;border-radius:10px;background:transparent;font-size:15px}.demo-tabs [aria-selected=true]{background:white;box-shadow:0 2px 8px #00000008}.demo-tab-panel{background:white;border-radius:16px;margin-top:16px;padding:24px;line-height:1.8;font-size:15px;min-height:100px}.demo-accordion{width:100%;max-width:380px;display:grid;gap:10px}.demo-accordion details{border-radius:14px;background:white;padding:18px;font-size:15px}.demo-accordion summary{cursor:pointer;font-weight:600}.demo-accordion p{margin:12px 0 0;line-height:1.8;color:#666}.demo-carousel{width:100%;max-width:460px}.demo-carousel-rail{display:flex;gap:16px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.demo-carousel-rail>div{flex:0 0 100%;height:180px;display:grid;place-items:center;border-radius:16px;background:#ccd8f4;scroll-snap-align:center;font-size:26px;font-weight:600}.demo-carousel-rail>div:nth-child(2){background:#f5d7bb}.demo-carousel-rail>div:nth-child(3){background:#d9e8d2}.demo-carousel-controls{display:flex;justify-content:center;gap:12px;margin-top:18px}.demo-carousel-controls button{border:0;border-radius:99px;background:white;padding:8px 20px;font-size:14px}.demo-menu-wrap{position:relative;width:220px;min-height:218px;display:flex;justify-content:flex-end;align-items:flex-start}.demo-menu-trigger{background:white;border:0;border-radius:99px;padding:12px 20px;font-size:15px}.demo-menu-panel{position:absolute;top:54px;right:0;display:grid;width:200px;padding:8px;border-radius:16px;background:white;box-shadow:0 12px 32px #00000012;transform-origin:top right;animation:guide-menu-in .22s cubic-bezier(.22,1,.36,1)}.demo-menu-panel a{padding:12px;text-decoration:none;font-size:15px}.demo-menu-panel a:hover{background:#f5f5f5;border-radius:8px}@keyframes guide-menu-in{from{opacity:0;transform:scale(.92) translateY(-6px)}to{opacity:1;transform:none}}.demo-marquee-wrap{width:100%;text-align:center;overflow:hidden}.demo-marquee-track{width:max-content;display:flex;animation:guide-marquee 12s linear infinite}.demo-marquee-track span{font-size:36px;font-weight:650;padding-right:32px;white-space:nowrap}.demo-marquee-wrap button{margin-top:32px;border:0;background:white;border-radius:99px;padding:10px 20px;font-size:14px}@keyframes guide-marquee{to{transform:translateX(-50%)}}
.component-guide .public-footer{background:#111;color:#dedede;padding:64px max(24px,calc((100vw - 1120px)/2)) 32px;margin:0}.component-guide .footer-main{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}.component-guide .footer-main nav{display:flex;flex-direction:column;gap:18px}.component-guide .footer-main nav a{font-size:16px;font-weight:700;text-decoration:none}.component-guide .footer-main .brand{font-size:26px}.component-guide .footer-main>div>p{font-size:14px;color:#999;margin-top:16px}.component-guide .footer-bottom{font-size:13px;color:#8b8b8b;margin-top:52px;display:flex;justify-content:space-between}
@media(max-width:700px){.component-guide main{width:calc(100% - 40px);padding-top:128px;padding-bottom:72px}.guide-intro{margin-bottom:50px}.guide-intro p,.detail-heading>p{font-size:17px;line-height:1.8}.component-guide h2{font-size:22px}.guide-categories{margin-bottom:48px}.guide-categories>div{flex-direction:column;gap:10px}.guide-categories a{padding:14px 16px;font-size:16px}.guide-grid{grid-template-columns:1fr;gap:32px}.guide-card-art{height:225px}.guide-card h3{font-size:19px;margin-top:14px}.guide-card p{font-size:15px}.guide-section{margin-bottom:52px}.guide-live-demo{padding:24px;min-height:280px}.guide-explanation p{font-size:16px}.component-guide .footer-main{grid-template-columns:1fr 1fr;gap:30px 16px}.component-guide .footer-main>div{grid-column:1/-1}.component-guide .footer-main nav a{font-size:16px}.demo-tabs [role=tab]{font-size:13px}.demo-marquee-track span{font-size:27px}}
@media(prefers-reduced-motion:reduce){.demo-action{transition:none}.demo-menu-panel{animation:none}.demo-marquee-track{animation-play-state:paused}}