:root {
  color-scheme: dark;
  --ink: #efffff; --muted: #9bbfc2; --deep: #031113; --panel: #082329;
  --line: rgba(165, 255, 242, .22); --cyan: #69f7ff; --aqua: #62f5a9;
  --violet: #c49aff; --coral: #ff9f9a; --lime: #c8ff72; --metal: #d5e4e8; --danger: #ffb4a9;
  --max: 88rem; --gutter: clamp(1.1rem, 4vw, 4.5rem); --radius: 1.4rem;
  --step--1: clamp(.82rem, .79rem + .15vw, .94rem);
  --step-0: clamp(1rem, .95rem + .2vw, 1.13rem);
  --step-1: clamp(1.25rem, 1.05rem + .7vw, 1.75rem);
  --step-2: clamp(1.65rem, 1.18rem + 1.7vw, 2.8rem);
  --step-3: clamp(2.6rem, 1.35rem + 4.2vw, 6.2rem);
  --ease: cubic-bezier(.2,.75,.25,1); --fast: 180ms; --slow: 700ms;
}
* { box-sizing: border-box; }
.form-trap { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; }
.form-status.is-success { color:#72e8b8; }
.form-status.is-error { color:#ffb4a9; }
html { scroll-behavior: smooth; background: var(--deep); }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); background: var(--deep); font-family: Inter, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, system-ui, sans-serif; line-height: 1.75; }
body::before { content:""; position:fixed; inset:0; z-index:-3; background: radial-gradient(ellipse at 82% 5%, rgba(56,232,206,.32),transparent 34%), radial-gradient(ellipse at 5% 42%,rgba(72,143,255,.22),transparent 37%), radial-gradient(ellipse at 72% 88%,rgba(176,98,255,.18),transparent 40%), linear-gradient(145deg,#062c31 0,#06181c 42%,#071225 72%,#0d1830 100%); }
body::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.38; background-image:linear-gradient(rgba(150,255,236,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(150,255,236,.035) 1px,transparent 1px),radial-gradient(circle at center,transparent 32%,rgba(1,10,13,.62) 100%); background-size:54px 54px,54px 54px,100% 100%; mask-image:linear-gradient(to bottom,black,transparent 88%); }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; }
button { color: inherit; }
img,svg,canvas { display:block; max-width:100%; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.skip-link { position:fixed; z-index:100; top:.5rem; left:.5rem; padding:.7rem 1rem; color:#001014; background:var(--cyan); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.shell { width:min(100%, calc(var(--max) + var(--gutter)*2)); margin:auto; padding-inline:var(--gutter); }
.eyebrow { display:flex; align-items:center; gap:.7rem; margin:0 0 1rem; color:var(--cyan); font:700 var(--step--1)/1.2 ui-monospace,Consolas,monospace; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow::before { content:""; width:2.2rem; height:1px; background:currentColor; }
.display { max-width:12ch; margin:0; font-size:var(--step-3); font-weight:500; line-height:.94; letter-spacing:-.055em; text-wrap:balance; }
.section-title { max-width:19ch; margin:.1rem 0 1.4rem; font-size:var(--step-2); font-weight:500; line-height:1.18; letter-spacing:-.035em; text-wrap:balance; }
.lead { max-width:43rem; color:#b7cbd0; font-size:var(--step-0); }
.muted { color:var(--muted); }
.button { display:inline-flex; min-height:3.1rem; align-items:center; justify-content:center; gap:.7rem; padding:.7rem 1.1rem; border:1px solid var(--line); border-radius:999px; background:rgba(8,25,32,.68); transition:background var(--fast),border var(--fast),transform var(--fast); }
.button::after { content:"↗"; color:var(--cyan); }
.button:hover { border-color:rgba(103,232,249,.6); background:rgba(19,51,60,.8); transform:translateY(-2px); }
.button.primary { color:#001114; border-color:var(--cyan); background:var(--cyan); font-weight:700; }
.button.primary::after { color:#001114; }
.site-header { position:fixed; z-index:30; inset:0 0 auto; padding-top:max(.8rem, env(safe-area-inset-top)); border-bottom:1px solid transparent; transition:background var(--fast),border-color var(--fast),backdrop-filter var(--fast); }
.site-header.is-scrolled { border-color:var(--line); background:rgba(5,27,31,.72); box-shadow:0 12px 50px rgba(0,10,14,.24); backdrop-filter:blur(22px) saturate(145%); }
.nav-wrap { min-height:4.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo { display:flex; align-items:center; gap:.8rem; font:800 1rem/1 ui-monospace,Consolas,monospace; letter-spacing:.27em; }
.logo-mark { width:1.8rem; height:1.8rem; border:1px solid var(--cyan); border-radius:42% 58% 58% 42%; position:relative; box-shadow:0 0 22px rgba(105,247,255,.25),inset 0 0 12px rgba(98,245,169,.18); animation:cell 7s var(--ease) infinite; }
.logo-mark::after { content:""; position:absolute; inset:.35rem; border:1px solid var(--aqua); border-left-color:transparent; border-radius:50%; animation:orbit 5s linear infinite; }
@keyframes cell { 50% { border-radius:58% 42% 38% 62%; transform:rotate(8deg); } }
.nav-list { display:flex; align-items:center; gap:clamp(.6rem,1.5vw,1.6rem); margin:0; padding:0; list-style:none; }
.nav-list a { display:block; padding:.7rem .2rem; color:#afc3c9; font-size:.78rem; letter-spacing:.09em; white-space:nowrap; }
.nav-list a:hover,.nav-list a[aria-current="page"] { color:white; }
.nav-list a[aria-current="page"]::after { content:""; display:block; height:1px; margin-top:.25rem; background:var(--cyan); }
.menu-button { display:none; width:3rem; height:3rem; border:1px solid var(--line); border-radius:50%; background:#071218; }
.menu-button span,.menu-button::before,.menu-button::after { content:""; display:block; width:1.15rem; height:1px; margin:4px auto; background:currentColor; transition:transform var(--fast); }
.hero { position:relative; min-height:100svh; display:grid; align-items:end; padding:clamp(8rem,18vh,13rem) 0 clamp(5rem,12vh,8rem); isolation:isolate; }
.hero-canvas { position:absolute; inset:0; z-index:-2; width:100%; height:100%; }
.hero::before { content:""; position:absolute; z-index:-1; width:min(60vw,54rem); aspect-ratio:1; right:-8%; top:8%; border:1px solid rgba(105,247,255,.18); border-radius:44% 56% 61% 39%; background:radial-gradient(circle at 45% 42%,rgba(98,245,169,.18),transparent 23%),radial-gradient(circle at 62% 57%,rgba(196,154,255,.18),transparent 29%); box-shadow:inset 0 0 110px rgba(105,247,255,.08),0 0 100px rgba(68,221,210,.08); animation:water 15s ease-in-out infinite; }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(3,17,19,.75) 0%,rgba(3,17,19,.27) 56%,rgba(3,17,19,.04)),linear-gradient(0deg,rgba(3,17,19,.88),transparent 28%); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(15rem,.55fr); align-items:end; gap:3rem; }
.hero-kicker { width:max-content; margin:0 0 1rem; padding:.4rem .7rem; color:#d9ffff; border:1px solid rgba(105,247,255,.32); border-radius:999px; background:rgba(28,90,93,.22); box-shadow:0 0 40px rgba(105,247,255,.1); font-size:.78rem; letter-spacing:.2em; backdrop-filter:blur(10px); }
.hero .display { color:#f5ffff; text-shadow:0 0 55px rgba(105,247,255,.3); }
.brand-display { display:grid; max-width:none; }
.brand-display small { width:max-content; margin:.2em 0 0 .08em; padding:.18em .4em; color:#052226; border-radius:999px; background:linear-gradient(90deg,var(--aqua),var(--cyan)); box-shadow:0 0 45px rgba(98,245,169,.26); font-size:.31em; font-weight:800; letter-spacing:.22em; line-height:1.15; text-transform:uppercase; }
.hero-copy { max-width:40rem; margin:1.6rem 0 2rem; color:#c1d2d6; font-size:var(--step-1); line-height:1.55; }
.hero-links { display:flex; flex-wrap:wrap; gap:.7rem; }
.hero-index { padding:1.1rem 1.4rem; border:1px solid var(--line); border-radius:1.2rem; background:linear-gradient(145deg,rgba(15,75,77,.32),rgba(17,27,55,.28)); box-shadow:0 28px 90px rgba(0,7,10,.28),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(18px) saturate(150%); }
.hero-index a { display:grid; grid-template-columns:2rem 1fr; gap:.8rem; padding:.75rem 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.86rem; }
.hero-index span { color:var(--cyan); font-family:ui-monospace,monospace; }
.scroll-cue { position:absolute; right:var(--gutter); bottom:2rem; color:var(--muted); font-size:.72rem; letter-spacing:.14em; writing-mode:vertical-rl; }
.scroll-cue::after { content:""; display:block; width:1px; height:3rem; margin:.7rem auto 0; background:linear-gradient(var(--cyan),transparent); animation:cue 1.8s infinite; }
@keyframes cue { 50% { transform:scaleY(.5); transform-origin:top; opacity:.45; } }
.section { position:relative; padding:clamp(5rem,11vw,10rem) 0; }
.section:nth-of-type(even)::after { content:""; position:absolute; z-index:-1; width:32rem; height:32rem; left:-18rem; top:12%; border-radius:50%; background:rgba(98,245,169,.055); filter:blur(40px); }
.intro-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,8vw,8rem); }
.services { border-block:1px solid var(--line); background:linear-gradient(180deg,rgba(11,48,53,.36),rgba(6,20,25,.12)); }
.service { --accent:var(--cyan); min-height:76vh; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:clamp(2rem,8vw,8rem); padding:clamp(4rem,8vw,8rem) 0; border-bottom:1px solid var(--line); }
.service:last-child { border:0; }
.service[data-tone="aqua"] { --accent:var(--aqua); }
.service[data-tone="web"] { --accent:var(--violet); }
.service-no { color:var(--accent); font:700 .8rem/1 ui-monospace,monospace; letter-spacing:.16em; }
.service h3 { margin:.7rem 0; font-size:clamp(2.3rem,6vw,5.5rem); line-height:.95; letter-spacing:-.055em; }
.service h3 small { display:block; margin-top:1rem; color:var(--muted); font-size:.95rem; font-weight:500; letter-spacing:.08em; }
.service p { max-width:34rem; color:#b5c9ce; }
.service .button::after { color:var(--accent); }
.visual { aspect-ratio:4/3; position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); border-radius:var(--radius); background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 50%),linear-gradient(145deg,rgba(13,63,68,.82),rgba(14,23,49,.82)); box-shadow:0 35px 100px color-mix(in srgb,var(--accent) 12%,transparent),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(10px); }
.visual::before,.visual::after { content:""; position:absolute; inset:12%; border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius:50%; animation:orbit 14s linear infinite; }
.visual::after { inset:27%; border-style:dashed; animation-direction:reverse; animation-duration:9s; }
.visual-lines { position:absolute; inset:0; opacity:.9; background:radial-gradient(circle at 23% 34%,color-mix(in srgb,var(--accent) 85%,white) 0 2px,transparent 3px),radial-gradient(circle at 73% 68%,var(--lime) 0 2px,transparent 3px),repeating-linear-gradient(90deg,transparent 0 11%,color-mix(in srgb,var(--accent) 20%,transparent) 11.2% 11.4%),repeating-linear-gradient(0deg,transparent 0 15%,color-mix(in srgb,var(--accent) 18%,transparent) 15.2% 15.4%); transform:perspective(500px) rotateX(58deg) scale(1.6); animation:signal 8s ease-in-out infinite; }
@keyframes signal { 50% { opacity:.55; filter:hue-rotate(24deg); } }
.service[data-tone="aqua"] .visual::before { inset:20% -10%; border-radius:42% 58% 38% 62%; animation:water 7s ease-in-out infinite; }
.service[data-tone="web"] .visual-lines { transform:rotate(35deg) scale(1.4); }
@keyframes orbit { to { transform:rotate(1turn); } }
@keyframes water { 50% { transform:rotate(8deg) scale(1.08); border-radius:58% 42% 64% 36%; } }
.manifesto { overflow:hidden; }
.manifesto::before { content:"BOUNDARY / CURIOSITY / CRAFT"; position:absolute; top:40%; left:-3%; color:rgba(180,235,242,.035); font:800 clamp(4rem,13vw,13rem)/1 sans-serif; white-space:nowrap; }
.principles { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:4rem; background:var(--line); border:1px solid var(--line); }
.principle { min-height:14rem; padding:1.5rem; background:linear-gradient(150deg,rgba(15,57,61,.9),rgba(10,25,39,.9)); }
.principle span { color:var(--cyan); font:700 .75rem ui-monospace,monospace; }
.principle h3 { margin:3rem 0 .7rem; font-size:1.05rem; }
.principle p { color:var(--muted); font-size:.88rem; }
.feed-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.5rem; }
.feed { display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:1rem; }
.article { min-height:23rem; display:flex; flex-direction:column; justify-content:space-between; padding:1.5rem; border:1px solid var(--line); border-radius:var(--radius); background:radial-gradient(circle at 85% 8%,rgba(98,245,169,.17),transparent 30%),linear-gradient(145deg,rgba(17,68,69,.72),rgba(9,20,38,.82)); box-shadow:0 24px 70px rgba(0,12,16,.22); }
.article:first-child { min-height:28rem; }
.article-tag { width:max-content; padding:.3rem .55rem; border:1px solid var(--line); border-radius:999px; color:var(--cyan); font:.7rem ui-monospace,monospace; }
.article h3 { max-width:16ch; font-size:var(--step-1); line-height:1.3; }
.prototype { color:#d9c9a2; font-size:.76rem; }
.cta { padding:clamp(3rem,7vw,6rem); border:1px solid rgba(105,247,255,.38); border-radius:calc(var(--radius)*1.5); background:radial-gradient(circle at 80% 10%,rgba(98,245,169,.28),transparent 35%),radial-gradient(circle at 5% 90%,rgba(196,154,255,.18),transparent 32%),linear-gradient(145deg,rgba(15,68,70,.92),rgba(12,23,47,.92)); box-shadow:0 32px 100px rgba(0,12,16,.28),inset 0 1px rgba(255,255,255,.08); }
.cta-row { display:flex; justify-content:space-between; align-items:end; gap:2rem; }
.site-footer { border-top:1px solid var(--line); padding:4rem 0 max(2rem,env(safe-area-inset-bottom)); }
.footer-grid { display:grid; grid-template-columns:1.6fr repeat(2,1fr); gap:3rem; }
.footer-grid h2 { margin:0; font-size:1rem; }
.footer-links { display:grid; gap:.5rem; color:var(--muted); font-size:.88rem; }
.footer-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:4rem; padding-top:1.3rem; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.page-hero { min-height:72svh; display:grid; align-items:end; padding:10rem 0 5rem; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.9; background:radial-gradient(circle at 78% 42%,color-mix(in srgb,var(--page-accent,var(--cyan)) 38%,transparent),transparent 25%),radial-gradient(circle at 92% 20%,rgba(98,245,169,.16),transparent 22%),repeating-radial-gradient(circle at 78% 42%,transparent 0 4rem,color-mix(in srgb,var(--page-accent,var(--cyan)) 14%,transparent) 4.05rem 4.1rem); }
.page-hero-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:3rem; align-items:end; }
.page-code { color:var(--page-accent,var(--cyan)); font:700 .8rem ui-monospace,monospace; letter-spacing:.14em; }
.breadcrumbs { margin-bottom:2rem; color:var(--muted); font-size:.78rem; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:.6rem; margin:0; padding:0; list-style:none; }
.breadcrumbs li+li::before { content:"/"; margin-right:.6rem; color:#4e6971; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:3rem; }
.feature { padding:1.5rem; border:1px solid var(--line); border-radius:1rem; background:linear-gradient(145deg,rgba(15,67,69,.64),rgba(10,23,43,.74)); box-shadow:inset 0 1px rgba(255,255,255,.055); transition:transform var(--fast),border-color var(--fast),background var(--fast); }
.feature:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--page-accent,var(--cyan)) 60%,transparent); background:linear-gradient(145deg,rgba(20,83,82,.76),rgba(16,30,57,.82)); }
.feature b { color:var(--page-accent,var(--cyan)); font:700 .76rem ui-monospace,monospace; }
.feature h3 { margin:.8rem 0 .3rem; }
.feature p { margin:0; color:var(--muted); }
.process { counter-reset:item; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3rem; }
.process article { counter-increment:item; padding:1.5rem; border-top:1px solid var(--page-accent,var(--cyan)); background:rgba(7,18,24,.5); }
.process article::before { content:"0" counter(item); color:var(--page-accent,var(--cyan)); font:700 .75rem ui-monospace,monospace; }
.form { max-width:55rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field { display:grid; gap:.45rem; }
.field.full { grid-column:1/-1; }
.field label,.field legend { font-weight:700; font-size:.88rem; }
.field input,.field select,.field textarea { width:100%; min-height:3.2rem; padding:.75rem .9rem; color:var(--ink); border:1px solid #31505a; border-radius:.6rem; background:#061117; }
.field textarea { min-height:12rem; resize:vertical; }
.check { display:flex; align-items:flex-start; gap:.7rem; }
.check input { flex:0 0 auto; width:1.25rem; min-height:1.25rem; margin-top:.25rem; }
.form-status { min-height:3rem; margin-top:1rem; padding:.75rem 1rem; border-left:2px solid var(--cyan); color:#c4d6da; background:rgba(103,232,249,.07); }
.legal { max-width:52rem; }
.legal h2 { margin-top:3rem; }
.error-page { min-height:100svh; display:grid; place-items:center; text-align:center; }
.error-code { margin:0; color:transparent; -webkit-text-stroke:1px var(--cyan); font:800 clamp(7rem,30vw,22rem)/.8 sans-serif; letter-spacing:-.09em; }
.reveal { opacity:0; transform:translateY(2rem); transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }
noscript { display:block; padding:.8rem; color:#001014; background:var(--cyan); text-align:center; }
@media (max-width: 900px) {
  .nav-wrap { align-items:flex-start; padding-block:.8rem; }
  .nav-list { flex-wrap:wrap; justify-content:flex-end; }
  .has-js .nav-wrap { align-items:center; padding-block:0; }
  .has-js .menu-button { display:block; }
  .has-js .nav-list { position:fixed; inset:0; z-index:-1; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; justify-content:center; padding:6rem var(--gutter); background:rgba(3,8,12,.98); opacity:0; visibility:hidden; transform:translateY(-1rem); transition:opacity var(--fast),transform var(--fast),visibility var(--fast); }
  .has-js .nav-list.is-open { opacity:1; visibility:visible; transform:none; }
  .has-js .nav-list a { font-size:clamp(1.2rem,5vw,2rem); }
  .hero-grid,.intro-grid,.service,.page-hero-grid { grid-template-columns:1fr; }
  .hero-index { display:none; }
  .service { min-height:auto; }
  .service:nth-child(even) .visual { order:2; }
  .principles { grid-template-columns:repeat(2,1fr); }
  .principle:last-child { grid-column:1/-1; }
  .feed { grid-template-columns:1fr 1fr; }
  .article:first-child { grid-column:1/-1; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid>div:first-child { grid-column:1/-1; }
}
@media (max-width: 560px) {
  .hero { min-height:100svh; align-items:center; }
  .display { font-size:clamp(2.7rem,15vw,4.5rem); }
  .hero-copy { font-size:1.08rem; }
  .scroll-cue { display:none; }
  .principles,.feed,.feature-grid,.process,.form-grid,.footer-grid { grid-template-columns:1fr; }
  .principle:last-child,.article:first-child,.field.full,.footer-grid>div:first-child { grid-column:auto; }
  .article,.article:first-child { min-height:20rem; }
  .feed-head,.cta-row { align-items:flex-start; flex-direction:column; }
  .page-hero { min-height:65svh; }
}
@media (max-height: 620px) and (orientation:landscape) { .hero { min-height:38rem; } .page-hero { min-height:34rem; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}