.bubble-page main.container { max-width: 1540px; }
.bubble-page .bubble-hero { padding: .85rem 0 .75rem; }
.bubble-page .bubble-hero h1 { margin: 0; font-size: clamp(2.25rem, 4vw, 3.3rem); }
.bubble-page .bubble-hero .subtitle { max-width: 760px; margin: .35rem auto 0; color: #aaaab3; }
.bubble-workspace { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); width: 100%; max-width: 1460px; height: min(760px, calc(100vh - 160px)); min-height: 620px; margin: 0 auto 3.2rem; overflow: hidden; border: 1px solid #303039; border-radius: 24px; background: #121216; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 22px 60px rgba(0,0,0,.28); }
.bubble-tool { min-width: 0; margin: 0; padding: 1.5rem; overflow-y: auto; border-right: 1px solid #303039; background: #121216; }
.bubble-input-panel { padding-bottom: 1.25rem; border-bottom: 1px solid #2e2e35; }
.bubble-panel-heading, .bubble-result-head, .bubble-control-label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bubble-panel-heading { min-height: 44px; padding-bottom: .85rem; border-bottom: 1px solid #2e2e35; }
.bubble-panel-heading h2, .bubble-result-head h3 { margin: 0; }
.bubble-panel-heading h2 { font-size: 1.1rem; }
.bubble-eyebrow { display: inline-flex; min-height: 24px; align-items: center; padding: .25rem .5rem; border: 1px solid rgba(0,255,170,.22); border-radius: 6px; background: rgba(0,255,170,.065); color: var(--accent-color); font: 700 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.bubble-input-actions, .bubble-result-actions, .bubble-alignments { display: flex; align-items: center; gap: .45rem; }
.bubble-button, .bubble-alignments button { min-height: 36px; padding: .5rem .75rem; border: 1px solid #383841; border-radius: 9px; background: #19191e; color: #d5d5db; font: 700 .76rem/1 var(--font-ui); cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease; }
.bubble-button:hover, .bubble-alignments button:hover { border-color: #555560; background: #202026; color: #fff; }
.bubble-button:active, .bubble-alignments button:active { transform: scale(.985); }
.bubble-button-primary { border-color: var(--accent-color); background: var(--accent-color); color: #06130e; }
.bubble-button-primary:hover { border-color: #39ffb9; background: #39ffb9; color: #06130e; }
.bubble-button:disabled, .bubble-button:disabled:hover { border-color: #303038; background: #17171b; color: #62626b; cursor: default; transform: none; }
.bubble-button:focus-visible, .bubble-alignments button:focus-visible, .bubble-page textarea:focus-visible, .bubble-page input:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.bubble-result-preview:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.bubble-input-shell { margin-top: 1rem; padding: 4px; border: 1px solid #34343d; border-radius: 14px; background: #0c0c0f; transition: border-color 150ms ease, box-shadow 150ms ease; }
.bubble-input-shell:focus-within { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(0,255,170,.09); }
#bubble-input { display: block; width: 100%; min-height: 118px; resize: vertical; border: 0; border-radius: 10px; outline: 0; background: transparent; color: #fff; font: 500 1.08rem/1.65 var(--font-ui); }
.bubble-controls { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; padding-top: 1.2rem; }
.bubble-control-group { display: grid; gap: .55rem; min-width: 0; }
.bubble-control-title { color: #9999a3; font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
.bubble-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.bubble-control { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: .45rem; padding: .4rem .55rem .4rem .65rem; border: 1px solid #34343d; border-radius: 9px; background: #17171b; color: #bcbcc3; font-size: .72rem; }
.bubble-control input[type="color"] { width: 28px; height: 25px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.bubble-control-label { min-height: 24px; }
.bubble-control-label output { display: inline-grid; min-width: 42px; min-height: 24px; place-items: center; border-radius: 999px; background: rgba(0,255,170,.08); color: var(--accent-color); font: 700 .72rem/1 var(--font-mono); }
#bubble-size { width: 100%; height: 6px; accent-color: var(--accent-color); cursor: pointer; }
.bubble-check { display: flex; min-height: 38px; align-items: center; gap: .5rem; padding: .4rem .65rem; border: 1px solid #34343d; border-radius: 9px; background: #17171b; color: #bcbcc3; font-size: .72rem; cursor: pointer; }
.bubble-check input { accent-color: var(--accent-color); }
.bubble-alignments { flex-wrap: wrap; }
.bubble-alignments button { flex: 1; min-height: 34px; padding: .4rem .55rem; color: #92929b; font-size: .7rem; }
.bubble-alignments button.is-active { border-color: rgba(0,255,170,.5); background: rgba(0,255,170,.08); color: var(--accent-color); }
.bubble-status { min-height: 20px; margin: .75rem 0 0; color: var(--accent-color); font-size: .76rem; text-align: right; }
.bubble-results-pane { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; scrollbar-color: #4a4a53 transparent; scrollbar-width: thin; }
.bubble-results-pane::-webkit-scrollbar { width: 10px; }
.bubble-results-pane::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #4a4a53; background-clip: padding-box; }
.bubble-results-section { max-width: none; margin: 0 0 2.75rem; }
.bubble-results-section:last-child { margin-bottom: 0; }
.bubble-section-heading { margin-bottom: 1.25rem; }
.bubble-section-heading h2 { margin: .35rem 0 .4rem; }
.bubble-section-heading p { max-width: 760px; margin: 0; color: #92929b; }
.bubble-result-grid, .bubble-font-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.bubble-result-card, .bubble-font-card { min-width: 0; padding: 1rem; border: 1px solid #303038; border-radius: 16px; background: linear-gradient(145deg, #19191d, #141417); transition: border-color 150ms ease, transform 150ms ease; }
.bubble-result-card:hover, .bubble-font-card:hover { border-color: rgba(0,255,170,.3); transform: translateY(-2px); }
.bubble-result-head { align-items: flex-start; }
.bubble-result-head h3 { color: #eeeef1; font-size: 1rem; }
.bubble-result-actions { flex: 0 0 auto; }
.bubble-result-actions .bubble-button { min-height: 32px; padding: .4rem .55rem; }
.bubble-result-preview, .bubble-font-preview { display: flex; min-height: 132px; align-items: center; justify-content: var(--bubble-text-align); margin-top: .9rem; padding: 1rem; overflow-wrap: anywhere; border: 1px solid #303038; border-radius: 12px; background: var(--bubble-background-color); color: var(--bubble-text-color); font-size: var(--bubble-font-size); font-weight: 600; line-height: 1.35; text-align: var(--bubble-text-align); word-break: break-word; }
.bubble-result-preview { font-family: var(--font-ui); }
.bubble-font-preview { font-family: var(--bubble-font-family, var(--font-ui)); }
.bubble-page:has(#bubble-transparent:checked) .bubble-result-preview, .bubble-page:has(#bubble-transparent:checked) .bubble-font-preview { background: transparent; }
.bubble-content { max-width: 1180px; margin: 2.5rem auto 2rem; }
.bubble-content-nav { display: flex; gap: .4rem; margin-bottom: 1.2rem; padding: .55rem; overflow-x: auto; border: 1px solid #2d2d34; border-radius: 13px; background: #131316; scrollbar-width: thin; }
.bubble-content-nav a { flex: 0 0 auto; padding: .52rem .72rem; border: 1px solid transparent; border-radius: 8px; color: #9999a2; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.bubble-content-nav a:hover, .bubble-content-nav a:focus-visible { border-color: rgba(0,255,170,.26); background: rgba(0,255,170,.07); color: var(--accent-color); }
.bubble-section, .bubble-faq { scroll-margin-top: 88px; }
.bubble-section { margin: 0 0 1rem; padding: 2rem; border: 1px solid #2e2e35; border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.01)); }
.bubble-section h2 { margin: .35rem 0 1rem; }
.bubble-section p { color: #b0b0b8; }
.bubble-section-index { color: var(--accent-color); font: 700 .7rem/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.bubble-step-grid, .bubble-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.2rem; }
.bubble-step-grid article, .bubble-use-grid article { padding: 1.1rem; border: 1px solid #303038; border-radius: 12px; background: #16161a; }
.bubble-step-grid article > span { color: var(--accent-color); font: 700 .7rem/1 var(--font-mono); }
.bubble-step-grid h3, .bubble-use-grid h3 { margin: .75rem 0 .45rem; font-size: 1rem; }
.bubble-step-grid p, .bubble-use-grid p { margin: 0; color: #9999a2; font-size: .88rem; line-height: 1.65; }
.bubble-comparison { overflow-x: auto; margin: 1.2rem 0; }
.bubble-comparison table { width: 100%; min-width: 620px; border-collapse: collapse; }
.bubble-comparison caption { margin-bottom: .65rem; color: #8e8e98; font-size: .78rem; text-align: left; }
.bubble-comparison th, .bubble-comparison td { padding: .8rem .75rem; border: 1px solid #303038; color: #b0b0b8; font-size: .86rem; line-height: 1.55; text-align: left; vertical-align: top; }
.bubble-comparison thead th { background: #19191e; color: #ececef; font-size: .75rem; }
.bubble-comparison tbody th { color: #e0e0e5; font-weight: 700; }
.bubble-faq { margin-top: 2.5rem; }
.bubble-faq .faq-item { margin: 0 0 .65rem; padding: 0; overflow: hidden; border: 1px solid #303038; border-radius: 12px; background: #17171b; transform: none; box-shadow: none; }
.bubble-faq .faq-item:hover { border-color: #44444d; background: #1a1a1f; transform: none; box-shadow: none; }
.bubble-faq .faq-item[open] { border-color: rgba(0,255,170,.26); background: linear-gradient(100deg, rgba(0,255,170,.045), #18181c 45%); }
.bubble-faq summary { display: flex; min-height: 4.1rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; color: #ececef; cursor: pointer; list-style: none; }
.bubble-faq summary::-webkit-details-marker { display: none; }
.bubble-faq summary:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -3px; }
.bubble-faq .faq-question { font-weight: 700; }
.bubble-faq .faq-toggle { position: relative; width: 2rem; height: 2rem; flex: 0 0 2rem; border: 1px solid #3a3a43; border-radius: 50%; background: #202026; }
.bubble-faq .faq-toggle::before, .bubble-faq .faq-toggle::after { position: absolute; top: 50%; left: 50%; width: .7rem; height: 1px; content: ''; background: currentColor; transform: translate(-50%, -50%); }
.bubble-faq .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.bubble-faq .faq-item[open] .faq-toggle { border-color: var(--accent-color); background: var(--accent-color); color: #07130f; }
.bubble-faq .faq-item[open] .faq-toggle::after { opacity: 0; }
.bubble-faq .faq-item > p { margin: 0; padding: 0 4.2rem 1.15rem 1.15rem; color: #a1a1a9; font-size: .92rem; line-height: 1.7; }
.bubble-related-copy { margin: 1.4rem 0 0; color: #9b9ba4; font-size: .9rem; line-height: 1.7; }
@media (max-width: 1220px) {
    .bubble-workspace { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); }
    .bubble-result-grid, .bubble-font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .bubble-workspace { display: block; height: auto; min-height: 0; }
    .bubble-tool { overflow: visible; border-right: 0; border-bottom: 1px solid #303039; }
    .bubble-results-pane { overflow: visible; }
    .bubble-step-grid, .bubble-use-grid { grid-template-columns: 1fr; }
    .bubble-step-grid article, .bubble-use-grid article { min-height: 0; }
}
@media (max-width: 620px) {
    .bubble-result-grid, .bubble-font-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .bubble-page .bubble-hero h1 { font-size: 2.1rem; }
    .bubble-workspace { border-radius: 18px; }
    .bubble-tool, .bubble-results-pane { padding: .9rem; }
    .bubble-panel-heading { align-items: flex-start; }
    .bubble-panel-heading h2 { font-size: 1rem; }
    .bubble-input-actions { gap: .15rem; }
    .bubble-input-actions .bubble-button { padding-right: .45rem; padding-left: .45rem; }
    .bubble-controls { grid-template-columns: 1fr; gap: .8rem; }
    .bubble-result-card, .bubble-font-card, .bubble-section { padding: 1rem; }
    .bubble-result-head { align-items: flex-start; }
    .bubble-result-actions .bubble-button { padding-right: .5rem; padding-left: .5rem; }
    .bubble-result-preview, .bubble-font-preview { min-height: 112px; padding: .75rem; font-size: clamp(1.25rem, 8vw, 2rem); }
    .bubble-section { padding: 1.25rem; }
    .bubble-faq summary { min-height: 4rem; padding: .85rem; }
    .bubble-faq .faq-question { font-size: .92rem; }
    .bubble-faq .faq-item > p { padding: 0 3.7rem 1rem .85rem; font-size: .88rem; }
}