/* The tools world (src/world/explore.js): the 3D room of the tools on the Tools page, and on the Tools screen
   in My Lifestyle Hub. Everything is under .tw3, the element it fills (the page sizes it). Its words take the
   room's light, not the page's theme: light on the dark grid while it renders, then dark on glass once the
   room is lit (.tw3-day). The page's own font is used; --tw3-mono can be given. */
.tw3 {
  --tw3-ink: #e8f1ff; --tw3-soft: rgba(232, 241, 255, .68); --tw3-card: rgba(12, 20, 36, .74); --tw3-panel: rgba(12, 20, 36, .86);
  --tw3-line: rgba(140, 200, 255, .22); --tw3-track: rgba(232, 241, 255, .12); --tw3-beam: #8cc8ff;
  --tw3-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative; overflow: hidden; isolation: isolate; background: #05080f; color: var(--tw3-ink);
  -webkit-tap-highlight-color: transparent;
}
.tw3.tw3-day {
  --tw3-ink: #0e1b30; --tw3-soft: rgba(14, 27, 48, .7); --tw3-card: rgba(255, 255, 255, .84); --tw3-panel: rgba(250, 251, 253, .93);
  --tw3-line: rgba(14, 27, 48, .1); --tw3-track: rgba(14, 27, 48, .08);
}
.tw3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; outline: none; cursor: grab; }
.tw3-canvas.tw3-dragging { cursor: grabbing; }
.tw3-canvas.tw3-point { cursor: pointer; }
.tw3-canvas:focus-visible { outline: 2px solid var(--tw3-beam); outline-offset: -4px; }
.tw3-ui { position: absolute; inset: 0; pointer-events: none; font-family: inherit; }
.tw3-ui [hidden] { display: none !important; }
.tw3-ui button { font: inherit; }

/* the line from the window to its tool */
.tw3-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.tw3-lead path { fill: none; stroke: var(--tw3-ink); stroke-opacity: .42; stroke-width: 1.25; }
.tw3-lead circle { fill: var(--tc, #8cc8ff); stroke: #fff; stroke-width: 2; }

/* a sign over each pillar's tools, and each tool's name on its plinth */
.tw3-sign, .tw3-tag { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; will-change: transform, opacity; }
.tw3-sign {
  display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .75rem .42rem .6rem; border-radius: 999px;
  font: 500 .66rem/1 var(--tw3-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tw3-ink);
  background: var(--tw3-card); border: 1px solid var(--tw3-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tw3-sign i, .tw3-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 28%, transparent); flex: none; }
.tw3-tag {
  pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  font-size: .76rem; font-weight: 600; line-height: 1.15; letter-spacing: -.005em; color: var(--tw3-ink); padding: .42rem .72rem .42rem .56rem; border-radius: 999px;
  background: var(--tw3-card); border: 1px solid var(--tw3-line); box-shadow: 0 10px 24px -16px rgba(14, 27, 48, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .25s, box-shadow .25s;
}
.tw3-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); flex: none; }
.tw3-tag.on, .tw3-tag:hover, .tw3-tag:focus-visible { outline: none; border-color: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 30%, transparent), 0 14px 30px -18px rgba(14, 27, 48, .55); }

