:root {
  --bg:#100d18;
  --panel:#1b1625;
  --text:#f5f1fb;
  --muted:#b1a9bf;
  --purple:#c59aef;
  --line:#33293e;
  --green:#98d9b5;
  color-scheme:dark;
  font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

a,button,summary {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--purple);
  outline-offset:6px
}

p {
  line-height:1.9
}

img {
  max-width:100%;
  height:auto
}

.section-wrap,.site-header {
  max-width:1200px;
  margin-inline:auto;
  padding-inline:40px
}

.site-header {
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:23px;
  font-weight:700;
  letter-spacing:-.6px;
  white-space:nowrap
}

.brand b {
  color:var(--purple)
}

nav {
  display:flex;
  gap:36px;
  font-size:14px;
  color:var(--muted)
}

nav a:hover,.text-link:hover {
  color:var(--purple)
}

.header-link {
  border:1px solid #64516e;
  border-radius:7px;
  padding:11px 18px;
  font-size:14px
}

.header-link span {
  margin-left:16px
}

.hero {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  align-items:center;
  gap:28px;
  min-height:590px;
  padding-block:75px
}

.eyebrow {
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--purple);
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 25px
}

.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  flex:none
}

h1 {
  font-size:clamp(32px,3.5vw,46px);
  line-height:1.6;
  letter-spacing:-1.7px;
  margin:0 0 25px;
  font-weight:750
}

h1 span {
  color:var(--purple)
}

.hero-description {
  color:var(--muted);
  font-size:15px;
  margin-bottom:30px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border-radius:7px;
  padding:16px 23px;
  font-weight:700;
  font-size:14px;
  min-height:52px
}

.button-primary {
  background:#c79df0;
  color:#251132;
  transition:background .2s,transform .2s
}

.button-primary:hover {
  background:#debcff;
  transform:translateY(-2px)
}

.text-link {
  font-size:14px
}

.hero-note {
  font-size:12px;
  color:var(--muted);
  margin-top:23px
}

.hero-art {
  position:relative;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse,#662c8247,transparent 67%)
}

.hero-art img {
  width:43%;
  border-radius:25%;
  box-shadow:0 20px 70px #9c53cf38;
  transform:rotate(-7deg)
}

.orbit {
  position:absolute;
  border:1px solid #77469b40;
  border-radius:50%;
  inset:4%
}

.orbit-two {
  inset:15%;
  border-style:dashed;
  transform:rotate(25deg)
}

.orbit-three {
  inset:26%
}

.art-label {
  position:absolute;
  border:1px solid #5d456e;
  background:#21162e;
  padding:9px 13px;
  font:10px Arial,sans-serif;
  letter-spacing:1.5px;
  border-radius:5px;
  z-index:1
}

.label-one {
  top:17%;
  left:3%
}

.label-two {
  right:0;
  top:49%
}

.label-three {
  left:8%;
  bottom:17%
}

.art-caption {
  position:absolute;
  bottom:0;
  color:#8f789e;
  font:9px Arial,sans-serif;
  letter-spacing:2px
}

.database-strip {
  border-block:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-block:24px
}

.database-strip>p {
  font-size:12px;
  color:var(--muted)
}

.database-strip ul {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:42px;
  list-style:none;
  padding:0;
  margin:0;
  font:600 21px Arial,sans-serif
}

.database-strip li span {
  display:block;
  font-size:10px;
  margin-top:5px;
  font-weight:400;
  color:var(--muted)
}

h2 {
  font-size:30px;
  line-height:1.65;
  letter-spacing:-.7px;
  margin:0
}

h3 {
  font-size:20px;
  line-height:1.6
}

.workspace-section {
  padding-block:88px 65px
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:30px
}

.section-heading .eyebrow {
  margin-bottom:14px
}

.section-heading>p {
  font-size:13px;
  color:var(--muted);
  margin:0
}

.workspace-figure {
  margin:0
}

.app-preview {
  border:1px solid #665076;
  border-radius:12px;
  overflow:hidden;
  background:#f9f8fb;
  color:#352941;
  box-shadow:0 25px 75px #0003
}

