/* Qinglou: shared brand skin and responsive official-site layouts. */
:root {
  --bg:#070e20;
  --panel:#0f1b30;
  --panel2:#17273e;
  --text:#edf6ff;
  --muted:#a4b7ce;
  --brand:#00dfcc;
  --brand2:#a7f4ff;
  --line:rgba(135,181,226,.17);
  --accent-blue:#3295ff;
  --accent-violet:#ac83ff;
  --max:1200px;
  --serif:"Songti SC","STSong","Noto Serif CJK SC",serif
}
body {
  background:radial-gradient(ellipse 700px 450px at 5% 0,rgba(0,223,204,.09),transparent 70%),radial-gradient(ellipse 680px 440px at 95% 0,rgba(130,72,245,.12),transparent 70%),var(--bg);
  color:var(--text)
}
::selection {
  background:#00dfcc;
  color:#0f1b30
}
a,button,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--brand);
  outline-offset:6px
}
html {
  scroll-padding-top:100px
}
nav {
  display:none
}
.section-shell {
  width:min(100% - 64px,var(--max))
}
.site-header {
  background:rgba(7,14,32,.92)
}
.header-inner {
  height:88px;
  max-width:1264px;
  padding:0 32px;
  gap:36px
}
.brand {
  gap:12px;
  font-size:23px;
  font-family:var(--serif);
  letter-spacing:3px
}
.brand b {
  font:500 15px -apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing:1px;
  color:var(--brand)
}
.brand small {
  display:block;
  font:9px/1.6 -apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing:4px;
  color:var(--muted)
}
.brand-logo {
  display:block;
  height:43px;
  width:43px;
  object-fit:contain
}
.header-inner nav {
  gap:29px;
  align-items:center;
  font-size:13px
}
.header-inner nav a[aria-current="page"],.mobile-menu a[aria-current="page"] {
  color:var(--brand)
}
.header-cta {
  padding:10px 21px;
  border:1px solid #385671;
  background:transparent;
  border-radius:5px;
  color:var(--text);
  font-size:13px;
  font-weight:500;
  white-space:nowrap
}
.header-cta span {
  margin-left:17px
}
.mobile-menu-toggle {
  display:none
}
.mobile-menu {
  display:none!important
}
.button {
  border-radius:5px;
  font-size:14px;
  font-weight:600;
  min-height:52px
}
.button.primary {
  background:linear-gradient(105deg,#00dfbb,#08cce8);
  color:#04232d;
  box-shadow:0 8px 26px rgba(0,209,207,.14)
}
.button.primary:hover {
  background:linear-gradient(105deg,#65ffe0,#65e7ff);
  box-shadow:0 10px 30px rgba(0,209,207,.22)
}
.button.secondary {
  border-color:#365675
}
.button.disabled {
  background:#1a2940;
  color:#9cacc1
}
.ql-eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:2px;
  color:var(--brand);
  font-weight:500
}
.ql-eyebrow i {
  width:6px;
  height:6px;
  background:#00dfcc;
  border-radius:50%;
  box-shadow:0 0 10px #00bdb6
}
.ql-hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:20px;
  min-height:664px;
  padding-top:40px;
  padding-bottom:55px
}
.hero-editorial {
  position:relative;
  z-index:2
}
.hero-editorial .ql-eyebrow span {
  margin-left:12px;
  color:#8ca6c5;
  font-size:10px;
  letter-spacing:2px
}
.hero-editorial h1 {
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(46px,4.8vw,67px);
  line-height:1.36;
  letter-spacing:1px;
  margin:27px 0 24px
}
.hero-editorial h1 span {
  color:var(--brand2);
  background:linear-gradient(100deg,#9affef,#8acfff 80%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent
}
.ql-hero-copy {
  font-size:14px;
  line-height:2.1;
  color:var(--muted);
  margin:0
}
.ql-actions {
  display:flex;
  gap:30px;
  align-items:center;
  margin-top:33px
}
.ql-actions .button {
  gap:42px;
  padding:0 23px
}
.ql-actions .button span {
  font-size:21px;
  font-weight:400
}
.ql-link {
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:13px;
  text-decoration:none;
  color:var(--text)
}
.ql-link:hover {
  color:var(--brand)
}
.hero-platforms {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:29px;
  color:#a7bdd5;
  font-size:10px;
  letter-spacing:.4px
}
.hero-platforms i {
  height:3px;
  width:3px;
  background:#486783;
  border-radius:50%
}
.adult-mark {
  margin-left:5px;
  padding-left:16px;
  border-left:1px solid var(--line);
  color:#8fa8c3;
  font-size:10px
}
.ql-scene {
  height:552px;
  position:relative;
  isolation:isolate;
  overflow:clip;
  overflow-clip-margin:12px
}
.scene-orbit {
  position:absolute;
  border:1px solid rgba(78,166,248,.12);
  border-radius:50%;
  z-index:-1
}
.orbit-one {
  inset:20px -15px 20px -15px
}
.orbit-two {
  inset:68px -50px 68px -50px;
  transform:rotate(-22deg)
}
.moon-gate {
  position:absolute;
  width:330px;
  height:457px;
  left:50%;
  top:25px;
  transform:translateX(-50%);
  border-radius:180px 180px 8px 8px;
  background:radial-gradient(ellipse at 50% 34%,#35436f 0,#192e53 36%,#0c203d 65%,#0a122b 100%);
  border:1px solid #457dab;
  overflow:hidden;
  box-shadow:0 0 75px #347dee26,inset 0 0 70px #050b1d
}
.gate-frame {
  position:absolute;
  inset:10px;
  border:1px solid #48c9ec38;
  border-radius:170px 170px 0 0
}
.scene-moon {
  position:absolute;
  left:104px;
  top:58px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle at 37% 36%,#e5fcff,#9ee2f5 66%,#6991d8);
  box-shadow:0 0 75px #86dfff30
}
.scene-poem {
  position:absolute;
  right:29px;
  top:130px;
  writing-mode:vertical-rl;
  font:11px var(--serif);
  letter-spacing:5px;
  color:#b2d5ef
}
.pavilion {
  position:absolute;
  left:0;
  bottom:15px;
  width:100%;
  height:285px;
  filter:drop-shadow(0 8px 6px #050b1c)
}
.scene-seal {
  position:absolute;
  left:31px;
  top:148px;
  border:1px solid #55bce1;
  padding:5px 4px;
  font:12px/1.35 var(--serif);
  color:#b0f1ff
}
.scene-caption {
  position:absolute;
  bottom:19px;
  left:0;
  width:100%;
  text-align:center;
  letter-spacing:5px;
  font:10px var(--serif);
  color:#91b2d4
}
.scene-card {
  position:absolute;
  border:1px solid #4772a180;
  border-radius:10px;
  background:linear-gradient(120deg,rgba(24,36,65,.95),rgba(12,24,46,.96));
  box-shadow:0 18px 36px #0003;
  backdrop-filter:blur(16px)
}
.companion-card {
  left:0;
  top:302px;
  width:246px;
  padding:19px;
  transform:rotate(-4deg)
}
.companion-heading {
  display:flex;
  align-items:center;
  gap:10px
}
.companion-icon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#a276ff22;
  color:#c6b6ff;
  font-size:23px
}
.companion-heading strong {
  display:block;
  font-size:12px;
  font-weight:500
}
.companion-heading small {
  display:block;
  font-size:9px;
  color:#97aecb;
  margin-top:3px
}
.status-dot {
  margin-left:auto;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#00e4cb
}
.companion-card p {
  margin:17px 0 13px;
  font-size:12px;
  letter-spacing:.5px;
  color:#d4e5f8
}
.voice-wave {
  height:29px;
  display:flex;
  align-items:center;
  gap:3px
}
.voice-wave i {
  width:2px;
  height:10px;
  border-radius:4px;
  background:#42dccf
}
.voice-wave i:nth-child(3n) {
  height:24px
}
.voice-wave i:nth-child(4n) {
  height:17px
}
.voice-wave span {
  font-size:9px;
  color:#95b6d1;
  margin-left:13px
}
.discovery-card {
  right:-5px;
  top:140px;
  display:flex;
  gap:12px;
  align-items:center;
  padding:15px;
  transform:rotate(5deg)
}
.discovery-symbol {
  font-size:26px;
  color:#60e9ed
}
.discovery-card small {
  font-size:7px;
  letter-spacing:1.5px;
  color:#9db9d4
}
.discovery-card strong {
  display:block;
  font:13px var(--serif);
  margin-top:5px;
  letter-spacing:1px
}
.scene-index {
  position:absolute;
  bottom:23px;
  right:52px;
  font-size:8px;
  color:#809dbf;
  letter-spacing:2px
}
.experience-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:23px;
  padding-bottom:23px;
  border-block:1px solid var(--line);
  font-size:13px;
  letter-spacing:1px
}
.experience-strip b {
  font:11px Georgia,serif;
  color:#9eb1cd;
  margin-right:12px
}
.experience-strip a {
  text-decoration:none;
  color:var(--muted);
  font-size:11px
}
.experience-strip a span {
  margin-left:20px
}
.ql-section {
  padding-block:95px
}
.ql-section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:38px
}
.ql-section-heading h2,.philosophy-copy h2,.ql-faq h2 {
  font:500 38px/1.5 var(--serif);
  letter-spacing:1px;
  margin:14px 0 0
}
.ql-section-heading p {
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
  margin:0 0 4px
}
.ql-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.ql-feature {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:28px 26px 24px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#17192f
}
.feature-content {
  background:#0d1b35
}
.feature-social {
  background:#0c222f
}
.feature-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#9ab5d2;
  font-size:9px;
  letter-spacing:1.2px
}
.feature-glyph {
  font-size:29px;
  color:#a7d4f3;
  line-height:1
}
.ql-feature h3 {
  font:500 26px/1.5 var(--serif);
  margin:22px 0 15px
}
.ql-feature p {
  font-size:12px;
  color:var(--muted);
  line-height:1.95;
  margin:0;
  min-height:70px
}
.chat-sample,.content-spines,.interest-tags {
  height:120px;
  margin:18px 0 25px
}
.chat-sample {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:13px
}
.chat-sample span {
  padding:10px 13px;
  background:#232448;
  border:1px solid #a276ff30;
  border-radius:9px 9px 9px 0;
  font-size:11px;
  color:#d4e1f9
}
.chat-sample span+span {
  align-self:flex-end;
  background:#17334b;
  border-radius:9px 9px 0 9px
}
.content-spines {
  display:flex;
  gap:8px;
  align-items:flex-end
}
.content-spines>span {
  height:106px;
  flex:1;
  background:linear-gradient(145deg,#3d4278,#17213e);
  padding:16px 12px;
  font:14px var(--serif);
  border:1px solid #80baff30;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:3px
}
.content-spines>span:nth-child(2) {
  height:119px;
  background:linear-gradient(145deg,#56367b,#241936)
}
.content-spines>span:nth-child(3) {
  background:linear-gradient(145deg,#235677,#132a43)
}
.content-spines small {
  font:7px sans-serif;
  letter-spacing:2px;
  color:#c1dbef
}
.interest-tags {
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  gap:10px
}
.interest-tags span {
  border:1px solid #74b6da2a;
  border-radius:30px;
  font-size:11px;
  padding:9px 16px;
  color:#bfd8ed
}
.interest-tags span:nth-child(2),.interest-tags span:nth-child(3) {
  background:#00dfcc12
}
.feature-link {
  display:flex;
  justify-content:space-between;
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:18px;
  text-decoration:none;
  font-size:12px;
  color:var(--brand)
}
.feature-link:hover {
  color:#fff
}
.feature-note {
  font-size:10px;
  color:#8fa8c3;
  margin:18px 0 0
}
.ql-philosophy {
  background:#0b172b;
  border-block:1px solid var(--line);
  overflow:hidden
}
.philosophy-inner {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  padding-block:62px
}
.philosophy-mark {
  height:290px;
  width:290px;
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #4bbad235;
  border-radius:50%;
  position:relative;
  box-shadow:0 0 0 22px #4bbad205,0 0 0 23px #4bbad215
}
.philosophy-mark:before {
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  border:1px solid #80c8f030;
  transform:rotate(45deg)
}
.philosophy-mark span {
  font:104px var(--serif);
  color:#a7d8f2
}
.philosophy-mark small {
  font-size:9px;
  letter-spacing:5px;
  color:#8aa7ca;
  margin-top:14px
}
.philosophy-copy h2 {
  margin-top:17px
}
.philosophy-copy p {
  font-size:13px;
  line-height:2.1;
  color:var(--muted);
  margin:22px 0
}
.vertical-caption {
  position:absolute;
  right:0;
  top:85px;
  writing-mode:vertical-rl;
  letter-spacing:7px;
  font:12px var(--serif);
  color:#8da6c8
}
.ql-platform-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.ql-platform {
  display:flex;
  align-items:center;
  gap:18px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:26px 22px;
  text-decoration:none;
  background:#101d32;
  transition:background .2s,border-color .2s
}
.ql-platform:hover {
  background:#152c45;
  border-color:#4bc8d8
}
.device-symbol {
  font-size:30px;
  color:var(--brand)
}
.ql-platform>span:last-child {
  margin-left:auto;
  color:var(--muted);
  font-size:20px
}
.ql-platform small {
  font-size:9px;
  color:#a2bcd6;
  letter-spacing:1.5px
}
.ql-platform h3 {
  font:500 22px var(--serif);
  margin:8px 0
}
.ql-platform p {
  font-size:11px;
  color:var(--muted);
  margin:0
}
.ql-safety {
  display:flex;
  gap:19px;
  align-items:center;
  margin-top:22px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:7px
}
.safety-symbol {
  color:var(--brand);
  font-size:31px
}
.ql-safety strong {
  font-size:13px;
  font-weight:500
}
.ql-safety p {
  font-size:11px;
  color:var(--muted);
  margin:5px 0 0
}
.ql-safety a {
  margin-left:auto;
  white-space:nowrap;
  text-decoration:none;
  font-size:11px;
  color:var(--brand)
}
.ql-faq {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  padding-bottom:35px
}
.ql-faq h2 {
  font-size:31px
}
.ql-faq .ql-link {
  margin-top:27px;
  color:var(--brand)
}
.faq-items details {
  border-bottom:1px solid var(--line);
  padding:22px 0
}
.faq-items details:first-child {
  border-top:1px solid var(--line)
}
.faq-items summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-weight:400;
  font-size:14px
}
.faq-items summary::-webkit-details-marker {
  display:none
}
.faq-items summary:after {
  content:"+";
  font-size:21px;
  line-height:1;
  color:var(--brand)
}
.faq-items details[open] summary:after {
  content:"−"
}
.faq-items p {
  font-size:13px;
  line-height:1.9
}
.faq-items p a {
  color:var(--brand)
}
.site-footer {
  max-width:1200px;
  margin:65px auto 0;
  padding:35px 0;
  text-align:left;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px
}
.footer-brand {
  justify-content:flex-start
}
.footer-brand strong {
  font:21px var(--serif)
}
.footer-brand p {
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
  letter-spacing:1px
}
.footer-links {
  font-size:11px;
  gap:22px;
  margin:15px 0
}
.footer-note {
  flex-basis:75%;
  margin-top:20px;
  font-size:10px
}
.footer-friends {
  flex-basis:100%;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin:12px 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted)
}
.footer-friends-label {
  flex-shrink:0
}
.footer-friends ul {
  display:flex;
  flex:1;
  min-width:0;
  flex-wrap:wrap;
  gap:10px 22px;
  margin:0;
  padding:0;
  list-style:none
}
.footer-friends li {
  max-width:100%;
  overflow-wrap:anywhere
}
.footer-friends a {
  color:var(--muted);
  text-decoration:none
}
.footer-friends a:hover,.footer-friends a:focus-visible {
  color:var(--brand);
  text-decoration:underline
}
.copyright {
  font-size:10px;
  margin-top:20px
}
.footer-note,.copyright {
  color:#91a7c2
}
/* Existing detail, download and guide pages share the same visual language. */
.page-hero {
  padding-block:85px 48px
}
.page-hero h1 {
  font:500 clamp(32px,5vw,53px)/1.3 var(--serif);
  letter-spacing:1px
}
.page-hero p {
  font-size:14px;
  line-height:1.9
}
.kicker,.text-link,.prose a {
  color:var(--brand)
}
.platform-grid {
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.platform-card,.safety-grid article,.notice-card,.prose,.steps {
  border-radius:8px;
  background:var(--panel)
}
.platform-card p {
  font-size:13px
}
.platform-card h2 {
  font:24px var(--serif)
}
.platform-icon {
  color:var(--brand);
  background:#153348
}
.steps li:before {
  color:var(--brand);
  background:#00dfcc20
}
.content-hub-hero {
  padding-bottom:24px
}
.content-group {
  padding:32px 0;
  border-top:1px solid var(--line)
}
.content-group-heading span {
  font-size:12px;
  color:var(--brand)
}
.content-group-heading h2 {
  font:29px var(--serif);
  margin:12px 0 25px
}
.content-card-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px
}
.content-card {
  padding:25px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel)
}
.content-card small {
  color:var(--brand)
}
.content-card h3 {
  font-size:20px;
  font-weight:500;
  line-height:1.5
}
.content-card h3 a {
  text-decoration:none
}
.content-card p {
  font-size:13px;
  color:var(--muted)
}
.article-hero {
  max-width:1000px;
  padding-block:50px 35px
}
.breadcrumbs {
  display:flex;
  flex-wrap:wrap;
  margin:0 0 30px;
  gap:9px;
  font-size:12px;
  color:var(--muted)
}
.article-hero h1 {
  font:500 clamp(30px,4vw,48px)/1.4 var(--serif)
}
.article-lead {
  color:var(--muted);
  font-size:16px
}
.article-meta {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  font-size:11px;
  color:var(--muted)
}
.article-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  gap:40px;
  max-width:1000px
}
.article-body {
  min-width:0
}
.article-body>section {
  padding:25px 0;
  border-top:1px solid var(--line)
}
.article-body h2 {
  font:27px/1.4 var(--serif)
}
.article-body p,.article-body li {
  color:#bacde3
}
.article-side>div {
  position:sticky;
  top:110px;
  display:grid;
  gap:14px;
  background:var(--panel);
  padding:22px;
  border:1px solid var(--line);
  border-radius:6px
}
.article-side a {
  font-size:12px;
  color:var(--muted);
  text-decoration:none
}
.article-faq details {
  padding:15px 0;
  border-bottom:1px solid var(--line)
}
.article-notice {
  padding:22px;
  background:var(--panel);
  border-left:2px solid var(--brand)
}
.article-notice a {
  color:var(--brand)
}
.related-content {
  padding-top:65px
}
.related-content .content-card-grid {
  grid-template-columns:repeat(3,1fr)
}
@media(min-width:900px) {
  .header-inner nav {
    display:flex
  }
}
@media(max-width:1100px) {
  .header-inner {
    gap:20px
  }
  .header-inner nav {
    gap:20px
  }
  .ql-hero {
    grid-template-columns:1fr 1fr
  }
  .hero-editorial h1 {
    font-size:52px
  }
  .ql-scene {
    transform:scale(.91);
    transform-origin:center
  }
  .discovery-card {
    right:-20px
  }
  .ql-feature {
    padding:24px 20px
  }
  .site-footer {
    margin-inline:32px
  }
  .adult-mark {
    padding-left:8px;
    font-size:9px
  }
  .hero-platforms {
    gap:8px
  }
}
@media(max-width:899px) {
  .header-inner {
    height:75px
  }
  .header-cta {
    margin-left:0
  }
  .mobile-menu-toggle {
    display:grid;
    place-content:center;
    gap:5px;
    border:0;
    padding:10px;
    width:38px;
    height:38px;
    background:transparent;
    margin-left:auto;
    color:var(--text)
  }
  .mobile-menu-toggle span {
    width:20px;
    height:1px;
    background:currentColor
  }
  .site-header.menu-open .mobile-menu {
    display:grid!important;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    padding:15px 25px;
    border-top:1px solid var(--line);
    margin:0;
    background:var(--bg)
  }
  .mobile-menu a {
    text-align:center;
    padding:9px;
    font-size:12px
  }
  .ql-hero {
    grid-template-columns:1fr;
    gap:5px;
    padding-top:50px;
    padding-bottom:25px
  }
  .hero-editorial {
    text-align:center
  }
  .hero-editorial .ql-eyebrow,.ql-actions,.hero-platforms {
    justify-content:center
  }
  .hero-editorial h1 {
    font-size:58px
  }
  .ql-scene {
    width:500px;
    max-width:100%;
    margin-inline:auto;
    height:515px;
    transform:scale(.95)
  }
  .ql-feature-grid {
    gap:12px
  }
  .ql-feature h3 {
    font-size:24px
  }
  .ql-feature p {
    min-height:93px
  }
  .content-spines>span {
    font-size:12px;
    padding:14px 6px
  }
  .interest-tags {
    gap:8px
  }
  .interest-tags span {
    padding:7px 10px
  }
  .ql-platform-grid {
    gap:10px
  }
  .ql-platform {
    padding:20px 15px;
    gap:12px
  }
  .device-symbol {
    font-size:23px
  }
  .ql-platform h3 {
    font-size:21px
  }
  .ql-platform p {
    font-size:10px
  }
  .ql-platform small {
    font-size:8px
  }
  .philosophy-inner {
    gap:35px
  }
  .philosophy-mark {
    width:230px;
    height:230px
  }
  .philosophy-mark:before {
    width:180px;
    height:180px
  }
  .ql-section-heading h2,.philosophy-copy h2 {
    font-size:32px
  }
  .ql-faq {
    gap:30px
  }
  .article-layout {
    grid-template-columns:1fr
  }
  .article-side {
    display:none
  }
}
@media(max-width:639px) {
  .section-shell {
    width:calc(100% - 40px)
  }
  .header-inner {
    height:72px;
    padding:0 20px;
    gap:12px
  }
  .brand-logo {
    width:35px;
    height:35px
  }
  .brand {
    font-size:20px;
    gap:8px
  }
  .brand small {
    font-size:7px;
    letter-spacing:3px
  }
  .brand b {
    font-size:12px
  }
  .header-cta {
    padding:8px 12px;
    font-size:11px
  }
  .header-cta span {
    margin-left:7px
  }
  .hero-editorial .ql-eyebrow {
    font-size:10px;
    letter-spacing:1px
  }
  .hero-editorial .ql-eyebrow span {
    font-size:8px;
    margin-left:4px
  }
  .hero-editorial h1 {
    font-size:43px;
    margin-top:23px;
    line-height:1.43
  }
  .ql-hero-copy {
    font-size:12px;
    line-height:2
  }
  .desktop-break {
    display:none
  }
  .ql-actions {
    gap:24px;
    margin-top:26px
  }
  .ql-actions .button {
    gap:24px;
    min-height:48px
  }
  .hero-platforms {
    font-size:9px;
    gap:8px;
    flex-wrap:wrap;
    margin-top:23px
  }
  .adult-mark {
    font-size:9px
  }
  .ql-scene {
    height:460px;
    transform:none;
    margin-top:20px;
    width:100%;
    max-width:380px
  }
  .moon-gate {
    width:275px;
    height:390px;
    top:20px
  }
  .scene-moon {
    width:104px;
    height:104px;
    left:85px;
    top:52px
  }
  .pavilion {
    height:242px
  }
  .scene-poem {
    right:23px;
    top:123px;
    font-size:10px
  }
  .companion-card {
    top:273px;
    width:204px;
    padding:14px;
    left:0
  }
  .companion-card p {
    font-size:10px
  }
  .companion-heading strong {
    font-size:11px
  }
  .companion-heading small {
    font-size:8px
  }
  .voice-wave {
    gap:2px
  }
  .voice-wave span {
    font-size:8px;
    margin-left:8px
  }
  .discovery-card {
    top:116px;
    right:0;
    padding:11px;
    gap:8px
  }
  .discovery-card small {
    font-size:6px;
    letter-spacing:.5px
  }
  .discovery-card strong {
    font-size:11px
  }
  .scene-index {
    right:10px;
    bottom:12px;
    font-size:7px
  }
  .orbit-one {
    inset:30px 0 30px
  }
  .orbit-two {
    inset:80px -10px 65px
  }
  .experience-strip {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    padding:22px 10px;
    font-size:12px
  }
  .experience-strip a {
    display:none
  }
  .experience-strip b {
    font-size:10px
  }
  .ql-section {
    padding-block:60px
  }
  .ql-section-heading {
    display:block;
    margin-bottom:25px
  }
  .ql-section-heading h2,.philosophy-copy h2 {
    font-size:31px
  }
  .ql-section-heading p {
    font-size:12px;
    margin-top:18px
  }
  .ql-eyebrow {
    font-size:9px;
    letter-spacing:1.3px
  }
  .ql-feature-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .ql-feature {
    padding:25px
  }
  .ql-feature h3 {
    font-size:28px;
    margin-block:20px 12px
  }
  .ql-feature p {
    min-height:0;
    font-size:13px
  }
  .chat-sample,.content-spines,.interest-tags {
    height:104px;
    margin-block:20px
  }
  .content-spines>span {
    font-size:14px;
    padding:16px;
    height:94px
  }
  .content-spines>span:nth-child(2) {
    height:104px
  }
  .interest-tags {
    align-content:center
  }
  .interest-tags span {
    font-size:12px;
    padding:10px 17px
  }
  .feature-note {
    line-height:1.8
  }
  .philosophy-inner {
    grid-template-columns:1fr;
    gap:43px;
    padding-block:50px
  }
  .philosophy-copy {
    text-align:center
  }
  .philosophy-copy .ql-eyebrow {
    justify-content:center
  }
  .philosophy-copy p {
    font-size:12px
  }
  .philosophy-mark {
    width:195px;
    height:195px;
    box-shadow:0 0 0 15px #4bbad205,0 0 0 16px #4bbad215
  }
  .philosophy-mark:before {
    width:152px;
    height:152px
  }
  .philosophy-mark span {
    font-size:78px
  }
  .philosophy-mark small {
    font-size:8px
  }
  .vertical-caption {
    right:10px;
    top:70px;
    font-size:10px
  }
  .ql-platform-grid {
    grid-template-columns:1fr;
    gap:12px
  }
  .ql-platform {
    padding:21px 23px;
    gap:22px
  }
  .device-symbol {
    width:28px;
    font-size:28px
  }
  .ql-platform small {
    font-size:9px
  }
  .ql-platform p {
    font-size:11px
  }
  .ql-safety {
    padding:20px;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:8px 14px
  }
  .ql-safety div {
    flex:1
  }
  .ql-safety a {
    margin-left:40px
  }
  .ql-safety p {
    line-height:1.9
  }
  .ql-faq {
    grid-template-columns:1fr;
    gap:30px;
    padding-bottom:0
  }
  .ql-faq h2 {
    font-size:30px
  }
  .ql-faq .ql-link {
    margin-top:18px
  }
  .faq-items summary {
    font-size:13px
  }
  .faq-items details {
    padding:20px 0
  }
  .site-footer {
    margin:55px 20px 0;
    display:block;
    padding-top:28px
  }
  .footer-links {
    justify-content:flex-start;
    gap:15px;
    margin-block:25px 15px
  }
  .footer-note,.copyright {
    margin-top:9px;
    font-size:9px
  }
  .platform-grid,.safety-grid,.content-card-grid,.related-content .content-card-grid {
    grid-template-columns:1fr
  }
  .page-hero {
    padding-top:55px
  }
  .page-hero h1 {
    font-size:34px
  }
  .article-meta {
    gap:8px
  }
  .article-hero h1 {
    font-size:32px
  }
  .article-lead {
    font-size:14px
  }
  .content-group-heading h2 {
    font-size:26px
  }
  .article-body h2 {
    font-size:25px
  }
  .article-body p,.article-body li {
    font-size:14px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important;
    animation:none!important
  }
}

