:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f1f0ea; background: #111211; font-size: 14px; --muted: #a5aaa5; --coral: #ff7569; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; }
button { border: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; z-index: 5; top: -80px; left: 20px; padding: 14px; background: #f4f3eb; color: #111; }
.skip-link:focus { top: 12px; }
.site-header { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid #2c302c; gap: 20px; }
.brand { display: flex; align-items: center; gap: 21px; font-size: 20px; letter-spacing: -.5px; font-weight: 550; }
.brand img { width: 96px; height: auto; display: block; }
.brand-divider { height: 25px; width: 1px; background: #40433f; }
.roam-link { color: #bfc6b9; font-size: 13px; }
.roam-link:hover { color: #fff; }
.roam-link span { margin-left: 8px; color: var(--coral); }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 390px; min-height: calc(100dvh - 82px); }
.preview-area { padding: 28px 30px 18px; height: calc(100dvh - 82px); min-height: 430px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.preview-toolbar, .preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.preview-title { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #d1d5ce; }
.preview-dot { width: 6px; height: 6px; border-radius: 50%; background: #a9c69a; }
.segmented { display: flex; gap: 3px; padding: 4px; background: #1c1f1c; border: 1px solid #2e332e; border-radius: 9px; }
.segmented button { padding: 8px 14px; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; }
.segmented button[aria-pressed="true"] { color: #f3f2ed; background: #343b32; }
.segmented button:disabled { color: #70776e; }
.preview-canvas { position: relative; flex: 1; min-height: 200px; border: 1px solid #3a4038; border-radius: 12px; overflow: hidden; background-color: #2b302a; }
.preview-canvas[data-backdrop="checker"] { background-color: #353a33; background-image: conic-gradient(#2e332d 25%, transparent 0 50%, #2e332d 0 75%, transparent 0); background-size: 24px 24px; }
.preview-canvas[data-backdrop="light"] { background: #ecece7; }
.preview-canvas[data-backdrop="dark"] { background: #080b08; }
.preview-canvas .chat-surface { position: absolute; inset: 0; padding: 20px; }
.preview-footer { min-height: 26px; color: #a5aaa2; font-size: 11px; }
.backdrops { display: flex; align-items: center; gap: 9px; }
.backdrops>span { margin-right: 3px; }
.swatch { width: 19px; height: 19px; border-radius: 50%; border: 1px solid #72776e; padding: 0; }
.swatch[aria-pressed="true"] { outline: 1px solid #ecefe6; outline-offset: 3px; }
.swatch.checker { background: conic-gradient(#a5aaa0 25%, #585e53 0 50%, #a5aaa0 0 75%, #585e53 0); background-size: 8px 8px; }
.swatch.dark { background: #080b08; }
.swatch.light { background: #eee; }
.preview-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #e2e5dc; text-align: center; padding: 25px; }
.preview-empty p { font-size: 14px; line-height: 1.6; margin: 5px 0 14px; }
.waiting-icon { font-size: 36px; letter-spacing: 8px; }
.preview-empty button { font-size: 12px; color: #e6eadf; background: #252c24; border: 1px solid #687461; border-radius: 6px; padding: 9px 14px; }
.settings { border-left: 1px solid #2c302c; background: #171a16; height: calc(100dvh - 82px); min-height: 680px; display: flex; flex-direction: column; }
.settings-content { padding: 30px 26px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #46503f transparent; flex: 1; }
.intro h1 { font-size: 25px; line-height: 1.2; letter-spacing: -.8px; font-weight: 600; margin: 0 0 9px; }
.intro p { margin: 0 0 26px; color: #a9b0a5; font-size: 12px; line-height: 1.7; }
label { font-size: 12px; font-weight: 550; }
.channel-field { margin-top: 9px; display: flex; align-items: center; gap: 8px; border: 1px solid #454d40; background: #111510; border-radius: 8px; padding: 6px; }
.channel-symbol { color: #899981; font-size: 18px; margin-left: 6px; }
.channel-field input { min-width: 0; flex: 1; width: 100%; background: transparent; border: 0; outline-offset: 0; padding: 7px 0; font-size: 12px; }
.channel-field input::placeholder { color: #8c9686; }
.channel-field button { white-space: nowrap; border-radius: 5px; padding: 9px 10px; color: #e4eadd; background: #343f2e; font-size: 11px; }
.channel-field button span { margin-left: 5px; }
.channel-field button:hover { background: #43533a; }
.status { color: #a6afa0; font-size: 11px; line-height: 1.6; margin: 8px 0 27px; min-height: 18px; }
.status[data-state="connected"] { color: #b4d39f; }
.status[data-state="error"], .status[data-state="unavailable"] { color: #ffaaa2; }
.section-title { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; border-top: 1px solid #343b30; margin-bottom: 23px; }
.section-title h2 { margin: 0; font-size: 13px; font-weight: 550; }
.text-button { padding: 3px 0 3px 10px; background: transparent; color: #adb8a4; font-size: 11px; }
.text-button:hover { color: #fff; }
.control { margin: 0 0 24px; }
.control-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
output { font-variant-numeric: tabular-nums; font-size: 12px; }
output span { color: #939e8d; margin-left: 3px; font-size: 10px; }
input[type="range"] { width: 100%; height: 4px; margin: 7px 0; appearance: none; -webkit-appearance: none; border-radius: 5px; background: linear-gradient(to right, #bdcfae var(--fill, 25%), #3b4535 var(--fill, 25%)); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; background: #ecf1e4; border-radius: 50%; box-shadow: 0 0 0 3px #171a16; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: #ecf1e4; border: 0; border-radius: 50%; box-shadow: 0 0 0 3px #171a16; }
.range-ends { display: flex; justify-content: space-between; color: #9ca795; font-size: 10px; margin-top: 8px; }
.hide-control { padding: 1px 0 21px; }
.toggle-label { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 15px; cursor: pointer; }
.toggle-label small { display: block; margin-top: 5px; color: #9ca795; font-size: 11px; font-weight: 400; }
.toggle-label input { position: absolute; opacity: 0; right: 0; width: 34px; height: 24px; }
.toggle { flex: 0 0 34px; height: 20px; background: #495242; border-radius: 20px; padding: 3px; }
.toggle::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: #d5ddcf; }
.toggle-label input:checked+.toggle { background: #b8cda6; }
.toggle-label input:checked+.toggle::before { transform: translateX(14px); background: #1a2417; }
.toggle-label input:focus-visible+.toggle { outline: 2px solid var(--coral); outline-offset: 4px; }
.hide-duration { display: flex; justify-content: space-between; align-items: center; margin-top: 17px; }
select { background: #242d20; border: 1px solid #526348; border-radius: 5px; font-size: 12px; padding: 7px; }
.provider-status { color: #e7c794; font-size: 11px; line-height: 1.6; margin: 0; }
.provider-status:empty { display: none; }
.credits-link { display: inline-block; margin-top: 3px; color: #a5afa0; font-size: 10px; }
.credits-link:hover { color: #fff; }
.copy-panel { padding: 21px 26px 19px; border-top: 1px solid #343b30; background: #191e16; }
.copy-panel>label { color: #c0c9b8; font-size: 11px; }
.url-field { display: flex; align-items: center; margin: 9px 0 11px; padding: 10px; background: #0f140d; border: 1px solid #3e4936; border-radius: 6px; }
.url-field input { background: transparent; padding: 0; border: 0; font-family: ui-monospace, monospace; font-size: 10px; color: #becbb4; flex: 1; min-width: 0; }
.url-field input::placeholder { color: #939f89; }
.url-field a { padding-left: 8px; color: #c9d4bf; font-size: 16px; }
.copy-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; color: #211b17; background: #ff8272; border-radius: 7px; font-size: 12px; font-weight: 650; padding: 13px; }
.copy-button:hover { background: #ff998b; }
.copy-button:disabled { background: #45433b; color: #c0bcb1; }
.copy-button svg { width: 16px; height: 16px; }
#copy-status { text-align: center; margin: 11px 0 0; color: #a0af94; font-size: 10px; min-height: 14px; line-height: 1.5; }
.noscript { position: fixed; inset: 30% 15% auto; padding: 25px; background: #111; border: 1px solid #aaa; }
@media (min-width: 921px) and (max-height: 860px) { .settings { min-height: calc(100dvh - 82px); } .settings-content { padding-top: 23px; } .control { margin-bottom: 19px; } }
@media (max-width: 1100px) { .workspace { grid-template-columns: minmax(0, 1fr) 350px; } .preview-area { padding-left: 22px; padding-right: 22px; } .settings-content, .copy-panel { padding-left: 22px; padding-right: 22px; } }
@media (max-width: 920px) { .workspace { display: flex; flex-direction: column; } .site-header { height: 72px; padding: 0 22px; } .preview-area { height: min(58dvh, 500px); min-height: 330px; padding-top: 20px; } .settings { height: auto; min-height: 0; border-left: 0; border-top: 1px solid #2c302c; } .settings-content { overflow: visible; padding: 25px 24px; } .copy-panel { padding: 22px 24px; } .preview-canvas .chat-surface { padding: 12px; } .intro p { margin-bottom: 23px; } }
@media (max-width: 420px) { .site-header { padding: 0 16px; gap: 10px; } .brand { gap: 12px; font-size: 18px; } .brand img { width: 76px; } .roam-link { max-width: 102px; font-size: 11px; line-height: 1.5; } .roam-link span { margin-left: 2px; } .preview-area { padding-left: 14px; padding-right: 14px; gap: 13px; } .preview-footer { flex-wrap: wrap; } .preview-footer>span { font-size: 10px; } .backdrops { gap: 8px; } .backdrops>span { display: none; } .segmented button { padding: 7px 11px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }