:root {
  color-scheme: dark;
  --paper: #fff0d8;
  --soft: #d9c0a5;
  --gold: #eac088;
  --edge: #92663e88;
  --field: #201711;
  --canvas: radial-gradient(ellipse at 80% 0, #3c2619, #1d1610 42%, #17130e 76%);
  --panel: linear-gradient(135deg, #38271d, #2b2018);
  --serif: 'Cormorant Garamond', Georgia, serif;
  font: 15px/1.55 Inter, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; color: var(--paper); background: var(--canvas); }
body:has(#editor:not([hidden])) {
  --paper: #f7f3e4;
  --soft: #c6d9cb;
  --edge: #72917c83;
  --field: #11251d;
  --canvas: radial-gradient(ellipse at 82% 0, #254737, #132820 46%, #0d1c16 82%);
  --panel: linear-gradient(135deg, #213c30, #172e25);
}
body:has(#home:not([hidden])), .cookie-page {
  --paper: #fcf1da;
  --soft: #cddacb;
  --edge: #90a98c50;
  --field: #14291f;
  --canvas: radial-gradient(ellipse at 76% 8%, #294634, #142b20 34%, #0e2018 75%);
}
a { color: var(--gold); text-underline-offset: .25em; }
button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
:focus-visible { outline: 2px solid #ffdb9e; outline-offset: 3px; }
button:disabled { opacity: .66; cursor: wait; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 15px;
  max-width: 1180px; min-height: 67px; margin: auto; padding: 8px 28px;
  border-bottom: 1px solid var(--edge);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); font: 600 1.17rem/1.2 var(--serif); text-decoration: none; }
.brand span { color: var(--gold); font: 27px/1 var(--serif); }
.site-header nav a { font-size: .8rem; }
main { width: min(100% - 56px, 1124px); margin: 0 auto; padding: 38px 0 55px; }
h1, h2 { font-family: var(--serif); font-weight: 500; }
h1 { font-size: clamp(2.55rem, 7vw, 4.35rem); line-height: .99; margin: 0 0 14px; letter-spacing: -.035em; text-wrap: balance; }
h1 em { color: var(--gold); font-weight: 400; }
h2 { margin: 0 0 10px; font-size: 1.72rem; line-height: 1.17; }
p { margin: 0 0 13px; }
.eyebrow { color: var(--gold); text-transform: uppercase; font-weight: 700; font-size: .67rem; letter-spacing: .13em; }
.lead { font-size: 1.04rem; color: var(--soft); max-width: 48ch; }
.hero { display: grid; grid-template-columns: 1.38fr .9fr; align-items: center; gap: clamp(25px, 6vw, 80px); padding: 16px 4% 42px; }
.hero h1 { font-size: clamp(3.15rem, 6vw, 5.45rem); margin-bottom: 22px; }
.hero h1 em { display: block; }
.hero .lead { font-size: 1.11rem; max-width: 42ch; margin-bottom: 25px; }
.hero-art, .editor-art { display: block; justify-self: center; border: 1px solid var(--gold); border-radius: 11px; overflow: hidden; box-shadow: 0 18px 75px #0006, 0 0 0 5px #91654027; }
.hero-art { width: min(100%, 320px); box-shadow: 0 21px 72px #030a05ad, 0 0 0 6px #ddae6c26; transition: transform .25s; }
.hero-art:hover { transform: translateY(-3px); }
.hero-art img, .editor-art img { width: 100%; height: auto; display: block; }
.home-actions .button, .landing-section .button { min-height: 49px; padding-inline: 16px; }
.home-actions .button:not(.primary) { background: #1b3527; border-color: #9cac86; }
.home-actions .button:not(.primary):hover { background: #31503c; }
.landing-section { padding: 48px 0; border-top: 1px solid var(--edge); }
.landing-section h2 { font-size: clamp(2.05rem, 4.4vw, 3.4rem); letter-spacing: -.035em; margin-bottom: 11px; }
.section-lead { color: var(--soft); max-width: 62ch; margin-bottom: 22px; }
.example-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.example-card { min-width: 0; border: 1px solid var(--edge); border-radius: 12px; background: linear-gradient(145deg, #254030, #182e23); padding: 19px; }
.example-card h3, .steps h3 { margin: 0 0 7px; font: 500 1.42rem/1.14 var(--serif); }
.example-card p, .steps p { color: var(--soft); font-size: .89rem; margin: 0; }
.example-dot { display: block; width: 17px; height: 17px; margin-bottom: 13px; border-radius: 50%; border: 1px solid #edca8770; box-shadow: 0 0 11px #edca8733; }
.example-dot.ruby { background: radial-gradient(circle at 33% 26%, #ffb2a0, #a63e34 44%, #641c18 80%); }
.example-dot.fir { background: radial-gradient(circle at 33% 26%, #c6ecc9, #4d956b 44%, #285039 80%); }
.example-dot.amber { background: radial-gradient(circle at 33% 26%, #fff7bf, #c79352 44%, #83562c 80%); }
.guest-example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: clamp(22px, 7vw, 95px); scroll-margin-top: 18px; }
.sample-note { text-align: center; color: #3e261a; background: radial-gradient(ellipse at 50% -60px, #fff8ea, #f1dbb8 92%); border: 1px solid #e8b671; border-radius: 14px; padding: 22px; box-shadow: 0 0 0 4px #c2925736, 0 14px 38px #0004; }
.sample-mark { display: block; color: #865527; font: 30px/1 var(--serif); margin-bottom: 8px; }
.sample-note .eyebrow { color: #794c28; margin-bottom: 7px; }
.sample-title { margin: 0 auto 10px; color: #642517; font: 500 clamp(1.85rem, 3.6vw, 2.75rem)/1.04 var(--serif); text-wrap: balance; }
.sample-copy { max-width: 31ch; margin: 0 auto 15px; font-size: .87rem; }
.sample-date { margin: 0; padding-top: 12px; border-top: 1px solid #b5885c85; color: #663821; font-weight: 650; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; counter-reset: step; margin: 23px 0 25px; padding: 0; }
.steps li { counter-increment: step; border-top: 1px solid var(--edge); padding-top: 14px; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; color: var(--gold); margin-bottom: 9px; font: 500 1.25rem var(--serif); }
.landing-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid var(--edge); color: var(--soft); font-size: .83rem; }
.landing-footer a:first-child { color: var(--soft); text-decoration: none; }
.cookie-page { --panel: linear-gradient(135deg, #213c30, #172e25); }
.cookie-content { max-width: 740px; }
.cookie-content h1 { font-size: clamp(2.65rem, 8vw, 4.35rem); }
.cookie-content .lead { margin-bottom: 23px; }
.cookie-content .panel p:last-child { margin-bottom: 0; }
.legal-preview { margin-bottom: 16px; color: var(--gold); font-size: .88rem; }
.legal-document h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
.legal-document h2 { font-size: 1.42rem; margin: 21px 0 8px; }
.legal-document li + li { margin-top: 8px; }
.legal-document mark { background: #ecd5a9; color: #392a19; padding-inline: 2px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: .83rem; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.workspace aside { min-width: 0; }
.panel { padding: 22px; margin-bottom: 16px; border: 1px solid var(--edge); border-radius: 13px; background: var(--panel); }
.panel p { color: var(--soft); }
.panel p:empty, [role=status]:empty { display: none; }
.access { border: 1px solid #deaa68; background: linear-gradient(115deg, #2b4d3c, #1a3529); }
.access > div { max-width: 680px; }
.access.saved { border-color: var(--edge); }
.access .eyebrow { margin-bottom: 6px; }
.access p[role=status], .panel p[role=status], #save-status { margin: 10px 0 0; color: var(--paper); font-size: .88rem; }
#page-status { color: var(--soft); font-size: .83rem; margin: 18px 0; }
label { display: grid; gap: 6px; min-width: 0; margin: 13px 0; font-size: .86rem; font-weight: 550; }
input:not([type=checkbox]), textarea, select {
  width: 100%; min-height: 43px; padding: 9px 11px; color: var(--paper); background: var(--field);
  border: 1px solid #74937f; border-radius: 7px;
}
input[readonly], textarea[readonly] { color: var(--soft); font-size: .82rem; }
input::placeholder, textarea::placeholder { color: #a5bbac; opacity: 1; }
textarea { resize: vertical; }
.field-row, .inline-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-row label { margin: 0; }
.inline-form { align-items: end; }
.inline-form label { margin-bottom: 0; }
.checkbox { display: flex; align-items: center; gap: 9px; min-height: 28px; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--gold); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 8px 12px; border: 1px solid #bb8d60; border-radius: 7px; background: #302017; color: var(--paper); text-decoration: none; font-size: .83rem; font-weight: 650; }
.button:hover { background: #543725; }
body:has(#editor:not([hidden])) .button:not(.primary) { background: #203a2e; border-color: #82a08a; }
body:has(#editor:not([hidden])) .button:not(.primary):hover { background: #325341; }
.button.primary { background: #e5b87b; border-color: #e5b87b; color: #25170e; }
.button.primary:hover { background: #f8d59e; }
.message { border-top: 1px solid var(--edge); }
.message:last-child { border-bottom: 1px solid var(--edge); }
.message summary { display: list-item; padding: 12px 3px; cursor: pointer; }
.message summary::marker { color: var(--gold); }
.message-title { display: block; color: var(--soft); overflow-wrap: anywhere; padding-left: 16px; font-size: .79rem; }
.message-label { margin-left: 5px; }
.message-fields { padding: 0 8px 15px; }
.editor-art { width: min(100%, 315px); margin: 6px auto 0; }
#reply-list { list-style: none; padding: 0; margin: 0 0 12px; }
#reply-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--edge); padding: 7px 0; }
#reply-list li strong { min-width: 0; overflow-wrap: anywhere; }
#reply-list li span { flex-shrink: 0; color: var(--soft); font-size: .82rem; }
#telegram-link { display: inline-block; margin-top: 8px; }
dialog { width: min(100% - 22px, 570px); max-height: min(94svh, 800px); overflow: auto; padding: 18px; border: 1px solid #c39460; border-radius: 13px; color: var(--paper); background: #193126; box-shadow: 0 22px 90px #0009; }
dialog::backdrop { background: #08140ec0; backdrop-filter: blur(3px); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialog-head h2 { margin-bottom: 0; }
.close { width: 44px; height: 44px; background: transparent; color: var(--gold); border: 0; border-radius: 50%; font-size: 1.6rem; }
.close:hover { background: #325341; }
#preview, #home-demo { width: min(100% - 22px, 465px); max-height: 95svh; overflow: hidden; }
#preview-frame, #home-demo-frame { display: block; width: 100%; height: min(78svh, 730px); margin-top: 6px; border: 1px solid var(--edge); border-radius: 7px; background: var(--field); }
#home-demo-frame { height: min(72svh, 695px); }
.demo-fullscreen { display: inline-block; margin-top: 10px; font-size: .82rem; }
.preset { display: grid; gap: 4px; width: 100%; margin: 7px 0; padding: 10px 12px; background: var(--field); color: var(--paper); border: 1px solid var(--edge); border-radius: 8px; text-align: left; }
.preset:hover { background: #294839; border-color: var(--gold); }
.preset span:last-child { color: var(--soft); font-size: .82rem; }
@media (max-width: 690px) {
  main { width: calc(100% - 30px); padding-top: 26px; }
  .site-header { padding-inline: 15px; }
  .hero { grid-template-columns: 1fr; padding: 4px 0 34px; gap: 24px; }
  .hero h1 { font-size: clamp(2.55rem, 10vw, 4.1rem); margin-bottom: 16px; }
  .hero .lead { font-size: 1rem; margin-bottom: 15px; }
  .hero-art { width: min(100%, 266px); }
  .workspace, .guest-example, .steps { grid-template-columns: minmax(0, 1fr); }
  .landing-section { padding: 31px 0; }
  .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .example-card { padding: 13px; }
  .guest-example .sample-note { order: 1; }
  .panel { padding: 16px; }
  input:not([type=checkbox]), textarea, select { font-size: 16px; }
  .editor-art { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-art { transition: none; } }
@media (max-width: 380px) {
  .inline-form { grid-template-columns: minmax(0, 1fr); }
  .brand { font-size: .95rem; }
  .site-header nav a { font-size: .75rem; }
}