html, body {
  margin: 0;
  background: #fff;
  color: #1c2430;
  overflow-x: visible;
  overflow-y: visible;
  font: 17px/1.55 "Segoe UI", system-ui, sans-serif;
}
body { min-height: 100%; }
a { color: #0f6b4c; }
a:hover { color: #0a4a35; }
img, svg, video { max-width: 100%; height: auto; }
.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.skip {
  position: absolute;
  left: 12px;
  top: -40px;
}
.skip:focus { top: 8px; background: #fff; padding: 6px 10px; }
.top {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #e6e8ee;
  z-index: 2;
}
.bar { display: flex; gap: 16px; align-items: center; padding: 12px 0; }
.logo { font-weight: 700; letter-spacing: 0.04em; text-decoration: none; color: #142033; font-size: 20px; }
.menus { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.menu { position: relative; }
.menu summary { cursor: pointer; list-style: none; padding: 6px 8px; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] > div {
  display: grid;
  gap: 4px;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 10px;
  min-width: 180px;
}
.menu > div a { text-decoration: none; padding: 4px 2px; }
.enter { text-decoration: none; border: 1px solid #1c2430; border-radius: 999px; padding: 6px 12px; color: #1c2430; }
main { padding: 28px 0 64px; }
h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.15; letter-spacing: -0.03em; margin: 8px 0 12px; }
h2 { margin: 36px 0 12px; font-size: 28px; letter-spacing: -0.02em; }
h3 { margin: 0 0 6px; }
.lead { font-size: 19px; max-width: 68ch; }
.hero { width: min(100%, 880px); border-radius: 20px; border: 1px solid #e6e8ee; margin: 8px 0 20px; display: block; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: #5c6774; font-size: 14px; }
.crumbs a { color: #5c6774; }
.sep { color: #b7bec7; }
.cards, .plan-grid, .see-grid, .foot-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card, .plan {
  display: block;
  border: 1px solid #e6e8ee;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}
.card p, .plan p { margin: 6px 0; color: #3e4a59; }
.studio, .faq details, .seealso { border: 1px solid #e6e8ee; border-radius: 18px; padding: 16px; margin: 18px 0; }
.studio { display: grid; gap: 10px; background: #fbfcfd; }
label { display: grid; gap: 6px; font-size: 14px; }
textarea, input, select, button {
  font: inherit;
  border-radius: 12px;
  border: 1px solid #cfd6df;
  padding: 10px 12px;
  background: #fff;
  color: #1c2430;
}
button { cursor: pointer; background: #143d32; color: #fff; border-color: #143d32; }
button:hover { background: #0f2e26; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.hint { color: #5c6774; margin: 0; }
.out { min-height: 1.2em; white-space: pre-wrap; }
.out img, .out video, .out audio { display: block; margin-top: 12px; max-width: 100%; border-radius: 12px; }
.price { font-size: 28px; margin: 4px 0; }
.price s { color: #8b95a1; font-size: 16px; }
.badge { min-height: 1em; color: #0f6b4c; font-size: 13px; }
.hidden { display: none; }
.tabs { display: flex; gap: 8px; margin: 8px 0; }
.tabs .on { background: #143d32; color: #fff; }
.index { columns: 2; padding-left: 18px; }
.foot { border-top: 1px solid #e6e8ee; padding: 28px 0 48px; background: #fff; }
.foot h2 { font-size: 16px; margin: 0 0 8px; }
.foot a { text-decoration: none; }
.foot li { margin: 4px 0; }
.fine { color: #5c6774; font-size: 14px; }
@media (max-width: 720px) {
  .index { columns: 1; }
  .bar { align-items: flex-start; }
  .menus { flex-basis: 100%; }
  .menu > div { position: static; }
}
@media (min-width: 721px) {
  .menu > div { position: absolute; z-index: 3; }
}

/* t2933 ranvik layout, white */
.top{position:sticky;top:0;display:flex;align-items:center;gap:12px;padding:12px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:0;z-index:20}
.top .auth{margin-left:auto;display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;font-size:14px;text-decoration:none;white-space:nowrap}
.btn.ghost{background:#f1f2f5;color:#111}.btn.solid{background:#111;color:#fff}
.burger,.sb-close{border:0;background:#f1f2f5;color:#111;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.top-logo{display:none}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#fafafb;border-right:1px solid #eceef2;display:flex;flex-direction:column;z-index:40;overflow-y:auto;transition:transform .2s}
.sb-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}
.sidebar .logo{display:flex;align-items:center;gap:8px;font-size:18px}
.sb-close{width:32px;height:32px;background:transparent}
.sb-nav,.sb-foot{display:flex;flex-direction:column;padding:4px 8px}
.sb-foot{margin-top:auto;border-top:1px solid #eceef2;padding-top:8px;padding-bottom:12px}
.sb-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:#1c2430;text-decoration:none;font-size:15px}
.sb-link:hover,.sb-link.on{background:#eef0f4;color:#111}
.sb-models{padding:6px 8px;border-top:1px solid #eceef2;margin-top:6px}
.sb-group summary{cursor:pointer;padding:7px 10px;font-size:13px;color:#6b7280;list-style:none}
.sb-group a{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:14px;color:#1c2430;text-decoration:none;border-radius:8px}
.sb-group a:hover{background:#eef0f4}
.sb-group img.lg{width:18px;height:18px}
.sb-shade{display:none}
.page{margin-left:240px;transition:margin .2s}
body.sb-collapsed .sidebar{transform:translateX(-100%)}
body.sb-collapsed .page{margin-left:0}
body.sb-collapsed .top-logo{display:inline}
.page .wrap{width:min(1080px,calc(100% - 40px))}
img.lg{width:24px;height:24px;object-fit:contain;flex:none}
.hero-chat{text-align:center;padding:40px 0 10px}
.hero-chat h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15;margin:0 auto 10px;max-width:640px;font-weight:600}
.hero-chat .sub{color:#555c68;margin:0 auto 24px;max-width:560px;font-size:16px}
.chatbox{max-width:760px;margin:0 auto;background:#f4f5f7;border:1px solid #e6e8ee;border-radius:22px;padding:12px 12px 8px;text-align:left;display:block}
.chatbox textarea{width:100%;border:0;background:transparent;resize:none;font:inherit;font-size:16px;outline:none;padding:6px 6px;box-sizing:border-box;min-height:48px}
.cb-row{display:flex;align-items:center;gap:8px}
.cb-row .grow{flex:1}
.ic{width:38px;height:38px;border-radius:50%;border:1px solid #e1e3e8;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;color:#333;padding:0;margin:0}
.ic.send{background:#111;color:#fff;border-color:#111}
.pill{position:relative;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e1e3e8;border-radius:999px;padding:4px 10px 4px 8px;font-size:14px;margin:0}
.pill img.lg{width:18px;height:18px}
.pill select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;font-size:14px;padding:4px 14px 4px 0;max-width:150px;cursor:pointer;outline:none}
.pill .chev{position:absolute;right:10px;pointer-events:none;color:#888}
.chatbox .hint{font-size:12px;color:#8a9099;margin:6px 6px 0;text-align:left}
.log{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto}
.has-log .log{padding:4px 2px 10px}
.msg{padding:10px 14px;border-radius:16px;white-space:pre-wrap;font-size:15px;max-width:88%}
.msg.me{align-self:flex-end;background:#111;color:#fff}
.msg.ai{align-self:flex-start;background:#fff;border:1px solid #e6e8ee}
.msg img,.msg video{display:block;margin-top:8px;border-radius:12px;max-width:100%}
.chatbox .out:empty{display:none}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px auto 0;max-width:640px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#f4f5f7;color:#1c2430;text-decoration:none;font-size:15px}
.chip:hover{background:#e9ebef}
.strip-title{color:#8a9099;margin:40px 0 14px;font-size:15px}
.strip{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip-track{display:flex;gap:28px;width:max-content;animation:strip 50s linear infinite}
.strip a{display:inline-flex;align-items:center;gap:8px;color:#333;text-decoration:none;font-size:16px;white-space:nowrap}
.strip img.lg{width:28px;height:28px}
@keyframes strip{to{transform:translateX(-50%)}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border:1px solid #eceef2;border-radius:16px;background:#fafafb;color:#1c2430;text-decoration:none}
.tile:hover{background:#f1f2f5}
.tile img.lg{width:36px;height:36px}
.tile h3{margin:0;font-size:15px;font-weight:600}
h1.ph{display:flex;align-items:center;gap:12px}
h1.ph img.lg{width:40px;height:40px}
.card img{display:none}
.hero{display:none}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);width:280px;box-shadow:0 0 30px rgba(0,0,0,.12)}
  body.sb-open .sidebar{transform:none}
  body.sb-open .sb-shade{display:block;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:30}
  .page{margin-left:0}
  .top{padding:10px 12px}
  .top-logo{display:none!important}
  .hero-chat{padding-top:24px}
  .page .wrap{width:calc(100% - 24px)}
  .btn{padding:8px 12px;font-size:13px}
  .pill select{max-width:110px}
}
.chatbox .ic:hover,.burger:hover,.sb-close:hover{background:#eceef2;color:#111}
.chatbox .ic.send:hover{background:#333;color:#fff}
.chatbox .pill select{border:0;padding:4px 14px 4px 0;background:transparent;border-radius:0}