.preview-title {
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#ebe7ef;
  border-bottom:1px solid #d9d2e0;
  font-size:11px;
  padding:0 18px
}

.window-dots {
  color:#aaa1b4;
  letter-spacing:4px;
  font-size:9px
}

.preview-tag {
  font-size:10px;
  color:#72647d
}

.preview-body {
  display:grid;
  grid-template-columns:218px minmax(0,1fr);
  min-height:326px
}

.preview-sidebar {
  background:#f0edf4;
  border-right:1px solid #dfd8e6;
  padding:23px 15px;
  position:relative;
  font-size:12px
}

.preview-sidebar-title {
  font-size:10px;
  color:#83758e;
  margin-bottom:20px
}

.connection-name {
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:700
}

.tree-database {
  margin:22px 0 8px
}

.tree-item {
  padding:9px 18px;
  color:#776a81
}

.tree-item.active {
  color:#703499;
  background:#e3d8ef;
  border-radius:5px
}

.sidebar-foot {
  position:absolute;
  bottom:15px;
  color:#8c8095;
  font-size:10px
}

.preview-content {
  padding:22px;
  min-width:0
}

.preview-breadcrumb {
  font-size:13px
}

.preview-breadcrumb span {
  margin:0 10px;
  color:#a096a9
}

.preview-tabs {
  display:flex;
  gap:28px;
  margin:23px 0 20px;
  border-bottom:1px solid #ded8e4;
  font-size:12px;
  white-space:nowrap
}

.preview-tabs span {
  padding-bottom:11px
}

.preview-tabs .selected {
  color:#773a9d;
  border-bottom:2px solid #773a9d
}

.preview-toolbar {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:13px
}

.preview-counter {
  color:#8a7d94;
  font-size:10px
}

.preview-table-scroll {
  overflow-x:auto
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  white-space:nowrap
}

th,td {
  padding:12px;
  text-align:left;
  border:1px solid #e5e0eb
}

th {
  background:#f0edf5;
  font-weight:600
}

th span {
  font-size:9px;
  color:#93849e;
  margin-left:10px;
  font-weight:400
}

.data-tag {
  color:#447a5e;
  background:#e2f0e7;
  border-radius:4px;
  padding:4px 9px;
  font:10px monospace
}

.preview-footer {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#95889e;
  margin-top:15px
}

figcaption {
  font-size:11px;
  line-height:1.8;
  color:#a499b0;
  text-align:center;
  margin:17px 0
}

.features {
  padding-block:35px 90px
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:35px;
  margin-top:43px
}

.feature-grid article {
  border-top:1px solid #675071;
  padding-top:22px
}

.feature-number {
  color:var(--purple);
  font:10px Arial,sans-serif;
  letter-spacing:1.5px
}

.feature-grid h3 {
  margin:24px 0 13px
}

.feature-grid p {
  font-size:14px;
  color:var(--muted);
  margin:0 0 25px
}

.feature-detail {
  font-size:10px;
  line-height:1.8;
  color:#a990bb
}

.download-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  padding-block:60px;
  background:#21162c;
  border:1px solid #453050;
  border-radius:12px
}

.download-section>div>p:not(.eyebrow) {
  color:var(--muted);
  font-size:14px
}

.release-panel {
  padding:28px;
  background:#15101c;
  border:1px solid #493453;
  border-radius:9px;
  align-self:center
}

.release-heading {
  display:flex;
  align-items:center;
  gap:12px
}

.release-heading h3 {
  margin:0;
  font:600 22px Arial,sans-serif
}

.platform-icon {
  font-size:30px;
  color:var(--purple)
}

.release-status {
  margin-left:auto;
  font-size:11px;
  border:1px solid #614675;
  padding:5px 8px;
  border-radius:4px;
  color:#d3adee
}

.release-panel p {
  font-size:12px!important
}

.download-disabled {
  width:100%;
  border:1px solid #594566;
  background:#35263f;
  color:#c3aed1;
  cursor:not-allowed;
  margin-block:7px 23px
}

