@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&family=Yuji+Syuku&display=swap');
:root{font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Yu Gothic',Meiryo,sans-serif;color:#f9fcff;background:#020819;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html{min-width:320px;min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 50% 50%,#102a65 0%,#070d30 53%,#010515 100%)}
a{-webkit-tap-highlight-color:transparent}
.poster{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:540px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:0 0 26px;background:linear-gradient(180deg,#030b29 0%,#07143e 32%,#14134b 57%,#070a2e 78%,#050a21 100%);box-shadow:0 0 110px #050d31}
.scene{pointer-events:none;position:absolute;inset:0;z-index:-1;overflow:hidden}
.nebula{position:absolute;filter:blur(17px);pointer-events:none}
.nebula--blue{width:120%;height:53%;top:-8%;left:-9%;background:radial-gradient(ellipse at 90% 9%,rgba(14,77,221,.37),transparent 47%),radial-gradient(ellipse at 60% 72%,rgba(2,41,145,.48),transparent 58%),radial-gradient(ellipse at 13% 33%,rgba(0,32,110,.22),transparent 58%)}
.nebula--pink{top:22%;height:46%;left:-28%;width:155%;background:radial-gradient(ellipse at 7% 50%,rgba(188,58,255,.46),transparent 33%),radial-gradient(ellipse at 50% 36%,rgba(85,66,238,.32),transparent 41%),radial-gradient(ellipse at 100% 45%,rgba(181,42,226,.35),transparent 36%)}
.starlight{position:absolute;inset:0 0 36%;opacity:.75;background-image:radial-gradient(1px 1px at 16% 13%,#6bd0ff 100%,transparent),radial-gradient(1px 1px at 80% 6%,#7fa6ff 100%,transparent),radial-gradient(1px 1px at 94% 19%,#c88aff 100%,transparent),radial-gradient(1.2px 1.2px at 43% 28%,#309aff 100%,transparent),radial-gradient(1px 1px at 29% 49%,#bcaaff 100%,transparent),radial-gradient(1px 1px at 59% 62%,#67caff 100%,transparent),radial-gradient(1.3px 1.3px at 12% 67%,#7ed9ff 100%,transparent),radial-gradient(1px 1px at 77% 88%,#ca8dff 100%,transparent)}
.horizon{position:absolute;top:245px;left:-20%;width:150%;height:180px;background:radial-gradient(ellipse at 45% 55%,rgba(198,72,232,.50),rgba(28,35,123,.14) 58%,transparent 72%);filter:blur(18px)}
.skyline{position:absolute;top:239px;left:0;width:100%;height:210px;object-fit:cover;object-position:center top;opacity:.83;filter:drop-shadow(0 -8px 18px rgba(112,62,248,.5))}
.digital-floor{position:absolute;inset:390px 0 0;background:repeating-linear-gradient(168deg,transparent 0px,transparent 68px,rgba(46,102,255,.15) 70px,transparent 71px,transparent 126px),radial-gradient(ellipse at 16% 55%,rgba(101,48,200,.23),transparent 40%),radial-gradient(ellipse at 76% 85%,rgba(67,34,156,.36),transparent 50%);opacity:.72}
.digital-floor:after{content:'';position:absolute;inset:5% -25%;opacity:.42;background:repeating-linear-gradient(0deg,transparent 0 24px,rgba(30,103,239,.17) 25px,transparent 27px)}
.orbit{position:absolute;top:0;left:0;width:100%;height:auto;opacity:.94}
.character-glow{position:absolute;top:25px;right:-140px;width:500px;height:675px;background:radial-gradient(ellipse at 62% 37%,rgba(68,92,255,.24),transparent 63%);filter:blur(25px)}
.character{position:absolute;top:5px;right:-123px;width:calc(100% + 61px);max-width:none;height:auto;object-fit:contain;mask-image:linear-gradient(to bottom,#000 0px,#000 530px,transparent 690px);-webkit-mask-image:linear-gradient(to bottom,#000 0px,#000 530px,transparent 690px);filter:drop-shadow(0 0 14px rgba(42,105,234,.33)) drop-shadow(-9px 6px 18px rgba(12,24,91,.31));opacity:.97}
.scanline{position:absolute;inset:0;opacity:.08;background:repeating-linear-gradient(0deg,rgba(189,210,255,.10) 0,rgba(189,210,255,.10) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen}
.frame{position:absolute;opacity:.9;filter:drop-shadow(0 0 5px #1973ff)}
.frame--top-left{left:-20px;top:-5px;width:150px;height:53px;clip-path:polygon(0 70%,30% 0,36% 0,7% 75%,7% 98%,43% 30%,100% 30%,100% 33%,44% 33%,9% 100%,0 100%);background:linear-gradient(95deg,#0d58e4,#52c4ff)}
.frame--top-right{right:-9%;top:5px;width:43%;height:210px;border-top:3px solid rgba(47,111,250,.85);border-right:2px solid rgba(49,189,255,.9);border-radius:0 77% 0 0;transform:rotate(-9deg);opacity:.75}
.frame--bottom-left{left:-54px;bottom:-7px;width:170px;height:180px;border-left:2px solid #187bfc;border-top:1px solid #417dff;transform:rotate(40deg)}
.frame--bottom-right{right:-15px;bottom:6px;width:210px;height:160px;border-right:2px solid #1679ff;border-bottom:1px solid #286dcb;transform:skewY(-35deg)}
.circuit{position:absolute;width:40%;height:70px;border-top:1px solid rgba(41,122,245,.65);transform:skewX(-40deg);opacity:.7}
.circuit--left{top:28px;left:2%;border-left:1px solid rgba(28,145,255,.75);height:25px}
.circuit--right{top:75%;right:-14%;border-right:1px solid #5b57e9}
.hero{height:354px;position:relative;z-index:2}
.brand{position:absolute;left:6.3%;top:38px;width:43.7%;max-width:210px}
.brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 3px rgba(58,124,245,.27))}
.brand__subtitle{margin:0 0 0 3px;display:flex;align-items:center;justify-content:space-between;width:91%;color:#4faff5;letter-spacing:.42em;white-space:nowrap;font-size:clamp(8px,2.13vw,12px);font-weight:500;text-shadow:0 0 8px rgba(44,134,255,.57)}
.brand__subtitle span{color:#4085cb;letter-spacing:0}
.hero-copy{position:absolute;left:7%;top:106px}
.hero-copy h1{margin:0;color:#fff;font-family:'Yuji Syuku','Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;font-size:clamp(18px,4.8vw,26px);font-weight:500;letter-spacing:.12em;line-height:1.45;transform:rotate(-8deg);transform-origin:18% 50%;white-space:nowrap;text-shadow:0 0 4px #7bbcfa,0 0 12px rgba(56,125,252,.8)}
.hero-copy h1 span{padding-left:31px}
.hero-copy h1 span:last-child{padding-left:61px}
.hero-copy__stroke{height:1px;width:132px;margin:0 0 16px 42px;transform:rotate(-10deg);background:linear-gradient(90deg,transparent,#84beff,#d3f2ff,transparent);box-shadow:0 0 8px 1px #3581ff}
.hero-copy p{margin:0 0 0 1px;color:rgba(245,249,255,.95);font-size:clamp(8px,1.98vw,10.5px);font-weight:500;line-height:1.6;letter-spacing:.022em;text-shadow:0 1px 5px rgba(0,3,22,.95),0 0 7px rgba(0,7,35,.85)}
.tech-tags{position:absolute;left:6.5%;top:294px;display:flex;align-items:center;gap:12px}
.tech-tag{position:relative;width:34px;height:32px;display:grid;place-items:center;color:#e3f1ff;background:linear-gradient(145deg,rgba(29,41,117,.62),rgba(12,35,100,.36));border:1px solid rgba(83,158,255,.8);clip-path:polygon(23% 0,77% 0,100% 24%,100% 76%,77% 100%,23% 100%,0 76%,0 24%);filter:drop-shadow(0 0 5px rgba(27,124,253,.75))}
.tech-tag svg{width:27px;height:27px;filter:drop-shadow(0 0 4px #539cff)}
.link-list{position:relative;z-index:5;width:80.4%;margin:0 auto;display:grid;gap:7px}
.link-card{--accent:#4b9eff;position:relative;display:flex;align-items:center;min-height:46px;padding:6px 14px 6px 27px;border:1px solid rgba(152,211,255,.92);border-radius:12px;background:linear-gradient(102deg,rgba(11,24,78,.87),rgba(19,47,117,.64) 56%,rgba(31,69,146,.66));color:#f7faff;text-decoration:none;box-shadow:0 0 4px 1px rgba(78,162,255,.9),0 0 15px rgba(32,100,255,.75),inset 0 0 9px rgba(62,166,255,.55),inset 0 0 17px rgba(37,75,188,.25);backdrop-filter:blur(13px) saturate(1.25);-webkit-backdrop-filter:blur(13px) saturate(1.25);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.link-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,rgba(248,253,255,.18),transparent 16%,transparent 79%,rgba(77,207,255,.25));mask:linear-gradient(#fff 0 0);opacity:.64}
.link-card::after{content:'';position:absolute;inset:auto 12% -2px 20%;height:3px;background:linear-gradient(90deg,transparent,rgba(76,176,255,.72),transparent);filter:blur(3px);pointer-events:none}
.link-card--purple{box-shadow:-3px 0 10px rgba(206,88,255,.85),0 0 12px rgba(53,121,255,.75),inset 0 0 10px rgba(68,142,255,.57),inset 0 0 17px rgba(65,63,193,.30);border-left-color:rgba(241,160,255,.95)}
.link-card:hover,.link-card:focus-visible{transform:translateY(-1px) scale(1.015);outline:none;box-shadow:0 0 7px rgba(155,219,255,.95),0 0 28px rgba(55,137,255,.85),inset 0 0 15px rgba(90,169,255,.6)}
.link-card:active{transform:scale(.99)}
.platform-icon{flex:0 0 31px;width:31px;height:31px;display:grid;place-items:center;border-radius:7px;overflow:hidden;filter:drop-shadow(0 2px 4px rgba(0,4,27,.55))}
.platform-icon--note{color:#111;background:#fff}
.platform-icon--note span{font-family:Arial,Helvetica,sans-serif;font-size:33px;font-weight:900;line-height:1;transform:translateY(-3px);letter-spacing:-.08em}
.platform-icon--qiita{background:#51c820;color:#fff}
.platform-icon--qiita span{font-family:Arial,Helvetica,sans-serif;font-size:31px;font-weight:bold;line-height:1;transform:translateY(-1px)}
.platform-icon--x{background:#010101;color:#fff}
.platform-icon--x svg{width:24px;height:24px}
.platform-icon--instagram{background:radial-gradient(circle at 30% 110%,#ffe53e 0%,#f99630 21%,#e91c78 49%,#a92cca 73%,#485fff 100%);box-shadow:0 0 5px rgba(238,65,192,.3)}
.platform-icon--instagram svg{height:30px;width:30px}
.platform-icon--threads{background:#000;color:#fff}
.platform-icon--threads svg{height:31px;width:31px}
.platform-icon--github{background:#fff;color:#0d0d0d}
.platform-icon--github svg{width:25px;height:25px}
.link-card__copy{display:flex;min-width:0;flex-direction:column;gap:0;margin-left:20px;line-height:1.24}
.link-card__title{font-size:clamp(15px,3.45vw,19px);font-weight:700;letter-spacing:-.025em;text-shadow:0 1px 8px rgba(2,14,51,.6)}
.link-card__description{font-size:clamp(10px,2.3vw,13px);font-weight:500;white-space:nowrap;margin-top:2px;text-shadow:0 1px 7px rgba(0,3,28,.8)}
.chevron{margin-left:auto;flex:0 0 18px;width:18px;height:23px;color:#c5ecff;filter:drop-shadow(0 0 5px rgba(56,169,255,.9))}
.footer{position:relative;z-index:3;width:100%;padding:37px 14% 0;text-align:center;color:#fbfbff}
.footer::before{content:'';position:absolute;left:10%;right:10%;top:16px;height:1px;background:linear-gradient(90deg,transparent,#2879f1 17%,#0a4fbe 75%,transparent);box-shadow:0 0 10px #246bdf}
.footer__brandline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.footer__name{font-size:13px;font-weight:600;letter-spacing:-.035em;white-space:nowrap;text-shadow:0 0 9px rgba(165,186,255,.45)}
.slashes{flex:1;display:flex;align-items:center;gap:3px;height:12px;position:relative}
.slashes i{width:8px;height:7px;background:linear-gradient(110deg,#1566f3,#21b6ff);transform:skewX(-29deg);box-shadow:0 0 8px #1a70fc}
.slashes:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,#208bfd,transparent)}
.slashes--right{transform:scaleX(-1)}
.footer p{color:#8299cb;letter-spacing:.23em;font-size:8px;white-space:nowrap;margin:10px -20px 0}
.footer p span{padding:0 3px;color:#5578bd}
.toast{position:fixed;z-index:20;left:50%;bottom:28px;transform:translate(-50%,20px);min-width:max-content;max-width:90%;padding:11px 19px;background:rgba(7,23,65,.94);color:#fff;border:1px solid rgba(88,179,255,.7);border-radius:10px;box-shadow:0 0 15px #1a5fdc;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none;font-size:13px}
.toast--visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(min-width:541px){.hero{height:440px}.brand{top:51px}.hero-copy{top:132px}.hero-copy__stroke{margin-bottom:29px}.tech-tags{top:365px}.skyline{top:296px;height:254px}.horizon{top:310px}.character{top:3px;right:-137px;width:calc(100% + 78px)}.link-list{gap:9px}.link-card{min-height:58px;padding-left:35px;border-radius:14px}.platform-icon{flex-basis:40px;width:40px;height:40px}.platform-icon--note span{font-size:42px}.platform-icon--qiita span{font-size:39px}.platform-icon--x svg{width:30px;height:30px}.platform-icon--instagram svg,.platform-icon--threads svg{width:39px;height:39px}.platform-icon--github svg{width:32px;height:32px}.link-card__copy{margin-left:23px}.footer{padding-top:44px}.footer__name{font-size:16px}.footer p{font-size:10px}.digital-floor{top:485px}}
@media(max-width:389px){.hero{height:320px}.brand{top:32px}.hero-copy{top:95px}.hero-copy__stroke{margin-bottom:16px}.hero-copy h1 span{padding-left:26px}.hero-copy h1 span:last-child{padding-left:54px}.tech-tags{top:271px;gap:9px}.tech-tag{width:30px;height:29px}.tech-tag svg{width:24px;height:24px}.skyline{top:212px}.horizon{top:213px}.character{right:-108px;top:3px;width:calc(100% + 61px)}.link-list{width:82%}.link-card{padding-left:20px;min-height:46px}.link-card__copy{margin-left:15px}.footer{padding-top:33px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}