:root {
  color-scheme: light;
  --background: #f7f9fe;
  --surface: #fff;
  --text: #172238;
  --muted: #64748b;
  --primary: #6456ea;
  --primary-dark: #5142d7;
  --accent: #24b3bd;
  --border: #e4e9f3;
  --shadow: 0 22px 68px rgba(43, 54, 107, .09);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--background); overflow-x: hidden; }
button, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .67; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #8c82ff; outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
.wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; position: relative; }
.ambient { position: absolute; pointer-events: none; z-index: 0; filter: blur(15px); }
.ambient-one { width: min(590px, 100%); height: 520px; border-radius: 50%; right: 0; top: 40px; background: radial-gradient(circle, #e5dffe 0, #e5dffe00 70%); }
.ambient-two { width: min(650px, 100%); height: 420px; border-radius: 50%; left: 0; top: 450px; background: radial-gradient(circle, #dff5f7bd 0, #e5dffe00 72%); }
.site-header { height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 24px; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; white-space: nowrap; letter-spacing: -.05em; }
.brand-icon { height: 31px; width: 31px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, #6859f0, #3cbfca); box-shadow: 0 4px 14px #6654e733; }
.brand-icon span { width: 0; height: 0; border-left: 11px solid white; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 2px; }
.brand-separator { color: #6b5bfa; padding-inline: 1px; }
.brand-studio { font-weight: 500; color: #5f7189; }
.site-header nav { display: flex; align-items: center; gap: 38px; font-size: 14px; color: #475875; font-weight: 600; }
.site-header nav a:hover { color: var(--primary); }
.button { border: 1px solid transparent; display: inline-flex; justify-content: center; align-items: center; gap: 12px; border-radius: 13px; padding: 13px 22px; line-height: 1.3; font-weight: 750; font-size: 14px; transition: transform .2s, box-shadow .2s, background .2s, border .2s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: linear-gradient(120deg, #6d5ded, #584bd6); box-shadow: 0 10px 20px #6456ea29; }
.button-primary:hover { background: linear-gradient(120deg, #6755e6, #493bc4); box-shadow: 0 12px 26px #6456ea42; }
.button-outline { background: #fff9; border-color: #dde2ef; color: #33415d; }
.button-outline:hover, .button-ghost:hover { border-color: #bfc4fb; }
.button-ghost { background: white; color: #5347cc; box-shadow: 0 3px 16px #34376b0e; }
.button-small { padding: 11px 17px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; min-height: 570px; gap: 44px; padding: 58px 0 92px; }
.hero-copy { padding-bottom: 22px; }
.eyebrow { color: #6554de; display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 850; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #6c6bea; box-shadow: 0 0 0 4px #7467ed1c; }
.hero h1 { font-size: clamp(43px, 4.55vw, 70px); line-height: 1.12; letter-spacing: -.063em; margin: 22px 0 22px; font-weight: 850; max-width: 740px; }
.gradient-text { background: linear-gradient(100deg, #7564e8 12%, #479dcc 88%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy > p:not(.hero-footnote) { color: #66758f; font-size: 17px; line-height: 1.85; max-width: 560px; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 28px; }
.hero-actions .button { padding: 16px 24px; }
.hero-footnote { color: #8a96aa; font-size: 12px; font-weight: 650; margin-top: 30px; }
.dot-divider { margin-inline: 5px; color: #b4bfd0; }
.hero-art { height: 425px; position: relative; }
.art-card { position: absolute; border-radius: 23px; }
.art-back { width: 76%; height: 70%; left: 1%; top: 7%; transform: rotate(-10deg); background: #242e4b; box-shadow: 0 33px 70px #403b7544; padding: 18px 22px; }
.art-top { display: flex; gap: 7px; }
.art-top span { display: block; width: 9px; height: 9px; border-radius: 50%; background: #f67986; }
.art-top span:nth-child(2) { background: #fac866; }
.art-top span:nth-child(3) { background: #53d2aa; }
.art-code { margin-top: 31px; display: flex; flex-direction: column; gap: 17px; }
.art-code i { height: 8px; border-radius: 4px; width: 68%; background: linear-gradient(90deg, #53b4c6 30%, #8a82ea 30%, #8a82ea 58%, #3a486b 58%); opacity: .75; }
.art-code i:nth-child(2) { width: 84%; margin-left: 14px; }
.art-code i:nth-child(3) { width: 58%; margin-left: 27px; }
.art-code i:nth-child(4) { width: 71%; margin-left: 14px; }
.art-code i:nth-child(5) { width: 46%; }
.art-front { width: 75%; height: 72%; top: 20%; right: 0; background: radial-gradient(circle at 73% 35%, #6248b4, #1b2b66 58%, #0e204f); transform: rotate(8deg); box-shadow: 0 28px 62px #29326e44; overflow: hidden; color: white; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 7%; }
.art-front::before { content: ""; width: 230px; height: 230px; border-radius: 50%; position: absolute; right: -72px; top: -55px; background: radial-gradient(circle, #2bd4db77, transparent 70%); }
.art-play { width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid #ffffff78; border-radius: 50%; background: #ffffff1c; margin-bottom: 14px; }
.art-play span { border-left: 15px solid white; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; }
.art-motion { font-size: clamp(29px, 3vw, 42px); font-weight: 850; letter-spacing: -.055em; line-height: 1.2; z-index: 1; }
.art-motion em { font-style: normal; color: #74f3e9; }
.art-line { width: 46%; height: 4px; border-radius: 10px; background: #69eee4; margin-top: 18px; }
.art-pill { position: absolute; right: 20px; bottom: 20px; padding: 8px 11px; border-radius: 10px; background: #ffffff25; color: #e9edff; font-size: 10px; font-weight: 800; }
.art-floating { position: absolute; z-index: 2; background: white; border: 1px solid #e1e6f3; border-radius: 13px; box-shadow: 0 12px 28px #272a721f; padding: 10px 17px; font-size: 14px; font-weight: 850; color: #5a51d5; }
.art-floating span { color: #2bbac0; }
.art-floating-one { right: 8%; top: 7%; transform: rotate(9deg); }
.art-floating-two { left: 3%; bottom: 4%; color: #59617d; transform: rotate(-7deg); }
.art-floating-two span { color: #20c9aa; margin-left: 7px; }
.studio-section { scroll-margin-top: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 23px; }
.eyebrow-light { color: #8a80db; }
.section-heading h2 { font-size: clamp(30px, 3.2vw, 43px); letter-spacing: -.055em; margin: 8px 0 4px; line-height: 1.15; }
.section-heading p { color: #8390a4; margin: 0; font-size: 14px; }
.status-chip { color: #258a71; background: #e7f8f1; border: 1px solid #d3f0e4; border-radius: 20px; padding: 7px 12px; font-size: 11px; font-weight: 850; white-space: nowrap; }
.status-chip span { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #27b889; margin-right: 6px; }
.studio-shell { border: 1px solid #e4e6f3; background: white; border-radius: 21px; overflow: hidden; box-shadow: var(--shadow); }
.studio-toolbar { min-height: 57px; display: flex; align-items: center; justify-content: space-between; padding: 13px 23px; border-bottom: 1px solid #e8ebf4; background: linear-gradient(90deg, #fff, #fafbff); }
.toolbar-title { color: #29324d; font-weight: 850; font-size: 14px; }
.toolbar-icon { color: #6f62ef; font-size: 19px; vertical-align: middle; margin-right: 6px; }
.toolbar-info { color: #8996ad; font-size: 11px; font-weight: 750; }
.toolbar-led { display: inline-block; width: 7px; height: 7px; background: #27c69e; border-radius: 50%; margin-right: 6px; }
.toolbar-divider { padding-inline: 9px; color: #ced4e0; }
.workspace-grid { display: grid; grid-template-columns: 1fr 1fr; }
.editor-panel, .preview-panel { min-width: 0; padding: 22px; }
.editor-panel { background: #fbfcff; border-right: 1px solid #e8eaf2; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 32px; gap: 15px; }
.panel-label { display: inline-flex; align-items: center; gap: 9px; }
.panel-label h3 { margin: 0; font-size: 14px; }
.panel-icon { display: inline-grid; place-items: center; color: #6c5dec; font-size: 14px; font-weight: 800; background: #efedff; width: 29px; height: 29px; border-radius: 9px; }
.microcopy { font-size: 11px; font-weight: 650; color: #9aa5b7; }
.template-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.template-btn { background: white; border: 1px solid #e3e6ef; border-radius: 9px; color: #6e7b92; font-size: 11px; font-weight: 750; padding: 9px 11px; }
.template-btn:hover { border-color: #a3a4ec; }
.template-btn.is-active { background: #eeedff; border-color: #bdb6ff; color: #5949ce; }
.editor-box { background: #151d33; border: 1px solid #26314b; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 25px #18233a11; }
.editor-bar { display: flex; align-items: center; padding: 12px 15px; font-size: 11px; font-weight: 750; color: #b6c4df; background: #202942; border-bottom: 1px solid #303c59; }
.file-dot { width: 7px; height: 7px; border-radius: 50%; background: #6bd8c8; display: inline-block; margin-right: 8px; }
.editor-format { margin-left: auto; font-size: 10px; color: #7485a8; }
#html-editor { resize: vertical; display: block; width: 100%; min-height: 443px; border: 0; background: #151d33; color: #c7e8f3; font: 12px/1.75 Consolas, Monaco, "Courier New", monospace; padding: 18px 20px; tab-size: 2; }
#html-editor:focus { outline: none; }
#html-editor {
  color-scheme: dark;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #64748b #151d33;
}
@supports selector(::-webkit-scrollbar) {
  #html-editor { scrollbar-width: auto; scrollbar-color: auto; }
  #html-editor::-webkit-scrollbar { width: 10px; height: 10px; }
  #html-editor::-webkit-scrollbar-track { background: #151d33; }
  #html-editor::-webkit-scrollbar-thumb {
    background: #64748b;
    border: 2px solid #151d33;
    border-radius: 999px;
    min-height: 36px;
  }
  #html-editor::-webkit-scrollbar-thumb:hover { background: #8c82ff; }
  #html-editor::-webkit-scrollbar-thumb:active { background: #a89fff; }
  #html-editor::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  #html-editor::-webkit-scrollbar-corner,
  #html-editor::-webkit-resizer { background: #151d33; }
}
.editor-bottom { display: flex; justify-content: space-between; gap: 12px; color: #a3aec1; font-size: 11px; margin-top: 14px; }
.text-button { border: none; padding: 0; background: transparent; color: #6358cc; font-size: 11px; font-weight: 800; }
.text-button:hover { text-decoration: underline; }
.preview-host { margin-top: 18px; min-height: 273px; border-radius: 13px; border: 1px solid #e8ecf3; background: radial-gradient(circle at 30% 20%, #f7f7fc, #eef2f8); padding: 18px; display: grid; place-items: center; overflow: hidden; }
.preview-frame { width: 100%; border-radius: 9px; box-shadow: 0 12px 28px #14294d20; overflow: hidden; background: white; }
#preview-iframe { border: none; display: block; width: 100%; height: 100%; aspect-ratio: inherit; }
.preview-caption { display: flex; gap: 8px; align-items: center; color: #8a98ae; font-size: 11px; margin-top: 10px; }
.preview-caption span:last-child { margin-left: auto; color: #aab4c3; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2dc29b; }
.settings-heading { color: #29334d; font-size: 13px; font-weight: 850; display: flex; justify-content: space-between; margin-top: 26px; }
.settings-heading span { font-size: 10px; font-weight: 500; color: #a2adbd; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; color: #75839b; font-size: 11px; font-weight: 750; }
.field select { border: 1px solid #e2e6ef; background: #fbfcff; border-radius: 9px; color: #34415e; padding: 10px 12px; font-size: 12px; width: 100%; min-width: 0; }
.field-format { justify-content: space-between; }
.format-badge { border-radius: 9px; border: 1px dashed #b6c0f4; color: #6456d1; background: #f7f6ff; font-size: 12px; font-weight: 750; padding: 10px 12px; line-height: 1.2; }
.render-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 9px; }
.button-export { flex: 1; min-height: 45px; }
.button-download { background: #e6f8f1; border-color: #b8e9d5; color: #187b5d; }
.button-download[hidden], .progress-track[hidden] { display: none; }
.render-status { color: #8895aa; font-size: 11px; margin-top: 11px; min-height: 19px; }
.render-status[data-type="success"] { color: #16865f; }
.render-status[data-type="error"] { color: #c94150; }
.progress-track { height: 5px; width: 100%; background: #e6e9f3; border-radius: 12px; margin-top: 8px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #6555e9, #2fc2c6); transition: width .25s; }
.content-section { padding: 130px 0 90px; scroll-margin-top: 70px; }
.content-intro { text-align: center; max-width: 650px; margin: 0 auto 40px; }
.content-intro h2, .use-copy h2 { font-size: clamp(30px, 3.2vw, 45px); letter-spacing: -.055em; line-height: 1.15; margin: 12px 0; }
.content-intro p { color: #7b8aa2; margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { position: relative; background: #fff; border: 1px solid #e6eaf3; border-radius: 18px; padding: 31px; min-height: 260px; box-shadow: 0 5px 25px #28305c08; }
.feature-number { color: #b8bdcc; position: absolute; right: 28px; top: 27px; font-size: 13px; font-weight: 850; }
.feature-glyph { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: #e8f8f6; color: #22a9ac; font-size: 27px; font-weight: 750; }
.feature-glyph.feature-purple { background: #f0ecff; color: #7564e8; }
.feature-glyph.feature-cyan { background: #eaf6ff; color: #388fc8; }
.feature-card h3 { letter-spacing: -.025em; font-size: 18px; margin: 24px 0 8px; }
.feature-card p { font-size: 13px; line-height: 1.8; color: #8290a4; margin: 0; }
.use-cases { background: linear-gradient(118deg, #22254a, #232b60); border-radius: 25px; color: #fff; padding: 52px 60px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.use-copy .eyebrow { color: #9ff5e8; }
.use-copy h2 { color: #fff; max-width: 460px; }
.use-copy p { color: #aab7d2; margin-bottom: 0; }
.use-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.use-tags span { border-radius: 100px; background: #ffffff10; border: 1px solid #ffffff23; padding: 11px 16px; font-weight: 750; font-size: 12px; color: #dce7ff; }
.faq-section { max-width: 850px; padding-bottom: 100px; }
.faq-list { border: 1px solid #e2e8f1; background: #fff; border-radius: 18px; padding: 8px 23px; }
.faq-list details + details { border-top: 1px solid #e7ecf4; }
.faq-list summary { cursor: pointer; padding: 21px 4px; font-size: 15px; font-weight: 750; }
.faq-list details p { color: #78869d; margin: 0 0 22px; max-width: 700px; font-size: 13px; line-height: 1.8; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #e5eaf3; padding-top: 28px; padding-bottom: 40px; color: #99a5b7; font-size: 12px; }
.brand-footer { font-size: 14px; color: #404967; }
.site-footer p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }
@media (max-width: 1100px) {
  .hero { gap: 14px; }
  .hero-art { transform: scale(.88); transform-origin: center right; }
  .workspace-grid { grid-template-columns: 1fr 1fr; }
  .editor-panel, .preview-panel { padding: 16px; }
}
@media (max-width: 800px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 50px 0 70px; }
  .hero-copy { padding: 0; }
  .hero-art { height: 340px; transform: scale(.85); transform-origin: top center; }
  .workspace-grid, .use-cases { grid-template-columns: 1fr; }
  .editor-panel { border-right: 0; border-bottom: 1px solid #e8eaf2; }
  #html-editor { min-height: 320px; }
  .feature-grid { grid-template-columns: 1fr; }
  .content-section { padding: 90px 0 75px; }
}
@media (max-width: 520px) {
  .wrap { width: min(100% - 30px, 1240px); }
  .site-header { height: 76px; }
  .site-header .button { display: none; }
  .brand { font-size: 17px; }
  .hero { padding: 36px 0 35px; }
  .hero h1 { font-size: 42px; }
  .hero-copy > p:not(.hero-footnote) { font-size: 15px; }
  .hero-art { height: 290px; transform: scale(.72); margin: 0 -50px; }
  .section-heading { align-items: start; }
  .section-heading h2 { font-size: 29px; }
  .section-heading .status-chip { display: none; }
  .studio-toolbar { padding: 12px 14px; }
  .toolbar-info { display: none; }
  .editor-panel, .preview-panel { padding: 13px; }
  .template-btn { padding: 8px; }
  .preview-host { min-height: 230px; padding: 12px; }
  .preview-caption span:last-child { display: none; }
  .settings-grid { gap: 10px; }
  .use-cases { padding: 35px 26px; border-radius: 19px; }
  .feature-card { min-height: auto; }
  .site-footer { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .button:hover { transform: none; }
}

/* Studio refinements: readable labels, predictable canvas and touch targets. */
.preview-frame { position: relative; }
#preview-iframe { position: absolute; inset: 0 auto auto 0; max-width: none; aspect-ratio: auto; transform-origin: top left; }
.studio-limit { color: var(--muted); font-size: 12px; margin: 14px 0 0; line-height: 1.6; }
.microcopy, .editor-bottom, .preview-caption, .preview-caption span:last-child,
.settings-heading span, .section-heading p, .render-status, .hero-footnote,
.site-footer, .field, .feature-card p, .content-intro p, .faq-list details p { color: #596b83; }
.eyebrow-light { color: #6554b6; }
.editor-format { color: #adbbd6; }
.template-btn, .text-button { min-height: 40px; font-size: 12px; }
.field { font-size: 12px; }
.field select { min-height: 44px; border-radius: 12px; }
.render-status { font-size: 13px; overflow-wrap: anywhere; }
.editor-box:focus-within { outline: 3px solid #8c82ff; outline-offset: 3px; }
.hero-actions .button-primary { box-shadow: 0 8px 24px #6456ea30; }
.studio-shell { box-shadow: 0 24px 72px #2b366b0d, 0 2px 8px #2b366b08; }
@media (max-width: 767px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .button, .render-actions .button { width: 100%; }
  .editor-bottom { flex-wrap: wrap; }
  .template-picker { display: grid; grid-template-columns: 1fr; }
  .template-btn { text-align: left; padding-inline: 14px; }
  .hero-art { margin-inline: 0; transform: none; height: 270px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}

/* Playback, local drafts and export results. */
[hidden] { display: none !important; }
.draft-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px; }
#draft-status { font-size:11px; color:var(--muted); flex:1; min-width:110px; }
#clear-draft-btn { color:#596b83; }
.editor-box.is-dragging { outline:3px solid var(--accent); outline-offset:3px; }
.playback-controls { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:10px; margin-top:16px; padding:14px; border:1px solid var(--border); border-radius:12px; background:#fbfcff; }
.control-button { min-height:36px; border:1px solid #d8ddef; border-radius:9px; background:white; color:#5142d7; padding:7px 13px; font-size:12px; font-weight:700; }
#time-display { text-align:right; font-variant-numeric:tabular-nums; font-size:12px; color:#596b83; }
#timeline { grid-column:1 / -1; width:100%; margin:4px 0; accent-color:var(--primary); cursor:pointer; }
#frame-display { grid-column:1 / 3; font-size:11px; color:#596b83; font-variant-numeric:tabular-nums; }
#snapshot-btn { justify-self:end; min-height:32px; text-align:right; }
.custom-size-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.custom-size-fields input { min-width:0; width:100%; border:1px solid var(--border); border-radius:12px; padding:10px 12px; color:var(--text); background:#fbfcff; }
.custom-size-fields p { grid-column:1 / -1; font-size:11px; color:#596b83; margin:0; }
.field-error { color:var(--error,#c94150); font-size:12px; margin:10px 0 0; }
.result-panel { margin-top:22px; padding:16px; background:#f7f9fe; border:1px solid var(--border); border-radius:14px; }
.export-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:20px; padding:24px; border-top:1px solid var(--border); }
.export-results .result-panel { margin-top:0; min-width:0; }
#snapshot-details { margin-bottom:12px; }
.result-panel h4 { margin:0 0 12px; font-size:14px; }
.result-panel video { display:block; width:100%; max-height:420px; border-radius:9px; background:#10182e; }
.result-panel p { color:#596b83; font-size:12px; margin:10px 0 0; }
.result-panel img { display:block; width:auto; max-width:100%; max-height:260px; border-radius:9px; margin:0 auto 12px; }
@media(max-width:767px) { .playback-controls { padding:10px; gap:8px; } .draft-tools { gap:6px 12px; } .template-picker { grid-template-columns:1fr 1fr; } .template-btn { font-size:11px; padding-inline:10px; } .export-results { padding:14px; gap:14px; } }
@media(forced-colors:active) { .editor-box.is-dragging { outline-color:Highlight; } }
.policy-page { max-width:850px; padding:48px 0 96px; }
.policy-page h1 { font-size:clamp(32px,5vw,48px); letter-spacing:-.04em; }
.policy-page h2 { margin:32px 0 12px; font-size:23px; }
.policy-page p, .policy-page li { color:#596b83; line-height:1.9; }
.policy-page li + li { margin-top:8px; }
.account-panel { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; padding:20px 24px; margin:0 0 22px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.account-copy { flex:1; min-width:0; overflow-wrap:anywhere; }
.account-copy strong { font-size:14px; }
.account-copy p { margin:6px 0 0; font-size:12px; line-height:1.7; color:#596b83; }
.account-actions { flex-shrink:0; }
.account-actions form { margin:0; }
.account-actions .button { font-size:13px; min-height:42px; }
.account-panel details { width:100%; font-size:12px; color:#596b83; overflow-wrap:anywhere; }
.account-panel summary { cursor:pointer; color:var(--text); font-weight:700; }
.account-panel ul { padding-left:18px; line-height:1.9; }
.account-copy .auth-message:empty { display:none; }
.account-copy .auth-message { color:#5142d7; }
@media(max-width:767px) { .account-panel { padding:16px; gap:12px; } .account-actions { width:100%; } .account-actions .button { width:100%; } }