.skill-hero__support { margin:18px 0 0; color:#dbe2dc; font-size:14px; letter-spacing:.04em; }
.skill-hero .eyebrow { font-size:18px; }
.skill-hero h1 { display:flex; align-items:center; gap:.16em; letter-spacing:-.045em; }
.skill-hero h1 > span { display:block; }
.skill-hero__mark { flex:0 0 auto; width:.94em; height:.94em; color:var(--skill-lime); fill:currentColor; }
.skill-benefits { padding-top:0; padding-bottom:0; background:#162224; }
.benefit-list { width:min(1120px,100%); margin:0 auto; padding:clamp(42px,6vw,76px) 0; color:#fff; }
.benefit-list p { margin:0; padding:22px 0; border-top:1px solid rgba(255,255,255,.2); font-family:Outfit,"Noto Sans JP",sans-serif; font-size:clamp(22px,2.4vw,34px); line-height:1.5; letter-spacing:-.03em; }
.benefit-list__emphasis { text-decoration:underline; text-decoration-color:var(--skill-lime); text-decoration-thickness:4px; text-underline-offset:.17em; }
.benefit-list p:last-child { border-bottom:1px solid rgba(255,255,255,.2); }
.skill-install { background:#fff; }
.install-methods { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:52px; }
.install-method { padding:38px; background:#f1f4ed; }
.install-method__platform { margin:0; font-family:Outfit,"Noto Sans JP",sans-serif; font-size:32px; line-height:1.15; letter-spacing:-.04em; }
.platform-card__tag--codex { background:linear-gradient(90deg,#2d6bff,#8b5cf6); -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent; }
.platform-card__tag--claude { color:#d97757 !important; }
.install-method__action { margin:14px 0 0; color:#334445; font-size:16px; font-weight:700; }
.install-method__instruction { margin:10px 0 0; line-height:1.8; }
.install-method code,.skill-use__body code { display:block; margin:20px 0 0; padding:13px 15px; overflow:auto; color:#334445; background:#fff; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; line-height:1.8; white-space:nowrap; }
.install-copy { position:relative; margin-top:20px; }
.install-copy + .install-copy { margin-top:10px; }
.install-copy code { margin:0; padding-right:54px; }
.copy-button { position:absolute; top:8px; right:8px; display:grid; width:34px; height:34px; padding:0; place-items:center; color:#536061; border:0; border-radius:6px; background:transparent; cursor:pointer; }
.copy-button:hover,.copy-button:focus-visible { color:#243a3a; background:#e7ece5; outline:none; }
.copy-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.copy-button.is-copied { color:#4d7900; background:#e3f0c7; }
.copy-button.is-copied svg { display:none; }
.copy-button.is-copied::before { content:"✓"; font-size:18px; font-weight:700; }
.skill-use { color:#fff; background:#2e4b4b; }
.skill-use .eyebrow { color:#b9e43d; }
.skill-use__body { max-width:720px; margin-top:42px; }
.skill-use__lead { margin:0; color:#dbe2dc; font-size:18px; line-height:1.9; }
.skill-prompt { margin-top:24px; padding:22px 26px; color:#243a3a; background:#fff; border-radius:16px; }
.skill-faq { background:#fff; }
.skill-faq__list { max-width:780px; margin-top:42px; border-top:1px solid #dce3df; }
.skill-faq details { border-bottom:1px solid #dce3df; }
.skill-faq summary { padding:22px 36px 22px 0; cursor:pointer; font-size:18px; font-weight:700; line-height:1.6; }
.skill-faq details p { margin:0; padding:0 36px 23px 0; color:#536061; line-height:1.9; }
.skill-prompt p { margin:0; font-size:clamp(18px,2vw,24px); line-height:1.7; letter-spacing:-.02em; }
.skill-prompt__text { color:#687577; }
.skill-prompt__keyword { display:inline-block; font-weight:700; background:linear-gradient(90deg,#833ab4 0%,#c13584 35%,#e1306c 62%,#f56040 82%,#833ab4 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:skill-keyword-shift 8s ease-in-out infinite; }
@keyframes skill-keyword-shift { 0%,100% { background-position:0 50%; } 50% { background-position:100% 50%; } }
.skill-prompt.is-typing p::after { display:inline-block; width:2px; height:1.05em; margin-left:4px; content:""; vertical-align:-.14em; background:#c13584; animation:skill-typewriter-cursor .65s step-end infinite; }
@keyframes skill-typewriter-cursor { 50% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .skill-prompt__keyword { animation:none; } }
@media (min-width:1051px) { .skill-intro h2 { white-space:nowrap; } }
@media (min-width:761px) and (max-width:1050px) { .skill-intro { grid-template-columns:1fr; gap:35px; } }
@media (min-width:761px) { .skill-hero h1 { font-size:80px; }.skill-section h2 { font-size:50px; }.skill-intro h2 { font-size:40px; }.benefit-list p { font-size:25px; } }
@media (max-width:760px) { .skill-hero h1 { font-size:clamp(44px,13vw,50px); }.skill-intro h2 { font-size:clamp(26px,8vw,32px); letter-spacing:-.07em; white-space:nowrap; }.benefit-list p { font-size:20px; }.install-methods { grid-template-columns:1fr; margin-top:38px; }.install-method { padding:28px; }.install-method code,.skill-use__body code { white-space:normal; }.benefit-list { padding:32px 0; } }
