:root{
  --bg:#05070f;--panel:#0b101c;--line:#26304a;
  --orange:#ff9d1c;--amber:#ffd23f;--glow:#ff7a00;--cyan:#38d9ff;--pink:#ff4fa3;--violet:#8b6bff;
  --text:#e6e9f5;--dim:#8d96b3;--red:#ff4d6d;--green:#39ff7a
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Consolas,"SFMono-Regular","Courier New","Yu Gothic",monospace;background:var(--bg);color:var(--text);line-height:1.8;position:relative;overflow-x:hidden}
#matrix{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.22}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000000d 2px 3px)}
.orb{position:fixed;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.16;z-index:0;pointer-events:none;animation:drift 22s ease-in-out infinite alternate}
.o1{background:var(--glow);top:-18vmax;left:-14vmax}
.o2{background:var(--violet);bottom:-20vmax;right:-14vmax;animation-delay:-9s}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}
.hero,main,footer{position:relative;z-index:1}
a{color:var(--cyan)}

/* ---------- hero ---------- */
.hero{padding:64px 20px 56px;background:linear-gradient(180deg,#05070fcc 0%,#05070f66 40%,var(--bg) 100%),var(--banner) center/cover no-repeat}
.term{max-width:820px;margin:0 auto;background:#0a0f1cd9;backdrop-filter:blur(4px);border:1px solid #ff9d1c55;border-radius:12px;box-shadow:0 0 50px #ff7a0033,0 0 0 1px #0004;overflow:hidden}
.term-bar{display:flex;align-items:center;gap:7px;background:#111830;padding:9px 14px;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--dim)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:var(--red)}
.term-bar i:nth-child(2){background:var(--amber)}.term-bar i:nth-child(3){background:var(--green)}
.term-bar span{margin-left:10px}
.term-body{padding:26px 24px 34px;text-align:center}
.logo-wrap{position:relative;width:150px;height:150px;margin:0 auto 18px}
.logo-wrap::before,.logo-wrap::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px dashed #ff9d1c88;animation:spin 18s linear infinite}
.logo-wrap::after{inset:-28px;border:1px solid #38d9ff55;animation-duration:30s;animation-direction:reverse}
.logo{position:relative;width:150px;height:150px;border-radius:50%;object-fit:cover;box-shadow:0 0 36px #ff7a00aa;animation:float 4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-6px)}}
.prompt{color:var(--orange)}
.cursor{color:var(--orange);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.glitch{position:relative;display:inline-block;font-size:clamp(2.2rem,8vw,4rem);line-height:1.25;margin:14px 0 2px;color:transparent;background:linear-gradient(90deg,var(--amber),var(--orange),var(--pink),var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;background-size:200% auto;animation:shine 6s linear infinite;filter:drop-shadow(0 0 14px #ff7a0066)}
@keyframes shine{to{background-position:200% center}}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;opacity:0;-webkit-text-fill-color:currentColor}
.glitch::before{color:var(--cyan);animation:gl1 5s infinite steps(1)}
.glitch::after{color:var(--pink);animation:gl2 5s infinite steps(1)}
@keyframes gl1{0%,92%,100%{opacity:0}93%{opacity:.9;transform:translate(-4px,1px);clip-path:inset(10% 0 55% 0)}95%{opacity:.9;transform:translate(3px,-1px);clip-path:inset(60% 0 8% 0)}97%{opacity:0}}
@keyframes gl2{0%,93%,100%{opacity:0}94%{opacity:.9;transform:translate(4px,-1px);clip-path:inset(50% 0 20% 0)}96%{opacity:.9;transform:translate(-3px,1px);clip-path:inset(5% 0 70% 0)}98%{opacity:0}}
.sub{letter-spacing:.5em;color:var(--orange);font-size:.8rem;margin-bottom:14px}
.lead{color:var(--dim)}

/* ---------- layout ---------- */
main{max-width:860px;margin:0 auto;padding:0 20px}
section{padding:34px 0}
h2{font-size:1.15rem;margin-bottom:16px;font-weight:700;background:linear-gradient(90deg,var(--amber),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
h2 .c{color:var(--cyan);-webkit-text-fill-color:var(--cyan)}
h3{margin:26px 0 12px;font-size:.95rem;color:var(--dim);font-weight:400}

/* ---------- status bar ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:linear-gradient(160deg,#121a30,#0b101c);border:1px solid var(--line);border-top:2px solid var(--orange);border-radius:8px;padding:12px 16px}
.stat:nth-child(2){border-top-color:var(--cyan)}.stat:nth-child(3){border-top-color:var(--pink)}.stat:nth-child(4){border-top-color:var(--violet)}
.stat small{display:block;color:var(--dim);font-size:.7rem;letter-spacing:.2em}
.stat b{font-size:1.1rem;color:var(--text)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-right:8px;box-shadow:0 0 8px var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}

/* ---------- code / badges ---------- */
.code{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:8px;padding:18px 20px;overflow-x:auto;font-size:.95rem;line-height:1.8}
.k{color:var(--pink)}.s{color:var(--amber)}.cm{color:#5f6b8f}
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{padding:4px 14px;border-radius:99px;font-size:.85rem;font-weight:700;border:1px solid currentColor;background:#ffffff08;transition:transform .15s,box-shadow .15s}
.badge:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 0 14px currentColor}
.b-html{color:#ff7a45}.b-css{color:var(--cyan)}.b-js{color:var(--amber)}.b-py{color:#6aa8ff}.b-ai{color:var(--pink)}

/* ---------- video ---------- */
.video-wrap{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--orange);border-radius:8px;overflow:hidden;box-shadow:0 0 28px #ff7a0033}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);padding:16px;text-align:center}
.video-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.video-item{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s,box-shadow .15s}
.video-item:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 8px 22px #ff7a0033}
.video-item img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.video-item span{display:block;padding:10px 12px;font-size:.85rem;line-height:1.5}

/* ---------- sns cards ---------- */
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.link-card{--c:var(--orange);position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;background:linear-gradient(160deg,#121a30,#0b101c);border:1px solid var(--line);border-radius:10px;padding:18px 20px;text-decoration:none;color:var(--text);transition:transform .15s ease-out,border-color .2s,box-shadow .2s;transform-style:preserve-3d;will-change:transform}
.link-card::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff30,transparent);transform:skewX(-20deg);transition:left .6s}
.link-card:hover::before{left:130%}
.link-card:hover{border-color:var(--c);box-shadow:0 0 26px color-mix(in srgb,var(--c) 45%,transparent)}
.link-card small{display:block;color:var(--dim)}
.icon{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-size:1.3rem;color:#fff;flex:none}
.yt{--c:#ff2b4d}.yt .icon{background:#ff0033}
.x{--c:var(--cyan)}.x .icon{background:#000;border:1px solid #555}
.gh{--c:var(--violet)}.gh .icon{background:#1b1f2e;border:1px solid var(--violet);color:var(--violet);font-size:1rem;font-weight:700}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

footer{text-align:center;color:var(--dim);padding:30px 16px 40px;font-size:.8rem}
@media(max-width:480px){.term-body{padding:20px 14px 28px}.hero{padding-top:36px}}

/* ---------- 背景に浮かぶコード片 ---------- */
#codefloat{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#codefloat pre{position:absolute;top:100%;font-family:inherit;line-height:1.5;color:#c9d3f5;background:#0b101ccc;border:1px solid #ff9d1c44;border-left:3px solid var(--orange);border-radius:6px;padding:8px 12px;white-space:pre;opacity:0;box-shadow:0 0 18px #ff7a0022;animation:codeup linear forwards}
#codefloat .k{color:var(--pink)}#codefloat .f{color:var(--cyan)}#codefloat .s{color:var(--amber)}#codefloat .n{color:var(--violet)}#codefloat .cm{color:#5f6b8f}
@keyframes codeup{0%{transform:translate(0,0);opacity:0}10%{opacity:.75}85%{opacity:.75}100%{transform:translate(var(--dx),-125vh);opacity:0}}
#ripple{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}