.other-platform {
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted)
}

.faq-section {
  padding-block:95px;
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:55px
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list details:first-child {
  border-top:1px solid var(--line)
}

summary {
  cursor:pointer;
  padding:23px 28px 23px 0;
  font-size:14px;
  list-style:none;
  position:relative;
  line-height:1.7
}

summary::-webkit-details-marker {
  display:none
}

summary:after {
  content:'+';
  position:absolute;
  right:2px;
  top:22px;
  color:var(--purple);
  font-size:19px
}

details[open] summary:after {
  content:'−'
}

.faq-list p {
  color:var(--muted);
  font-size:14px;
  margin:0 0 23px
}

.site-footer {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:28px;
  padding-block:32px
}

.site-footer p {
  font-size:11px;
  color:var(--muted)
}

.site-footer small {
  margin-left:auto;
  font-size:10px;
  color:var(--muted)
}

.sr-only,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

.skip-link:focus {
  position:fixed;
  top:10px;
  left:10px;
  z-index:10;
  background:var(--text);
  color:var(--bg);
  padding:12px
}

section[id] {
  scroll-margin-top:25px
}

@media(min-width:1600px) {
  .hero {
  min-height:640px
}


}

@media(max-width:1000px) {
  .section-wrap,.site-header {
  padding-inline:25px
}

.hero {
  grid-template-columns:1.5fr 1fr
}

.hero h1 {
  font-size:34px
}

.database-strip {
  flex-direction:column;
  gap:8px
}

.database-strip ul {
  width:100%;
  justify-content:space-around;
  gap:20px
}

.section-heading {
  display:block
}

.section-heading>p {
  margin-top:15px
}

.download-section {
  margin-inline:25px;
  gap:30px
}

.feature-grid {
  gap:22px
}

.feature-detail {
  font-size:11px
}

.preview-body {
  grid-template-columns:180px minmax(0,1fr)
}


}

@media(max-width:680px) {
  .section-wrap,.site-header {
  padding-inline:22px
}

.site-header {
  min-height:78px;
  gap:12px;
  flex-wrap:wrap;
  padding-block:17px
}

.brand {
  font-size:21px
}

.brand img {
  width:32px
}

nav {
  order:3;
  width:100%;
  justify-content:center;
  gap:35px;
  padding-top:10px
}

.header-link {
  font-size:12px;
  padding:9px 12px
}

.hero {
  grid-template-columns:1fr;
  padding-top:48px;
  padding-bottom:36px;
  gap:20px
}

.hero h1 {
  font-size:clamp(25px,6.9vw,38px);
  letter-spacing:-1.2px
}

.hero-description {
  font-size:14px
}

.desktop-break {
  display:none
}

.eyebrow {
  font-size:9px;
  letter-spacing:1.5px
}

.hero-art {
  width:280px;
  max-width:90%;
  margin:auto
}

.hero-actions {
  gap:22px
}

.hero-note {
  font-size:11px
}

.database-strip ul {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  font-size:20px;
  text-align:center
}

.database-strip {
  padding-block:22px 30px
}

.workspace-section {
  padding-top:55px;
  padding-bottom:25px
}

h2 {
  font-size:25px
}

.preview-body {
  grid-template-columns:minmax(0,1fr)
}

.preview-sidebar {
  display:none
}

.preview-content {
  padding:16px 12px
}

.preview-tabs {
  gap:22px
}

.preview-table-scroll table {
  min-width:470px
}

.preview-toolbar {
  font-size:11px
}

.preview-title {
  padding-inline:12px
}

.feature-grid {
  grid-template-columns:1fr;
  gap:35px;
  margin-top:30px
}

.features {
  padding-bottom:55px
}

.feature-grid h3 {
  margin-top:17px
}

.feature-grid p {
  margin-bottom:15px
}

.feature-detail {
  font-size:12px
}

.download-section {
  grid-template-columns:1fr;
  margin-inline:16px;
  padding:30px 20px;
  gap:20px
}

.release-panel {
  padding:20px
}

.release-status {
  font-size:10px
}

.faq-section {
  grid-template-columns:1fr;
  padding-block:55px;
  gap:25px
}

.site-footer {
  flex-wrap:wrap;
  gap:14px
}

.site-footer p {
  width:100%;
  order:3;
  margin:0
}

.site-footer small {
  font-size:10px
}

summary {
  font-size:14px
}

figcaption {
  font-size:11px
}


}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

.button-primary {
  transition:none
}

.button-primary:hover {
  transform:none
}


}



