:root {
  --ink: #0d0e0d;
  --ink-soft: #141614;
  --paper: #f0efe9;
  --paper-dim: #b0b0a8;
  --muted: #787b72;
  --line: rgba(240, 239, 233, 0.17);
  --line-light: rgba(13, 14, 13, 0.16);
  --lime: #c7f36b;
  --lime-deep: #9bbf4e;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Space Grotesk', Arial, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --pad: clamp(1.25rem, 4vw, 4.8rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--lime); color: var(--ink); }

.page-noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.page-shell { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section-pad { padding-inline: var(--pad); }
.section-dark { background: var(--ink-soft); }

.topbar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 1.55rem var(--pad); }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: .72rem; font-size: .78rem; font-weight: 600; letter-spacing: .19em; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 2px; width: 18px; height: 18px; }
.brand-mark i { display: block; width: 2px; background: var(--lime); }
.brand-mark i:nth-child(1) { height: 8px; } .brand-mark i:nth-child(2) { height: 14px; } .brand-mark i:nth-child(3) { height: 18px; } .brand-mark i:nth-child(4) { height: 11px; } .brand-mark i:nth-child(5) { height: 5px; }
.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.6rem); font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); }
.primary-nav a { transition: color .25s ease; } .primary-nav a:hover, .primary-nav a:focus-visible { color: var(--lime); }
.primary-nav .nav-cta { color: var(--paper); padding: .7rem .9rem; border: 1px solid var(--line); } .primary-nav .nav-cta:hover { border-color: var(--lime); }
.menu-toggle { display: none; background: none; color: var(--paper); border: 0; padding: .55rem; }
.menu-bars, .menu-bars::before, .menu-bars::after { width: 22px; height: 1px; display: block; background: var(--paper); transition: transform .25s ease; } .menu-bars { position: relative; } .menu-bars::before, .menu-bars::after { content: ''; position: absolute; left: 0; } .menu-bars::before { top: -7px; } .menu-bars::after { top: 7px; }

.side-rail { position: fixed; z-index: 8; top: 8.5rem; bottom: 2rem; left: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; color: var(--muted); font-family: var(--mono); font-size: .56rem; letter-spacing: .15em; writing-mode: vertical-rl; text-transform: uppercase; }
.rail-status { display: inline-flex; align-items: center; gap: .55rem; color: var(--paper-dim); } .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(199,243,107,.1); }
.rail-line { width: 1px; height: 100%; min-height: 5rem; background: var(--line); } .rail-year { margin-top: auto; }

