:root {
  color: #173f51;
  background: #eaf7fc;
  font-family: "Noto Sans JP", sans-serif;
  font-synthesis: none;
  --ink: #174354;
  --muted: #668b9b;
  --aqua: #4aa7be;
  --aqua-deep: #277a93;
  --line: rgba(68, 135, 158, .2);
  --glass: rgba(247, 253, 255, .76);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; }
body { margin: 0; overflow: hidden; }
button, input { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.liquid-app { position: relative; width: 100%; height: 100dvh; overflow: hidden; isolation: isolate; background: #eaf7fc; }
.water-stage { position: absolute; z-index: -3; inset: 0; overflow: hidden; }
.water-stage img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: filter 600ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); }
.water-glow { position: absolute; z-index: -2; inset: 0; pointer-events: none; background: linear-gradient(110deg, rgba(255,255,255,.14), transparent 35%, rgba(212,244,250,.13)), radial-gradient(circle at 74% 42%, rgba(255,255,255,.38), transparent 29%); mix-blend-mode: screen; }
.ripple-field { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.ripple-field i { position: absolute; width: 90px; height: 90px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; animation: rippleOut 7s infinite ease-out; }
.ripple-field i:nth-child(1) { top: 47%; left: 38%; }
.ripple-field i:nth-child(2) { top: 26%; right: 21%; animation-delay: -2.2s; }
.ripple-field i:nth-child(3) { right: 9%; bottom: 13%; animation-delay: -4.4s; }
@keyframes rippleOut { 0% { opacity: 0; transform: scale(.35); } 16% { opacity: .8; } 78%,100% { opacity: 0; transform: scale(4.6); } }

.site-header { position: absolute; z-index: 8; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 80px; padding: 12px clamp(18px, 3vw, 46px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 7px 14px rgba(45,109,136,.12)); }
.brand span { display: grid; }
.brand b { font-family: "DM Sans", sans-serif; font-size: .96rem; letter-spacing: -.03em; }
.brand small { margin-top: 1px; color: #6c93a3; font-family: "DM Sans", sans-serif; font-size: .48rem; font-weight: 700; letter-spacing: .14em; }
.prototype-number { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(72,141,163,.22); border-radius: 50%; color: #5b8798; background: rgba(255,255,255,.46); backdrop-filter: blur(15px); font-family: "DM Sans", sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: .08em; box-shadow: inset 0 0 0 5px rgba(255,255,255,.18); }

.home-stage { position: relative; width: 100%; height: 100%; transition: filter 500ms ease, transform 700ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease; }
.tuning-touch { position: absolute; top: 57%; left: 38%; z-index: 4; display: grid; place-items: center; width: 66px; height: 66px; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #326f84; background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.95), rgba(229,248,251,.5) 38%, rgba(100,184,202,.14) 76%, rgba(255,255,255,.34)); backdrop-filter: blur(4px); box-shadow: inset -7px -9px 17px rgba(75,151,174,.11), inset 5px 6px 12px rgba(255,255,255,.8), 0 16px 34px rgba(44,111,137,.12); transform: translate(-50%, -50%); animation: coreFloat 4.5s infinite ease-in-out; }
.tuning-touch::before, .tuning-touch::after { position: absolute; inset: -14px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; content: ""; animation: touchRing 3s infinite ease-out; }
.tuning-touch::after { inset: -29px; animation-delay: 1.2s; }
.tuning-touch > span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: white; box-shadow: 0 0 14px 6px rgba(255,255,255,.68); }
.tuning-touch > i { position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; }
@keyframes coreFloat { 50% { transform: translate(-50%, calc(-50% - 7px)); } }
@keyframes touchRing { 0% { opacity: 0; transform: scale(.75); } 30% { opacity: .8; } 100% { opacity: 0; transform: scale(1.42); } }

.bubble-navigation { position: absolute; inset: 0; }
.nav-bubble { position: absolute; z-index: 3; isolation: isolate; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; color: #2c6579; background: radial-gradient(ellipse at 27% 18%, rgba(255,255,255,.96) 0 2.5%, rgba(255,255,255,.46) 7%, rgba(255,255,255,.08) 18%, transparent 32%), radial-gradient(circle at 72% 79%, rgba(76,183,208,.15), transparent 42%), rgba(228,248,252,.12); backdrop-filter: blur(2px) saturate(1.08); box-shadow: inset 8px 10px 17px rgba(255,255,255,.7), inset -15px -18px 27px rgba(56,157,184,.14), inset 0 0 18px rgba(255,255,255,.25), 0 20px 40px rgba(44,113,140,.12), 0 0 0 1px rgba(255,255,255,.22); text-align: center; transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease; animation: bubbleDrift 7s infinite ease-in-out; }
.nav-bubble::before { position: absolute; z-index: -1; inset: 6px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: linear-gradient(138deg, rgba(255,255,255,.12), transparent 38%, rgba(54,162,190,.06) 72%, rgba(255,255,255,.2)); box-shadow: inset 5px 7px 13px rgba(255,255,255,.28), inset -9px -12px 16px rgba(55,157,183,.07); content: ""; }
.nav-bubble::after { position: absolute; z-index: -1; inset: 1px; padding: 2px; border-radius: 50%; background: conic-gradient(from 198deg, rgba(103,214,235,.48), rgba(255,255,255,.96), rgba(238,183,232,.5), rgba(105,219,210,.68), rgba(166,197,244,.5), rgba(255,255,255,.78), rgba(103,214,235,.48)); content: ""; opacity: .9; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.nav-bubble:hover, .nav-bubble:focus-visible { outline: 0; transform: translateY(-7px) scale(1.035); background: radial-gradient(ellipse at 27% 18%, rgba(255,255,255,.98) 0 3%, rgba(255,255,255,.5) 7%, rgba(255,255,255,.1) 18%, transparent 32%), radial-gradient(circle at 72% 79%, rgba(76,183,208,.18), transparent 42%), rgba(228,248,252,.16); box-shadow: inset 8px 10px 17px rgba(255,255,255,.76), inset -15px -18px 27px rgba(56,157,184,.16), 0 29px 56px rgba(44,113,140,.2); }
.bubble-shine { position: absolute; top: 13%; left: 20%; width: 31%; height: 10%; border-radius: 50%; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.94), rgba(255,255,255,.18)); filter: blur(1px); transform: rotate(-31deg); box-shadow: 15px 7px 13px rgba(255,255,255,.3); }
.bubble-shine::after { position: absolute; top: 135%; right: -31%; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: 0 0 8px rgba(255,255,255,.52); content: ""; }
.bubble-index { position: absolute; top: 18%; right: 20%; color: #7ca5b4; font-family: "DM Sans", sans-serif; font-size: .52rem; font-weight: 700; }
.nav-bubble svg { width: 29px; height: 29px; margin-bottom: 9px; filter: drop-shadow(0 1px 5px rgba(255,255,255,.82)); }
.nav-bubble b { color: #23586c; font-family: "Noto Sans JP", sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.45; text-shadow: 0 1px 8px rgba(255,255,255,.94); }
.bubble-talk { top: 12%; right: 24%; width: 180px; height: 180px; }
.bubble-content { top: 37%; right: 6%; width: 160px; height: 160px; animation-delay: -1.6s; }
.bubble-course { right: 24%; bottom: 14%; width: 172px; height: 172px; animation-delay: -3.2s; }
.bubble-community { right: 4%; bottom: 5%; width: 158px; height: 158px; animation-delay: -4.8s; }
@keyframes bubbleDrift { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

.ambient-bubbles i { position: absolute; border: 1px solid rgba(255,255,255,.67); border-radius: 50%; background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.76), rgba(202,239,247,.13) 62%, rgba(53,138,164,.09)); box-shadow: inset -8px -9px 18px rgba(61,145,169,.1), inset 6px 6px 12px rgba(255,255,255,.7); pointer-events: none; animation: ambientFloat 9s infinite ease-in-out; }
.ambient-one { top: 11%; left: 46%; width: 39px; height: 39px; }
.ambient-two { top: 34%; left: 58%; width: 26px; height: 26px; animation-delay: -3s !important; }
.ambient-three { left: 9%; bottom: 13%; width: 58px; height: 58px; animation-delay: -6s !important; }
.ambient-four { top: 72%; left: 49%; width: 21px; height: 21px; animation-delay: -1.5s !important; }
.ambient-five { top: 10%; right: 7%; width: 54px; height: 54px; animation-delay: -4.5s !important; }
@keyframes ambientFloat { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-28px) translateX(8px); } }

.inside-sidebar { position: fixed; z-index: 36; top: 0; bottom: 0; left: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; width: 310px; height: 100dvh; overflow: hidden; border-right: 1px solid rgba(78,145,168,.2); background: linear-gradient(180deg, rgba(237,249,253,.98), rgba(218,240,248,.98)); box-shadow: 16px 0 50px rgba(34,92,116,.16); transform: translateX(-105%); transition: transform 360ms cubic-bezier(.2,.85,.2,1); }
body.has-panel .inside-sidebar { transform: translateX(0); }
.inside-brand { display: grid; grid-template-columns: 46px minmax(0,1fr) 38px; align-items: center; gap: 10px; min-height: 78px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.inside-brand > img { width: 44px; height: 44px; object-fit: contain; }
.inside-brand > div { min-width: 0; }
.inside-brand p { margin: 0 0 2px; color: #7295a4; font-family: "DM Sans", sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .13em; }
.inside-brand h2 { margin: 0; overflow: hidden; color: var(--ink); font-family: "DM Sans", sans-serif; font-size: .96rem; letter-spacing: -.03em; white-space: nowrap; text-overflow: ellipsis; }
.inside-brand > button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #648a99; background: rgba(255,255,255,.55); }
.inside-primary { display: grid; gap: 4px; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.inside-main-button { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 7px 10px; border-radius: 14px; color: #52788a; background: transparent; text-align: left; }
.inside-main-button > svg { width: 21px; height: 21px; justify-self: center; }
.inside-main-button > span { display: grid; min-width: 0; }
.inside-main-button b { font-size: .78rem; }
.inside-main-button small { color: #86a1ad; font-size: .6rem; }
.inside-main-button:hover { color: #2c687f; background: rgba(255,255,255,.58); }
.inside-main-button.is-active { color: white; background: linear-gradient(135deg, #6db7c8, #3d8da8); box-shadow: 0 10px 25px rgba(42,119,145,.2); }
.inside-main-button.is-active small { color: rgba(255,255,255,.72); }
.inside-context { min-height: 0; overflow-y: auto; padding: 15px 10px 24px; }
.inside-context-panel { display: none; }
.inside-context-panel.is-active { display: block; animation: contextIn 240ms ease both; }
@keyframes contextIn { from { opacity: 0; transform: translateX(-5px); } }
.inside-context-title { margin: 0 8px 9px; color: #7898a5; font-size: .64rem; font-weight: 700; letter-spacing: .04em; }
.inside-group-label { margin: 15px 9px 5px; color: #7c9aa7; font-family: "DM Sans", "Noto Sans JP", sans-serif; font-size: .57rem; font-weight: 700; letter-spacing: .06em; }
.inside-context-title + .inside-group-label { margin-top: 0; }
.inside-link { position: relative; display: grid; grid-template-columns: 24px minmax(0,1fr) 8px; align-items: center; gap: 8px; width: 100%; min-height: 41px; margin: 2px 0; padding: 0 10px; border-radius: 11px; color: #5d7c8a; background: transparent; text-align: left; }
.inside-link > span { color: #8da9b4; font-family: "DM Sans", sans-serif; font-size: .65rem; }
.inside-link > b { overflow: hidden; font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.inside-link > i { width: 6px; height: 6px; border-radius: 50%; background: #eb7d85; }
.inside-link:hover { color: #2d657c; background: rgba(255,255,255,.58); }
.inside-link.is-active { color: #2a6179; background: rgba(255,255,255,.9); box-shadow: inset 3px 0 #4c9db6, 0 6px 18px rgba(49,111,136,.08); }
.inside-profile { display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 9px; min-height: 64px; padding: 8px 12px; border-top: 1px solid var(--line); background: rgba(211,236,245,.76); }
.inside-profile > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: white; background: linear-gradient(145deg, #72b8cc, #4e94ae); font-family: "DM Sans", sans-serif; font-size: .62rem; font-weight: 700; }
.inside-profile > div { display: grid; }
.inside-profile b { font-size: .72rem; }.inside-profile small { color: #7895a1; font-size: .6rem; }
.inside-sidebar-scrim { position: fixed; z-index: 35; inset: 0; display: none; background: rgba(28,70,88,.28); opacity: 0; pointer-events: none; transition: opacity 220ms ease; backdrop-filter: blur(2px); }

body.has-panel .home-stage { opacity: .42; filter: blur(4px); transform: scale(.985); }
body.has-panel .water-stage img { filter: saturate(.85) brightness(.93); transform: scale(1.045); }
.panel-scrim { position: fixed; z-index: 20; inset: 0; display: block; background: rgba(61,117,137,.12); opacity: 0; pointer-events: none; transition: opacity 350ms ease; backdrop-filter: blur(2px); }
body.has-panel .panel-scrim { opacity: 1; pointer-events: auto; }

.liquid-panel { position: fixed; z-index: 30; left: 50%; bottom: 18px; display: grid; grid-template-rows: auto auto minmax(0,1fr); width: min(900px, calc(100% - 36px)); height: min(82dvh, 760px); overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 38px 38px 22px 22px; background: rgba(244,252,254,.86); box-shadow: 0 40px 110px rgba(32,94,119,.24), inset 0 1px rgba(255,255,255,.9); opacity: 0; transform: translate(-50%, 115%); pointer-events: none; transition: transform 520ms cubic-bezier(.2,.85,.2,1), opacity 300ms ease; backdrop-filter: blur(28px) saturate(1.1); }
.liquid-panel > *, .panel-header, .content-intro, .content-flow { min-width: 0; max-width: 100%; }
.liquid-panel.is-active { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.panel-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 14px; min-height: 86px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.panel-header > div { min-width: 0; }
.panel-header p, .about-header p { margin: 0 0 3px; color: #6791a1; font-family: "DM Sans", sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .16em; }
.panel-header h2, .about-header h2 { margin: 0; color: var(--ink); font-family: "Shippori Mincho", serif; font-size: 1.35rem; font-weight: 600; }
.panel-back, .panel-close, .about-header button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: #4d7d8f; background: rgba(255,255,255,.62); }
.panel-back svg, .panel-close svg, .about-header button svg { width: 18px; height: 18px; }

.talk-room-orbit { display: none; gap: 10px; padding: 14px 22px 12px; overflow-x: auto; border-bottom: 1px solid rgba(72,139,162,.12); scrollbar-width: none; }
.talk-room-orbit::-webkit-scrollbar { display: none; }
.room-bubble { display: grid; place-items: center; flex: 0 0 auto; width: 78px; height: 78px; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; color: #5e8290; background: radial-gradient(circle at 31% 25%, white, rgba(225,247,250,.72) 48%, rgba(77,157,180,.14)); box-shadow: inset -6px -8px 14px rgba(77,157,180,.1), 0 7px 18px rgba(47,112,137,.08); }
.room-bubble span { color: #83a5b1; font-family: "DM Sans", sans-serif; font-size: .5rem; }
.room-bubble b { font-size: .66rem; }
.room-bubble.is-active { color: white; background: radial-gradient(circle at 30% 24%, #8ed4df, #4ba4ba 60%, #337f99); box-shadow: 0 12px 26px rgba(49,133,157,.25); }
.room-bubble.is-active span { color: rgba(255,255,255,.75); }

.conversation-shell { display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-height: 0; overflow: hidden; }
.conversation-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 24px; }
.conversation-header > div { display: flex; align-items: center; gap: 9px; }
.conversation-header span { color: #7ea5b4; font-family: "DM Sans", sans-serif; font-size: 1.2rem; }
.conversation-header h3 { margin: 0; font-size: .91rem; }
.conversation-header p { margin: 0; color: var(--muted); font-size: .68rem; }
.message-stream { min-width: 0; overflow: auto; padding: 2px 24px 20px; }
.message { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; padding: 12px 0; }
.message-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: white; background: linear-gradient(145deg, #5eb1c3, #367e98); font-family: "DM Sans", sans-serif; font-size: .66rem; font-weight: 700; box-shadow: 0 8px 19px rgba(44,112,138,.16); }
.message.is-member .message-avatar { color: #725b68; background: linear-gradient(145deg, #f4dce5, #ddb3c3); }
.message-body { min-width: 0; }
.message-body header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.message-body header b { color: #345f72; font-size: .77rem; }
.message-body time { color: #91aab3; font-family: "DM Sans", sans-serif; font-size: .57rem; }
.message-body > p { margin: 0; color: #345466; font-size: .78rem; line-height: 1.8; white-space: pre-wrap; }
.message-body figure { width: min(100%, 430px); margin: 11px 0 0; overflow: hidden; border-radius: 19px; }
.message-body figure img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.message-reactions { display: flex; gap: 6px; margin-top: 8px; }
.message-reactions button { padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: #5e8797; background: rgba(255,255,255,.6); font-size: .62rem; }
.message-reactions button.is-active { color: white; background: #68afc0; }
.message-composer { display: grid; grid-template-columns: 36px minmax(0,1fr) 42px; align-items: center; gap: 5px; min-height: 59px; margin: 0 18px 16px; padding: 6px 7px; border: 1px solid rgba(78,147,168,.17); border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: 0 13px 34px rgba(41,101,125,.09); }
.message-composer button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #5f8998; background: rgba(221,243,248,.68); }
.message-composer button:last-child { width: 40px; height: 40px; color: white; background: linear-gradient(145deg, #68bdc7, #2f8099); }
.message-composer input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .75rem; }
.message-composer input::placeholder { color: #91aab4; }

.content-panel { grid-template-rows: auto auto minmax(0,1fr); }
.content-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 25px 12px; }
.content-intro > div { min-width: 0; }
.content-intro h3 { margin: 0 0 4px; color: #2c586a; font-family: "Shippori Mincho", serif; font-size: 1rem; font-weight: 600; }
.content-intro p { margin: 0; color: #597f8f; font-family: "Shippori Mincho", serif; font-size: .82rem; }
.content-intro span { color: #7da0ad; font-family: "DM Sans", sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .12em; }
.content-flow { min-height: 0; margin: 0; padding: 2px 22px 26px; overflow-y: auto; list-style: none; }
.content-flow li { margin: 0; }
.content-flow li > button { display: grid; grid-template-columns: 36px 92px minmax(0,1fr) 42px; align-items: center; gap: 14px; width: 100%; min-height: 99px; padding: 10px 7px; border-bottom: 1px solid var(--line); background: transparent; text-align: left; transition: transform 180ms ease, background 180ms ease; }
.content-flow li > button:hover { transform: translateX(5px); background: rgba(255,255,255,.35); }
.content-number { color: #759dab; font-family: "DM Sans", sans-serif; font-size: .65rem; font-weight: 700; }
.content-flow figure { height: 76px; margin: 0; overflow: hidden; border-radius: 24px 24px 24px 9px; }
.content-flow figure img { width: 100%; height: 100%; object-fit: cover; }
.content-flow li:nth-child(even) figure { border-radius: 24px 9px 24px 24px; }
.content-flow li > button > div { display: grid; min-width: 0; }
.content-flow small { color: #83a2ad; font-family: "DM Sans", sans-serif; font-size: .53rem; font-weight: 700; letter-spacing: .07em; }
.content-flow b { margin: 5px 0 11px; overflow: hidden; color: #2d586a; font-size: .81rem; white-space: nowrap; text-overflow: ellipsis; }
.content-flow i { display: block; height: 3px; overflow: hidden; border-radius: 999px; background: #dcecf1; }
.content-flow em { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7bc8d2, #3f92aa); }
.content-flow li > button > svg { justify-self: center; width: 21px; height: 21px; color: #5c94a6; }
.content-flow li.is-opened > button { background: rgba(220,247,248,.65); }

.about-sidebar { position: fixed; z-index: 32; top: 0; right: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr); width: min(510px, 100%); height: 100dvh; border-left: 1px solid rgba(255,255,255,.8); background: rgba(244,252,253,.9); box-shadow: -32px 0 100px rgba(33,93,117,.21); transform: translateX(105%); pointer-events: none; transition: transform 540ms cubic-bezier(.2,.85,.2,1); backdrop-filter: blur(30px) saturate(1.08); }
.about-sidebar.is-active { transform: translateX(0); pointer-events: auto; }
.about-header { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 14px; min-height: 86px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.about-header > div { min-width: 0; }
.about-nav { display: flex; gap: 5px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid rgba(68,135,158,.13); scrollbar-width: none; }
.about-nav::-webkit-scrollbar { display: none; }
.about-nav button { flex: 1 0 auto; min-height: 35px; padding: 0 13px; border-radius: 999px; color: #5d8392; background: rgba(255,255,255,.48); font-size: .64rem; font-weight: 600; }
.about-nav button:hover { color: white; background: #67adbd; }
.about-scroll { min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.about-hero { position: relative; min-height: 530px; padding: 290px 30px 52px; overflow: hidden; }
.about-hero > img { position: absolute; inset: 0 0 auto; width: 100%; height: 260px; object-fit: cover; }
.about-hero::after { position: absolute; top: 190px; left: 0; width: 100%; height: 110px; background: linear-gradient(transparent, rgba(244,252,253,.96)); content: ""; }
.about-hero p, .about-copy > p:first-child, .navigator-card div > p, .community-card div > p { margin: 0 0 10px; color: #65a0b2; font-family: "DM Sans", sans-serif; font-size: .56rem; font-weight: 700; letter-spacing: .17em; }
.about-hero h3, .about-copy h3, .navigator-card h3, .community-card h3 { position: relative; margin: 0 0 18px; color: #204c5f; font-family: "Shippori Mincho", serif; font-size: 2rem; font-weight: 500; line-height: 1.45; }
.about-hero > span, .navigator-card div > span, .community-card div > span { position: relative; color: #507484; font-size: .76rem; line-height: 2; }
.about-copy { padding: 60px 30px; background: linear-gradient(145deg, rgba(218,244,246,.7), rgba(247,253,254,.82)); }
.about-copy > p:not(:first-child) { margin: 0; color: #4f7584; font-size: .78rem; line-height: 2; }
.about-copy ol { margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.about-copy li { display: grid; grid-template-columns: 30px 78px 1fr; align-items: center; gap: 8px; min-height: 62px; border-bottom: 1px solid var(--line); }
.about-copy li span { color: #74a0af; font-family: "DM Sans", sans-serif; font-size: .56rem; }
.about-copy li b { color: #356173; font-size: .72rem; }
.about-copy li small { color: #6e909c; font-size: .65rem; }
.navigator-card { display: grid; grid-template-columns: 44% 56%; align-items: stretch; min-height: 430px; }
.navigator-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.navigator-card > div { align-self: center; padding: 35px 26px; }
.navigator-card h3 { font-size: 1.42rem; }
.community-card { position: relative; min-height: 590px; overflow: hidden; color: white; background: #327a8f; }
.community-card > img { width: 100%; height: 320px; object-fit: cover; }
.community-card > div { padding: 39px 30px 55px; }
.community-card div > p, .community-card h3, .community-card div > span { color: white; }
.community-card button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 26px; padding: 0 17px; border-radius: 999px; color: #2e7186; background: white; font-size: .72rem; font-weight: 700; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; max-width: calc(100vw - 30px); padding: 10px 16px; border-radius: 999px; color: white; background: rgba(35,94,116,.91); font-size: .7rem; opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; box-shadow: 0 14px 42px rgba(31,87,108,.22); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 721px) {
  .liquid-panel { top: 0; right: 0; bottom: 0; left: 310px; width: calc(100% - 310px); height: 100dvh; border: 0; border-radius: 0; transform: translateY(105%); }
  .liquid-panel.is-active { transform: translateY(0); }
  .about-sidebar { width: calc(100% - 310px); }
  .panel-back, .about-header > .panel-back { visibility: hidden; pointer-events: none; }
}

@media (max-width: 720px) {
  .water-stage img { object-position: center; }
  .site-header { min-height: 68px; padding: 8px 12px; }
  .brand img { width: 40px; height: 40px; }
  .brand b { font-size: .84rem; }
  .brand small { font-size: .42rem; }
  .prototype-number { width: 43px; height: 43px; font-size: .54rem; }
  .tuning-touch { top: 54%; left: 49%; width: 54px; height: 54px; }
  .tuning-touch::before { inset: -10px; }.tuning-touch::after { inset: -21px; }
  .nav-bubble { padding: 9px; backdrop-filter: blur(2px) saturate(1.08); }
  .nav-bubble svg { width: 25px; height: 25px; margin-bottom: 7px; }
  .nav-bubble b { font-size: .9rem; line-height: 1.4; }
  .bubble-index { font-size: .45rem; }
  .bubble-talk { top: 16.5%; right: auto; left: 27%; width: 112px; height: 112px; }
  .bubble-content { top: 33%; right: auto; left: 42%; width: 106px; height: 106px; }
  .bubble-course { top: 49.5%; right: auto; bottom: auto; left: 55%; width: 114px; height: 114px; }
  .bubble-community { top: 69%; right: 3%; bottom: auto; left: auto; width: 108px; height: 108px; }
  .bubble-course b { font-size: .78rem; }
  .bubble-community b { font-size: .69rem; }
  .ambient-one { top: 29%; left: 7%; width: 31px; height: 31px; }
  .ambient-two { top: 34%; left: 62%; width: 19px; height: 19px; }
  .ambient-three { left: 2%; bottom: 25%; width: 40px; height: 40px; }
  .ambient-four { top: 69%; left: 57%; width: 17px; height: 17px; }
  .ambient-five { display: none; }

  .inside-sidebar { width: min(88vw, 330px); transform: translateX(-105%); }
  body.has-panel .inside-sidebar { transform: translateX(-105%); }
  body.inside-nav-open .inside-sidebar { transform: translateX(0); }
  .inside-sidebar-scrim { display: block; }
  body.inside-nav-open .inside-sidebar-scrim { opacity: 1; pointer-events: auto; }
  .inside-brand { padding-top: max(10px, env(safe-area-inset-top)); }

  .liquid-panel { inset: 0; left: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; transform: translateY(105%); }
  .liquid-panel.is-active { transform: translateY(0); }
  .panel-header { grid-template-columns: 40px minmax(0,1fr) 40px; width: 100%; min-height: 72px; padding: max(8px, env(safe-area-inset-top)) 10px 7px; }
  .panel-header h2 { overflow: hidden; font-size: 1.06rem; white-space: nowrap; text-overflow: ellipsis; }
  .panel-back, .panel-close { width: 38px; height: 38px; }
  .talk-room-orbit { gap: 8px; padding: 10px 12px; }
  .room-bubble { width: 67px; height: 67px; }
  .conversation-header { display: block; min-height: 56px; padding: 9px 15px; }
  .conversation-header p { margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .message-stream { padding: 0 14px 14px; }
  .message { grid-template-columns: 36px minmax(0,1fr); gap: 9px; padding: 10px 0; }
  .message-avatar { width: 34px; height: 34px; }
  .message-body > p { overflow-wrap: anywhere; font-size: .74rem; }
  .message-body figure { width: 100%; max-width: 100%; border-radius: 16px; }
  .message-composer { min-height: 53px; margin: 0 9px max(8px, env(safe-area-inset-bottom)); padding: 4px 6px; }
  .content-intro { align-items: flex-end; padding: 14px 15px 9px; }
  .content-intro h3 { font-size: .86rem; }
  .content-intro p { overflow: hidden; font-size: .65rem; white-space: nowrap; text-overflow: ellipsis; }
  .content-flow { padding: 0 12px 24px; }
  .content-flow li > button { grid-template-columns: 27px 76px minmax(0,1fr) 29px; gap: 8px; min-height: 91px; padding: 8px 2px; }
  .content-flow figure { height: 68px; border-radius: 19px 19px 19px 8px; }
  .content-flow b { font-size: .73rem; white-space: normal; line-height: 1.45; }
  .content-flow li > button > svg { width: 18px; height: 18px; }
  .about-sidebar { width: 100%; border: 0; }
  .about-header { grid-template-columns: 40px minmax(0,1fr) 40px; min-height: 72px; padding: max(8px, env(safe-area-inset-top)) 10px 7px; }
  .about-header h2 { overflow: hidden; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; }
  .about-nav { padding: 8px 10px; }
  .about-hero { min-height: 500px; padding: 277px 22px 45px; }
  .about-hero > img { height: 250px; }
  .about-hero h3, .about-copy h3 { font-size: 1.8rem; }
  .about-copy { padding: 48px 22px; }
  .navigator-card { grid-template-columns: 1fr; }
  .navigator-card > img { height: 420px; }
  .navigator-card > div { padding: 35px 22px 48px; }
  .community-card > img { height: 270px; }
  .community-card > div { padding: 34px 22px 50px; }
}

@media (max-width: 370px) {
  .bubble-talk { width: 104px; height: 104px; }
  .bubble-content { width: 98px; height: 98px; }
  .bubble-course { width: 106px; height: 106px; }
  .bubble-community { width: 102px; height: 102px; }
  .nav-bubble b { font-size: .82rem; }
  .bubble-course b { font-size: .76rem; }
  .bubble-community b { font-size: .68rem; }
  .content-flow li > button { grid-template-columns: 24px 70px minmax(0,1fr) 25px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}