.toql-home {
  --ink:#17314e;
  --muted:#64717e;
  --teal:#007d79;
  --mint:#dcf1eb;
  --peach:#f2bd9b;
  --line:#e5e9e9;
  --rail:224px;
  --header:80px;
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.toql-home * {
  box-sizing:border-box;
}
.toql-home [hidden] {
  display:none!important;
}
.toql-home a {
  color:inherit;
  text-decoration:none;
}
.toql-home button,.toql-home input {
  font:inherit;
}
.toql-home button,.toql-home a {
  touch-action:manipulation;
}
.toql-home button {
  cursor:pointer;
}
.toql-home h1,.toql-home h2,.toql-home h3,.toql-home p {
  margin:0;
}
.toql-home h2 {
  font-size:19px;
  letter-spacing:.02em;
}
.toql-home :is(a,button,input):focus-visible {
  outline:3px solid var(--teal);
  outline-offset:4px;
}
.toql-home .icon {
  width:22px;
  height:22px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:20;
  background:var(--ink);
  color:#fff!important;
  padding:10px 20px;
}
.skip-link:focus {
  top:10px;
}
.home-header {
  height:var(--header);
  position:fixed;
  inset:0 0 auto;
  z-index:10;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 32px 0 20px;
  background:#fffffffa;
  border-bottom:1px solid var(--line);
}
.header-brand {
  display:flex;
  align-items:center;
  gap:16px;
  width:176px;
  flex-shrink:0;
}
.brand {
  display:flex;
  align-items:center;
}
.brand img {
  object-fit:contain;
  display:block;
  width:126px;
  height:53px;
}
.icon-button {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:0;
  background:transparent;
  border-radius:50%;
  color:var(--ink);
}
.icon-button:hover {
  background:#f0f4f3;
}
.hub-address {
  display:flex;
  align-items:center;
  gap:10px;
  width:min(520px,100%);
  margin:0 auto;
  padding-left:18px;
  background:#f6f8f8;
  border:1px solid #e0e6e6;
  border-radius:28px;
  color:#7b8991;
  min-width:0;
  height:44px;
}
.hub-address input {
  width:100%;
  min-width:0;
  padding:9px 0;
  background:none;
  color:var(--ink);
  border:0;
  font-size:13px;
  outline-offset:2px!important;
}
.hub-address input::placeholder {
  color:#71808a;
}
.hub-address button {
  align-self:stretch;
  display:grid;
  place-items:center;
  width:54px;
  flex-shrink:0;
  border:0;
  border-left:1px solid #e0e6e6;
  background:transparent;
  color:var(--ink);
  border-radius:0 28px 28px 0;
}
.hub-address button:hover {
  background:#eaf2ef;
}
.header-actions {
  display:flex;
  align-items:center;
  gap:22px;
  flex-shrink:0;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  border-radius:24px;
  padding:9px 20px;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
}
.button-primary {
  background:var(--ink);
  color:#fff!important;
}
.button-primary:hover {
  background:#244b65;
}
.button-outline {
  border:1px solid #afc4c0;
  color:var(--teal)!important;
  background:#fff;
}
.button-outline:hover {
  background:#f0f8f5;
}
.account-avatar {
  height:36px;
  width:36px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:50%;
  background:#f3dfcf;
  color:#563c2c!important;
  font-weight:700;
  font-size:14px;
  overflow:hidden;
}
.account-avatar .icon {
  width:19px;
  height:19px;
}
.home-navigation {
  position:fixed;
  top:var(--header);
  bottom:0;
  left:0;
  width:var(--rail);
  padding:26px 14px 22px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
  background:#fff;
  z-index:9;
  overflow-y:auto;
}
.nav-primary,.nav-library {
  display:grid;
  gap:5px;
}
.nav-item {
  display:flex;
  align-items:center;
  gap:15px;
  min-height:47px;
  padding:11px 15px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.nav-item:hover {
  background:#f4f7f6;
}
.nav-item.active {
  background:#eaf5f0;
  color:#006f65;
}
.nav-item .icon {
  width:20px;
  height:20px;
}
.nav-library {
  margin-top:27px;
  border-top:1px solid var(--line);
  padding-top:25px;
}
.nav-heading {
  font-size:10px!important;
  letter-spacing:.12em;
  font-weight:700;
  color:#718078;
  padding:0 15px 8px;
}
.nav-library .nav-item {
  font-weight:500;
  color:#536471;
  gap:12px;
}
.soon {
  font-size:9px;
  padding:2px 5px;
  background:#f0f3f2;
  border-radius:4px;
  color:#66756f;
  margin-left:auto;
}
.nav-footer {
  margin-top:auto;
  padding:50px 15px 0;
  color:#80908b;
}
.nav-footer-title {
  font-size:16px;
  color:#47675e;
  line-height:1.8;
  font-weight:600;
}
.nav-footer p {
  font-size:9px;
  margin-top:20px;
  letter-spacing:.03em;
}
.home-main {
  margin-left:var(--rail);
  padding:calc(var(--header) + 30px) clamp(24px,3.2vw,54px) 24px;
  max-width:1740px;
  min-height:100vh;
}
.page-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:23px;
}
.eyebrow {
  color:var(--teal);
  font-size:10px;
  letter-spacing:.11em;
  font-weight:700;
  overflow-wrap:anywhere;
}
.page-heading h1 {
  font-size:27px;
  font-weight:700;
  line-height:1.3;
  margin-top:5px;
  letter-spacing:.04em;
}
.page-note {
  font-size:11px;
  color:#788781;
  letter-spacing:.04em;
  padding-bottom:3px;
}
.welcome-banner {
  position:relative;
  min-height:250px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
  border-radius:17px;
  background:#17314e;
  color:#fff;
  padding:30px 38px;
}
.welcome-copy {
  position:relative;
  z-index:2;
}
.banner-eyebrow {
  font-size:9px;
  letter-spacing:.16em;
  color:#a6d2c5;
  font-weight:600;
}
.welcome-copy h2 {
  font-size:clamp(24px,2.5vw,34px);
  line-height:1.45;
  font-weight:600;
  letter-spacing:.09em;
  margin:10px 0;
}
.welcome-copy>p:not(.banner-eyebrow) {
  font-size:11px;
  line-height:1.95;
  color:#d0dde3;
}
.banner-link {
  display:inline-flex;
  gap:15px;
  align-items:center;
  margin-top:18px;
  font-size:11px;
  font-weight:600;
  color:#bce5d7!important;
}
.banner-link .icon {
  width:16px;
  height:16px;
}
.voice-art {
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:390px;
  height:260px;
}
.voice-orbit {
  border:1px solid #adcfc421;
  border-radius:50%;
  position:absolute;
  width:320px;
  height:320px;
  top:-32px;
  left:30px;
}
.orbit-two {
  width:245px;
  height:245px;
  top:6px;
  left:68px;
}
.speech-shape {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:28px;
  box-shadow:0 15px 40px #051d2733;
}
.speech-shape:after {
  content:"";
  position:absolute;
  bottom:-16px;
  border-width:18px 18px 0 0;
  border-style:solid;
}
.speech-mint {
  width:196px;
  height:135px;
  left:35px;
  top:36px;
  background:#9dd8c6;
  gap:7px;
  transform:rotate(-8deg);
  z-index:2;
}
.speech-mint:after {
  left:28px;
  border-color:#9dd8c6 transparent transparent transparent;
}
.speech-mint span {
  width:5px;
  background:#255b52;
  border-radius:8px;
  height:30px;
}
.speech-mint span:nth-child(2),.speech-mint span:nth-child(6) {
  height:46px;
}
.speech-mint span:nth-child(3),.speech-mint span:nth-child(5) {
  height:68px;
}
.speech-mint span:nth-child(4) {
  height:86px;
}
.speech-peach {
  height:106px;
  width:142px;
  left:197px;
  top:132px;
  background:#f2bd9b;
  transform:rotate(9deg);
}
.speech-peach:after {
  right:23px;
  border-width:18px 0 0 18px;
  border-color:#f2bd9b transparent transparent transparent;
}
.speech-peach .icon {
  height:49px;
  width:49px;
  color:#73503a;
  stroke-width:1.3;
}
.art-dot {
  position:absolute;
  border-radius:50%;
}
.dot-one {
  height:9px;
  width:9px;
  left:291px;
  top:50px;
  background:#cbaa7e;
}
.dot-two {
  height:5px;
  width:5px;
  left:87px;
  top:225px;
  background:#a5cabe;
}
.art-star {
  position:absolute;
  left:315px;
  top:83px;
  font-size:27px;
  font-weight:300;
  color:#badbcd;
}
.sign-in-callout {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  padding:22px 0 4px;
}
.sign-in-callout h2 {
  font-size:15px;
}
.sign-in-callout p {
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.section-description {
  font-size:12px;
  color:var(--muted);
  margin-top:4px!important;
}
.section-tag {
  font-size:10px;
  white-space:nowrap;
  color:#6f7b77;
  border:1px solid #e0e6e3;
  border-radius:5px;
  padding:3px 8px;
  font-weight:500;
}
.library-section {
  margin-top:34px;
  scroll-margin-top:calc(var(--header) + 20px);
}
.library-empty {
  padding:29px 20px 25px;
  text-align:center;
  border:1px dashed #d8e1dc;
  border-radius:14px;
  background:#fafcfb;
}
.empty-icon {
  display:grid;
  place-items:center;
  background:#e9f2ec;
  width:45px;
  height:45px;
  margin:0 auto 12px;
  border-radius:14px;
  color:#688b78;
}
.empty-icon .icon {
  width:22px;
  height:22px;
}
.library-empty h3 {
  font-size:15px;
  font-weight:600;
  letter-spacing:.025em;
}
.library-empty p {
  font-size:12px;
  color:#708077;
  line-height:1.9;
  margin-top:7px;
}
.empty-note {
  display:block;
  font-size:10px;
  color:#819087;
  margin-top:14px;
}
.mobile-break {
  display:none;
}
.hubs-section {
  margin-top:34px;
  scroll-margin-top:calc(var(--header) + 20px);
}
.section-link {
  font-size:11px;
  color:var(--teal)!important;
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.section-link .icon {
  width:15px;
  height:15px;
}
.hub-filters {
  display:flex;
  gap:9px;
  margin-bottom:17px;
}
.filter-chip {
  font-size:11px!important;
  padding:7px 16px;
  min-height:36px;
  border-radius:8px;
  border:1px solid transparent;
  background:#f1f4f3;
  color:#53615c;
}
.filter-chip[aria-pressed="true"] {
  background:var(--ink);
  color:#fff;
}
.filter-chip:hover {
  border-color:#aebcb6;
}
.hub-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.hub-card {
  min-width:0;
  border:1px solid var(--line);
  border-radius:13px;
  padding:21px 22px;
  background:#fff;
  display:flex;
  gap:17px;
  align-items:flex-start;
}
.hub-emblem {
  height:45px;
  width:45px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:13px;
  background:#e3f2eb;
  color:#307965;
}
.hub-emblem.organization {
  background:#eef0f8;
  color:#626b96;
}
.hub-emblem .icon {
  width:23px;
  height:23px;
}
.hub-card-content {
  min-width:0;
  flex:1;
}
.hub-type {
  font-size:9px;
  color:#7a8588;
  letter-spacing:.1em;
  font-weight:600;
}
.hub-card h3 {
  font-size:15px;
  margin:3px 0 4px;
  overflow-wrap:anywhere;
  line-height:1.5;
}
.hub-card p {
  font-size:11px;
  color:#79817e;
  overflow-wrap:anywhere;
}
.hub-card-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:16px;
}
.hub-card-actions a {
  font-size:11px;
  color:#00766a;
  font-weight:600;
  padding:3px 0;
  min-height:28px;
  display:inline-flex;
  align-items:center;
}
.hubs-empty {
  padding:25px;
  color:var(--muted);
  font-size:12px;
  background:#f8faf9;
  border-radius:12px;
}
.hubs-empty a {
  color:var(--teal);
  text-decoration:underline;
}
.series-section {
  display:flex;
  gap:20px;
  align-items:center;
  background:#faf8f4;
  border:1px solid #f0eae1;
  padding:23px 26px;
  border-radius:13px;
  margin-top:32px;
  scroll-margin-top:calc(var(--header) + 20px);
}
.series-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#eee8dd;
  flex-shrink:0;
  color:#9c896d;
}
.series-heading {
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.series-heading h2 {
  font-size:14px;
}
.series-section p {
  color:#8b8171;
  font-size:11px;
  margin-top:6px;
}
.home-footer {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:34px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:#93a097;
}
.home-footer>span {
  font-weight:800;
  letter-spacing:.08em;
  font-size:15px;
}
.home-footer p {
  font-size:10px;
}
.home-notice {
  background:#fff6df;
  color:#6c4b13;
  border-radius:9px;
  padding:13px 17px;
  margin-bottom:20px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
}
.text-button {
  background:none;
  border:0;
  color:inherit;
  flex-shrink:0;
  text-decoration:underline;
  min-height:32px;
}
.form-message {
  color:#8d3f30;
  background:#fff3ed;
  padding:12px 16px;
  border-radius:8px;
  margin-bottom:20px!important;
  font-size:12px;
}
.toql-home[data-compact="true"] {
  --rail:80px;
}
.toql-home[data-compact="true"] .home-navigation {
  padding-inline:10px;
}
.toql-home[data-compact="true"] .nav-item {
  padding-inline:18px;
}
.toql-home[data-compact="true"] :is(.nav-label,.soon,.nav-heading,.nav-footer) {
  display:none;
}
.toql-home[data-compact="true"] .nav-library {
  padding-top:20px;
}
@media(min-width:1750px) {
  .home-main {
    margin-right:auto;
  }
  .welcome-banner {
    min-height:280px;
  }
  .voice-art {
    right:60px;
  }
}
@media(max-width:1100px) {
  .toql-home {
    --rail:194px;
  }
  .home-header {
    gap:20px;
    padding-right:24px;
  }
  .header-brand {
    width:154px;
    gap:10px;
  }
  .brand img {
    width:112px;
  }
  .header-actions {
    gap:15px;
  }
  .home-navigation {
    padding-inline:10px;
  }
  .nav-item {
    gap:11px;
    padding-inline:11px;
    font-size:12px;
  }
  .nav-library .nav-item {
    gap:9px;
  }
  .voice-art {
    right:-50px;
    opacity:.9;
  }
  .welcome-copy {
    max-width:65%;
  }
  .welcome-banner {
    padding:26px 28px;
  }
  .hub-card {
    padding:18px 16px;
    gap:12px;
  }
  .soon {
    font-size:8px;
  }
}
@media(max-width:900px) {
  .toql-home {
    --rail:80px;
  }
  .nav-label,.soon,.nav-heading,.nav-footer {
    display:none;
  }
  .home-navigation {
    padding-inline:10px;
  }
  .nav-item {
    padding-inline:18px;
  }
  .header-brand {
    width:116px;
  }
  .header-brand .icon-button {
    display:none;
  }
  .home-header {
    gap:18px;
    padding-left:22px;
  }
  .home-main {
    padding-inline:24px;
  }
  .voice-art {
    right:-92px;
    transform:translateY(-50%) scale(.82);
  }
  .hub-grid {
    grid-template-columns:1fr;
  }
  .sign-in-callout {
    align-items:flex-start;
  }
  .sign-in-callout .button {
    font-size:11px;
  }
  .home-header .button {
    padding-inline:14px;
  }
  .hub-address {
    padding-left:12px;
    gap:6px;
  }
}
@media(max-width:640px) {
  .toql-home {
    --rail:0px;
    --header:130px;
  }
  .home-header {
    height:130px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:0 16px;
    padding:6px 18px 14px;
    align-content:center;
  }
  .header-brand {
    width:auto;
  }
  .brand img {
    width:111px;
    height:48px;
  }
  .header-actions {
    gap:13px;
  }
  .header-actions .button {
    font-size:11px;
    min-height:36px;
    padding:7px 14px;
  }
  .header-actions .icon {
    width:18px;
    height:18px;
  }
  .account-avatar {
    width:32px;
    height:32px;
    font-size:12px;
  }
  .hub-address {
    grid-column:1/-1;
    grid-row:2;
    height:39px;
    margin-top:8px;
    width:100%;
    padding-left:13px;
  }
  .hub-address input {
    font-size:11px;
  }
  .hub-address .icon {
    width:18px;
    height:18px;
  }
  .hub-address button {
    width:44px;
  }
  .home-navigation {
    position:fixed;
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:calc(65px + env(safe-area-inset-bottom));
    padding:4px 6px calc(4px + env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid var(--line);
    overflow:visible;
  }
  .nav-primary {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
  }
  .nav-item,.toql-home[data-compact="true"] .nav-item {
    padding:6px 2px;
    gap:3px;
    flex-direction:column;
    font-size:9px;
    min-height:54px;
    border-radius:8px;
  }
  .nav-label,.toql-home[data-compact="true"] .nav-label {
    display:block;
    font-size:9px;
  }
  .nav-library,.nav-footer {
    display:none;
  }
  .nav-item .icon {
    width:20px;
    height:20px;
  }
  .home-main {
    padding:150px 18px calc(88px + env(safe-area-inset-bottom));
    margin-left:0;
  }
  .page-heading {
    margin-bottom:18px;
    gap:8px;
  }
  .eyebrow {
    font-size:9px;
  }
  .page-heading h1 {
    font-size:23px;
    margin-top:5px;
  }
  .page-note {
    font-size:9px;
  }
  .welcome-banner {
    min-height:236px;
    padding:24px 22px;
    border-radius:14px;
  }
  .welcome-copy {
    max-width:82%;
  }
  .banner-eyebrow {
    font-size:7px;
    letter-spacing:.12em;
  }
  .welcome-banner .welcome-copy h2 {
    font-size:26px;
    letter-spacing:.035em;
    margin:10px 0;
  }
  .welcome-copy>p:not(.banner-eyebrow) {
    font-size:10px;
  }
  .banner-link {
    font-size:10px;
    margin-top:16px;
    gap:9px;
  }
  .voice-art {
    right:-193px;
    top:49%;
    transform:translateY(-50%) scale(.52);
    opacity:.78;
  }
  .speech-peach {
    left:182px;
  }
  .sign-in-callout {
    flex-direction:column;
    gap:13px;
    padding-top:22px;
  }
  .sign-in-callout h2 {
    font-size:13px;
  }
  .sign-in-callout p {
    font-size:10px;
    line-height:1.8;
  }
  .sign-in-callout .button {
    font-size:11px;
    min-height:38px;
  }
  .toql-home h2 {
    font-size:17px;
  }
  .section-heading {
    gap:10px;
    margin-bottom:14px;
  }
  .section-tag {
    font-size:9px;
    padding:2px 6px;
  }
  .library-section {
    margin-top:27px;
  }
  .library-empty {
    padding:25px 14px 23px;
    border-radius:12px;
  }
  .library-empty h3 {
    font-size:14px;
  }
  .library-empty p {
    font-size:11px;
  }
  .empty-note {
    font-size:9px;
    margin-top:13px;
  }
  .mobile-break {
    display:block;
  }
  .empty-icon {
    width:40px;
    height:40px;
  }
  .hubs-section {
    margin-top:28px;
  }
  .section-description {
    font-size:10px;
  }
  .section-link {
    font-size:10px;
    gap:4px;
  }
  .section-link .icon {
    width:13px;
    height:13px;
  }
  .filter-chip {
    font-size:10px!important;
    padding:6px 13px;
    min-height:34px;
  }
  .hub-card {
    padding:18px;
    gap:14px;
  }
  .hub-card h3 {
    font-size:14px;
  }
  .hub-emblem {
    height:40px;
    width:40px;
  }
  .hub-type {
    font-size:8px;
  }
  .hub-card p {
    font-size:10px;
  }
  .hub-card-actions {
    margin-top:12px;
  }
  .hub-card-actions a {
    font-size:11px;
  }
  .series-section {
    padding:19px 17px;
    gap:13px;
    margin-top:26px;
    align-items:flex-start;
  }
  .series-heading {
    gap:7px;
  }
  .series-heading h2 {
    font-size:12px;
  }
  .series-section p {
    font-size:10px;
    line-height:1.8;
    margin-top:7px;
  }
  .series-icon {
    width:35px;
    height:35px;
    border-radius:10px;
  }
  .series-icon .icon {
    width:19px;
    height:19px;
  }
  .home-footer {
    margin-top:26px;
    gap:9px;
  }
  .home-footer>span {
    font-size:13px;
  }
  .home-footer p {
    font-size:8px;
  }
  .home-notice {
    font-size:11px;
    align-items:flex-start;
    gap:10px;
  }
  .home-notice .text-button {
    font-size:10px;
    padding:0;
  }
}
@media(prefers-reduced-motion:no-preference) {
  .toql-home :is(a,button) {
    transition:background-color .15s ease,border-color .15s ease;
  }
}

/* Broadcast entry keeps a compact banner; viewing home retains its search/actions. */
.toql-home.broadcast-entry { --header:80px; }
.broadcast-entry .home-header { height:80px; display:flex; justify-content:flex-start; gap:24px; }
.broadcast-entry .header-page-title { font-size:16px; font-weight:700; }
.broadcast-entry :is(#homeGreeting,.page-note,.home-footer) { display:none; }
@media(max-width:640px) {
 .broadcast-entry .home-header { gap:16px; }
 .broadcast-entry .home-main { padding-top:100px; }
}