.hero { position: relative; min-height: min(880px, 100vh); display: grid; grid-template-columns: minmax(0, .94fr) minmax(420px, .88fr); align-items: center; gap: clamp(1rem, 5vw, 6rem); padding-top: 7.8rem; padding-bottom: 4rem; background: var(--ink); }
.hero::before { content: ''; position: absolute; z-index: 0; inset: 15% 11% 0 25%; background: radial-gradient(ellipse at 50% 48%, rgba(199,243,107,.08), transparent 56%); pointer-events: none; }
.hero-copy, .hero-portrait-wrap { position: relative; z-index: 1; } .hero-copy { padding-left: clamp(0rem, 4vw, 4.5rem); }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.5rem; color: var(--lime); font-family: var(--mono); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow-line { width: 2.3rem; height: 1px; background: var(--lime); }
h1, h2, h3, p { margin-top: 0; } h1, h2 { font-weight: 500; letter-spacing: -.055em; }
h1 { margin-bottom: 1.7rem; font-size: clamp(4.1rem, 8.6vw, 8.4rem); line-height: .86; } h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.08em; }
.hero-intro { max-width: 25rem; color: var(--paper-dim); font-size: 1rem; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.45rem; margin-top: 2.2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border: 1px solid transparent; padding: 1rem 1.25rem; cursor: pointer; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.button:focus-visible, .play-button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.button-primary { background: var(--lime); color: var(--ink); } .button-primary:hover { background: var(--paper); transform: translateY(-2px); }
.button-icon { font-size: .55rem; } .text-link { display: inline-flex; gap: .55rem; align-items: center; color: var(--paper); border-bottom: 1px solid var(--line); padding-bottom: .35rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; transition: color .25s ease, border-color .25s ease; } .text-link:hover { color: var(--lime); border-color: var(--lime); }
.hero-meta { display: flex; align-items: center; gap: .7rem; margin-top: 5rem; color: var(--muted); font-family: var(--mono); font-size: .56rem; letter-spacing: .11em; text-transform: uppercase; } .meta-rule { width: 2.5rem; height: 1px; background: var(--line); }
.hero-portrait-wrap { max-width: 620px; width: 100%; justify-self: center; } .portrait-frame { position: relative; aspect-ratio: .9 / 1; max-height: 710px; overflow: hidden; background: #323431; border: 1px solid rgba(240,239,233,.2); } .portrait-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(13,14,13,.55)); pointer-events: none; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 17%; filter: grayscale(1) contrast(1.06); transform: scale(1.02); } .portrait-caption { position: absolute; z-index: 1; right: 1rem; bottom: 1rem; left: 1rem; display: flex; justify-content: space-between; color: var(--paper-dim); font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; } .portrait-scribble { position: absolute; right: -1.1rem; top: 17%; color: var(--lime); font-family: var(--serif); font-size: 1.35rem; font-style: italic; line-height: .9; transform: rotate(-8deg); }
.hero-index { position: absolute; right: var(--pad); bottom: 3rem; display: flex; gap: .45rem; color: var(--muted); font-family: var(--mono); font-size: .6rem; } .hero-index span:first-child { color: var(--lime); }

.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-bottom: 4.2rem; } .section-heading h2 { margin: 0; font-size: clamp(3.2rem, 6vw, 6rem); line-height: .89; } .section-note { margin: 0 0 .5rem; color: var(--muted); font-family: var(--mono); font-size: .61rem; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.demos { padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: clamp(5rem, 10vw, 9rem); } .demo-list { border-top: 1px solid var(--line); }
.demo-card { display: grid; grid-template-columns: 3.2rem 1fr 4.2rem; gap: 1.4rem; align-items: center; padding: 1.4rem 0; border-bottom: 1px solid var(--line); transition: background .25s ease, padding .25s ease; } .demo-card:hover, .demo-card.active { background: rgba(240,239,233,.025); } .demo-card.active { padding-left: .7rem; padding-right: .7rem; }
.demo-number { color: var(--muted); font-family: var(--mono); font-size: .63rem; } .demo-main { min-width: 0; } .demo-topline, .demo-bottomline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .demo-topline h3 { margin: 0; font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 500; letter-spacing: -.02em; } .demo-tag { color: var(--lime); font-family: var(--mono); font-size: .57rem; letter-spacing: .12em; text-transform: uppercase; }
.waveform { display: flex; align-items: center; gap: 3px; height: 2.8rem; margin: .45rem 0 .1rem; opacity: .7; } .waveform i { display: block; width: 2px; height: calc(10px + (var(--wave, 12) * 1px)); background: var(--paper-dim); transform-origin: center; transition: background .2s ease; } .waveform i:nth-child(3n) { --wave: 19; } .waveform i:nth-child(4n) { --wave: 6; } .waveform i:nth-child(5n) { --wave: 25; } .demo-card.active .waveform i { background: var(--lime); } .demo-card.playing .waveform i { animation: pulse .85s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -40ms); } .demo-card.playing .waveform i:nth-child(2n) { animation-duration: .62s; }
.demo-bottomline { color: var(--muted); font-family: var(--mono); font-size: .57rem; letter-spacing: .04em; } .demo-time { color: var(--paper-dim); } .current-time { color: var(--lime); }
.play-button { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 1px solid var(--line); border-radius: 50%; color: var(--lime); background: transparent; cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .25s ease; } .play-button:hover { border-color: var(--lime); background: rgba(199,243,107,.1); transform: scale(1.05); } .play-icon { font-size: .75rem; margin-left: 2px; } .playing .play-icon { margin-left: 0; font-size: .8rem; }
.demo-disclaimer { margin: 1.4rem 0 0; color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .05em; } .demo-disclaimer .live-dot { margin-right: .5rem; }

.services { padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: clamp(5rem, 10vw, 9rem); background: var(--paper); color: var(--ink); } .services .eyebrow, .about .eyebrow { color: var(--lime-deep); } .services .eyebrow-line, .about .eyebrow-line { background: var(--lime-deep); } .services .section-note { color: #6f716b; }
.service-grid { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 1px; background: var(--line-light); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); } .service-card { position: relative; min-height: 23rem; padding: 1.5rem; background: var(--paper); display: flex; flex-direction: column; } .service-feature { background: var(--ink); color: var(--paper); } .service-index { color: var(--muted); font-family: var(--mono); font-size: .6rem; } .service-feature .service-index { color: var(--lime); } .service-icon { margin-top: 3.4rem; color: var(--lime-deep); font-size: 2.7rem; line-height: 1; } .service-feature .service-icon { color: var(--lime); } .service-card h3 { margin: 1.7rem 0 .7rem; font-size: 1.65rem; font-weight: 500; letter-spacing: -.04em; } .service-card p { max-width: 18rem; margin-bottom: 1.5rem; color: #676963; font-size: .83rem; line-height: 1.55; } .service-feature p { color: var(--paper-dim); } .service-link { display: inline-flex; gap: .5rem; align-items: center; margin-top: auto; width: fit-content; border-bottom: 1px solid var(--line-light); padding-bottom: .35rem; color: var(--ink); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; } .service-feature .service-link { color: var(--paper); border-color: var(--line); } .service-link:hover { color: var(--lime-deep); border-color: var(--lime-deep); }

.proof { padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: 0; } .proof-header { display: flex; justify-content: space-between; align-items: flex-start; } .proof-stat { display: flex; align-items: flex-start; gap: .75rem; margin: 0; font-family: var(--mono); text-transform: uppercase; } .proof-stat strong { color: var(--lime); font-size: 2.7rem; font-weight: 400; letter-spacing: -.1em; line-height: .8; } .proof-stat span { color: var(--muted); font-size: .57rem; line-height: 1.25; letter-spacing: .12em; }
.proof-content { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding: 3.4rem 0 7rem; } .proof-title h2 { margin: 0; font-size: clamp(3rem, 6.5vw, 7rem); line-height: .85; } .proof-copy { align-self: end; padding-bottom: .5rem; } .proof-copy p { max-width: 25rem; color: var(--paper-dim); font-size: 1.05rem; line-height: 1.6; } .proof-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; } .proof-chips span { border: 1px solid var(--line); padding: .55rem .7rem; color: var(--paper-dim); font-family: var(--mono); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; } .client-strip { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-top: 1px solid var(--line); padding: 1.5rem 0; color: var(--paper-dim); font-family: var(--mono); font-size: .63rem; letter-spacing: .13em; } .client-label { color: var(--lime); }

.about { display: grid; grid-template-columns: minmax(280px, .8fr) 1.2fr; gap: clamp(3rem, 9vw, 10rem); align-items: center; padding-top: clamp(6rem, 12vw, 11rem); padding-bottom: clamp(6rem, 12vw, 11rem); background: var(--paper); color: var(--ink); } .about-image { position: relative; width: min(100%, 26rem); } .about-image img { display: block; width: 100%; aspect-ratio: .84 / 1; object-fit: cover; object-position: center 15%; filter: grayscale(1); } .about-image::after { content: ''; position: absolute; right: -1rem; bottom: -1rem; width: 55%; height: 48%; border-right: 1px solid var(--lime-deep); border-bottom: 1px solid var(--lime-deep); pointer-events: none; } .about-image-label { position: absolute; bottom: .8rem; left: .8rem; color: var(--paper); font-family: var(--mono); font-size: .52rem; letter-spacing: .11em; line-height: 1.45; text-transform: uppercase; } .about-copy h2 { margin-bottom: 2rem; font-size: clamp(3.2rem, 6vw, 6rem); line-height: .88; } .about-copy > p:not(.eyebrow) { max-width: 32rem; color: #5f625d; font-size: .94rem; line-height: 1.7; } .about-copy .about-lede { color: var(--ink); font-size: 1.2rem; line-height: 1.45; } .about-copy .text-link { color: var(--ink); border-color: var(--line-light); margin-top: 1.3rem; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 10vw, 10rem); padding-top: clamp(6rem, 12vw, 10rem); padding-bottom: clamp(6rem, 10vw, 8rem); } .contact-intro h2 { margin-bottom: 1.8rem; font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: .84; } .contact-intro > p:not(.eyebrow) { max-width: 26rem; color: var(--paper-dim); line-height: 1.6; } .contact-direct { display: flex; flex-direction: column; gap: .5rem; margin-top: 4rem; } .mono-label { color: var(--lime); font-family: var(--mono); font-size: .56rem; letter-spacing: .15em; } .contact-direct a { width: fit-content; border-bottom: 1px solid var(--line); padding-bottom: .3rem; font-family: var(--mono); font-size: .74rem; } .contact-direct a:hover { color: var(--lime); border-color: var(--lime); }
.contact-form { padding-top: 1.8rem; } .form-row { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; } .form-row label { color: var(--paper-dim); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; } .form-row label span { color: var(--lime); } input, textarea, select { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; padding: .6rem 0 .8rem; color: var(--paper); background: transparent; font-size: .92rem; transition: border-color .25s ease; } input::placeholder, textarea::placeholder { color: #666a63; } input:focus, textarea:focus, select:focus { border-color: var(--lime); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lime) 50%), linear-gradient(135deg, var(--lime) 50%, transparent 50%); background-position: calc(100% - 5px) 50%, 100% 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select option { background: var(--ink); color: var(--paper); } textarea { resize: vertical; min-height: 7rem; } .button-submit { margin-top: .4rem; width: 100%; justify-content: space-between; } .form-note { margin: .9rem 0 0; color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; } .form-note.success { color: var(--lime); }

.footer { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; align-items: start; border-top: 1px solid var(--line); padding-top: 1.8rem; padding-bottom: 2.1rem; color: var(--muted); } .footer-brand { color: var(--paper); } .footer p { margin: 0; font-family: var(--mono); font-size: .58rem; line-height: 1.55; letter-spacing: .06em; text-transform: uppercase; } .footer-links { display: flex; flex-wrap: wrap; gap: 1rem; font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; } .footer-links a:hover { color: var(--lime); } .footer-end { justify-self: end; color: var(--lime) !important; text-align: right; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; } .reveal-delay-1 { transition-delay: .12s; } .reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes pulse { from { transform: scaleY(.55); opacity: .5; } to { transform: scaleY(1.2); opacity: 1; } }

@media (max-width: 900px) { .side-rail { display: none; } .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 8rem; } .hero-copy { padding-left: 0; } .hero-portrait-wrap { max-width: 32rem; margin: 1.5rem auto 0; } .hero-index { bottom: 2rem; } .proof-content { gap: 3rem; } }
@media (max-width: 680px) { :root { --pad: 1.25rem; } .topbar { padding-top: 1.2rem; } .menu-toggle { display: block; } .primary-nav { position: absolute; top: 4.7rem; right: var(--pad); left: var(--pad); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .55rem; border: 1px solid var(--line); background: rgba(20,22,20,.98); } .primary-nav.open { display: flex; } .primary-nav a { padding: .9rem; } .primary-nav .nav-cta { margin-top: .3rem; text-align: center; } .hero { padding-top: 7.5rem; padding-bottom: 5rem; } h1 { font-size: clamp(3.75rem, 18vw, 6rem); } .hero-meta { margin-top: 3.5rem; font-size: .5rem; } .hero-portrait-wrap { margin-right: .4rem; } .portrait-scribble { right: -.7rem; font-size: 1rem; } .section-heading { display: block; padding-bottom: 2.8rem; } .section-note { margin-top: 1.4rem; text-align: left; } .section-heading h2 { font-size: clamp(3.2rem, 15vw, 5rem); } .demo-card { grid-template-columns: 2rem 1fr 3.2rem; gap: .7rem; padding: 1.2rem 0; } .demo-card.active { padding-left: .45rem; padding-right: .45rem; } .demo-topline { align-items: flex-start; } .demo-topline h3 { font-size: .95rem; } .demo-tag { font-size: .5rem; } .demo-description { max-width: 10rem; line-height: 1.4; } .demo-bottomline { align-items: flex-start; } .play-button { width: 2.7rem; height: 2.7rem; } .service-grid { grid-template-columns: 1fr; } .service-card { min-height: 20rem; } .service-feature { min-height: 22rem; } .proof-content { grid-template-columns: 1fr; padding-top: 2.3rem; padding-bottom: 5rem; } .proof-copy { padding: 0; } .client-strip { flex-wrap: wrap; justify-content: flex-start; gap: .8rem 1.2rem; font-size: .54rem; } .client-label { width: 100%; } .about { grid-template-columns: 1fr; gap: 4rem; } .about-image { width: min(86vw, 22rem); } .about-copy h2 { font-size: clamp(3.3rem, 14vw, 5rem); } .contact { grid-template-columns: 1fr; gap: 2rem; } .contact-intro h2 { font-size: clamp(3.7rem, 16vw, 6rem); } .contact-direct { margin-top: 2.8rem; } .footer { grid-template-columns: 1fr 1fr; gap: 1.6rem; } .footer-end { justify-self: start; text-align: left; } }
@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; } }


