/* YouTube 洋楽スタジオ（/youtube/）
   明るい「放送スタジオ」：赤い再生ボタン、ステッカー、ミキサー卓のようなボタン。シアターだけ紫の舞台（中のパネルは白で読みやすく） */
.p-yt{--k:#16131c;--red:#ff1f3d;--red2:#ff5c39;--vi:#7c4dff;--tq:#00a99d;--or:#ff8a00;--bl:#0a84ff;--yl:#ffd23f;--paper:#fff}
.p-yt main{overflow-x:clip}
.nw{display:inline-block}

/* ---------- ヒーロー ---------- */
.yt-hero{position:relative;overflow:hidden;padding:clamp(26px,5vw,60px) 0 26px;background:radial-gradient(760px 420px at 85% 10%,rgba(255,31,61,.16),transparent 70%),radial-gradient(620px 420px at 0% 100%,rgba(124,77,255,.16),transparent 70%),linear-gradient(180deg,#fff4f2,#fbf7ff 70%,var(--bg));border-bottom:1px solid var(--line)}
.yt-hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(22,19,28,.035) 0 1px,transparent 1px 4px);pointer-events:none;mask-image:linear-gradient(180deg,#000,transparent 85%)}
.yt-hero-bg i{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;animation:yt-float 9s ease-in-out infinite}
.yt-hero-bg i:nth-child(1){width:90px;height:90px;left:6%;top:12%;background:radial-gradient(circle at 35% 35%,#fff,var(--yl))}
.yt-hero-bg i:nth-child(2){width:46px;height:46px;left:44%;top:6%;background:radial-gradient(circle at 35% 35%,#fff,var(--tq));animation-delay:-3s}
.yt-hero-bg i:nth-child(3){width:64px;height:64px;left:52%;bottom:16%;background:radial-gradient(circle at 35% 35%,#fff,var(--vi));animation-delay:-6s}
@keyframes yt-float{50%{transform:translateY(-14px)}}
.yt-hero-in{position:relative;z-index:1;display:grid;gap:26px;align-items:center}
@media(min-width:980px){.yt-hero-in{grid-template-columns:1.1fr .9fr;gap:44px}}
.yt-k{display:inline-flex;align-items:center;gap:9px;padding:6px 16px 5px 6px;border-radius:999px;background:var(--k);color:#fff;font:400 16px/1 var(--disp);letter-spacing:.14em}
.yt-k-play{display:grid;place-items:center;width:30px;height:21px;border-radius:7px;background:var(--red);font-size:13px}
.yt-h1{margin:16px 0 14px;font-size:clamp(32px,5.6vw,66px);font-weight:900;line-height:1.14;letter-spacing:-.03em;color:var(--k)}
.yt-h1 em{font-size:.88em;white-space:nowrap;font-style:normal;position:relative;display:inline-block;color:#fff;padding:0 .18em;margin:.06em 0;background:linear-gradient(100deg,var(--red),var(--red2));border-radius:.22em;transform:rotate(-1.5deg);box-shadow:0 .12em 0 var(--k)}
.yt-h1 small{display:block;margin-top:16px;font-size:clamp(13px,1.5vw,16px);font-weight:700;letter-spacing:0;line-height:1.6;color:#4a3d50}
.yt-lead{font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.95;color:#3b3142;max-width:640px}
.yt-lead b{color:var(--k);background:linear-gradient(transparent 62%,rgba(255,210,63,.65) 62%)}
.yt-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.yt-badges li{padding:6px 12px;border-radius:999px;background:#fff;border:2px solid var(--k);font-weight:900;font-size:13px;box-shadow:2px 2px 0 var(--k)}
.yt-hero-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.yt-go{position:relative;display:grid;padding:15px 32px 12px;border-radius:20px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;line-height:1.25;border:3px solid var(--k);box-shadow:0 7px 0 var(--k);transition:transform .12s,box-shadow .12s;overflow:hidden}
.yt-go::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:yt-shine 3s ease-in-out infinite}
@keyframes yt-shine{60%,100%{left:130%}}
.yt-go b{font-size:clamp(20px,2.6vw,26px);font-weight:900}
.yt-go small{font-size:12.5px;font-weight:700;opacity:.92}
.yt-go:hover{transform:translateY(-2px);box-shadow:0 9px 0 var(--k)}
.yt-go:active{transform:translateY(5px);box-shadow:0 2px 0 var(--k)}
.yt-sub{font-weight:900;padding:11px 18px;border-radius:999px;background:#fff;border:2px solid var(--k)}
.yt-sub:hover{background:var(--yl)}

/* テレビの絵（本物のサムネイル） */
.yt-hero-art{position:relative;max-width:480px;width:100%;justify-self:center}
.yt-tv{position:relative;padding:14px;border-radius:26px;background:var(--k);box-shadow:0 26px 60px -20px rgba(22,19,28,.55),inset 0 0 0 2px rgba(255,255,255,.08);transform:rotate(2deg)}
.yt-tv-scr{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.yt-tv-scr img{width:100%;height:100%;object-fit:cover;opacity:.92}
.yt-tv-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:76px;height:54px;margin:-27px 0 0 -38px;border-radius:16px;background:var(--red);color:#fff;font-size:30px;box-shadow:0 6px 20px rgba(0,0,0,.4);animation:yt-pulse 2s ease-in-out infinite}
@keyframes yt-pulse{50%{transform:scale(1.08)}}
.yt-tv-bar{position:absolute;left:12px;right:12px;bottom:10px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.yt-tv-bar i{display:block;height:100%;width:40%;background:var(--red);animation:yt-prog 8s linear infinite}
@keyframes yt-prog{from{width:0}to{width:100%}}
.yt-tv-list{display:grid;gap:6px;margin-top:10px}
.yt-tv-list p{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:5px;border-radius:10px;background:rgba(255,255,255,.07);color:#fff;animation:yt-in .6s backwards;animation-delay:calc(var(--i) * .12s + .2s)}
.yt-tv-list p:first-child{background:rgba(255,31,61,.35)}
@keyframes yt-in{from{opacity:0;transform:translateX(16px)}}
.yt-tv-list img{width:64px;height:36px;object-fit:cover;border-radius:6px}
.yt-tv-list span{min-width:0;line-height:1.25}
.yt-tv-list b,.yt-tv-list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.yt-tv-list b{font-size:13px}
.yt-tv-list small{font-size:11px;opacity:.7}
.yt-stk{position:absolute;display:grid;place-items:center;text-align:center;font-weight:900;line-height:1.15;border:3px solid var(--k);box-shadow:3px 3px 0 var(--k)}
.yt-stk.s1{left:-14px;top:-14px;padding:8px 14px;border-radius:12px;background:var(--yl);transform:rotate(-8deg);font-size:16px}
.yt-stk.s2{right:-12px;bottom:84px;width:92px;height:92px;border-radius:50%;background:var(--tq);color:#fff;transform:rotate(10deg);font-size:15px}
@media(max-width:600px){.yt-tv-list p:nth-child(n+4){display:none}.yt-stk.s1{left:-4px}.yt-stk.s2{right:-4px;width:78px;height:78px;font-size:13px}}

/* アプリの入口 */
.yt-apps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
@media(min-width:760px){.yt-apps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.yt-apps{grid-template-columns:repeat(5,minmax(0,1fr))}}
.yt-app{position:relative;display:grid;align-content:start;gap:2px;padding:14px 14px 12px;border-radius:18px;background:#fff;border:2px solid var(--k);box-shadow:4px 4px 0 var(--k);transition:transform .15s,box-shadow .15s;overflow:hidden}
.yt-app::before{content:"";position:absolute;right:-26px;top:-26px;width:74px;height:74px;border-radius:50%;background:var(--c);opacity:.18}
.yt-app:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--k)}
.yt-app small{font:400 13px/1 var(--disp);letter-spacing:.12em;color:#fff;background:var(--c);justify-self:start;padding:4px 8px 3px;border-radius:6px}
.yt-app b{margin-top:6px;font-size:16.5px;font-weight:900;line-height:1.3}
.yt-app em{font:400 13px/1.1 var(--disp);letter-spacing:.1em;color:var(--c);font-style:normal}
.yt-app span{font-size:12.5px;line-height:1.55;color:var(--tx2);margin-top:4px}
@media(max-width:600px){.yt-app span{display:none}.yt-app:last-child{grid-column:1/-1}}

/* ---------- 共通 ---------- */
.yt-sec{padding:clamp(40px,6vw,72px) 0;scroll-margin-top:64px}
.yt-sh{margin-bottom:22px}
.yt-sh-n{display:flex;align-items:center;gap:10px;font:400 15px/1 var(--disp);letter-spacing:.16em;color:var(--mut)}
.yt-sh-n b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--red);color:#fff;font-size:22px;letter-spacing:0;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--k)}
.yt-loop .yt-sh-n b{background:var(--tq)}.yt-dojo .yt-sh-n b{background:var(--or)}.yt-tips .yt-sh-n b{background:var(--bl)}.yt-th .yt-sh-n b{background:var(--yl);color:var(--k)}
.yt-sh h2{margin-top:12px;font-size:clamp(26px,3.6vw,40px);font-weight:900;line-height:1.25;letter-spacing:-.02em}
.yt-sh h2 small{display:block;margin-top:6px;font-size:clamp(13px,1.4vw,15px);font-weight:700;letter-spacing:0;color:var(--tx2)}
.yt-intro{max-width:780px;margin:-6px 0 20px;line-height:1.9}
.yt-intro b{background:linear-gradient(transparent 62%,rgba(255,210,63,.6) 62%)}
.yt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:999px;background:#fff;border:2px solid var(--k);font-weight:900;font-size:14px;line-height:1.3;transition:transform .12s,background .12s}
.yt-btn:hover{background:#fff6cf;transform:translateY(-1px)}
.yt-btn.red{background:var(--red);color:#fff}
.yt-btn.red:hover{background:#e3122f}
.yt-hint,.yt-small{font-size:13px;color:var(--mut);line-height:1.7}
.yt-none{padding:14px;font-size:14px;color:var(--mut)}
.yt-none a{color:var(--red);font-weight:700}
.yt-load{padding:20px;color:var(--mut)}

/* ---------- 工房 ---------- */
.yt-maker{background:linear-gradient(180deg,var(--bg),#fff 40%,var(--bg))}
.yt-mk{display:grid;gap:18px;align-items:start}
@media(min-width:1100px){.yt-mk{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px}.yt-list{position:sticky;top:76px}}
.yt-src{container-type:inline-size}
.yt-src,.yt-list{border-radius:22px;background:#fff;border:2px solid var(--k);box-shadow:5px 5px 0 var(--k);min-width:0}
.yt-src{padding:14px}
.yt-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:4px;border-radius:16px;background:var(--bg2);margin-bottom:12px}
.yt-tabs button{padding:9px 6px;border-radius:12px;font-weight:900;font-size:13.5px;white-space:nowrap}
.yt-tabs button[aria-selected=true]{background:var(--k);color:#fff}
.yt-tabs i{font-style:normal;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:11px}
.yt-tabs i:empty{display:none}
@container (min-width:560px){.yt-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.yt-pk-h{margin:14px 0 6px;font-weight:900;font-size:13px;color:var(--mut);letter-spacing:.06em}
.yt-pk-g,.yt-packs>.yt-pk.dice{display:grid;gap:8px}
@container (min-width:500px){.yt-pk-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.yt-packs{max-height:640px;overflow-y:auto;padding:2px 4px 6px 2px;overscroll-behavior:contain}
.yt-pk{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;padding:8px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line);text-align:left;transition:transform .12s,border-color .12s,background .12s}
.yt-pk:hover{border-color:var(--k);background:#fff;transform:translateY(-1px)}
.yt-pk.pop{animation:yt-pop .45s}
@keyframes yt-pop{40%{transform:scale(1.04);background:#fff6cf}}
.yt-pk-th{position:relative;width:76px;height:46px}
.yt-pk-th>img{position:absolute;width:56px;height:32px;object-fit:cover;border-radius:6px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.yt-pk-th>img:nth-child(1){left:0;top:0;z-index:3}.yt-pk-th>img:nth-child(2){left:10px;top:7px;z-index:2}.yt-pk-th>img:nth-child(3){left:20px;top:14px;z-index:1}
.yt-pk-th i{display:grid;place-items:center;width:76px;height:46px;font-size:30px;font-style:normal;border-radius:10px;background:linear-gradient(135deg,var(--yl),#ff9ec0)}
.yt-pk.dice{background:linear-gradient(135deg,#fff8d6,#ffeef5);border-color:var(--k)}
.yt-pk-t{min-width:0;line-height:1.35}
.yt-pk-t b{display:block;font-size:14px;font-weight:900}
.yt-pk-t small{font-size:11.5px;color:var(--mut)}
.yt-pk-add{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:20px}

.yt-q{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 14px;border-radius:999px;background:var(--bg);border:2px solid var(--k)}
.yt-q-i{font-size:18px;color:var(--mut);display:flex}
.yt-q input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;padding:8px 4px;outline:none}
.yt-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.yt-chips button{padding:5px 11px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:12.5px}
.yt-chips button[aria-pressed=true]{background:var(--k);border-color:var(--k);color:#fff}
.yt-res{display:grid;gap:4px;max-height:560px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.yt-res.sm{max-height:320px}
.yt-r{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;width:100%;padding:6px;border-radius:12px;text-align:left;transition:background .12s}
.yt-r:hover{background:var(--bg)}
.yt-r img{width:72px;height:40px;object-fit:cover;border-radius:7px}
.yt-r span{min-width:0;line-height:1.3}
.yt-r b{display:block;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.yt-r small{display:block;font-size:12px;color:var(--mut);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.yt-r i{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;border:2px solid var(--k);font-style:normal;font-weight:900;font-size:16px;background:#fff}
.yt-r[data-sm] i{font-size:12px}
.yt-r.in i{background:var(--tq);border-color:var(--tq);color:#fff}
.yt-more button{width:100%;padding:10px;border-radius:12px;background:var(--bg2);font-weight:900;font-size:13.5px}
.yt-steps3{display:grid;gap:6px;margin-bottom:10px}
.yt-steps3 li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:700}
.yt-steps3 li>b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--k);color:#fff;font-size:12px}
.yt-steps3 a{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--red)}
.yt-steps3 a svg{width:12px;height:12px}
#yt-url,.yt-panel textarea{width:100%;border:2px solid var(--k);border-radius:14px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.6;background:var(--bg);resize:vertical}
.yt-url-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.yt-url-msg{margin-top:8px;font-size:13.5px;line-height:1.7}
.yt-fav>.yt-btn{margin-bottom:8px}

/* リスト（右） */
.yt-list{overflow:hidden}
.yt-jk{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px;background:linear-gradient(135deg,#2a1748,#5a1d5e 55%,#a3123a);color:#fff}
.yt-jk-art{display:grid;grid-template-columns:1fr 1fr;width:78px;height:78px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.12);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.yt-jk-art img{width:100%;height:100%;object-fit:cover}
.yt-jk-art[data-n="1"],.yt-jk-art[data-n="0"]{grid-template-columns:1fr}
.yt-jk-art[data-n="1"] img{grid-column:1/-1}
.yt-jk-art[data-n="2"] img,.yt-jk-art[data-n="3"] img:first-child{grid-row:span 2}
.yt-jk-art i{display:grid;place-items:center;font-size:30px;font-style:normal;opacity:.6}
.yt-jk-t{min-width:0}
.yt-jk-k{font:400 13px/1 var(--disp);letter-spacing:.16em;opacity:.75}
.yt-name{width:100%;margin:4px 0 2px;padding:2px 6px;border:1.5px dashed rgba(255,255,255,.35);border-radius:8px;background:transparent;color:#fff;font:inherit;font-size:clamp(18px,2.2vw,22px);font-weight:900}
.yt-name:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.1)}
.yt-jk-m{font-size:13px;opacity:.85}
.yt-jk-sw{grid-column:1/-1;display:flex;gap:6px}
.yt-jk-sw select{flex:1;min-width:0;padding:7px 10px;border-radius:10px;border:0;font:inherit;font-size:13.5px;font-weight:700;background:rgba(255,255,255,.95);color:var(--k)}
.yt-ico{width:38px;border-radius:10px;background:var(--yl);color:var(--k);font-weight:900;font-size:20px}
.yt-tools{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--bg)}
.yt-tools button{padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;color:var(--tx2)}
.yt-tools button:hover{background:#fff;color:var(--k)}
.yt-items{max-height:440px;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.yt-it{display:grid;grid-template-columns:auto auto 72px 1fr auto;gap:8px;align-items:center;padding:6px;border-radius:12px;background:#fff;transition:background .15s}
.yt-it:hover{background:var(--bg)}
.yt-it.drag{background:#fff6cf;box-shadow:0 6px 18px rgba(0,0,0,.15);position:relative;z-index:2}
.yt-it.flash{animation:yt-flash 1s}
@keyframes yt-flash{0%{background:#fff0a8}}
.yt-it.nx{opacity:.75}
.yt-it-h{cursor:grab;touch-action:none;padding:8px 2px;color:#b9b2c2;font-weight:900;letter-spacing:-2px;user-select:none}
.yt-it-n{font:400 18px/1 var(--disp);color:var(--mut);min-width:20px;text-align:right}
.yt-it-p{position:relative;width:72px;height:40px;border-radius:7px;overflow:hidden}
.yt-it-p img{width:100%;height:100%;object-fit:cover}
.yt-it-p i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff;font-style:normal;opacity:0;transition:.15s}
.yt-it-p:hover i,.yt-it-p:focus-visible i{opacity:1}
.yt-it-t{min-width:0;line-height:1.3}
.yt-it-t a,.yt-it-t b{display:block;font-size:14px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.yt-it-t a:hover{color:var(--red)}
.yt-it-t small{display:block;font-size:11.5px;color:var(--mut);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.yt-it-t em{font-style:normal;color:var(--or)}
.yt-it-b{display:flex;gap:2px}
.yt-it-b button{width:28px;height:28px;border-radius:8px;font-size:11px;color:var(--mut)}
.yt-it-b button:hover{background:var(--bg2);color:var(--k)}
.yt-it-b button[data-rm]:hover{background:#ffe1e6;color:var(--red)}
@media(max-width:520px){.yt-it{grid-template-columns:auto 60px 1fr auto;gap:6px}.yt-it-n{display:none}.yt-it-p{width:60px;height:34px}.yt-it-b button[data-up],.yt-it-b button[data-dn]{display:none}}
.yt-empty{display:flex;align-items:center;gap:12px;padding:18px 16px}
.yt-empty img{width:80px;height:80px}
.yt-empty p{font-size:14px;line-height:1.7;color:var(--tx2)}
.yt-empty b{display:block;font-size:16px;color:var(--k)}
.yt-empty[hidden]{display:none}
.yt-out{padding:14px;border-top:2px solid var(--k);background:linear-gradient(180deg,#fff,#fff8f6)}
.yt-big{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;border:3px solid var(--k);box-shadow:0 6px 0 var(--k);transition:transform .12s,box-shadow .12s}
.yt-big:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--k)}
.yt-big:active{transform:translateY(4px);box-shadow:0 2px 0 var(--k)}
.yt-big-i{display:grid;place-items:center;flex:none;width:54px;height:38px;border-radius:12px;background:#fff;color:var(--red);font-size:22px}
.yt-big b{display:block;font-size:clamp(16px,2vw,19px);font-weight:900;line-height:1.3}
.yt-big small{font-size:12px;opacity:.92}
.yt-chunks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.yt-big2{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;width:100%;margin-top:10px;padding:10px 16px;border-radius:16px;background:#2a1748;color:#fff;text-align:left;border:2px solid var(--k)}
.yt-big2 span{grid-row:1/3;font-size:24px}
.yt-big2 b{font-size:15px;font-weight:900;line-height:1.3}
.yt-big2 small{font-size:12px;opacity:.8}
.yt-big2:hover{background:#3d2266}
.yt-out-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.yt-o{display:grid;justify-items:center;gap:1px;padding:10px 4px 8px;border-radius:14px;background:#fff;border:1.5px solid var(--line);text-align:center;line-height:1.3;transition:.12s}
.yt-o:hover,.yt-o.on{border-color:var(--k);background:#fff6cf}
.yt-o span{font-size:22px}
.yt-o b{font-size:13px;font-weight:900}
.yt-o small{font-size:10.5px;color:var(--mut)}
.yt-panel{margin-top:12px;padding:14px;border-radius:16px;background:#fff;border:2px dashed var(--k);animation:yt-in .3s}
.yt-panel h3{font-size:16px;font-weight:900;margin-bottom:6px}
.yt-panel>p{font-size:13.5px;line-height:1.75;color:var(--tx2);margin-bottom:8px}
.yt-panel textarea{font-size:12.5px;margin-bottom:8px}
.lp-cp{display:flex;gap:6px}
.lp-cp input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);font:inherit;font-size:12.5px;color:var(--tx2)}
.lp-cp button{flex:none;padding:0 14px;border-radius:10px;background:var(--k);color:#fff;font-weight:900;font-size:13px}
.yt-share{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.yt-qr{display:grid;gap:12px;align-items:center}
@media(min-width:560px){.yt-qr{grid-template-columns:200px 1fr}}
.yt-qr svg{width:200px;height:200px;border-radius:12px;border:2px solid var(--k);justify-self:center}
.yt-qr p{font-size:13.5px;line-height:1.75}
.yt-nick{display:grid;gap:4px;margin:8px 0;font-size:13px;font-weight:700}
.yt-nick input{padding:9px 12px;border-radius:10px;border:2px solid var(--k);font:inherit;font-size:16px;max-width:260px}
#yt-relay-out{margin-top:10px}
.yt-relay-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.yt-relay-chain span{display:grid;justify-items:center;padding:5px 10px;border-radius:12px;background:var(--bg2);font-weight:900;font-size:13px;line-height:1.2}
.yt-relay-chain span small{font-size:10.5px;color:var(--mut);font-weight:700}
.yt-relay-chain span.me{background:var(--yl)}
.yt-relay-chain i{font-style:normal;color:var(--mut)}
.yt-jkopt{display:flex;gap:6px;margin-bottom:8px}
.yt-jkopt button{padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;font-size:13px}
.yt-jkopt button[aria-pressed=true]{background:var(--k);color:#fff;border-color:var(--k)}
.yt-jkimg canvas{width:100%;max-width:320px;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.yt-how{display:grid;gap:8px;counter-reset:h;margin:8px 0}
.yt-how li{position:relative;padding-left:34px;font-size:14px;line-height:1.7;counter-increment:h}
.yt-how li::before{content:counter(h);position:absolute;left:0;top:1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:13px}

/* 分析 */
.yt-dx{display:grid;gap:16px;margin-top:22px}
@media(min-width:980px){.yt-dx{grid-template-columns:1.1fr .9fr}}
.yt-dx-card,.yt-dx-rec{padding:18px;border-radius:22px;background:#fff;border:2px solid var(--k);box-shadow:5px 5px 0 var(--k)}
.yt-dx-card{background:linear-gradient(160deg,#fff,#f6f1ff)}
.yt-dx-k{font:400 14px/1 var(--disp);letter-spacing:.18em;color:var(--vi)}
.yt-dx-h{margin:4px 0 12px;font-size:19px;font-weight:900;line-height:1.35}
.yt-dx-h small{display:block;font-size:13.5px;font-weight:700;color:var(--red)}
.yt-dx-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:620px){.yt-dx-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
.yt-dx-n{padding:10px;border-radius:14px;background:#fff;border:1.5px solid var(--line);line-height:1.3}
.yt-dx-n small{display:block;font-size:11px;color:var(--mut);font-weight:700}
.yt-dx-n b{font-size:clamp(17px,2vw,21px);font-weight:900}
.yt-dx-l{margin:14px 0 6px;font-size:12.5px;font-weight:900;color:var(--mut)}
.yt-bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;height:110px;align-items:end}
.yt-bars span{display:grid;grid-template-rows:1fr auto;height:100%;text-align:center}
.yt-bars i{align-self:end;height:var(--h);min-height:4px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--red2),var(--vi));transition:height .5s}
.yt-bars .z i{background:var(--line)}
.yt-bars small{font-size:10.5px;color:var(--mut);margin-top:3px}
.yt-gens{display:flex;flex-wrap:wrap;gap:6px}
.yt-gens span{position:relative;padding:5px 12px;border-radius:999px;background:linear-gradient(90deg,#ffd9df var(--p),#fff var(--p));border:1.5px solid var(--k);font-size:12.5px;font-weight:700}
.yt-gens b{margin-right:6px}
.yt-recs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.yt-recs button{display:grid;width:100%;text-align:left;padding:6px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line);line-height:1.3;transition:.12s}
.yt-recs button:hover{border-color:var(--k);background:#fff}
.yt-recs img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:9px;margin-bottom:5px}
.yt-recs b{font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.yt-recs small{font-size:11px;color:var(--mut);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.yt-recs i{margin-top:5px;justify-self:start;padding:3px 10px;border-radius:999px;background:var(--red);color:#fff;font-style:normal;font-weight:900;font-size:11.5px}

/* 届いたリスト */
.yt-relay{padding:22px 0;background:repeating-linear-gradient(45deg,#fff6cf 0 18px,#fff 18px 36px);border-bottom:2px solid var(--k)}
.yt-rl{padding:18px;border-radius:22px;background:#fff;border:3px solid var(--k);box-shadow:6px 6px 0 var(--k)}
.yt-rl-k{font:400 15px/1 var(--disp);letter-spacing:.16em;color:var(--red)}
.yt-rl h2{margin:6px 0 4px;font-size:clamp(20px,3vw,28px);font-weight:900;line-height:1.3}
.yt-rl h2 small{display:block;font-size:15px;color:var(--tx2)}
.yt-rl-th{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:12px 0;font-size:12px}
.yt-rl-th span{display:grid;gap:3px;line-height:1.25}
.yt-rl-th img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:8px}
.yt-rl-th b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.yt-rl-th em{align-self:center;font-style:normal;font-weight:900;color:var(--mut)}
.yt-rl-b{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- シアター ---------- */
.yt-th{background:radial-gradient(700px 400px at 90% 0%,rgba(255,31,61,.35),transparent 70%),radial-gradient(700px 500px at 0% 100%,rgba(0,169,157,.28),transparent 70%),linear-gradient(160deg,#2a1748,#3a1c63 60%,#26164a);color:#fff}
.yt-sh.dark .yt-sh-n{color:rgba(255,255,255,.7)}
.yt-sh.dark h2 small{color:rgba(255,255,255,.82)}
.th{display:grid;gap:18px;align-items:start}
@media(min-width:1000px){.th{grid-template-columns:minmax(0,1fr) 330px}}
.th-main{min-width:0;display:grid;gap:14px}
.th-stage{padding:12px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.th-stage:fullscreen,.th-stage.full{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;justify-content:center;padding:max(16px,3vh) max(16px,4vw);border-radius:0;background:radial-gradient(900px 500px at 50% 0%,rgba(255,31,61,.35),transparent 70%),#1a0f2e;overflow-y:auto}
.th-stage:fullscreen .th-scr,.th-stage.full .th-scr{width:min(100%,calc((100vh - 230px) * 16 / 9));margin-inline:auto}
.th-scr{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.th-scr iframe,.th-scr #th-player{position:absolute;inset:0;width:100%;height:100%}
.th-cover{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:6px;padding:16px;text-align:center;color:#fff;background:radial-gradient(circle at 50% 40%,rgba(255,31,61,.35),transparent 60%),linear-gradient(135deg,#120a22,#2d1450)}
.th-cover[hidden]{display:none}
.th-cover-i{display:grid;place-items:center;width:92px;height:64px;border-radius:20px;background:var(--red);font-size:34px;box-shadow:0 10px 30px rgba(255,31,61,.5);transition:transform .15s}
.th-cover:hover .th-cover-i{transform:scale(1.08)}
.th-cover b{font-size:clamp(18px,2.4vw,24px);font-weight:900}
.th-cover small{font-size:13px;opacity:.8}
.th-now{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 4px 6px}
.th-eq{display:flex;align-items:flex-end;gap:3px;width:30px;height:26px}
.th-eq i{flex:1;height:20%;border-radius:2px;background:var(--yl)}
.th.playing .th-eq i{animation:th-eq .8s ease-in-out infinite alternate}
.th-eq i:nth-child(2){animation-delay:-.3s!important}.th-eq i:nth-child(3){animation-delay:-.6s!important}.th-eq i:nth-child(4){animation-delay:-.15s!important}.th-eq i:nth-child(5){animation-delay:-.45s!important}
@keyframes th-eq{from{height:15%}to{height:100%}}
.th-now p{min-width:0;line-height:1.3}
.th-now small{font:400 13px/1 var(--disp);letter-spacing:.14em;color:var(--yl)}
.th-now b{display:block;font-size:clamp(17px,2.2vw,22px);font-weight:900;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.th-now span{display:block;font-size:13px;opacity:.8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.th-learn{padding:8px 12px;border-radius:999px;background:#fff;color:var(--k);font-weight:900;font-size:12.5px;white-space:nowrap}
.th-learn:hover{background:var(--yl)}
@media(max-width:560px){.th-now{grid-template-columns:auto 1fr}.th-learn{grid-column:1/-1;justify-self:start}}
.th-bar{position:relative;height:22px;margin:4px 4px 0}
.th-bar::before{content:"";position:absolute;left:0;right:0;top:8px;height:6px;border-radius:3px;background:rgba(255,255,255,.22)}
.th-bar-f{position:absolute;left:0;top:8px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--red2));pointer-events:none}
.th-bar-ab{position:absolute;top:3px;height:16px;border-radius:5px;background:rgba(255,210,63,.45);border:2px solid var(--yl);pointer-events:none}
.th-bar-ab[hidden]{display:none}
.th-bar input{position:absolute;inset:0;width:100%;margin:0;opacity:0;cursor:pointer}
.th-time{display:flex;justify-content:space-between;gap:8px;padding:0 4px;font:400 15px/1.2 var(--disp);letter-spacing:.06em;color:rgba(255,255,255,.8)}
#th-mode-l{color:var(--yl);font-family:var(--jp);font-size:12.5px;font-weight:700;letter-spacing:0;text-align:center}
.th-ctl{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:10px}
.th-ctl button{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;font-size:17px;font-weight:900;transition:.12s}
.th-ctl button:hover{background:rgba(255,255,255,.22)}
.th-ctl .th-pp{width:64px;height:56px;border-radius:18px;background:var(--red);font-size:24px;box-shadow:0 6px 20px rgba(255,31,61,.45)}
.th-ctl .th-pp:hover{background:#ff3d57}
.th-ctl .th-tg[aria-pressed=true]{background:var(--yl);color:var(--k)}
.th-sp{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;margin-top:10px;font-size:12.5px;font-weight:700}
.th-sp span{margin-right:4px;opacity:.75}
.th-sp button{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:400 15px/1.1 var(--disp);letter-spacing:.04em}
.th-sp button[aria-pressed=true]{background:#fff;color:var(--k)}
.th-labs{display:grid;gap:10px;align-items:start}
@media(min-width:760px){.th-labs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.th-lab{border-radius:18px;background:#fff;color:var(--k);overflow:hidden}
.th-lab summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:12px 16px;cursor:pointer;list-style:none}
.th-lab summary::-webkit-details-marker{display:none}
.th-lab summary::after{content:"＋";margin-left:auto;font-weight:900;color:var(--mut)}
.th-lab[open] summary::after{content:"－"}
.th-lab summary b{font-size:15px;font-weight:900}
.th-lab summary small{font-size:12px;color:var(--mut)}
.th-lab>div,.th-lab>p{padding:0 16px}
.th-lab>:last-child{padding-bottom:14px}
.th-ab-r{display:flex;flex-wrap:wrap;gap:6px}
.th-ab-r button{padding:8px 12px;border-radius:12px;background:var(--bg2);font-weight:900;font-size:13px;line-height:1.2}
.th-abb{display:grid;justify-items:center;min-width:64px;font-size:18px!important;background:#fff!important;border:2px solid var(--k)}
.th-abb small{font:400 12px/1 var(--disp);letter-spacing:.04em;color:var(--mut)}
.th-abb.set{background:var(--yl)!important}
.th-ab-r button[data-ab=link]{background:var(--tq);color:#fff}
.th-note{margin-top:8px;font-size:12px;line-height:1.65;color:var(--mut)}
.th-modes{display:grid;gap:6px}
.th-modes label{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:8px 10px;border-radius:12px;border:1.5px solid var(--line);cursor:pointer;line-height:1.35}
.th-modes label:has(input:checked){border-color:var(--k);background:#fff6cf}
.th-modes input{grid-row:1/3;accent-color:var(--red);width:18px;height:18px}
.th-modes b{font-size:14px}
.th-modes small{font-size:12px;color:var(--tx2)}
.th-modes select{margin:0 3px;padding:1px 4px;border-radius:6px;border:1.5px solid var(--line);font:inherit;font-size:12px}
.th-sl{display:flex;flex-wrap:wrap;gap:6px}
.th-sl button{padding:7px 12px;border-radius:999px;background:var(--bg2);font-weight:900;font-size:13px}
.th-sl button[aria-pressed=true]{background:var(--k);color:#fff}
.th-q{border-radius:22px;background:#fff;color:var(--k);overflow:hidden;min-width:0}
@media(min-width:1000px){.th-q{position:sticky;top:76px}}
.th-q-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--k);color:#fff}
.th-q-h b{font:400 18px/1 var(--disp);letter-spacing:.16em}
.th-q-h span{font-size:13px;opacity:.8}
.th-ql{max-height:560px;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.th-ql button{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;width:100%;padding:6px;border-radius:12px;text-align:left}
.th-ql button:hover{background:var(--bg)}
.th-ql li.on button{background:#ffe6ea}
.th-ql li[data-err] button{opacity:.45}
.th-ql img{width:72px;height:40px;object-fit:cover;border-radius:7px}
.th-ql span{min-width:0;line-height:1.3}
.th-ql b{display:block;font-size:13.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.th-ql small{display:block;font-size:11.5px;color:var(--mut);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.th-q-eq{display:flex;align-items:flex-end;gap:2px;width:16px;height:16px}
.th-q-eq em{flex:1;background:var(--red);height:40%;animation:th-eq .7s ease-in-out infinite alternate}
.th-q-eq em:nth-child(2){animation-delay:-.35s}
.th-q-empty{padding:16px;font-size:14px;color:var(--mut);line-height:1.7}
.th-q-empty a{color:var(--red);font-weight:900}
@media(max-width:999px){.th-ql{max-height:340px}}

/* ---------- ループ ---------- */
.yt-loop{background:linear-gradient(180deg,#effcfa,var(--bg))}
.lp{display:grid;gap:18px;align-items:start}
@media(min-width:980px){.lp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}}
.lp-l,.lp-r{padding:16px;border-radius:22px;background:#fff;border:2px solid var(--k);box-shadow:5px 5px 0 var(--k);min-width:0}
.lp-step{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 10px;font-size:16px;font-weight:900}
.lp-step b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tq);color:#fff;font-size:14px}
.lp-step small{font-size:12px;color:var(--mut);font-weight:700}
.lp-r .lp-step:not(:first-child){margin-top:20px}
.lp-pick{margin-bottom:10px}
.yt-q.sm input{font-size:15px;padding:6px 4px}
.lp-scr{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(45deg,#e8f7f5 0 14px,#f5fcfb 14px 28px);border:1.5px solid var(--line)}
.lp-scr iframe,.lp-scr #lp-player{position:absolute;inset:0;width:100%;height:100%}
.lp-ph{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;color:var(--mut);font-size:14px;text-align:center;padding:12px}
.lp-ph[hidden]{display:none}
.lp-start{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:4px;background:rgba(10,30,28,.55);color:#fff}
.lp-start span{display:grid;place-items:center;width:80px;height:56px;border-radius:18px;background:var(--red);font-size:28px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.lp-start b{font-size:20px;font-weight:900}
.lp-start small{font:400 16px/1 var(--disp);letter-spacing:.08em}
.lp-nowt{margin-top:8px;font-size:14px;line-height:1.4}
.lp-nowt small{color:var(--mut)}
.lp-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lp-pt{display:grid;justify-items:center;gap:6px;padding:12px 8px;border-radius:16px;background:var(--bg);border:1.5px solid var(--line)}
.lp-pt span{font-size:12px;font-weight:900;color:var(--mut)}
.lp-pt b{font:400 clamp(30px,4vw,40px)/1 var(--disp);letter-spacing:.04em}
.lp-pt div{display:flex;gap:4px}
.lp-pt button{padding:6px 9px;border-radius:10px;background:#fff;border:1.5px solid var(--line);font-weight:900;font-size:12.5px}
.lp-pt button.on{background:var(--tq);border-color:var(--tq);color:#fff}
.lp-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:700}
.lp-opt>span{color:var(--mut)}
.lp-opt [data-lr]{padding:6px 11px;border-radius:999px;background:var(--bg2);font:400 15px/1.1 var(--disp)}
.lp-opt [data-lr][aria-pressed=true]{background:var(--k);color:#fff}
.lp-opt .yt-btn{margin-left:auto}
.lp-outs{display:grid;gap:10px}
.lp-outs.off{opacity:.45;pointer-events:none}
.lp-o p{margin-bottom:5px;line-height:1.35}
.lp-o b{font-size:14px}
.lp-o small{display:block;font-size:11.5px;color:var(--mut)}
.lp-share{display:flex;flex-wrap:wrap;gap:6px}
.lp-qrbox svg{width:180px;height:180px;border-radius:12px;border:2px solid var(--k)}

/* ---------- 道場 ---------- */
.yt-dojo{background:linear-gradient(180deg,#fff7ec,var(--bg))}
.dj-belt{display:flex;align-items:center;gap:12px;max-width:560px;margin-bottom:16px;padding:10px 16px;border-radius:999px;background:#fff;border:2px solid var(--k);box-shadow:3px 3px 0 var(--k)}
.dj-belt span{font-weight:900;white-space:nowrap}
.dj-belt b{font:400 18px/1 var(--disp);letter-spacing:.06em;white-space:nowrap}
.dj-prog{flex:1;height:10px;border-radius:5px;background:var(--bg2);overflow:hidden}
.dj-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yl),var(--or),var(--red));transition:width .4s}
.dj-belt.black{background:var(--k);color:#fff}
.dj-keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px}
.dj-k{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px;border-radius:16px;background:#fff;border:1.5px solid var(--line);text-align:left;line-height:1.35;transition:transform .12s,border-color .12s}
.dj-k:hover{border-color:var(--k);transform:translateY(-2px)}
.dj-k kbd{grid-row:1/3;display:grid;place-items:center;min-width:52px;height:52px;padding:0 8px;border-radius:12px;background:linear-gradient(180deg,#fff,#ece6f2);border:2px solid var(--k);box-shadow:0 4px 0 var(--k);font:400 24px/1 var(--disp);letter-spacing:.02em;color:var(--k);transition:transform .08s,box-shadow .08s}
.dj-k b{font-size:14.5px;font-weight:900}
.dj-k small{font-size:12px;color:var(--tx2)}
.dj-k.hit kbd{transform:translateY(4px);box-shadow:0 0 0 var(--k);background:var(--yl)}
.dj-k.done{border-color:var(--or);background:#fffaf0}
.dj-k.done::after{content:"✓";position:absolute;right:10px;top:8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--or);color:#fff;font-weight:900;font-size:12px}
.dj-msg{margin-top:14px;padding:12px 16px;border-radius:14px;background:#fff;border:2px dashed var(--or);font-weight:700;font-size:14.5px}
.dj-msg a{color:var(--red)}

/* ---------- 講座 ---------- */
.tp-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.tp{position:relative;padding:16px;border-radius:20px;background:#fff;border:2px solid var(--k);box-shadow:4px 4px 0 var(--k)}
.tp-n{font:400 13px/1 var(--disp);letter-spacing:.16em;color:var(--bl)}
.tp-i{position:absolute;right:12px;top:10px;font-size:30px}
.tp h3{margin:8px 0 6px;font-size:16.5px;font-weight:900;line-height:1.35;padding-right:36px}
.tp p:last-child{font-size:13.5px;line-height:1.8;color:var(--tx2)}
.tp-recipe{display:grid;gap:14px;align-items:start;margin-top:22px;padding:20px;border-radius:24px;background:linear-gradient(135deg,#eef5ff,#fff6fb);border:2px solid var(--k)}
@media(min-width:760px){.tp-recipe{grid-template-columns:120px 1fr}}
.tp-recipe img{width:110px;height:110px}
.tp-recipe h3{margin:4px 0 10px;font-size:clamp(17px,2vw,20px);font-weight:900;line-height:1.4}
.tp-recipe ol{display:grid;gap:6px;margin-bottom:12px}
.tp-recipe li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px;line-height:1.7}
.tp-recipe li>span b{background:linear-gradient(transparent 62%,rgba(10,132,255,.22) 62%)}
.tp-recipe li>b:first-child{padding:2px 10px;border-radius:999px;background:var(--bl);color:#fff;font-size:12px;height:fit-content;white-space:nowrap}
.tp-recipe .tlink{margin-right:14px}
.tp-faq{margin-top:26px}
.tp-faq-h{font-size:20px;font-weight:900;margin-bottom:10px}
.tp-faq details{border-radius:14px;background:#fff;border:1.5px solid var(--line);margin-bottom:8px}
.tp-faq summary{padding:12px 16px;font-weight:900;cursor:pointer;line-height:1.5}
.tp-faq details p{padding:0 16px 14px;font-size:14px;line-height:1.85;color:var(--tx2)}
.yt-legal{margin-top:22px;font-size:12px;line-height:1.8;color:var(--mut)}

/* トースト */
.yt-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:300;max-width:min(92vw,520px);padding:11px 18px;border-radius:999px;background:var(--k);color:#fff;font-weight:700;font-size:14px;line-height:1.45;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.25s}
.yt-toast.on{transform:translate(-50%,0);opacity:1}
@media(min-width:980px){.yt-toast{bottom:28px}}
@media(prefers-reduced-motion:reduce){.p-yt *{animation:none!important}}

/* Codex のアイコン（/img/yt/）。絵文字の代わりに文字の横へ */
.yti{display:inline-block;width:1.6em;height:1.6em;object-fit:contain;vertical-align:-.45em;flex:none}
.yt-badges li{display:inline-flex;align-items:center;gap:4px}
.yt-badges .yti{width:26px;height:26px;margin:-4px 0}
.yt-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.yt-tabs .yti{width:26px;height:26px;margin:-6px 0}
.yt-app-i{position:absolute;right:6px;top:6px;z-index:1}
.yt-app-i .yti{width:58px;height:58px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12));transition:transform .2s}
.yt-app:hover .yt-app-i .yti{transform:rotate(-8deg) scale(1.08)}
.yt-app b{padding-right:44px}
.yt-pk-ic{position:absolute;right:-6px;bottom:-10px;z-index:4}
.yt-pk:has(.yt-pk-ic) .yt-pk-th{margin-right:8px}
.yt-pk-ic .yti{width:40px;height:40px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.yt-pk-th i .yti{width:42px;height:42px}
.yt-o span .yti{width:40px;height:40px}
.yt-o span{display:grid;place-items:center;height:42px}
.yt-big2 span .yti{width:40px;height:40px}
.th-lab summary b{display:inline-flex;align-items:center;gap:6px}
.th-lab summary .yti{width:30px;height:30px;margin:-6px 0}
.tp-i .yti{width:58px;height:58px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12))}
.tp-i{top:6px;right:8px}
.tp h3{padding-right:58px}
.yt-panel h3{display:flex;align-items:center;gap:6px}
.yt-panel h3 .yti{width:30px;height:30px}
.yt-rl-k{display:flex;align-items:center;gap:6px}
.yt-rl-k .yti{width:34px;height:34px}
.dj-belt .yti{width:34px;height:34px;margin:-6px 0}

/* 安心メモ */
.yt-safe{display:flex;gap:12px;align-items:center;margin:0 0 18px;padding:12px 16px;border-radius:16px;background:#eafaf4;border:1.5px dashed #6cc9a8;font-size:13px;line-height:1.7;color:#2c4a3f}
.yt-safe .yti{width:40px;height:40px;flex:none}
.yt-safe b{display:block;font-size:14.5px;font-weight:900;color:#13664b}