/* Brand promise: the short claim links to its full, visible wording. */
/* A quiet reassurance directly below the primary action. */
.hero-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 12px;
  padding: 3px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
}
.hero-guarantee svg {
  width: 15px;
  height: 17px;
  flex-shrink: 0;
  color: var(--brand);
}
.hero-guarantee strong { font-weight: 600; color: var(--brand); }
.hero-guarantee:hover { color: var(--text); }
.hero-guarantee + .hero-platforms { margin-top: 18px; }
.ql-guarantee {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  padding: 30px;
  border: 1px solid rgba(0, 223, 204, .28);
  border-radius: 7px;
  background: linear-gradient(110deg, #12303c, #0c1b31);
}
body[data-page="download"] .platform-grid { padding-bottom: 0; }
.download-guarantee { margin-bottom: 28px; }
.guarantee-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 66px;
  height: 76px;
  border: 1px solid rgba(0, 223, 204, .24);
  border-radius: 32px 32px 5px 5px;
  color: var(--brand);
}
.guarantee-emblem svg { width: 38px; height: 38px; }
.ql-guarantee h3 {
  margin: 9px 0 7px;
  font: 500 28px/1.5 var(--serif);
  color: var(--brand2);
}
.ql-guarantee p { margin: 0; color: #a9c6d6; font-size: 12px; }
.guarantee-signature {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  color: var(--brand);
  font: 20px/1.6 var(--serif);
}
.guarantee-signature small { font: 10px sans-serif; color: var(--muted); }
@media (max-width: 899px) {
  .guarantee-signature { display: none; }
}
@media (max-width: 639px) {
  .hero-guarantee { font-size: 11px; }
  .ql-guarantee { gap: 14px; padding: 23px 18px; align-items: flex-start; }
  .guarantee-emblem { flex-basis: 38px; height: 49px; }
  .guarantee-emblem svg { width: 26px; height: 26px; }
  .ql-guarantee h3 { font-size: 23px; }
  .ql-guarantee p { font-size: 11px; line-height: 1.9; }
  .ql-guarantee .ql-eyebrow { font-size: 8px; letter-spacing: .8px; }
}

.ql-guarantee h3 span { display: inline-block; }

/* Two distinct content experiences within the existing feature card. */
.cinema-highlights {
  display: grid;
  gap: 10px;
  height: 120px;
  margin: 18px 0 25px;
}
.cinema-highlights > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(72, 164, 255, .24);
  border-radius: 5px;
  background: rgba(72, 164, 255, .055);
}
.cinema-symbol {
  color: var(--brand);
  font-size: 23px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.cinema-highlights strong {
  display: block;
  color: var(--brand2);
  font-size: 13px;
  font-weight: 500;
}
.cinema-highlights small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}
@media (min-width: 640px) and (max-width: 899px) {
  .cinema-highlights > div { gap: 7px; padding-inline: 7px; }
  .cinema-highlights small { font-size: 9px; }
}

/* App palette: cyan actions, violet companionship, blue cinema. */
.header-cta:hover { border-color:var(--brand); background:rgba(0,223,204,.07); }
.feature-ai { background:radial-gradient(ellipse at 100% 0,rgba(142,76,230,.14),transparent 65%),#14192e; border-color:rgba(172,131,255,.23); }
.feature-ai .feature-glyph,.feature-ai .feature-link { color:#c7b0ff; }
.feature-content { background:radial-gradient(ellipse at 100% 0,rgba(50,149,255,.14),transparent 65%),#0e1b31; border-color:rgba(50,149,255,.25); }
.feature-content .feature-glyph,.feature-content .feature-link,.cinema-symbol { color:#79c4ff; }
.feature-social { background:radial-gradient(ellipse at 100% 0,rgba(0,223,204,.09),transparent 65%),#0d202e; border-color:rgba(0,223,204,.2); }
.ql-philosophy { background:linear-gradient(115deg,#0b1b2c,#131a33); }
.ql-guarantee { background:linear-gradient(110deg,rgba(0,223,204,.09),rgba(50,149,255,.055)),#0d1b2c; }
.section-heading span { color:var(--brand); }