@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');
@import "tailwindcss";
@font-face {
font-family: "Hiragino Mincho ProN";
src: url("/hiragino-mincho-pron-w3.otf") format("opentype");
font-weight: 300;
font-display: swap;
}
@theme {
--color-bg-primary: #02040a;
--color-bg-panel: rgba(9, 13, 20, 0.92);
--color-bg-masthead: #08162e;
--color-bg-nav: #0c1729;
--color-bg-input: #0f1c2f;
--color-bg-button: #0d1b2d;
--color-bg-terminal: #0f3c78;
--color-blue-primary: #0f3c78;
--color-blue-accent: #3f6fb3;
--color-blue-glow: #75aafc;
--color-text-primary: #dbe7ff;
--color-text-secondary: #9bc3ff;
--color-text-muted: #e4edff;
--color-border-primary: #2f476d;
--color-border-accent: #3f6fb3;
--font-body: "Yu Mincho", "Hiragino Mincho ProN", "HiraMinProN-W3", "MS PMincho", "MS Mincho", "Noto Serif JP", serif;
--font-mono: "Courier New", "Osaka-mono", Consolas, monospace;
--font-logo: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", "Noto Serif JP", serif;
}
html {
background-color: var(--color-bg-primary);
}
body {
margin: 0;
padding: 0;
color: var(--color-text-primary);
min-height: 100vh;
background-color: var(--color-bg-primary);
background-image: linear-gradient(
rgba(8, 22, 46, 0.65),
rgba(8, 22, 46, 0.65)
),
url("/02cdkj.jpeg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
font-family: var(--font-body);
line-height: 1.7;
letter-spacing: 0.03em;
text-rendering: optimizeLegibility;
position: relative;
overflow-x: hidden;
}
::selection {
background: rgba(117, 170, 252, 0.35);
}
/* Grid overlay */
.grid-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
}
.grid-overlay::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(117, 170, 252, 0.22) 1px,
rgba(255, 255, 255, 0.08) 1px
),
linear-gradient(
0deg,
rgba(117, 170, 252, 0.22) 1px,
rgba(255, 255, 255, 0.08) 1px
);
background-size: 28px 28px;
mix-blend-mode: screen;
opacity: 0.8;
}
.grid-overlay::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(3, 17, 40, 0.8) 0%,
rgba(7, 15, 29, 0.5) 45%,
rgba(3, 17, 40, 0.8) 100%
);
}
/* Logo animations */
@keyframes sweep-out {
0% {
opacity: 0.45;
transform: scale(0.55);
}
40% {
opacity: 0.7;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.35);
}
}
@keyframes ring-scan {
0% {
stroke: #0f3c78;
opacity: 0.9;
stroke-dasharray: 400 0;
stroke-linecap: butt;
}
25% {
stroke: #6fa0ff;
opacity: 1;
stroke-dasharray: 18 14;
stroke-linecap: round;
}
55% {
stroke: #1e4c94;
opacity: 0.88;
stroke-dasharray: 10 18;
}
70% {
stroke: #0f3c78;
opacity: 0.9;
stroke-dasharray: 6 22;
}
90% {
stroke: #aac6ff;
opacity: 0.82;
stroke-dasharray: 4 26;
}
100% {
stroke: #0f3c78;
opacity: 0.9;
stroke-dasharray: 400 0;
stroke-linecap: butt;
}
}
@keyframes idle-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes glow-pulse {
0% {
opacity: 0.16;
transform: scale(1.02);
}
50% {
opacity: 0.28;
transform: scale(1.12);
}
100% {
opacity: 0.16;
transform: scale(1.02);
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.6;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.6;
}
}
@keyframes ticker {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Logo shell */
.logo-shell {
border-radius: 50%;
border: 1px solid rgba(63, 111, 179, 0.6);
background: #070f1d;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.logo-shell::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 50%;
border: 1px solid rgba(15, 60, 120, 0.35);
box-shadow: 0 0 0 rgba(15, 60, 120, 0.1);
opacity: 0;
transform: scale(0.9);
transition: opacity 0.45s ease, transform 0.6s ease;
}
.logo-shell::after {
content: "";
position: absolute;
inset: -1px;
background: repeating-conic-gradient(
from 0deg,
rgba(15, 60, 120, 0.08) 0deg 6deg,
rgba(117, 170, 252, 0.1) 6deg 12deg
);
mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.25) 40%, transparent 80%);
opacity: 0.7;
}
.logo-shell.listening .ring-outer,
.logo-shell:not(.no-hover-animation):hover .ring-outer {
animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
animation-delay: 0.7s;
}
.logo-shell.listening .ring-middle,
.logo-shell:not(.no-hover-animation):hover .ring-middle {
animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
animation-delay: 0.35s;
}
.logo-shell.listening .ring-inner,
.logo-shell:not(.no-hover-animation):hover .ring-inner {
animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
animation-delay: 0s;
}
.logo-shell.listening::before,
.logo-shell:not(.no-hover-animation):hover::before {
opacity: 1;
transform: scale(1.08);
animation: glow-pulse 1.6s ease-in-out infinite;
}
.logo-shell.listening .scan-sweep,
.logo-shell:not(.no-hover-animation):hover .scan-sweep {
opacity: 0.7;
animation: sweep-out 2.4s ease-out infinite;
}
.logo-shell.listening .logo-svg,
.logo-shell:not(.no-hover-animation):hover .logo-svg {
filter: drop-shadow(0 0 10px rgba(15, 60, 120, 0.35));
}
.scan-sweep {
position: absolute;
inset: 10%;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(117, 170, 252, 0.25) 0%,
rgba(117, 170, 252, 0.12) 38%,
rgba(15, 60, 120, 0.06) 64%,
transparent 85%
);
opacity: 0;
mix-blend-mode: screen;
filter: blur(0.8px);
z-index: 1;
transform: scale(0.65);
}
.scan-sweep.sweep-2 {
animation-delay: 1.2s;
}
.logo-svg {
z-index: 2;
transition: filter 0.4s ease;
}
.logo-svg .ring {
fill: none;
stroke: #0f3c78;
stroke-dasharray: 400 0;
stroke-linecap: butt;
transition: stroke 0.35s ease, opacity 0.35s ease;
}
.logo-svg .core {
fill: #0f3c78;
}
.halo {
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(15, 60, 120, 0.5);
animation: idle-rotate 28s linear infinite;
}
.logo-shell.listening + .halo,
.logo-shell:not(.no-hover-animation):hover + .halo {
animation: pulse 1.5s ease-in-out infinite;
}
/* Ticker */
.ticker-content {
display: inline-block;
padding-left: 2px;
animation: ticker 22s linear infinite;
white-space: nowrap;
}
/* Rewrite link scramble effect */
.rewrite-link {
position: relative;
display: inline-block;
padding: 4px 8px;
border: 1px dashed rgba(117, 170, 252, 0.5);
background: #0f1c2f;
text-decoration: none;
color: #eef5ff;
font-family: var(--font-mono);
overflow: hidden;
transition: border-color 0.2s;
}
.rewrite-link:hover {
border-color: rgba(117, 170, 252, 0.8);
}
.rewrite-link[aria-disabled="true"] {
color: #9aa9c6;
border-color: rgba(117, 170, 252, 0.25);
cursor: not-allowed;
pointer-events: none;
background: #0b1423;
}
/* Panel styles */
.panel {
background: var(--color-bg-panel);
border: 1px solid var(--color-border-primary);
position: relative;
}
.panel::after {
content: "";
position: absolute;
inset: 0;
border: 1px dashed rgba(89, 122, 170, 0.25);
pointer-events: none;
}
/* Double border top decoration */
.border-top-double {
border-top: 4px double #050d1f;
}
/* Stripe decoration for frame top */
.stripe-top::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: repeating-linear-gradient(
90deg,
#0f3c78 0px,
#0f3c78 40px,
#3f6fb3 40px,
#3f6fb3 44px
);
opacity: 0.7;
}
