/* Grobim's original storybook skin. Layout and product behaviour live in style.css/app.js. */
:root {
  --paper: #faf1dd;
  --ink: #49352f;
  --muted: #77624d;
  --green: #2b6659;
  --deep: #294b43;
  --lime: #f7cb68;
  --line: #dfcba8;
  --parchment: #fff7e6;
  --wood: #674831;
  --copper: #c87542;
  --gold: #f3bd4f;
}
body.fantasy-theme {
  background-image: radial-gradient(#9b734916 .6px,transparent .6px);
  background-size: 7px 7px;
}
::selection { background: #f6ce73; color: #47342c; }
:focus-visible { outline-color: #c57938; }
h2 { font-weight: 650; }
h2 > span { color: #4b8270; font-weight: 500; }
.eyebrow { color: #81613d; letter-spacing: .08em; }
.status-dot { background: #548f65; }
.reading-progress span { background: #d58c3e; }
.header { background: #fff6e4f5; border-bottom: 2px solid #ddc6a2; box-shadow: 0 3px 0 #8d673108; }
.brand { font-weight: 750; color: #50392e; }
.brand-light { font-weight: 550; }
.brand-period { color: #bc6c37; }
.nav-links a::after { background: #c5803f; height: 2px; }
.nav-cta { background: #fff2cf; border: 1px solid #cba771; box-shadow: 0 2px 0 #d4b889; color: #63462d; font-weight: 600; }
.menu-toggle span { background: #614831; }
.button { font-weight: 650; border-radius: 11px; transition: translate .25s var(--ease), background .25s, box-shadow .25s; }
.button-lime { color: #5b3c25; background: linear-gradient(#ffe2a0,#f6c254); border: 1px solid #bd873c; box-shadow: 0 4px 0 #98632d,inset 0 1px 0 #fff2c6; }
.button-dark { background: linear-gradient(#387c68,#285c4e); border: 1px solid #244d3f; box-shadow: 0 3px 0 #193f34,inset 0 1px 0 #83b29a60; color: #fff7dc; }
.button-secondary { background: #fff6df; border-color: #c9ad7a; box-shadow: 0 2px 0 #ddc59b; color: #74512e; }
.button:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 #916533; }
.link-arrow { color: #76502e; font-weight: 600; }
/* A bright painted realm instead of a studio product render. */
.hero {
  color: #4c352d;
  border: 2px solid #8c6843;
  border-radius: 24px;
  box-shadow: 0 6px 0 #d7bd8f,0 22px 50px #89673e12;
  background: radial-gradient(ellipse at 85% 32%,#ebf3d8 0,transparent 55%),linear-gradient(115deg,#fff3d5 8%,#f5e4bb 50%,#c1dbc5);
}
.hero::before {
  inset: -55% -10% -55% 35%;
  opacity: .5;
  background: repeating-conic-gradient(from 14deg at 60% 50%,#fff5ce35 0deg 11deg,transparent 11deg 24deg);
  background-size: auto;
}
.hero::after { background: linear-gradient(90deg,#fff3d5 0%,#fff3d5f2 27%,#fff0d1c2 40%,#fff0d130 54%,transparent 65%); }
.hero-copy .eyebrow { color: #896436; font-weight: 650; }
.hero-copy .status-dot { background: #c68a3e; box-shadow: 0 0 0 3px #f3d9a0; }
.hero h1 { font-weight: 750; letter-spacing: -.05em; text-shadow: 0 2px 0 #fff9e8; }
.hero h1 > span { color: #357c68; font-family: var(--display); font-style: normal; font-weight: 750; letter-spacing: -.05em; line-height: 1.1; text-shadow: 0 2px 0 #fff9e8; }
.title-spark { stroke: #c98237; stroke-width: 1.7; }
.hero-lead { color: #725e48; }
.hero-actions .link-arrow { color: #745432; }
.hero-meta { color: #7c674a; }
.hero-meta svg { fill: #967546; }
.meta-divider { background: #b3996e80; }
.hero-visual { width: 61%; }
.castle-image {
  width: 132%; height: 94%; left: -19%; top: 0;
  mix-blend-mode: normal;
  mask-image: none;
  filter: drop-shadow(0 18px 13px #6b492b24);
}
.scene-rings { inset: 8% -8% 4% 12%; opacity: .19; }
.scene-rings span { border-color: #aa7f47; }
.scene-rings span:nth-child(2) { border-width: 2px; }
.visual-top { color: #6d6446; }
.visual-top .micro { font-weight: 600; }
.visual-annotation { color: #655639; right: 6%; top: 25%; text-shadow: 0 1px 1px #fff7de; }
.annotation-line { background: #ae884f; }
.floating-session { background: #fff7e4f0; border: 2px solid #c2a46e; box-shadow: 0 4px 0 #987347,0 15px 28px #75522c24; border-radius: 13px; color: #513b29; }
.session-symbol { border: 1px solid #ad925b; background: linear-gradient(#fbe7ad,#e8c47d); box-shadow: inset 0 1px 0 #fff6d3; }
.session-symbol svg { stroke: #8b6537; stroke-width: 1.6; }
.floating-session .micro { color: #856134; font-weight: 600; }
.floating-sub { color: #7c6647; }
.floating-plus { color: #a77537; }
.hero-bottom { color: #856b45; border-color: #bda77a80; font-weight: 550; }
.spec-strip { border-color: #d9c49e; margin-top: 31px; }
.spec-inner > div { border-color: #d9c49e; color: #7b6548; }
.spec-inner b { color: #a57437; font-weight: 500; }
.spec-inner svg { stroke: #9b7039; stroke-width: 1.5; }
.section-heading .eyebrow { color: #95703d; }
.activity-menu button { border-color: #d9c49e; }
.activity-menu b { font-weight: 600; }
.activity-menu small { color: #7f694c; }
.activity-number { color: #a17a43; }
.activity-menu [aria-selected=true] { background: #f5e6c6; border-top-color: #ccad76; border-radius: 8px 8px 0 0; }
.activity-arrow { color: #ad7c3f; }
.activity-menu [aria-selected=true] .activity-arrow { background: #337460; border: 1px solid #1d4d3d; box-shadow: 0 2px 0 #1d4d3d; color: #ffe5a7; }
.activity-panel { border: 2px solid #c2a273; background: radial-gradient(ellipse at 74% 23%,#fff5d9,#f1ddb6 70%); border-radius: 17px; box-shadow: 0 4px 0 #d5b78b; }
.activity-panel::before { background: #fff9e6a0; }
.activity-panel-top { color: #89663d; }
.outline-pill { border-color: #b79a69; color: #79562e; background: #fff4d266; }
.orbit { border-color: #b39259; }
.orbit-node { background: #fff5db; border: 1.5px solid #ba9a60; color: #8d6734; box-shadow: 0 2px 0 #d7b57b; font-weight: 600; }
.arena-symbol { border: 2px solid #947044; background: linear-gradient(130deg,#fff0be,#e4ad53); box-shadow: 5px 8px 0 #bb8a4e,10px 18px 22px #80522528,inset 2px 2px 0 #fff9e4; }
.arena-symbol svg { stroke: #805830; stroke-width: 2.5; fill: #f8d78566; stroke-linecap: round; stroke-linejoin: round; }
[data-scene=dungeons] .arena-symbol { background: linear-gradient(130deg,#cbdccc,#83b4a3); box-shadow: 5px 8px 0 #72987d,10px 18px 22px #594d2b28,inset 2px 2px 0 #f6ffdf; }
[data-scene=invasions] .arena-symbol { background: linear-gradient(130deg,#ffe2af,#e89a64); box-shadow: 5px 8px 0 #bb7951,10px 18px 22px #80522528,inset 2px 2px 0 #fff9e4; }
[data-scene=castle] .arena-symbol { background: linear-gradient(130deg,#e8eac0,#aac58b); box-shadow: 5px 8px 0 #8ca368,10px 18px 22px #80522528,inset 2px 2px 0 #fff9e4; }
.activity-route { color: #876538; }
.activity-route i { background: #c3a16a; }
.activity-description h3 { font-weight: 650; color: #5a4030; }
.activity-description p { color: #78603e; }
.activity-detail { color: #7b5931; border-color: #d2b784; }
.panel-footnote { color: #8c704b; }
/* Original companion vignette, with a paper ledger behind the character. */
.companion-callout { padding-block: 0 92px; }
.companion-card { position: relative; isolation: isolate; display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; min-height: 340px; align-items: center; padding: 28px 65px 34px 35px; border: 2px solid #c7aa79; border-radius: 20px; background: linear-gradient(115deg,#f3d99e,#fff3d7 47%,#f7e7c7); box-shadow: 0 5px 0 #dec398; }
.companion-card::after { content: ''; position: absolute; inset: 10px; border: 1px dashed #c1a16c70; border-radius: 12px; z-index: -1; }
.companion-portrait { align-self: end; height: 315px; position: relative; }
.companion-portrait img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 9px 5px #84603230); transform: rotate(-4deg) scale(1.1); transform-origin: bottom center; }
.companion-copy .eyebrow { color: #946931; font-size: 11px; margin-bottom: 19px; }
.companion-copy h2 { font-size: clamp(33px,3.3vw,49px); line-height: 1.08; font-weight: 700; color: #61432e; }
.companion-copy p { font-size: 15px; line-height: 1.8; color: #816244; max-width: 440px; margin-top: 19px; }
.companion-copy .link-arrow { margin-top: 15px; font-size: 13px; color: #40755b; }
.steps article { border-color: #c7a778; }
.step-top > span { color: #98703b; font-weight: 600; }
.step-top svg { stroke: #aa7740; stroke-width: 1.6; }
.steps h3 { font-weight: 650; }
/* The companion interface stays legible; only its materials and palette change. */
.workspace-section { background: #eee7d5; border-color: #d1bd96; }
.demo-notice { color: #80643e; }
.dashboard-shell { border: 2px solid #9c8056; border-radius: 14px; box-shadow: 0 5px 0 #b59b72,0 26px 50px #75542f16; background: #fff9ec; }
.window-bar { background: #e9d7b3; border-color: #c9b183; color: #7d6037; }
.window-dots i { background: #d7bd87; border-color: #aa8447; }
.dashboard-sidebar { background: #f4e9cf; border-color: #dfc99f; }
.dash-brand > span { color: #bd793b; }
.sidebar-label { color: #8b6a3d; }
.dashboard-tabs button { color: #81613b; }
.dashboard-tabs [aria-selected=true] { background: #e5ce9f; color: #654823; box-shadow: inset 0 0 0 1px #c6a56c; }
.sidebar-bottom { border-color: #dcc59a; }
.sidebar-avatar { border-color: #bfa06a; background: #efddb6; color: #866136; }
.sidebar-bottom div > span { color: #80643e; }
.dash-topline, .dash-bottom { border-color: #e3d4b7; color: #82653d; }
.demo-badge { background: #f6e9c9; border-color: #d7bd86; color: #8d652f; }
.panel-heading h3 { color: #59422e; font-weight: 600; }
.panel-heading p { color: #846a48; }
.panel-action { background: #f7edda; border-color: #cbb183; color: #7f5a2e; box-shadow: 0 1px 0 #dfcaa3; }
.progress-summary { background: #f7f0dd; border-color: #dec9a2; }
.ring-track { stroke: #e6d8b7; }
.ring-value { stroke: #bc8540; }
.progress-ring small, .stat-label { color: #8c683a; }
.progress-summary h4 { color: #61472e; font-weight: 600; }
.pill { background: #f9efd6; color: #87602f; border-color: #d5b77f; }
.session-metrics { border-color: #e4d5b7; background: #fffaf0; }
.session-metrics > div + div { border-color: #e4d5b7; }
.session-metrics small { color: #826139; }
.session-icon { color: #98703b; background: #f4e4bd; border-color: #cfb17b; }
.session-activity p { color: #806442; }
.session-log { border-color: #e1d1b0; }
.log-heading { color: #856131; background: #f8f0dd; border-color: #e1d1b0; }
.log-demo, #session-log li > span:first-child, #session-log small { color: #876a43; }
#session-log li { border-color: #ede1c9; }
.log-current { background: #faf2df; }
.log-check { color: #ab7c3d; }
.preview-caption, .form-note, .demo-fallback { color: #806341; }
.table-scroll { border-color: #dfcba5; }
.arena-table caption { background: #f8efda; color: #876235; }
.arena-table th { border-color: #e2cfa9; color: #8a6a40; }
.arena-table td { border-color: #ebdfc5; }
.arena-table td:last-child { color: #806139; }
.arena-table .recommended { background: #f5e8c7; }
.session-form label, .access-form > label { color: #7e5b30; }
.session-form input, .session-form select, .access-form select { border-color: #c8ac7a; background: #fff9eb; color: #5b432c; }
.activity-checks label { color: #7c5e35; }
.settings-state { color: #6b7849; }
.phone-orbit { border-color: #d7bf96; }
.phone-orbit::after { border-color: #d5bf9555; }
.phone-scene { background: radial-gradient(ellipse at 50% 55%,#e9d6ae,transparent 66%); }
.phone-label { color: #927344; }
.phone { background: #6d5134; border-color: #aa8958; box-shadow: 12px 24px 35px #79532f26,inset 0 0 0 1px #ecd6a8; }
.phone-hardware, .phone-nav, .phone-content, .phone-bottom { background: #fff7e6; border-color: #e4cfaa; }
.phone-island { background: #6d5134; }
.phone-avatar { border-color: #ccb17b; color: #92662e; }
.phone-content > .eyebrow, .phone-state { color: #8d6938; }
.phone-session { background: #f5e9ca; border-color: #dcc18b; }
.phone-session > div:first-child, .phone-session > span { color: #886231; }
.phone-progress { background: #e2cf9f; }
.phone-progress > span { background: #bd883b; }
.phone-activity { border-color: #dec99e; }
.phone-activity-icon, .phone-check { color: #a17837; }
.phone-activity div > span, .phone-demo-label { color: #8a6a3d; }
.phone-callout { border: 1.5px solid #bba06c; border-radius: 10px; background: #fff4d9; box-shadow: 0 3px 0 #d5b884,0 12px 25px #79532f1a; }
.phone-callout div > span { color: #927343; }
.control-section { background: #f6ecd7; border-color: #ddc8a2; }
.control-card { background: #fff7e7; border: 1.5px solid #d2b586; box-shadow: 0 3px 0 #e0c69b; }
.control-index { color: #a57538; font-weight: 600; }
.control-card h3 { color: #65462f; font-weight: 650; }
.control-card > p { color: #816446; }
.control-preview { background: #f5e8c7; border-color: #dec08c; }
.duration-preview > div:first-child, .duration-labels, .preview-footer { color: #8b6737; }
.duration-preview b { color: #6f4d24; }
.duration-scale i { background: #e7d4a8; }
.duration-scale i.filled { background: #c99242; box-shadow: inset 0 2px 0 #e8ba6d; }
.premium-icon { border: 1.5px solid #a67b3e; background: linear-gradient(130deg,#ffe9a8,#deb563); box-shadow: 2px 3px 0 #b38b4e; }
.premium-icon svg { stroke: #92622c; stroke-width: 1.7; }
.premium-preview div > span, .connection-state div > span { color: #89663a; }
.connection-icon { color: #a47532; }
.connection-button { background: #fff5dc; border-color: #bfa16a; color: #895d27; box-shadow: 0 2px 0 #dfc595; }
.connection-preview.is-offline { background: #f4e2d0; border-color: #d4a67c; }
.is-offline .connection-state > .status-dot { background: #bf7446; }
.is-offline .connection-button { background: #fff0df; border-color: #c99567; color: #965d32; }
.plan-section { background: #efdfbd; border-color: #d6b783; }
.plan-copy .eyebrow { color: #95703c; }
.plan-copy > p, .plan-availability div > span { color: #7f6341; }
.plan-availability b { color: #6e512d; }
.price-card { border: 2px solid #183d31; border-radius: 18px; background: radial-gradient(ellipse at 80% 0,#4c7b5f55,transparent 70%),#2c5a47; box-shadow: 0 5px 0 #173c2f,0 24px 45px #78532d1a; }
.price-card::before { border-color: #ecd49a38; border-style: dashed; }
.plan-tag { color: #fff0c8; font-weight: 650; }
.plan-tag small { color: #d9c99d; }
.price-top .outline-pill { background: #173c2f44; color: #eddbad; border-color: #9b9e64; }
.price { color: #ffdea0; font-weight: 650; text-shadow: 0 2px 0 #18392b; }
.price > span, .price-sub, .price-card > small { color: #dfcfa4; }
.price-rule { background: #dec28a4d; }
.price-card .check-list li { color: #eee2bc; }
.price-card .check-list li::before { color: #ffdc89; border-color: #b8b272; }
.faq-list { border-color: #c9ab78; }
.faq-list details { border-color: #dfc9a3; }
.faq-list summary { color: #634931; }
.faq-list summary > span { color: #b88945; }
.faq-list details p { color: #7d6242; }
.faq-asterisk { color: #d7b678; }
.closing { background: linear-gradient(100deg,#f0ddb1,#f7e9cb); border-color: #cbaa72; }
.closing-art { background-image: url('/assets/grobim-hero.png'); opacity: .12; }
.closing .eyebrow { color: #9a6e32; }
.closing h2 { color: #68472c; font-weight: 700; text-shadow: 0 2px 0 #fff7df; }
.closing h2 > span:first-child { color: #4d8269; font-weight: 650; }
.closing-star { color: #c48d42; }
.closing-bottom p { color: #86663d; }
.footer-identity > p, .footer-beta { color: #85663f; }
.footer-column > span { color: #9b7238; font-weight: 600; }
.footer-column a, .footer-column button { color: #795733; }
.back-top { background: #fff1d0; border: 1.5px solid #bf9b60; color: #956729; box-shadow: 0 2px 0 #d3b681; }
.footer-word { color: #e8d5b1; font-weight: 650; }
.footer-word > span { color: #c28e4e; }
.footer-bottom { border-color: #dbc49e; color: #886943; }
dialog { background: #fff6e2; border: 2px solid #b6965e; box-shadow: 0 5px 0 #9e7c49,0 25px 100px #49301d55; }
dialog::backdrop { background: #372b2380; }
.modal-top .micro { color: #98703b; }
.close-button { background: #f8e9c7; border-color: #c5a06b; color: #94672e; }
.modal-title { color: #63462e; font-weight: 650; }
.modal-copy, .modal-list li { color: #7f603a; }
.modal-list li { border-color: #dec69e; }
.modal-list b { color: #6c4b2a; }
.access-form .check-field { color: #80613b; }
.access-summary { background: #f4e6c4; border-color: #cfaf76; }
.access-summary p { color: #805e32; }
.toast { background: #385f49; border: 1.5px solid #b0a46b; color: #ffedc1; }
@media(hover:hover) {
  .button-lime:hover { background: linear-gradient(#ffebb6,#ffd071); box-shadow: 0 4px 0 #98632d,0 10px 22px #8b612424; }
  .button-dark:hover { background: linear-gradient(#458d73,#34725b); box-shadow: 0 3px 0 #193f34,0 10px 22px #284f3924; }
  .nav-cta:hover, .panel-action:hover:not(:disabled) { background: #f6e0af; }
  .dashboard-tabs button:hover { background: #eddbb5; }
  .connection-button:hover { background: #f6dda8; }
}
@media(max-width:1150px) {
  .companion-card { gap: 30px; padding-inline: 25px 40px; }
}
@media(max-width:900px) {
  .mobile-menu { background: #355c47; border-bottom: 3px solid #b3975a; color: #ffedc5; }
  .mobile-menu a { border-color: #cfb47d4d; }
  .hero-visual { width: 63%; }
  .castle-image { width: 141%; height: 91%; left: -21%; top: 3%; }
  .dashboard-sidebar { border-color: #dfc99f; }
  .companion-card { grid-template-columns: .85fr 1.15fr; gap: 24px; padding: 25px; }
  .companion-portrait { height: 290px; }
  .companion-copy h2 { font-size: 35px; }
  .companion-copy p { font-size: 14px; }
}
@media(max-width:700px) {
  .hero { border-radius: 16px; }
  .hero::after { display: none; }
  .hero-copy .eyebrow { font-size: 10px; }
  .hero h1 { font-weight: 750; }
  .hero h1 > span { font-weight: 750; }
  .title-spark { height: 29px; width: 29px; margin-left: 15px; }
  .hero-meta { color: #8b6d44; }
  .hero-visual { width: calc(100% + 48px); height: clamp(370px,97vw,510px); }
  .castle-image { width: 116%; height: 100%; left: -8%; top: 0; mask-image: none; }
  .scene-rings { inset: 6% -12% 8%; }
  .floating-session { padding: 13px; bottom: 9px; }
  .floating-session .micro { font-size: 8px; }
  .hero-bottom { font-size: 8px; }
  .hero-bottom > span { max-width: 170px; }
  .companion-callout { padding-bottom: 65px; padding-top: 20px; }
  .companion-card { grid-template-columns: minmax(0,1fr); gap: 15px; padding: 20px 26px 36px; border-radius: 16px; }
  .companion-portrait { height: 230px; width: 285px; max-width: 100%; justify-self: center; margin-top: -55px; }
  .companion-portrait img { transform: rotate(-4deg) scale(1.05); }
  .companion-copy .eyebrow { font-size: 10px; margin-bottom: 17px; }
  .companion-copy h2 { font-size: 35px; }
  .companion-copy p { font-size: 14px; line-height: 1.8; }
  .companion-copy .link-arrow { font-size: 13px; }
  .control-card h3 { font-weight: 650; }
  .closing h2 > span:first-child { font-weight: 650; }
}
@media(max-width:370px) {
  .hero-visual { width: calc(100% + 40px); }
  .hero-copy .eyebrow { font-size: 9px; }
  .floating-session { padding: 12px; gap: 9px; }
  .floating-session strong { font-size: 11px; }
  .floating-session .micro { font-size: 6.5px; }
  .companion-card { padding-inline: 23px; }
  .companion-copy h2 { font-size: 31px; }
}
@media(prefers-reduced-motion:reduce) {
  .companion-portrait img { transform: none; }
}