.demo-tabs { display: inline-flex; gap: .35rem; margin: 0 0 2rem; padding: .35rem; border: 1px solid var(--line); background: rgba(240,239,233,.025); }
.demo-tab { border: 1px solid transparent; padding: .72rem 1rem; color: var(--muted); background: transparent; cursor: pointer; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; transition: color .25s ease, background .25s ease, border-color .25s ease; }
.demo-tab span { margin-left: .55rem; color: #646961; font-size: .52rem; letter-spacing: .06em; }
.demo-tab:hover, .demo-tab:focus-visible { color: var(--paper); }
.demo-tab.active { border-color: var(--lime); color: var(--ink); background: var(--lime); }
.demo-tab.active span { color: rgba(13,14,13,.65); }
.demo-panel[hidden] { display: none; }
.japanese-placeholder { display: flex; align-items: center; gap: clamp(1.2rem, 5vw, 4rem); min-height: 15rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.2rem 0; }
.placeholder-mark { display: grid; place-items: center; width: 5rem; height: 5rem; flex: 0 0 auto; border: 1px solid var(--lime); color: var(--lime); font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; }
.japanese-placeholder .eyebrow { margin-bottom: 1rem; }
.japanese-placeholder h3 { margin: 0 0 1rem; font-size: clamp(2.1rem, 5vw, 4.4rem); font-weight: 500; letter-spacing: -.05em; line-height: .9; }
.japanese-placeholder h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.japanese-placeholder p:not(.eyebrow) { max-width: 30rem; margin: 0; color: var(--paper-dim); font-size: .9rem; line-height: 1.6; }
.placeholder-status { margin-left: auto; align-self: flex-start; color: var(--muted); font-family: var(--mono); font-size: .56rem; letter-spacing: .12em; line-height: 1.6; text-align: right; }
@media (max-width: 680px) {
  .demo-tabs { width: 100%; }
  .demo-tab { flex: 1; padding-inline: .55rem; font-size: .56rem; }
  .demo-tab span { display: block; margin: .35rem 0 0; }
  .japanese-placeholder { display: grid; grid-template-columns: 4rem 1fr; gap: 1.2rem; }
  .placeholder-mark { width: 4rem; height: 4rem; }
  .placeholder-status { grid-column: 2; margin: 0; text-align: left; }
}

.about-signoff { color: var(--ink) !important; font-family: var(--serif); font-size: 1.1rem !important; font-style: italic; }

.contact-email-panel { padding-top: 1.8rem; align-self: start; }
.contact-email-link { display: inline-flex; align-items: center; gap: .8rem; margin-top: 1.2rem; border-bottom: 1px solid var(--line); padding-bottom: .7rem; color: var(--paper); font-family: var(--mono); font-size: clamp(.9rem, 1.5vw, 1.25rem); letter-spacing: .04em; transition: color .25s ease, border-color .25s ease; }
.contact-email-link:hover { color: var(--lime); border-color: var(--lime); }
.contact-email-link span { color: var(--lime); }
.contact-email-note { margin-top: 1.2rem; color: var(--muted); font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; }