:root{--bg:#08090B;--panel:#0E1013;--line:#262B30;--fg:#F2F3EF;--muted:#A3A9A6;--lime:#C6FF2E;--magenta:#FF3FD2;--f-head:'Dela Gothic One','Zen Kaku Gothic New',sans-serif;--f-body:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;--f-hand:'Yusei Magic','Zen Kaku Gothic New',cursive;--f-mono:'JetBrains Mono',ui-monospace,monospace;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.95;padding-top:env(safe-area-inset-top,0px)}
a{color:var(--lime)}img{max-width:100%;display:block}
.scan{position:fixed;inset:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.top{border-bottom:1px solid var(--line)}
.top-in{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--lime);font-family:var(--f-head);font-size:19px}
.crumb{font-size:12px;color:var(--muted)}.crumb a{color:var(--muted)}
.uma{max-width:1000px;margin:0 auto;padding:30px 20px 70px;display:flex;flex-direction:column;gap:30px}
.labels{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.lab{font-size:12px;font-weight:700;padding:2px 10px;border:1.5px solid var(--lime);color:var(--lime);border-radius:999px}
.lab.warn{border-color:var(--magenta);background:var(--magenta);color:#fff;border-radius:0}
h1{margin:0;font-family:var(--f-head);font-weight:400;font-size:clamp(32px,6vw,54px);line-height:1.25}
.byline{margin:8px 0 0;font-size:13px;color:var(--muted)}
.uma-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px}
.tv{position:relative;min-height:420px;background:#030504;border:1px solid var(--line);box-shadow:inset 0 0 80px rgba(0,0,0,.9),0 0 0 6px #0E1013,0 0 0 7px var(--line);overflow:hidden}
.tv canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.tv::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(77,255,160,.05) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.7) 100%)}
.hud{position:absolute;z-index:2;font-family:var(--f-mono);font-size:12px;color:#4DFFA0;display:flex;gap:10px;pointer-events:none}
.hud.tl{top:12px;left:14px;right:14px;flex-wrap:wrap}.hud.tr{top:36px;left:14px;right:14px}.rec{color:#FF5A4E}
.ctrl{position:absolute;z-index:3;left:10px;right:10px;bottom:8px;display:flex;gap:6px;flex-wrap:wrap}
.ctrl button{min-height:38px;padding:0 12px;background:rgba(8,9,11,.85);color:var(--fg);border:1px solid var(--line);font-family:var(--f-body);font-size:13px;cursor:pointer}
.ctrl button[aria-pressed="true"]{border-color:#4DFFA0;color:#4DFFA0}
.fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}.fallback[hidden]{display:none}
.data{display:grid;grid-template-columns:5.5em minmax(0,1fr);align-content:start;gap:8px 12px;margin:0;padding:18px;background:var(--panel);border:1px solid var(--line);font-size:14px;line-height:1.7}
.data dt{color:var(--muted)}.data dd{margin:0}
.lead{font-size:18px;margin:0}
.hand{font-family:var(--f-hand);color:var(--magenta);font-size:22px;margin:0;transform:rotate(-3deg);text-shadow:0 0 12px rgba(255,63,210,.35)}
.sec{display:flex;flex-direction:column;gap:14px}.sec p{margin:0}
h2{margin:0;font-family:var(--f-head);font-weight:400;font-size:24px;padding-left:14px;border-left:4px solid var(--lime)}
h2 small{font-family:var(--f-body);font-size:13px;color:var(--muted)}
.theory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.th{background:var(--panel);border:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.th .st{align-self:flex-start;font-size:11px;font-weight:700;padding:1px 9px}
.st.ok{border:1.5px solid var(--lime);color:var(--lime)}.st.no{border:1.5px solid var(--muted);color:var(--muted)}.st.mid{border:1.5px solid var(--magenta);color:var(--magenta)}
.th span:last-child{font-size:14px;color:var(--muted);line-height:1.8}
.end{font-family:var(--f-head);font-size:20px;line-height:1.7;text-align:center;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0}
.src ol{margin:0;padding-left:1.4em;font-size:13px;color:var(--muted)}
.rel,.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.rel a,.item{display:flex;flex-direction:column;padding:12px 14px;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--fg);min-height:64px}
.rel a:hover,.item:hover{border-color:var(--magenta)}
.rel small,.item small{font-size:12px;color:var(--muted)}
.item .n{font-family:var(--f-mono);font-size:11px;color:var(--lime)}
.item[hidden],section[hidden]{display:none}
.btn{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;min-height:46px;padding:0 20px;background:var(--lime);color:#111;font-weight:900;text-decoration:none}
.btn.ghost{background:transparent;color:var(--fg);border:1.5px solid var(--fg)}
.search{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);margin-top:14px;max-width:420px}
.search input{min-height:46px;padding:0 14px;background:var(--panel);border:1px solid var(--line);color:var(--fg);font-size:16px;font-family:var(--f-body)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tabs a{font-size:13px;padding:6px 12px;border:1px solid var(--line);color:var(--fg);text-decoration:none}
.foot{max-width:1000px;margin:0 auto;padding:20px 20px 50px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.foot a{color:var(--muted)}
[data-glitch]{position:relative}
[data-glitch]::before,[data-glitch]::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0}
[data-glitch]::before{color:#3FE7FF;animation:gl1 6s steps(1) infinite}[data-glitch]::after{color:#FF3FD2;animation:gl2 6s steps(1) infinite}
@keyframes gl1{0%,86%,100%{opacity:0;transform:none;clip-path:inset(0)}87%{opacity:.9;transform:translate(-7px,2px) skewX(-10deg);clip-path:inset(10% 0 55% 0)}89%{opacity:.9;transform:translate(6px,-2px);clip-path:inset(60% 0 8% 0)}91%{opacity:0}}
@keyframes gl2{0%,87%,100%{opacity:0;transform:none;clip-path:inset(0)}88%{opacity:.8;transform:translate(7px,-1px);clip-path:inset(40% 0 30% 0)}90%{opacity:0}}
.oc-flicker{animation:flk 5s infinite}@keyframes flk{0%,90%,100%{opacity:1}91%{opacity:.2}92%{opacity:1}94%{opacity:.4}95%{opacity:1}}
.oc-blink{animation:blk 1.2s steps(1) infinite}@keyframes blk{50%{opacity:.15}}
[data-reveal].armed{opacity:0}[data-reveal].play{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes up{from{opacity:0;transform:translateY(20px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:760px){.uma-grid{grid-template-columns:minmax(0,1fr)}.tv{min-height:340px}.theory{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){[data-glitch]::before,[data-glitch]::after,.oc-flicker,.oc-blink,[data-reveal].play{animation:none}[data-reveal].armed{opacity:1}}

.item{padding:0 0 12px;overflow:hidden}
.item .thumb{display:block;width:100%;height:auto;aspect-ratio:320/220;max-width:100%;background:#030504;border-bottom:1px solid var(--line);margin-bottom:8px}
.item .n,.item b,.item small{padding:0 12px}
.item:hover .thumb,.item:focus-visible .thumb{box-shadow:inset 0 0 0 1px var(--magenta)}
.list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

.photo{margin:0;display:flex;flex-direction:column;gap:8px}
.photo img{width:100%;max-height:520px;object-fit:contain;background:#030504;border:1px solid var(--line);filter:grayscale(.25) contrast(1.08)}
.photo figcaption{font-size:12px;color:var(--muted);line-height:1.6}
.photo figcaption a{color:var(--muted)}

.photo.gen{position:relative}
.photo.gen::before{content:"生成画像（イメージ）";position:absolute;top:10px;left:10px;z-index:1;padding:2px 8px;background:rgba(8,9,11,.82);border:1px solid var(--magenta);color:var(--magenta);font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.6}
.photo.quote{max-width:560px;padding:12px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--muted)}
.photo.quote img{width:auto;max-width:100%;max-height:420px;margin:0 auto;filter:none}
.photo.quote figcaption b{display:inline-block;margin-right:8px;padding:0 7px;border:1px solid var(--muted);color:var(--fg);font-size:11px}
.quote-src{margin:4px 0 0;font-size:13px;color:var(--muted)}
.quote-ol{margin:0;padding-left:1.4em;font-size:13px;color:var(--muted)}.quote-ol a{color:var(--muted)}
.photo.gen img,.photo.quote img{height:auto}
.photo.gen img{max-height:none;aspect-ratio:3/2;object-fit:cover}
/* UMAカード（Xで出しているカードがある体だけ） */
.ucard{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:32px;align-items:center;padding:26px;border:1px solid var(--line);background:radial-gradient(80% 120% at 0% 50%,rgba(255,63,210,.16),rgba(0,0,0,0) 70%),var(--panel)}
.ucard-fig{perspective:1000px}
.ucard-tilt{position:relative;border-radius:16px;overflow:hidden;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out,box-shadow .3s;box-shadow:0 24px 50px rgba(0,0,0,.6),0 0 40px rgba(255,63,210,.18);animation:ucard-float 6s ease-in-out infinite}
.ucard-tilt img{display:block;width:100%;height:auto}
.ucard-shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,rgba(120,255,240,.35) 50%,rgba(255,80,220,.35) 55%,transparent 70%) var(--sx,-120%) 0/250% 100% no-repeat;transition:background-position .15s}
.ucard:hover .ucard-tilt{animation-play-state:paused}
@keyframes ucard-float{50%{transform:translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
.ucard-k{margin:0 0 6px;font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.16em;color:#ff4b4b}
.ucard h2{margin:0 0 12px;font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(22px,3.4vw,28px);line-height:1.4}
.ucard-tx p{margin:0 0 10px;line-height:1.85}
.ucard-tx .ucard-note{font-size:13px;color:var(--muted)}
.ucard-tx .btn{margin-top:8px}
@media (max-width:720px){.ucard{grid-template-columns:1fr;gap:20px;padding:20px}.ucard-fig{max-width:300px;margin:0 auto;width:100%}}
@media (prefers-reduced-motion:reduce){.ucard-tilt{animation:none}}
/* 動画の記録（TikTok / YouTube ショート）10/5 */
.uvid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center;padding:24px;border:1px solid var(--line);background:radial-gradient(80% 120% at 0% 50%,rgba(198,255,46,.12),rgba(0,0,0,0) 70%),var(--panel)}
.uvid-play,.uvid iframe{position:relative;display:block;width:100%;aspect-ratio:9/16;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#000;padding:0;cursor:pointer}
.uvid-play img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}
.uvid-play i{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:26px;color:#0b0a10;background:#c6ff2e;box-shadow:0 0 30px rgba(198,255,46,.55)}
.uvid-play:hover i{transform:scale(1.08)}
.uvid-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.uvid:not(:has(.uvid-play)){grid-template-columns:1fr}
@media (max-width:720px){.uvid{grid-template-columns:1fr;padding:18px}.uvid-play,.uvid iframe{max-width:300px;margin:0 auto}}