/* the window */
.tw3-card {
  position: absolute; left: 0; top: 0; width: min(20.5rem, calc(100% - 28px)); box-sizing: border-box;
  padding: .95rem 1.05rem .85rem; border-radius: 20px; display: grid; gap: .6rem; color: var(--tw3-ink);
  background: var(--tw3-panel); border: 1px solid var(--tw3-line);
  box-shadow: 0 26px 60px -30px rgba(14, 27, 48, .5), 0 2px 6px rgba(14, 27, 48, .05);
  -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
  opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; outline: none;
}
.tw3-card.on { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .22s ease; }
.tw3-card header { display: flex; align-items: flex-start; gap: .65rem; }
.tw3-card header > div { min-width: 0; flex: 1; }
.tw3-icons { display: flex; flex: none; margin: -.35rem 0 -.2rem -.3rem; }
.tw3-icons img { width: 54px; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--tc) 16%, transparent); }
.tw3-icons.many img { width: 40px; height: 40px; border-radius: 12px; }
.tw3-icons.many img + img { margin-left: -12px; }
.tw3-pil { margin: 0 0 .2rem; font: 500 .6rem/1 var(--tw3-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tw3-soft); }
.tw3-name { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; outline: none; }
.tw3-sub { margin: .15rem 0 0; font-size: .74rem; color: var(--tw3-soft); }
.tw3-sub:empty { display: none; }
.tw3-x { margin: -.3rem -.4rem 0 0; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; background: transparent; color: var(--tw3-soft); font-size: 1.25rem !important; line-height: 1; cursor: pointer; flex: none; }
.tw3-x:hover { background: var(--tw3-track); color: var(--tw3-ink); }
.tw3-what { margin: 0; font-size: .86rem; line-height: 1.5; }
.tw3-prev { position: relative; height: 96px; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--tc) 12%, #fff); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); }
.tw3-prev svg { display: block; width: 100%; height: 100%; }
.tw3-sample { position: absolute; right: 7px; bottom: 6px; z-index: 1; font: 500 .52rem/1 var(--tw3-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(14, 27, 48, .7); }
.tw3-helps { list-style: none; margin: 0; padding: 0; display: grid; gap: .36rem; }
.tw3-helps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; font-size: .78rem; line-height: 1.45; color: var(--tw3-soft); }
.tw3-helps li::before { content: ""; width: 6px; height: 6px; margin-top: .48em; border-radius: 2px; background: var(--tc); }
.tw3-plans { margin: 0; padding-top: .5rem; border-top: 1px solid var(--tw3-line); font-size: .72rem; line-height: 1.45; color: var(--tw3-soft); }
.tw3-card footer { display: flex; align-items: center; gap: .35rem; padding-top: .1rem; }
.tw3-step { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--tw3-line); background: transparent; color: var(--tw3-ink); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0; }
.tw3-step:hover { background: var(--tw3-track); }
.tw3-count { font: 500 .62rem/1 var(--tw3-mono); letter-spacing: .1em; color: var(--tw3-soft); padding: 0 .2rem; white-space: nowrap; }
.tw3-go { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .9rem; border-radius: 999px; background: var(--tw3-ink); color: var(--tw3-panel); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tw3.tw3-day .tw3-go { color: #fff; }
.tw3-go:hover { transform: translateY(-1px); }
.tw3-card button:focus-visible, .tw3-go:focus-visible, .tw3-bar button:focus-visible { outline: 2px solid var(--tw3-beam); outline-offset: 2px; }
/* the small pictures: light, whatever the room's light (their small words at .7, 6:1 or better on every pillar's
   tint: WCAG AA, as the app's accessibility check measures them) */
.tw3-prev text { font-size: 11px; fill: #0e1b30; }
.tw3-prev .s { fill: rgba(14, 27, 48, .7); }
.tw3-prev .tb { font-weight: 600; }
.tw3-prev .sm { font-size: 9.5px; }
.tw3-prev .big { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.tw3-prev .a { fill: var(--tc); }
.tw3-prev .as { stroke: color-mix(in srgb, var(--tc) 80%, #0e1b30); }
.tw3-prev .w { fill: #fff; stroke: rgba(14, 27, 48, .12); }
.tw3-prev .trk { fill: rgba(14, 27, 48, .1); }
.tw3-prev .trk-s { stroke: rgba(14, 27, 48, .1); }
.tw3-prev .tband { fill: color-mix(in srgb, var(--tc) 55%, #0e1b30); opacity: .22; }
.tw3-prev .ring { fill: none; stroke: #0e1b30; stroke-width: 1.5; }
.tw3-prev .box { fill: #fff; stroke: #0e1b30; stroke-width: 2; }
.tw3-prev .cross { stroke: #0e1b30; stroke-width: 3; stroke-linecap: round; }
.tw3-prev .tick { fill: none; stroke: #0e1b30; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tw3-prev .mark { stroke: #0e1b30; stroke-width: 1.2; stroke-dasharray: 3 3; }
.tw3-prev .tp-count { stroke-dasharray: 100; animation: tw3-count 7s linear infinite; }
@keyframes tw3-count { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
.tw3-prev .tp-grow { transform-origin: 12px 36px; animation: tw3-grow 3.2s cubic-bezier(.2, .7, .2, 1) infinite alternate; }
@keyframes tw3-grow { from { transform: scaleX(.25); } to { transform: scaleX(1); } }
.tw3-prev .tp-pop { transform-box: fill-box; transform-origin: center; animation: tw3-pop 4.8s ease-out infinite; }
@keyframes tw3-pop { 0% { transform: scale(0); } 12%, 100% { transform: scale(1); } }
.tw3-prev .tp-breathe { transform-box: fill-box; transform-origin: center; animation: tw3-breathe 16s ease-in-out infinite; }
@keyframes tw3-breathe { 0% { transform: scale(.68); } 25%, 50% { transform: scale(1); } 75%, 100% { transform: scale(.68); } }
.tw3-prev .tp-hop { animation: tw3-hop 3s steps(1) infinite; }
@keyframes tw3-hop { 0% { transform: translateX(80px); } 25% { transform: translateX(0); } 50% { transform: translateX(120px); } 75% { transform: translateX(40px); } }
.tw3-prev .tp-shrink { transform-origin: 200px 40px; animation: tw3-shrink 10s linear infinite; }
@keyframes tw3-shrink { from { transform: scaleX(1); } to { transform: scaleX(.04); } }

/* loading, then a hint */
.tw3-status {
  position: absolute; left: var(--tw3-st-left, 14px); right: var(--tw3-st-right, auto); top: 12px; margin: 0; display: flex; align-items: center; gap: .55rem;
  font: 500 .64rem/1 var(--tw3-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tw3-soft);
  padding: .5rem .75rem .5rem .65rem; border-radius: 999px; background: var(--tw3-card); border: 1px solid var(--tw3-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .6s ease; pointer-events: none;
}
.tw3-status.off { opacity: 0; }
.tw3-status b { width: 6px; height: 6px; border-radius: 50%; background: var(--tw3-beam); box-shadow: 0 0 10px var(--tw3-beam); animation: tw3-pulse 1.4s ease-in-out infinite; }
.tw3.tw3-day .tw3-status b { background: #2f7fd6; box-shadow: none; }
@keyframes tw3-pulse { 50% { opacity: .35; } }

/* the bar: the tool before, the pillars, the next tool, and the whole ring */
.tw3-bar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 24px); box-sizing: border-box;
  display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; pointer-events: auto;
  background: var(--tw3-card); border: 1px solid var(--tw3-line); box-shadow: 0 16px 36px -22px rgba(14, 27, 48, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.tw3-chips { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tw3-chips::-webkit-scrollbar { display: none; }
.tw3-nav, .tw3-all, .tw3-chip { border: 0; background: transparent; color: var(--tw3-ink); cursor: pointer; border-radius: 999px; }
.tw3-nav { width: 36px; height: 36px; display: grid; place-items: center; flex: none; padding: 0; }
.tw3-nav svg, .tw3-all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tw3-nav:hover, .tw3-all:hover, .tw3-chip:hover { background: var(--tw3-track); }
.tw3-chip { display: inline-flex; align-items: center; gap: .42rem; padding: .5rem .75rem .5rem .6rem; font-size: .76rem; font-weight: 600; white-space: nowrap; flex: none; }
.tw3-chip i { width: 8px; height: 8px; box-shadow: none; }
.tw3-chip.on { background: color-mix(in srgb, var(--tc) 22%, transparent); }
.tw3-all { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem .5rem .62rem; font-size: .76rem; font-weight: 600; flex: none; border-left: 1px solid var(--tw3-line); border-radius: 0 999px 999px 0; margin-left: 2px; }
.tw3-all[aria-pressed="true"] { background: var(--tw3-ink); color: var(--tw3-panel); }
.tw3.tw3-day .tw3-all[aria-pressed="true"] { color: #fff; }
.tw3-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* a narrow world: the pillar you're at, not all six; and on a tall one the window sits at the foot */
.tw3-narrow .tw3-chip:not(.on) { display: none; }
.tw3-narrow .tw3-all span { display: none; }
.tw3-narrow .tw3-all { padding: .5rem .7rem; }
.tw3-narrow .tw3-tag { font-size: .7rem; padding: .34rem .58rem .34rem .46rem; }
.tw3-tall .tw3-card {
  left: 10px !important; right: 10px; top: auto !important; bottom: 62px; width: auto; max-height: min(58%, calc(100% - 128px)); overflow: auto; overscroll-behavior: contain;
  gap: .5rem; padding: .85rem .9rem .75rem;
}
.tw3-tall .tw3-prev { height: 84px; }
/* a short, tall world (a phone's, in an app): the window without its sample picture, so the tool shows over it */
.tw3-tall.tw3-short .tw3-card { max-height: 52%; }
.tw3-tall.tw3-short .tw3-prev { display: none; }
.tw3-tall .tw3-helps li { font-size: .74rem; }

@media (prefers-reduced-motion: reduce) {
  .tw3-card { transition: none; }
  .tw3-prev * { animation: none !important; }
  .tw3-status b { animation: none; }
}
.tw3-test .tw3 *, .tw3-test .tw3 *::before, .tw3-test .tw3 *::after { transition: none !important; }