/* 0.38 — circular navigation and floating thoughts, built from SVG/CSS. */
:root { background: #082820; --fixed-footer-height: 78px; }
body { padding-bottom: var(--fixed-footer-height); }
header { max-width: 1800px; padding: 20px 40px 12px; }
.brand { font-size: clamp(24px, 2.55vw, 38px); letter-spacing: -.9px; gap: 15px; }
.brand-icon { width: 44px; height: 44px; }
.sobre-link { border-color: #9acbb466; padding: 10px 23px; }
main.home-view { overflow: visible; padding-bottom: 0; }
.home-view > .search-shell { width: min(650px, 46vw); margin: 10px auto 2px; }
.home-view .search-form { padding: 7px 8px 7px 22px; gap: 16px; background: #0d3026a6; border-color: #a5d2bc80; box-shadow: none; }
.home-view .search-form input { font-size: 17px; padding: 10px 0; }
.home-view .search-form button { background: linear-gradient(150deg, #d0f4da, #a9d7bb); padding: 13px 24px; }
.home-view .search-icon { font-size: 0; width: 22px; height: 22px; border: 1.6px solid #e0f4e8; border-radius: 50%; position: relative; flex: none; transform: scale(.8); }
.home-view .search-icon::after { content: ''; position: absolute; width: 10px; height: 1.6px; background: #e0f4e8; transform: rotate(46deg); transform-origin: left; left: 17px; top: 17px; }
.home-view .universe { --wheel-size: clamp(350px, min(45vw, calc(100svh - 310px)), 740px); --bubble-width: clamp(205px, 20vw, 305px); width: 100%; max-width: 1800px; min-height: calc(var(--wheel-size) + 38px); flex: 1; padding: 14px 32px 24px; display: grid; place-items: center; margin: 0 auto; }
.home-view .wheel-wrap { width: var(--wheel-size); max-width: none; margin: 0; filter: drop-shadow(0 18px 28px #0002); z-index: 2; animation: none; }
.home-view .wheel { overflow: visible; }
.home-view .sector { outline: none; --accent: #b9e7ce; }
.home-view .piece { fill-opacity: 1; stroke: #a7d6bf40; stroke-width: .7; filter: none; transition: stroke .3s, filter .3s; }
.home-view .piece-accent { fill: none; stroke: var(--accent); stroke-width: 3.3; stroke-linecap: round; opacity: .86; pointer-events: none; transition: opacity .3s, filter .3s; }
.home-view .sector text { font: 14.5px 'Vida Sans', sans-serif; font-weight: 400; letter-spacing: .1px; fill: #f4f7ee; stroke: none; pointer-events: none; }
.home-view .piece-icon { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .95; pointer-events: none; }
.home-view .sector .piece-light { opacity: 0; transition: opacity .35s; pointer-events: none; }
.home-view .sector.is-highlighted .piece-light { opacity: .55; }
.home-view .sector.is-highlighted .piece { stroke: #bff2d890; }
.home-view .sector:hover .piece, .home-view .sector:focus-visible .piece { fill-opacity: 1; stroke: var(--accent); stroke-width: 1.4; filter: drop-shadow(0 0 5px #aff1ce30); }
.home-view .sector:hover .piece-light, .home-view .sector:focus-visible .piece-light { opacity: 1; }
.home-view .sector:hover .piece-accent, .home-view .sector:focus-visible .piece-accent { opacity: 1; filter: drop-shadow(0 0 4px var(--accent)); }
.home-view .sector:focus-visible .piece { stroke-width: 2.5; }
.home-view .wheel-ring-inner { stroke: #aad9bf; stroke-opacity: .22; stroke-dasharray: .5 5; stroke-width: .6; }
.home-view .wheel-ring-outer { stroke: #a6d4bc; stroke-opacity: .15; stroke-width: .65; }
.orbit-light { fill: #def9e5; filter: drop-shadow(0 0 4px #baf8c7); opacity: .9; pointer-events: none; }
.hub-emblem { fill: none; stroke: #dce9b7; stroke-width: .65; opacity: .82; pointer-events: none; }
.home-view .wheel-hub .wheel-hub-anel { fill: url(#hub-surface); stroke: #a5d4b9; stroke-opacity: .75; stroke-width: .7; }
.home-view .wheel-hub:hover .wheel-hub-anel, .home-view .wheel-hub:focus-visible .wheel-hub-anel { stroke-opacity: 1; stroke-width: 1.5; }
.home-view .wheel-pergunta { letter-spacing: 0; stroke: none; fill: #f0f6e9; }
.home-view .bubbles { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; display: block; z-index: 3; pointer-events: none; }
.home-view .bubbles .bubble:nth-child(n) { position: absolute; inset: auto; width: var(--bubble-width); max-width: calc((100% - var(--wheel-size))/2 - 52px); min-height: 0; padding: clamp(22px, 2.2vw, 34px); font: clamp(18px, 1.65vw, 25px)/1.42 'Vida Serif', Georgia, serif; color: #edf4e6; background: linear-gradient(145deg, #315b484a, #10372c95); border: 1px solid #aadbc280; border-radius: 38px 56px 43px 24px; box-shadow: inset 0 1px 0 #e4ffef09, 0 16px 32px #00000012; backdrop-filter: blur(14px); transition: background .3s, border-color .3s, box-shadow .3s !important; }
.home-view .bubbles .bubble:nth-child(1) { left: 3.4%; top: 5%; }
.home-view .bubbles .bubble:nth-child(2) { right: 3%; top: 6%; border-radius: 48px 65px 36px 46px; }
.home-view .bubbles .bubble:nth-child(3) { left: 3.1%; top: 63%; border-radius: 43px 44px 53px 39px; }
.home-view .bubbles .bubble:nth-child(4) { right: 2.9%; top: 64%; border-radius: 39px 55px 48px 35px; }
.home-view .bubble small { font: 11px/1.4 'Vida Sans', sans-serif; letter-spacing: 1.5px; margin-bottom: 14px; color: #c3decc; padding-right: 17px; }
.home-view .bubble::after { width: 8px; height: 8px; bottom: -20px; left: 24px; background: #badccba8; box-shadow: -12px 16px 0 -1.5px #badccb80; }
.home-view .bubble:hover, .home-view .bubble:focus-visible { background: linear-gradient(145deg, #315c4ae0, #12392fe8); border-color: #d5f3d8; box-shadow: 0 0 24px #9bd7b111; }
.home-view .bubble:focus-visible { outline: 2px solid #d5f3d8; outline-offset: 5px; }
.home-view .bubble-skip { width: 28px; height: 28px; top: 13px; right: 14px; font-size: 18px; opacity: .4; }
.thought-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.thought-thread { fill: none; stroke: #b9dfc6; stroke-width: .85; stroke-opacity: .62; }
.thread-dot { fill: #def9e5; filter: drop-shadow(0 0 4px #baf8c7); }
.home-view .curation-note { margin: 2px auto 8px; box-shadow: none; background: #10372c55; border-color: #a0ccb633; font-size: 8px; }
.home-view .home-bottom { display: none; }
footer { left: 20px; right: 20px; bottom: 14px; width: auto; height: 64px; padding: 12px 25px; border: 1px solid #95c8aa77; border-radius: 28px; background: #08281fe8; box-shadow: none; gap: 12px; }
footer .footer-meta { gap: 16px; flex-wrap: nowrap; }
footer .version-line { font-size: 11px; }
footer .motion { padding: 10px 17px; font-size: 12px; border-color: #a2cbb47a; background: transparent; }
footer .trilha { border-color: #94c5ac55; background: #20453688; }
.motion-paused .orbit-light { filter: none; }
@media (max-width: 1100px) and (min-width: 761px) {
  .home-view .universe { --wheel-size: min(49vw, calc(100svh - 310px)); --bubble-width: 22vw; min-height: calc(var(--wheel-size) + 38px); }
  .home-view .bubbles .bubble:nth-child(n) { max-width: calc((100% - var(--wheel-size))/2 - 24px); padding: 20px; font-size: 18px; }
  .home-view .bubbles .bubble:nth-child(1), .home-view .bubbles .bubble:nth-child(3) { left: 1.5%; }
  .home-view .bubbles .bubble:nth-child(2), .home-view .bubbles .bubble:nth-child(4) { right: 1.5%; }
  footer .version-line { display: none; }
}
@media (max-height: 760px) and (min-width: 761px) {
  :root { --fixed-footer-height: 68px; }
  header { padding-top: 10px; padding-bottom: 6px; }
  .brand { font-size: 28px; }
  .brand-icon { width: 35px; height: 35px; }
  .home-view > .search-shell { margin-top: 4px; }
  .home-view .search-form { padding-top: 4px; padding-bottom: 4px; }
  .home-view .search-form input { font-size: 15px; padding-top: 7px; padding-bottom: 7px; }
  .home-view .search-form button { padding-top: 10px; padding-bottom: 10px; }
  .home-view .universe { --wheel-size: min(45vw, calc(100svh - 245px)); }
  .home-view .sector text { font-size: 14.5px; }
  .home-view .curation-note { padding-top: 4px; padding-bottom: 4px; margin-bottom: 4px; }
  footer { height: 54px; bottom: 10px; }
}
@media (max-width: 760px) {
  :root { --fixed-footer-height: calc(76px + env(safe-area-inset-bottom, 0px)); }
  header { padding: 18px 18px 12px; gap: 10px; align-items: center; }
  .brand { font-size: clamp(20px, 5vw, 29px); gap: 9px; letter-spacing: -.5px; }
  .brand-icon { width: 30px; height: 30px; }
  .sobre-link { padding: 7px 12px; font-size: 12px; }
  main.home-view { flex: none; overflow: visible; padding: 0; }
  .home-view > .search-shell { width: calc(100% - 36px); max-width: 550px; margin: 6px auto 12px; }
  .home-view .search-form { padding: 5px 6px 5px 12px; gap: 8px; }
  .home-view .search-form input { font-size: 14px; }
  .home-view .search-form button { padding: 11px 14px; font-size: 13px; }
  .home-view .search-form button span { display: inline; }
  .home-view .search-icon { width: 19px; height: 19px; }
  .home-view .search-icon::after { left: 14px; top: 14px; }
  .home-view .universe { --wheel-size: min(100%, 550px); width: 100%; padding: 6px 12px 22px; min-height: 0; display: flex; flex-direction: column; gap: 28px; flex: none; }
  .home-view .wheel-wrap { width: var(--wheel-size); max-width: none; margin: 0 auto; }
  .home-view .sector text { font-size: 16px; }
  .home-view .bubbles { position: relative; inset: auto; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 36px 16px; width: 100%; max-width: 560px; padding: 0 5px; }
  .home-view .bubbles .bubble:nth-child(n) { position: relative; inset: auto; width: 100%; max-width: none; padding: 22px 18px; font-size: clamp(16px, 3.7vw, 22px); align-self: start; border-radius: 26px 34px 30px 22px; }
  .home-view .bubble small { font-size: 9px; letter-spacing: 1px; margin-bottom: 10px; }
  .home-view .bubble-skip { top: 6px; right: 7px; width: 25px; height: 25px; }
  .home-view .curation-note { margin: 10px 18px 18px; font-size: 8px; }
  .thought-connectors { display: none; }
  footer { left: 10px; right: 10px; bottom: max(8px, env(safe-area-inset-bottom, 0px)); height: 58px; border-radius: 23px; padding: 8px 12px; width: auto; }
  footer .footer-meta { gap: 8px; }
  footer .motion { padding: 0; width: 38px; height: 38px; }
  footer .version-line { display: block; font-size: 9px; }
  footer .home-btn, footer .fs-btn { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-view .sector *, .home-view .bubble, .home-view .wheel-wrap { animation: none !important; transition: none !important; }
}

/* The SVG owns the surface; the content box remains stable and accessible. */
.home-view .bubbles .bubble:nth-child(n) { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
.home-view .liquid-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; filter: drop-shadow(0 12px 18px #0002); }
.home-view .liquid-outline path { fill: #183e32; fill-opacity: .78; stroke: #aadbc2; stroke-opacity: .65; stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill-opacity .3s, stroke-opacity .3s; }
.home-view .thought-copy { position: relative; z-index: 1; }
.home-view .bubble-skip { z-index: 2; }
.home-view .bubble:hover .liquid-outline path, .home-view .bubble:focus-visible .liquid-outline path { fill-opacity: .96; stroke-opacity: 1; }

/* Three.js depth study; HTML remains the crisp foreground interaction plane. */
#ocean-scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ocean-ready header, .ocean-ready main { position: relative; z-index: 1; }
.ocean-ready .home-view .liquid-outline { visibility: hidden; }
.distant-thoughts { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.distant-thoughts[hidden] { display: none; }
.distant-thought { position: absolute; width: 170px; padding: 15px 18px; font: 14px/1.4 'Vida Serif', Georgia, serif; color: #c8dfd0; border: 1px solid #aecdbb55; background: #1b403047; border-radius: 42% 35% 40% 30% / 32% 45% 36% 48%; filter: blur(1.5px); }
.distant-thought-0 { left: 24%; top: 19%; width: 138px; filter: blur(2.3px); }
.distant-thought-1 { right: 23%; top: 24%; }
.distant-thought-2 { left: 27%; top: 72%; width: 140px; filter: blur(2px); }
.distant-thought-3 { right: 26%; top: 68%; width: 150px; }
@media(max-width:760px) { .distant-thought-0 { left: -35px; top: 25%; } .distant-thought-1 { right: -35px; top: 45%; } .distant-thought-2, .distant-thought-3 { display: none; } }

/* 0.391: center foreground and distant thought typography. */
.home-view .bubbles .bubble:nth-child(n), .distant-thought { text-align: center; }
.home-view .bubble small { padding-right: 0; }

/* 0.392 — mobile home: the existing wheel and two rotating thoughts in one viewport. */
@media(max-width:760px){
 body:has(main.home-view){height:100svh;min-height:0;padding-bottom:0;overflow:hidden}
 body:has(main.home-view) header{flex:none;padding:10px 16px 6px}
 body:has(main.home-view) .brand{font-size:clamp(19px,5.2vw,29px)}
 main.home-view{height:auto;min-height:0;flex:1;padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));overflow:hidden}
 .home-view>.search-shell{flex:none;margin:4px auto 5px;width:calc(100% - 28px)}
 .home-view .search-form input{padding:7px 0;font-size:13px}
 .home-view .search-form button{padding:9px 12px}
 .home-view .universe{--wheel-size:min(calc(100vw - 24px),calc(100svh - 400px),550px);flex:1;min-height:0;padding:0 12px 8px;display:grid;grid-template-rows:var(--wheel-size) minmax(0,1fr);justify-items:center;align-items:start;gap:8px}
 .home-view .wheel-wrap{width:var(--wheel-size);margin:0;align-self:start}
 .home-view .bubbles{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);height:100%;min-height:0;width:100%;max-width:550px;gap:12px;padding:8px 4px 20px}
 .home-view .bubbles .bubble:nth-child(n){position:relative;inset:auto;width:100%;height:100%;min-height:0;max-width:none;padding:22px 13px 18px;font-size:clamp(15px,4.3vw,20px);line-height:1.3;align-self:stretch;display:flex;align-items:center;justify-content:center}
 .home-view .bubbles .bubble:nth-child(n+3){display:none}
 .home-view .bubble small{font-size:8px;line-height:1.3;letter-spacing:.6px;margin-bottom:9px;padding:0 8px}
 .home-view .bubble::after{bottom:-10px;left:20px;width:5px;height:5px;box-shadow:-7px 8px 0 -1px #badccb80}
 .home-view .curation-note{display:none}
 .home-view~footer .version-line{display:none}
}
@media(max-width:760px) and (max-height:600px){
 .home-view .universe{--wheel-size:min(calc(100vw - 24px),40svh,calc(100svh - 380px));gap:4px}
 .home-view .bubbles .bubble:nth-child(n){font-size:14px;padding:19px 10px 12px}
}

@media(max-width:760px){.home-view .bubble .thought-copy{display:block;width:100%}.home-view .bubble small{padding:0}}

/* 0.393 — mobile as an app: one-row toolbar (logo | busca | Sobre), larger
 * wheel placed higher, two thoughts kept in view and a slim bottom bar with
 * 44px touch targets. Desktop rules above are untouched (all inside 760px). */
@media(max-width:760px){
 :root{--m-toolbar-h:56px;--m-btn:44px;--m-bar-h:52px;--fixed-footer-height:calc(var(--m-bar-h) + 6px + env(safe-area-inset-bottom,0px))}

 /* Bottom bar: one flat row, no nested pills. */
 footer{left:8px;right:8px;bottom:calc(6px + env(safe-area-inset-bottom,0px));height:var(--m-bar-h);padding:4px 6px;gap:0;border-radius:20px;justify-content:space-between}
 footer .footer-meta{display:contents}
 footer .version-line{display:none}
 footer .home-btn,footer .fs-btn,footer .footer-meta .st-btn,footer .motion{width:min(var(--m-btn),calc((100vw - 34px)/7));height:var(--m-btn);border-radius:14px}
 footer .home-btn svg,footer .fs-btn svg,footer .footer-meta .st-btn svg{width:19px;height:19px}
 footer .footer-meta .st-play svg{width:21px;height:21px}
 footer .trilha{padding:0 2px;gap:0;border:0;border-left:1px solid #94c5ac2e;border-right:1px solid #94c5ac2e;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
 footer .motion{border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center}
 footer .motion-icon{width:16px;height:16px}

 /* Home: header and main become one grid so the search joins the top row. */
 body:has(main.home-view){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:var(--m-toolbar-h) minmax(0,1fr);column-gap:8px;height:100svh;padding:0 0 calc(var(--fixed-footer-height) + 6px)}
 body:has(main.home-view) header{display:contents}
 body:has(main.home-view) .brand{grid-column:1;grid-row:1;align-self:center;position:relative;z-index:2;width:var(--m-btn);height:var(--m-btn);margin-left:8px;gap:0;font-size:0;letter-spacing:0;justify-content:center}
 body:has(main.home-view) .brand-icon{width:34px;height:34px}
 body:has(main.home-view) .edition{grid-column:3;grid-row:1;align-self:center;position:relative;z-index:2;margin-right:8px}
 body:has(main.home-view) .sobre-link{min-height:var(--m-btn);padding:0 13px;font-size:12px;border-radius:22px}
 body:has(main.home-view) main.home-view{display:contents}
 .home-view>.search-shell{grid-column:2;grid-row:1;align-self:center;width:auto;max-width:none;margin:0;z-index:5}
 .home-view .search-form{height:var(--m-btn);padding:0 4px 0 12px;gap:8px;border-radius:22px}
 .home-view .search-form input{min-width:0;padding:0;font-size:16px;text-overflow:ellipsis}
 .home-view .search-form button{flex:none;width:34px;height:34px;padding:0;border-radius:50%;font-size:0;display:flex;align-items:center;justify-content:center}
 .home-view .search-form button span{display:inline;font-size:17px;line-height:1}
 .home-view .search-results{position:fixed;top:var(--m-toolbar-h);left:8px;right:8px;max-height:calc(100svh - var(--m-toolbar-h) - var(--fixed-footer-height) - 16px)}

 /* Wheel: as wide as the screen allows, without pushing the thoughts out. */
 .home-view .universe{--m-bubbles-min:clamp(140px,22svh,190px);--m-avail:calc(100svh - var(--m-toolbar-h) - var(--fixed-footer-height) - 8px);--wheel-size:min(calc(100vw - 16px),calc(var(--m-avail) - var(--m-bubbles-min) - 16px),560px);grid-column:1/-1;grid-row:2;position:relative;z-index:1;width:100%;height:100%;min-height:0;padding:0 10px;gap:0;grid-template-rows:var(--wheel-size) auto;align-content:space-evenly}
 .home-view .bubbles{height:min(244px,calc(var(--m-avail) - var(--wheel-size) - 12px));align-self:start;padding:6px 4px 18px}
}