/* Language switcher: server-rendered links work without JavaScript. */
.language-menu { position:relative; flex-shrink:0; font-size:13px; }
.language-menu summary { padding:10px 22px 10px 10px; font-size:13px; }
.language-menu summary:after { content:'⌄'; top:8px; right:3px; font-size:16px; }
.language-menu[open] summary:after { content:'⌃'; }
.language-menu ul { position:absolute; right:0; top:100%; z-index:5; width:220px; max-height:65vh; overflow-y:auto; list-style:none; margin:8px 0 0; padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 35px #0006; }
.language-menu a { display:block; padding:10px 13px; border-radius:4px; }
.language-menu a:hover,.language-menu a[aria-current] { background:#382245; color:var(--purple); }
.hero-copy,.section-heading>div,.download-section>div,.faq-section>div { min-width:0; }
h1,h2,h3,p,.button,.header-link,.feature-detail { overflow-wrap:anywhere; }
.site-header { gap:18px; }
.site-header nav { gap:22px; }
html:not([lang="ja"]) h1 { font-size:clamp(30px,3.3vw,44px); line-height:1.35; letter-spacing:-.8px; }
html:not([lang="ja"]) .hero-description .desktop-break { display:none; }
.preview-tabs { overflow-x:auto; }
.preview-breadcrumb,.tree-item { white-space:nowrap; }
.preview-sidebar { overflow:hidden; }
.preview-sidebar-title,.connection-name,.sidebar-foot { overflow-wrap:anywhere; }
.sidebar-foot { position:static; margin-top:24px; }
.release-heading { flex-wrap:wrap; }
@media(max-width:1000px) {
  .site-header { flex-wrap:wrap; padding-block:20px; }
  .site-header nav { order:4; width:100%; justify-content:center; }
  .header-link { margin-left:auto; }
}
@media(max-width:680px) {
  .site-header { gap:12px; }
  .header-link { display:none; }
  .language-menu { margin-left:auto; }
  .site-header nav { gap:24px; font-size:13px; }
  html:not([lang="ja"]) h1 { font-size:clamp(29px,8vw,38px); }
  .hero-actions { align-items:flex-start; }
  .button { max-width:100%; }
  .other-platform { gap:18px; }
  .release-status { margin-left:0; }
}
/* Footer links keep the selected language across legal pages. */
.site-footer { flex-wrap:wrap; }
.legal-footer-links { display:flex; flex-wrap:wrap; gap:14px 26px; width:100%; border-top:1px solid var(--line); padding-top:22px; }
.legal-footer-links a { font-size:13px; line-height:1.7; overflow-wrap:anywhere; }

.cuvel-hub { padding-bottom: 48px; }
.cuvel-hub-link {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(120deg, rgba(139, 92, 246, .10), transparent), var(--panel);
  text-decoration: none; transition: border-color .2s, background-color .2s;
}
.cuvel-hub-copy { display: grid; gap: 10px; min-width: 0; }
.cuvel-hub-copy .eyebrow { margin: 0; }
.cuvel-hub-copy strong { font-size: clamp(20px, 3vw, 28px); line-height: 1.4; }
.cuvel-hub-copy > span:last-child { color: var(--muted); font-size: 14px; line-height: 1.8; }
.cuvel-hub-arrow { flex: 0 0 auto; font-size: 28px; color: #b8a4ff; }
.cuvel-hub-link:hover { border-color: #9c83f5; }
.cuvel-hub-link:focus-visible { outline: 2px solid #b8a4ff; outline-offset: 5px; }