/* Product UI: also used in the 15-second film and PDF documents. */
.syrili-console { --ui-ink:#25263e; --ui-muted:#73758b; --ui-accent:#6e54e8; display:grid; grid-template-columns:152px minmax(0,1fr); text-align:left; color:var(--ui-ink); background:#f6f7fc; border:1px solid #ffffff50; border-radius:16px; font-family:'DM Sans',sans-serif; font-size:12px; overflow:hidden; box-shadow:0 28px 90px #08062635,0 0 0 6px #ffffff08; }
.console-sidebar { padding:25px 12px 14px; background:#ffffff; border-right:1px solid #e7e7f2; display:flex; flex-direction:column; gap:5px; }
.console-brand { display:flex; align-items:center; gap:5px; padding:0 5px 26px; font-size:22px; letter-spacing:-.9px; color:#26233c; }
.console-brand span { font-size:8px; letter-spacing:.03em; border:1px solid #e4dffc; padding:0 3px; color:#7658d0; border-radius:3px; align-self:center; }
.workspace-label { font-size:7px; letter-spacing:1px; color:#76778c; padding:7px 8px; }
.console-nav { border:0; display:flex; align-items:center; gap:8px; background:none; border-radius:6px; font:inherit; font-size:10px; text-align:left; padding:10px 9px; color:#686981; text-decoration:none; line-height:1.5; }
.console-nav.active { color:#6846d7; background:#eeebff; font-weight:600; }
.console-nav:hover { background:#f2f1f9; }
.console-nav > span[aria-hidden] { font-size:15px; width:16px; }
.console-nav small { margin-left:auto; font-size:8px; background:#eeeef5; padding:1px 4px; border-radius:3px; }
.console-sidebar-bottom { margin-top:auto; padding-top:50px; display:flex; align-items:center; gap:7px; font-size:8px; }
.console-sidebar-bottom small { display:block; font-size:7px; color:#7a7c8f; }
.workspace-avatar { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#e6e0ff; color:#7952d9; font-weight:700; }
.console-workspace { min-width:0; }
.console-toolbar { height:49px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:#fff; border-bottom:1px solid #ededf5; font-size:9px; color:#797a8e; }
.console-toolbar > span:first-child > span { padding:0 9px; color:#abaaba; }.console-toolbar strong { font-weight:500; color:#494962; }
.demo-pill { font-size:8px; display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:15px; background:#eefaf6; color:#24745d; }
.demo-pill i { height:4px; width:4px; border-radius:50%; background:#36b996; }
.console-heading { display:flex; justify-content:space-between; align-items:center; padding:23px 24px 17px; gap:15px; }
.console-overline { font-size:7px; letter-spacing:1.1px; color:#87809b; }
.console-heading h2 { font-size:21px; letter-spacing:-.6px; line-height:1.35; font-weight:700; color:#24243c; margin:4px 0 0; }
.console-export { display:inline-flex; gap:16px; align-items:center; padding:8px 10px; border-radius:5px; background:#6f50e9; color:#fff; text-decoration:none; font-size:9px; white-space:nowrap; }
.console-export:hover { background:#5a3bcf; }
.console-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 24px 17px; }
.console-stats > div { padding:14px 16px; border:1px solid #e7e7f2; background:#fff; border-radius:8px; }
.console-stats > div > span { display:block; font-size:9px; color:#76778b; margin-bottom:5px; }
.console-stats strong { display:block; font-size:25px; font-weight:700; line-height:1.3; letter-spacing:-1px; }
.console-stats small { font-size:7px; font-weight:400; letter-spacing:0; color:#787a90; margin-left:4px; }
.console-stats > div:nth-child(2) strong { color:#c57239; }.console-stats > div:nth-child(3) strong { color:#6e53d7; }
.console-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:12px; padding:0 24px; }
.console-map { position:relative; height:300px; overflow:hidden; border-radius:9px; isolation:isolate; background:#112b34; }
.console-map-art { width:100%; height:100%; object-fit:cover; display:block; }
.console-map-tint { position:absolute; z-index:1; inset:0; background:radial-gradient(ellipse at 55% 48%,#34a9ff4a,transparent 25%),radial-gradient(ellipse at 77% 68%,#388eff50,transparent 20%),radial-gradient(ellipse at 40% 22%,#79dfff30,transparent 20%); transition:background .5s; pointer-events:none; }
.console-map[data-layer=heat] .console-map-tint { background:radial-gradient(ellipse at 29% 31%,#ff692f9c,transparent 28%),radial-gradient(ellipse at 20% 69%,#ff996970,transparent 27%),radial-gradient(ellipse at 45% 53%,#e3a83c60,transparent 33%); }
.console-map[data-layer=nature] .console-map-tint { background:radial-gradient(ellipse at 15% 25%,#53ff6990,transparent 20%),radial-gradient(ellipse at 26% 65%,#2bd69888,transparent 33%); }
.console-layer-tabs { position:absolute; left:12px; top:12px; z-index:4; display:flex; gap:3px; background:#fdfdffe8; padding:4px; border-radius:6px; backdrop-filter:blur(8px); }
.console-layer-tabs button { padding:6px 9px; border:0; border-radius:4px; background:transparent; color:#66677b; font-size:8px; cursor:pointer; font-family:inherit; }
.console-layer-tabs button[aria-pressed=true] { background:#7052e8; color:white; }
.console-pins { position:absolute; inset:0; z-index:3; }
.asset-pin { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); width:27px; height:27px; padding:0; border:1px solid transparent; border-radius:50%; background:transparent; display:grid; place-items:center; cursor:pointer; }
.asset-pin > span { width:7px; height:7px; border-radius:50%; background:#57ddbe; box-shadow:0 0 0 4px #5ce4c824; border:1px solid #d9fff0; }
.asset-pin.elevated > span { background:#ffae83; box-shadow:0 0 0 4px #e8aa7740; border-color:#fff1d1; }
.asset-pin.selected { border-color:#c0b2ffcc; box-shadow:0 0 0 6px #a17cf121; background:#a77eff33; }
.asset-pin.selected > span { background:#b497ff; border-color:white; }
.asset-tooltip { position:absolute; left:43%; top:51%; z-index:3; padding:7px 9px; background:#fff; box-shadow:0 4px 14px #09122744; border-radius:5px; display:flex; align-items:center; gap:6px; max-width:54%; font-size:8px; white-space:nowrap; }
.asset-tooltip strong { font-size:8px; font-weight:600; }.asset-tooltip > span:last-child { background:#fff0df; padding:1px 4px; color:#955226; border-radius:3px; font-size:8px; }
.tooltip-dot { width:4px; height:4px; border-radius:50%; background:#8961ee; }
.console-map-label { position:absolute; bottom:14px; left:15px; z-index:4; color:#d8e8e8; font-size:7px; letter-spacing:1.2px; }
.map-legend { display:flex; align-items:center; gap:5px; position:absolute; bottom:14px; right:12px; z-index:4; color:#e0eeee; font-size:6px; }
.map-legend i { width:44px; height:4px; background:linear-gradient(90deg,#50d3b1,#ffa276); border-radius:3px; }
.map-scan { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,transparent 0 45%,#63dfe422 49%,#84f6ef55 50%,transparent 51%); background-size:100% 200%; animation:scan 8s linear infinite; pointer-events:none; }
.console-insight { min-width:0; background:#fff; border:1px solid #e4e4f1; border-radius:9px; padding:16px; }
.insight-header { display:flex; gap:5px; align-items:center; font-weight:600; font-size:9px; margin-bottom:18px; }
.ai-spark { color:#8360e8; font-size:16px; }.ai-tag { margin-left:auto; font-size:7px; background:#eee7ff; color:#7854c9; border-radius:4px; padding:2px 4px; }
.insight-kicker { font-size:6px; letter-spacing:1px; color:#9385b1; }
.console-insight h3 { font-size:14px; font-weight:700; letter-spacing:-.4px; color:#292742; margin:6px 0 9px; line-height:1.5; }
.console-insight > p { font-size:9px; color:#74758b; line-height:1.75; margin:0; }
.insight-chart { margin-top:17px; }.insight-chart > div:first-child { display:flex; justify-content:space-between; font-size:7px; color:#7c7b8f; }.insight-chart strong { font-size:6px; font-weight:500; color:#81718e; }
.insight-chart svg { width:100%; height:65px; margin-top:6px; }
.chart-years { display:flex; justify-content:space-between; color:#9290a4; font-size:6px; }
.insight-explanation { margin-top:11px; font-size:7px; color:#7858c3; }.insight-explanation summary { cursor:pointer; }.insight-explanation p { color:#626376; font-size:8px; line-height:1.7; padding-top:6px; }
.console-timeline { margin:14px 24px 0; border:1px solid #e5e4f1; background:#fff; border-radius:8px; padding:11px 14px; display:flex; align-items:center; gap:18px; }
.console-timeline > div { white-space:nowrap; font-size:8px; }.console-timeline output { margin-left:7px; font-weight:700; color:#7951d1; }
.console-timeline input { flex:1; min-width:0; accent-color:#7856e7; height:3px; cursor:pointer; }
.compare-toggle { background:transparent; border:0; border-left:1px solid #e5e3f0; padding:0 0 0 14px; display:flex; align-items:center; gap:12px; font-size:8px; color:#767389; white-space:nowrap; cursor:pointer; }.compare-toggle[aria-pressed=true] { color:#6646cb; font-weight:700; }
.console-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 24px; font-size:7px; color:#72758b; }.console-foot i { display:inline-block; width:4px; height:4px; background:#4ab699; border-radius:50%; margin-right:4px; }
.console-comparison { display:grid; grid-template-columns:1fr 25px 1fr; align-items:center; gap:15px; padding:18px 22px 13px; margin:14px 24px 0; border:1px solid #d6d0f2; background:#efecfb; border-radius:8px; }
.console-comparison > div { display:grid; grid-template-columns:1fr 30px; gap:5px; align-items:center; }.console-comparison span { font-size:8px; color:#726288; }.console-comparison strong { color:#6e4bd5; font-size:18px; }.console-comparison i { display:block; height:4px; border-radius:2px; background:#876aea; }.console-comparison > p { grid-column:1/-1; margin:0; text-align:center; font-size:7px; color:#756880; }
.console-assets-panel { margin:0 24px; background:#fff; border:1px solid #e5e3f0; border-radius:8px; padding:14px; }.asset-table-title { display:flex; justify-content:space-between; font-size:10px; }.asset-table-title span { color:#797589; font-size:8px; }.asset-table { margin-top:12px; }.asset-table-head,.asset-table-row { display:grid; grid-template-columns:1.4fr 1fr 1fr; align-items:center; gap:8px; padding:7px 9px; font-size:8px; border-bottom:1px solid #ededf5; }.asset-table-head { color:#8a809f; background:#f6f4fb; }.asset-table-row strong { font-weight:600; }.asset-table-row small { font-weight:400; font-size:7px; color:#878095; }.table-priority { width:max-content; color:#247566; background:#e8f8f2; padding:2px 6px; border-radius:10px; }.table-priority.high { color:#a15c29; background:#fff0df; }
.workspace-label,.console-sidebar-bottom small,.console-toolbar,.console-overline,.console-stats>div>span,.console-stats small,.insight-kicker,.insight-chart>div:first-child,.insight-chart strong,.chart-years,.console-foot { color:#666276; }
.ai-tag { color:#6845ba; }
.asset-table-title span,.asset-table-head,.asset-table-row small,.console-comparison span,.console-comparison>p { color:#706078; }
@keyframes scan { from { background-position:0 200%; } to { background-position:0 -200%; } }
@media (max-width:850px) { .syrili-console { grid-template-columns:110px minmax(0,1fr); }.console-sidebar { padding-inline:7px; }.console-nav { font-size:8px; gap:4px; padding:9px 6px; }.console-brand { font-size:18px; }.console-brand img { width:22px; height:22px; }.console-brand span { display:none; }.console-heading,.console-toolbar { padding-inline:16px; }.console-stats { padding-inline:16px; gap:8px; }.console-stats>div { padding:12px; }.console-grid { padding-inline:16px; gap:8px; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); }.console-insight { padding:12px; }.console-map { height:300px; }.console-timeline { margin-inline:16px; }.console-heading h2 { font-size:18px; }.console-stats small { display:block; margin-left:0; }.console-stats strong { font-size:22px; }.console-comparison,.console-assets-panel { margin-inline:16px; } }
@media (max-width:600px) { .syrili-console { display:block; border-radius:12px; }.console-sidebar { display:none; }.console-heading { padding-top:17px; }.console-overline { font-size:6px; }.console-heading h2 { font-size:16px; }.console-export { font-size:7px; padding:7px 8px; gap:4px; }.console-toolbar { height:38px; font-size:8px; }.console-stats { gap:5px; padding-bottom:12px; }.console-stats>div { padding:10px 8px; }.console-stats>div>span { font-size:7px; }.console-stats strong { font-size:22px; }.console-stats small { font-size:6px; }.console-grid { display:flex; flex-direction:column; }.console-map { height:260px; }.console-insight { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; padding:15px; }.insight-header { grid-column:1/-1; margin-bottom:8px; font-size:10px; }.insight-kicker { grid-column:1; font-size:6px; }.console-insight h3 { grid-column:1; font-size:14px; margin-top:3px; }.console-insight>p { grid-column:1; font-size:8px; }.insight-chart { grid-column:2; grid-row:2/5; align-self:center; margin:0; }.insight-chart svg { height:62px; }.insight-explanation { grid-column:1/-1; font-size:8px; }.console-timeline { flex-wrap:wrap; gap:12px; padding:12px; }.console-timeline>div { font-size:9px; }.compare-toggle { padding:0; border:0; margin-left:auto; font-size:8px; }.console-foot { padding:12px 16px; flex-wrap:wrap; justify-content:center; font-size:6px; }.console-foot>span:first-child { display:none; }.console-comparison { gap:5px; padding:12px; }.console-comparison>div>span { font-size:7px; }.console-comparison>p { font-size:6px; } }
@media (prefers-reduced-motion:reduce) { .map-scan { animation:none; } }
.motion-paused .map-scan { animation-play-state:paused; }