/* Scene composition, deliberately separate from the generated drawings.
   Text and forms stay still; only a relevant little object gets to wander. */
.crab-h5 .scene-page { --scene-wash: #e8f2ef; }
.crab-h5 .scene-page .mobile-header { margin-bottom: 16px; border-bottom: 0; padding-bottom: 2px; }
.crab-h5 .scene-immersive > .mobile-scroll { padding-top: 0; }
.crab-h5 .scene-page .mobile-header .back-button { box-shadow: 2px 2px 0 var(--ink); }
.crab-h5 .scene-page .crab-header-dot { width: 7px; height: 7px; background: var(--sun); box-shadow: 4px -5px 0 -1px var(--sand), 5px -5px 0 0 var(--ink); }
.crab-h5 .scene-stage { position: relative; isolation: isolate; margin: 3px 0 25px; }
.crab-h5 .scene-stage h1 { margin: 9px 0 0; color: var(--ink); font: 900 29px/1.34 var(--sans); letter-spacing: -.85px; }
.crab-h5 .scene-stage p { margin: 12px 0 0; color: var(--ink-2); font: 400 13px/1.8 var(--sans); }
.crab-h5 .scene-eyebrow { display: block; color: var(--ink-2); font: 600 10px/1.7 var(--mono); letter-spacing: 1px; }
html[lang=zh] .crab-h5 .scene-eyebrow { font-family: var(--sans); font-weight: 700; letter-spacing: 1.2px; }
.crab-h5 .scene-drawing { display: block; flex: none; width: 62px; }
.crab-h5 .scene-drawing svg, .crab-h5 .scene-crab svg { display: block; width: 100%; height: auto; max-height: 100%; overflow: visible; }
.crab-h5 .scene-crab { display: block; width: 86px; }
.crab-h5 .scene-play { display: block; min-width: 64px; min-height: 52px; padding: 0; border: 0; background: transparent; color: var(--ink); touch-action: manipulation; cursor: pointer; }
.crab-h5 .scene-play .scene-crab { width: 100%; }
.crab-h5 .scene-play:focus-visible { border-radius: 40%; outline: 3px solid #236caf; outline-offset: 2px; }
.crab-h5 .scene-stamp { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font: 600 9px/1.4 var(--mono); letter-spacing: .8px; }
.crab-h5 .scene-stamp .scene-drawing { width: 20px; }
.crab-h5 .scene-strip { display: flex; align-items: center; gap: 11px; min-height: 54px; margin: -1px 0 18px; padding: 8px 0 13px; border-bottom: 1.6px dashed #201c2245; }
.crab-h5 .scene-strip > .scene-drawing { width: 35px; transform: rotate(-7deg); }
.crab-h5 .scene-strip > span:not(.scene-drawing) { min-width: 0; color: var(--ink-2); font: 700 11px/1.7 var(--sans); letter-spacing: .6px; }
.crab-h5 .scene-strip > i { width: 9px; height: 9px; margin-left: auto; border: 1.6px solid var(--ink); border-radius: 50%; background: var(--coral); }
.crab-h5 .scene-calm-strip { margin-bottom: 24px; }

/* Weekends: a compact city schedule with a mascot that roams between plans. */
.crab-h5 .scene-weekend-head { min-height: calc(92px + var(--h5-safe-top)); margin: 0 -18px 12px; padding: calc(6px + var(--h5-safe-top)) 18px 76px; overflow: clip; border: var(--comic-line); border-width: 0 0 1.6px; background: linear-gradient(110deg,#fff9e9 0 59%,#dcecf9 59% 100%); }
/* Connected flat fields frame one open cream space for the two crabs. */
.crab-h5 .scene-weekend-head::before { content: ''; position: absolute; z-index: 0; inset: 0; background: url('assets/activity-color-field.svg?v=20261014-1') center / 100% 100% no-repeat; pointer-events: none; }
.crab-h5 .scene-weekend-track { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: -1px; height: 66px; }
.crab-h5 .scene-weekend-route { position: absolute; left: 0; right: 0; bottom: 12px; height: 21px; border-bottom: 2px solid var(--ink); border-radius: 0 0 48% 46%; transform: rotate(-.6deg); }
.crab-h5 .scene-weekend-route::before { content: ''; position: absolute; left: 4px; right: 7px; bottom: -8px; border-bottom: 1.5px dashed #201c2250; }
.crab-h5 .scene-weekend-route i { position: absolute; bottom: -5px; width: 9px; height: 9px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--surface); }
.crab-h5 .scene-weekend-route i:nth-child(1) { left: 8%; }
.crab-h5 .scene-weekend-route i:nth-child(2) { left: 47%; background: var(--sun); }
.crab-h5 .scene-weekend-route i:nth-child(3) { right: 7%; background: var(--blue); }
.crab-h5 .scene-weekend-crab { --crab-x: 0px; position: absolute; z-index: 5; left: 0; bottom: 1px; width: 66px; min-width: 58px; min-height: 49px; translate: var(--crab-x) 0; will-change: translate; }
.crab-h5 .scene-weekend-crab .scene-crab { transform-origin: 50% 82%; }
.crab-h5 .scene-weekend-friend { --crab-x: 0px; position: absolute; z-index: 5; left: 0; bottom: 1px; display: block; width: 64px; translate: var(--crab-x) 0; will-change: translate; }
.crab-h5 .scene-weekend-friend .scene-crab { width: 100%; transform-origin: 50% 82%; }
.crab-h5 .scene-weekend-friend [fill="#FF6B4E"] { fill: #ff8790; }
.crab-h5 .scene-weekend-friend [stroke="#FF6B4E"] { stroke: #ff8790; }
.crab-h5 .scene-weekend-friend [fill="#FFB3A6"] { fill: #ffd0d4; }
.crab-h5 .scene-weekend-crab .claw, .crab-h5 .scene-weekend-friend .claw { transform-box: view-box; }
.crab-h5 .scene-weekend-crab .claw.l, .crab-h5 .scene-weekend-friend .claw.l { transform-origin: 49px 87px; }
.crab-h5 .scene-weekend-crab .claw.r, .crab-h5 .scene-weekend-friend .claw.r { transform-origin: 151px 84px; }
.crab-h5 .scene-weekend-crab .crab-feet, .crab-h5 .scene-weekend-friend .crab-feet { transform-box: view-box; transform-origin: 100px 129px; }
.crab-h5 .scene-weekend-crab .pupil, .crab-h5 .scene-weekend-friend .pupil { transform-box: view-box; transform-origin: center; transition: transform .45s ease-in-out; }.crab-h5 .scene-weekend-dialogue { --dialogue-tail-x: 82px; position: absolute; z-index: 8; left: 0; bottom: 49px; width: 164px; min-height: 31px; padding: 6px 9px; border: 1.4px solid var(--ink); border-radius: 12px 12px 5px 12px; background: var(--surface); box-shadow: 2px 2px 0 #201c2225; opacity: 0; translate: 0 5px; transition: opacity .35s ease,translate .35s ease; pointer-events: none; }
.crab-h5 .scene-weekend-track.has-dialogue .scene-weekend-dialogue { opacity: 1; translate: 0 0; }
.crab-h5 .scene-weekend-dialogue::after { content: ''; position: absolute; left: calc(var(--dialogue-tail-x) - 5px); bottom: -6px; width: 9px; height: 9px; border-right: 1.4px solid var(--ink); border-bottom: 1.4px solid var(--ink); background: inherit; transform: rotate(45deg); }
.crab-h5 .scene-weekend-dialogue b { display: -webkit-box; overflow: hidden; color: var(--ink); font: 700 8.5px/1.35 var(--sans); letter-spacing: 0; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.crab-h5 .scene-weekend .activity-tabs { margin-top: 7px; margin-bottom: 14px; }
.crab-h5 .scene-weekend .event-card { position: relative; border: 1px solid var(--line); border-radius: 13px 13px 7px 7px; background: var(--surface); box-shadow: 0 3px 0 #201c2220; }
.crab-h5 .scene-weekend .event-card-footer { position: relative; margin: 16px 0 0; padding: 15px 18px 18px; border-top: 1.6px dashed #201c2260; }
.crab-h5 .scene-weekend .event-card-footer::before, .crab-h5 .scene-weekend .event-card-footer::after { content: ''; position: absolute; top: -7px; width: 12px; height: 12px; border: 1px solid var(--line); border-radius: 50%; background: var(--sand); }
.crab-h5 .scene-weekend .event-card-footer::before { left: -7px; }
.crab-h5 .scene-weekend .event-card-footer::after { right: -7px; }
.crab-h5 .scene-weekend .date-tile { border-radius: 5px; background: var(--surface); padding-top: 13px; }
.crab-h5 .scene-weekend .date-tile::before { content: ''; position: absolute; left: -1.6px; right: -1.6px; top: -1.6px; height: 8px; border: var(--comic-line); border-radius: 5px 5px 0 0; background: var(--coral); }

/* Planner: a personal calendar of joined plans and reminders you add yourself. */
.crab-h5 .scene-planner-head { min-height: 148px; margin: -3px -18px 18px; padding: 14px 18px 22px; overflow: clip; border: var(--comic-line); border-width: 1.6px 0; background: linear-gradient(158deg,#dcecf9 0 40%,#fff9e9 40% 100%); }
.crab-h5 .scene-planner-head > div:first-child { position: relative; z-index: 2; max-width: 68%; }
.crab-h5 .scene-planner-head h1 { max-width: 230px; font-size: 26px; line-height: 1.22; }
.crab-h5 .scene-planner-head p { max-width: 228px; margin-top: 8px; font-size: 12px; line-height: 1.6; }
.crab-h5 .scene-planner-objects { position: absolute; right: 4px; bottom: 0; width: 126px; height: 118px; pointer-events: none; }
.crab-h5 .scene-planner-objects .scene-drawing { position: absolute; right: 42px; top: 8px; width: 58px; transform: rotate(-9deg); }
.crab-h5 .scene-planner-crab { position: absolute; right: -4px; bottom: -2px; width: 74px; transform: rotate(6deg); }
.crab-h5 .schedule-empty { display: grid; gap: 8px; justify-items: start; margin: 6px 0 22px; padding: 18px 16px; border: 1.5px dashed #201c2260; border-radius: 14px 18px 12px 16px; background: #fffefbd9; }
.crab-h5 .schedule-empty strong { font-size: 17px; font-weight: 900; line-height: 1.4; }
.crab-h5 .schedule-empty p { color: var(--ink-2); font-size: 13px; line-height: 1.7; }
.crab-h5 .schedule-empty .primary-button { margin-top: 6px; min-height: 44px; }
.crab-h5 .schedule-group { margin: 0 0 18px; }
.crab-h5 .schedule-day { margin: 0 0 10px; color: var(--ink-2); font: 700 11px/1.4 var(--mono); letter-spacing: .8px; }
html[lang=zh] .crab-h5 .schedule-day { font-family: var(--sans); letter-spacing: 1px; }
.crab-h5 .schedule-list { display: grid; gap: 11px; }
.crab-h5 .schedule-ticket { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 11px; align-items: center; min-height: 88px; padding: 11px 10px 11px 9px; border: var(--comic-line); border-radius: 8px 16px 8px 14px; background: var(--surface); box-shadow: 2px 3px 0 #201c2220; text-align: left; color: inherit; cursor: pointer; touch-action: manipulation; }
.crab-h5 .schedule-ticket:not([data-nav]) { cursor: default; }
.crab-h5 .schedule-ticket.is-past { opacity: .78; }
.crab-h5 .schedule-ticket:focus-visible { outline: 3px solid #236caf; outline-offset: 2px; }
.crab-h5 .schedule-open { display: grid; grid-column: 1 / -1; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 11px; width: 100%; min-width: 0; min-height: 64px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.crab-h5 .schedule-open:focus-visible { outline: 3px solid #236caf; outline-offset: 2px; }
.crab-h5 .social-block-control { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 8px 12px; border: 0; background: transparent; color: #8f2e22; font: 700 14px/1.5 var(--sans); text-align: left; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.crab-h5 .social-block-control:focus-visible { outline: 3px solid #236caf; outline-offset: 2px; }
.crab-h5 .social-member-actions .social-block-control { margin: 8px 0 0 -12px; }
.crab-h5 .social-block-note { margin: 8px 0; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.crab-h5 .schedule-day-tile { position: relative; display: grid; place-items: center; width: 48px; min-height: 54px; padding-top: 12px; border: var(--comic-line); border-radius: 5px; background: var(--surface); }
.crab-h5 .schedule-day-tile::before { content: ''; position: absolute; left: -1.6px; right: -1.6px; top: -1.6px; height: 8px; border: var(--comic-line); border-radius: 5px 5px 0 0; background: var(--coral); }
.crab-h5 .schedule-day-tile b { font: 900 20px/1 var(--sans); }
.crab-h5 .schedule-day-tile small { color: var(--ink-2); font: 700 8px/1 var(--mono); letter-spacing: .6px; }
.crab-h5 .schedule-ticket-copy { min-width: 0; }
.crab-h5 .schedule-stamp { display: inline-block; margin-bottom: 4px; padding: 2px 7px; border: 1.3px solid var(--ink); border-radius: 999px; background: var(--sun); font: 700 10px/1.4 var(--sans); }
.crab-h5 .schedule-ticket:is([data-nav], :has(.schedule-open)) .schedule-stamp { background: var(--blue); }
.crab-h5 .schedule-ticket-copy h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.crab-h5 .schedule-ticket-copy p { margin: 5px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.crab-h5 .schedule-remove { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--ink-2); font: 700 12px/1 var(--sans); cursor: pointer; }
.crab-h5 .schedule-remove:focus-visible { outline: 3px solid #236caf; outline-offset: 1px; border-radius: 8px; }
.crab-h5 .schedule-join-note { display: grid; gap: 10px; margin: 14px 0 4px; }
.crab-h5 .schedule-join-note .primary-button { width: 100%; min-height: 46px; }
.crab-h5 .schedule-compose { margin: 8px 0 28px; padding: 16px 15px 18px; border: 1.5px dashed #201c2265; border-radius: 13px 18px 12px 16px; background: #fffefbd9; }
.crab-h5 .schedule-compose h2 { margin: 0 0 4px; font-size: 16px; font-weight: 900; }
.crab-h5 .schedule-compose .form-label { margin-top: 12px; }
.crab-h5 .schedule-compose .primary-button { width: 100%; min-height: 46px; margin-top: 16px; }

/* Messages: a compact water-and-sand scene around the bottle pickup. */
.crab-h5 .message-center { padding: 0 0 28px; }
.crab-h5 .message-drift-scene { --dig-duration: 1.8s; --fetch-duration: var(--dig-duration); position: relative; margin: 0 -18px 8px; padding: calc(6px + var(--h5-safe-top)) 22px 0; overflow: clip; background: #D3EAF0; isolation: isolate; }
.crab-h5 .message-delivery-art { position: relative; z-index: 2; aspect-ratio: 390 / 126; margin: 0 -22px; }
.crab-h5 .scene-bottle svg { display: block; width: 100%; height: auto; overflow: visible; }
.crab-h5 .message-fetch-scene { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.crab-h5 .message-fetch-scene > svg { display: block; width: 100%; height: auto; overflow: visible; }
.crab-h5 .message-fetch-scene:focus-visible { outline: 2px solid #236caf; outline-offset: -4px; border-radius: 12px; }
.crab-h5 .message-fetch-body .lid { display: none; }
.crab-h5 .message-fetch-trip { transform: translate(236px,43px); }
.crab-h5 .message-fetch-cargo > g { transform: rotate(-18deg); transform-origin: 54px 20px; }
.crab-h5 .message-drift-scene.is-delivered .message-fetch-cargo > g { animation: message-carried-bottle-sway 6s ease-in-out infinite paused; }
.crab-h5 .message-water-bottle { opacity: 0; }
.crab-h5 .message-dune-door,.crab-h5 .message-dig-sand { opacity: 0; }
/* crab-sea.js deforms these paths; the shoreline and reading surface stay fixed. */
.crab-h5 .message-sea-water,.crab-h5 .message-sea-wet-sand,.crab-h5 .message-sea-foam { pointer-events: none; }
.crab-h5 .message-water-bottle > .message-bottle-glass { transform-origin: 28px 20px; }
.crab-h5 .message-bottle-wake,.crab-h5 .message-bottle-waterline { opacity: 0; transform-origin: 27px 32px; }
.crab-h5 .message-fetch-body .claw.l { transform-box: view-box; transform-origin: 49px 87px; }
.crab-h5 .message-fetch-body .claw.r { transform-box: view-box; transform-origin: 151px 84px; }
.crab-h5 .message-fetch-body .crab-feet { transform-box: view-box; transform-origin: 100px 129px; }
.crab-h5 .message-drift-callout { position: absolute; z-index: 7; right: 24%; bottom: 64%; max-width: 45%; padding: 7px 11px; border: 1.5px solid var(--ink); border-radius: 13px 13px 4px 13px; background: var(--surface); font-size: 12px; line-height: 1.45; font-weight: 700; opacity: 0; transform: translateY(6px) rotate(-3deg); pointer-events: none; }
.crab-h5 .message-drift-callout::after { content: ''; position: absolute; right: 8px; bottom: -5px; width: 8px; height: 8px; border-right: 1.4px solid var(--ink); border-bottom: 1.4px solid var(--ink); background: #fffefb; transform: rotate(45deg); }
.crab-h5 .message-drift-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crab-h5 .message-drift-scene.is-delivered .message-drift-callout { animation: message-callout-in .42s cubic-bezier(.2,.9,.25,1.16) both; }
.crab-h5 .message-toolbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 8px; }
.crab-h5 .message-toolbar > div { display: grid; gap: 3px; }
.crab-h5 .message-toolbar strong { min-width: 0; font-size: 18px; line-height: 1.2; }
.crab-h5 .message-toolbar > div span { color: var(--ink-2); font-size: 13px; }
.crab-h5 .message-read-all, .crab-h5 .message-read-done { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px; border: 1.5px solid var(--ink); border-radius: 4px 15px 15px 15px; font-size: 13px; font-weight: 700; cursor: pointer; }
.crab-h5 .message-read-all { background: var(--sun); box-shadow: 2px 2px 0 var(--ink); }
.crab-h5 .message-read-all:active { transform: translate(2px,2px); box-shadow: none; }
.crab-h5 .message-read-done { border-style: dashed; color: var(--ink-2); background: #fffaf0; }
.crab-h5 .message-read-done:active { transform: translate(1px,1px); }
.crab-h5 .message-overview-toolbar { justify-content: flex-end; margin: 0 0 12px; padding: 0; }
.crab-h5 .message-overview-toolbar > button { min-height: 44px; max-width: 100%; padding: 0 11px; border: 1.4px solid var(--ink); border-radius: 13px; background: #fffaf0; box-shadow: none; font-size: 13px; line-height: 1.4; text-align: center; }
.crab-h5 .message-overview-toolbar .message-read-all { color: var(--ink); background: var(--sun); box-shadow: 2px 2px 0 var(--ink); }
.crab-h5 .message-overview-toolbar .message-read-done { border-color: #201c2245; color: var(--ink-2); }
.crab-h5 .message-overview-toolbar > button:active { transform: translate(1px,1px); box-shadow: none; }
.crab-h5 .message-overview-toolbar > button:focus-visible { outline: 3px solid #236caf; outline-offset: 2px; }
.crab-h5 .message-thread { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 72px; padding: 13px 12px; overflow: hidden; text-align: left; border: var(--comic-line); border-radius: 4px 18px 4px 18px; background: var(--surface); box-shadow: 3px 4px 0 #201c2222; cursor: pointer; animation: message-letter-arrive .42s cubic-bezier(.2,.8,.25,1) both; animation-delay: calc(var(--message-index,0) * 55ms); }
.crab-h5 .message-thread:nth-child(even) { background: #fff9ed; }
.crab-h5 .message-thread:active { transform: translate(2px,2px); box-shadow: none; }
.crab-h5 .message-thread.is-unread { background: #fff4d0; box-shadow: 3px 4px 0 var(--ink); }
.crab-h5 .message-thread .message-thread-art { width: 42px; }
.crab-h5 .message-thread-face { display: block; width: 44px; height: 44px; overflow: hidden; border: 1px solid #201c2238; border-radius: 50%; background: #fff9ef; }
.crab-h5 .message-peer-avatar { display: block; width: 100%; height: 100%; object-fit: cover; }
.crab-h5 .message-thread-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.crab-h5 .message-thread .message-thread-default-icon { display: grid; place-items: center; height: 42px; border-radius: 50%; background: var(--blue-soft); color: var(--ink); }
.crab-h5 .message-thread-default-icon .ui-icon { width: 28px; height: 28px; }
.crab-h5 .message-thread-copy { display: grid; min-width: 0; gap: 4px; }
.crab-h5 .message-thread-copy strong { font-size: 16px; line-height: 1.3; }
.crab-h5 .message-thread-preview { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.crab-h5 .message-thread-meta { display: grid; justify-items: end; align-content: start; gap: 8px; padding-top: 2px; }
.crab-h5 .message-thread-meta time { color: var(--ink-2); font: 700 12px/1 var(--mono); white-space: nowrap; }
.crab-h5 .message-thread-meta .is-unread-count { display: grid; min-width: 18px; height: 18px; padding: 0 5px; place-items: center; border: 1.3px solid var(--ink); border-radius: 50%; background: var(--coral); font: 700 10px/1 var(--mono); }
/* Quiet, continuous frames for the inbox categories. Conversation rows keep their own treatment. */
.crab-h5 .message-center:not(.is-folder) .message-thread { border: 1.2px solid #201c2266; border-radius: 18px; background: var(--surface); box-shadow: none; }
.crab-h5 .message-center:not(.is-folder) .message-thread.is-unread { border-color: #201c2299; background: #fff7e3; }
.crab-h5 .message-center:not(.is-folder) .message-thread:active { transform: translateY(1px); background: #faf3e7; }
.crab-h5 .message-center:not(.is-folder) .message-thread:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.crab-h5 .message-center:not(.is-folder) .message-thread-default-icon { border-radius: 0; background: transparent; }
.crab-h5 .message-center:not(.is-folder) .message-thread-copy strong { line-height: 1.45; overflow-wrap: anywhere; }
.crab-h5 .message-center:not(.is-folder) .message-thread-preview { -webkit-line-clamp: 1; }
.crab-h5 .message-center.is-folder .message-toolbar { margin: 0 2px 12px; }
.crab-h5 .message-list { display: grid; gap: 13px; }
.crab-h5 .message-letter { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: start; gap: 10px; width: 100%; min-height: 88px; padding: 16px 14px; text-align: left; border: 1.2px solid #201c2266; border-radius: 18px; background: var(--surface); cursor: pointer; }
.crab-h5 .message-letter.is-unread { border-color: #201c2299; background: #fff7e3; }
.crab-h5 .message-letter:active { background: #faf3e7; }
.crab-h5 .message-letter:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.crab-h5 .message-letter-symbol { display: grid; place-items: center; height: 28px; color: var(--ink); }
.crab-h5 .message-letter-symbol .ui-icon { width: 25px; height: 25px; }
.crab-h5 .message-letter-title { min-width: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.crab-h5 .message-letter-meta { display: grid; justify-items: end; gap: 8px; min-width: 0; padding-top: 4px; }
.crab-h5 .message-letter-meta time { color: var(--ink-2); font: 600 12px/1.5 var(--sans); white-space: nowrap; }
.crab-h5 .message-letter-unread { display: block; width: 8px; height: 8px; border-radius: 50%; background: #C34B39; }
.crab-h5 .message-letter-preview,.crab-h5 .message-letter-full { grid-column: 2 / -1; color: var(--ink-2); font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.crab-h5 .message-letter:not(.is-open):not([data-message-destination]) .message-letter-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.crab-h5 .message-letter.is-open .message-letter-preview { display: none; }
.crab-h5 .message-letter-action { grid-column: 2 / -1; display: flex; align-items: center; gap: 7px; margin-top: 3px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.crab-h5 .message-letter-action[hidden] { display: none; }
.crab-h5 .message-letter-action > span { font-size: 16px; line-height: 1; }
.crab-h5 .message-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 18px; border: 1.2px solid #201c2240; border-radius: 18px; text-align: center; background: var(--surface); }
.crab-h5 .message-empty strong { font-size: 16px; line-height: 1.5; }
.crab-h5 .message-empty p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.crab-h5 .message-center.is-folder .message-inbox-content { padding-top: 10px; }
html[lang=zh] .crab-h5 .message-thread-meta time { font-family: var(--sans); }
.crab-h5 .crab-nav button[data-obj=inbox] { z-index: 3; }
.crab-h5 .crab-nav button[data-obj=inbox] .message-sand-hole-nav { width: 48px; height: 35px; overflow: visible; opacity: 1; stroke: var(--ink); transform: translateY(1px); transform-origin: 50% 80%; }
.crab-h5 .crab-nav button[data-obj=inbox].taken .message-sand-hole-nav { opacity: 1; transform: translateY(0) scale(1.04); }
.crab-h5 .crab-nav button[data-obj=inbox].on .message-sand-hole-nav { width: 50px; height: 37px; }
.crab-h5 .message-sand-hole-nav .sand-dune-opening, .crab-h5 .message-sand-hole-nav .sand-dune-grains { opacity: 0; transform-box: fill-box; transform-origin: center bottom; }
.crab-h5 .crab-nav button[data-obj=inbox].hole-digging .message-sand-hole-nav { animation: nav-hole-dig .21s ease-in-out 2 both; }
.crab-h5 .crab-nav button[data-obj=inbox].hole-digging .sand-dune-opening { animation: nav-dune-open .42s ease both; }
.crab-h5 .crab-nav button[data-obj=inbox].hole-digging .sand-dune-grains-left { animation: nav-dune-sand-left .21s ease-out 2 both; }
.crab-h5 .crab-nav button[data-obj=inbox].hole-digging .sand-dune-grains-right { animation: nav-dune-sand-right .17s ease-out .08s 2 both; }
.crab-h5 .crab-nav button[data-obj=inbox].hole-receiving .message-sand-hole-nav { animation: nav-hole-receive .24s ease both; }
.crab-h5 .crab-nav button[data-obj=inbox].hole-receiving .sand-dune-opening { animation: nav-dune-close .24s ease both; }
.crab-h5 .navcrab.digging-hole { z-index: 4; }
.crab-h5 .navcrab.digging-hole .nav-body { animation: nav-crab-dig-pose .21s ease-in-out 2 both; }
.crab-h5 .navcrab.digging-hole .nav-legs { animation: nav-crab-dig .105s ease-in-out 4 alternate; }
.crab-h5 .navcrab.digging-hole .nav-arm-left { animation: nav-claw-scrape-left .21s ease-in-out 2 both; }
.crab-h5 .navcrab.digging-hole .nav-arm-right { animation: nav-claw-scrape-right .21s ease-in-out 2 both; }
.crab-h5 .navcrab.entering-hole { z-index: 2; clip-path: var(--nav-burrow-clip, inset(-100% -100% 28%)); }
.crab-h5 .navcrab.entering-hole .nav-body { transition: none; animation: nav-crab-enter-hole .24s cubic-bezier(.4,.08,.7,.5) both; }
.crab-h5 .navcrab.entering-hole .nav-arm-left { transform: translate(7px,5px) rotate(10deg); }
.crab-h5 .navcrab.entering-hole .nav-arm-right { transform: translate(-7px,5px) rotate(-10deg); }
.crab-h5 .navcrab.in-hole { opacity: 0; }
/* The sandcastle never moves: its door swings open, the crab hops at the doorstep, then steps into the doorway and greets. */
.crab-h5 .crab-nav button[data-obj=me] .crab-home-nav, .crab-h5 .crab-nav button[data-obj=me].taken .crab-home-nav { width: min(54px, 15vw); height: auto; aspect-ratio: 80 / 60; opacity: 1; overflow: visible; transform: translateY(-4px); }
.crab-h5 .crab-home-door { transform-box: fill-box; transform-origin: 0 50%; transition: transform .32s cubic-bezier(.3,.7,.3,1); }
.crab-h5 .crab-nav button.door-open .crab-home-door { transform: scaleX(-.36); }
.crab-h5 .navcrab.settled[data-mode=me] .nav-body { transform: translate(var(--nav-home-x, 0px), var(--nav-home-y, 0px)) scale(var(--nav-home-scale, .5)); }
.crab-h5 .navcrab.settled.home-entering[data-mode=me] .nav-body { transition: none; animation: nav-home-enter .86s cubic-bezier(.4,.1,.3,1) both; }
.crab-h5 .navcrab.home-entering[data-mode=me] .nav-arm-left { animation: nav-home-cheer-left .86s ease-in-out both; }
.crab-h5 .navcrab.home-entering[data-mode=me] .nav-arm-right { animation: nav-home-cheer-right .86s ease-in-out both; }
.crab-h5 .navcrab.settled[data-mode=me] .nav-arm-left { transform: translate(-1px,4px) rotate(-10deg); }
.crab-h5 .navcrab.settled[data-mode=me] .nav-arm-right { transform: translate(1px,-3px) rotate(-6deg); }
/* Greet once from the doorway, then blink and glance around now and then. */
.crab-h5 .navcrab.home-greet[data-mode=me] .nav-wave { transform-origin: 67px 29px; animation: nav-wave 1.1s ease-in-out .08s; }
.crab-h5 .navcrab.at-home[data-mode=me] .nav-eyes { transform-box: view-box; transform-origin: 40px 22px; animation: nav-home-blink 5.2s ease-in-out 1.8s infinite; }
.crab-h5 .navcrab.at-home[data-mode=me] .nav-pupils { animation: nav-home-look 5.2s ease-in-out 1.8s infinite; }
@keyframes nav-home-enter {
  0% { transform: translate(0, 0) scale(1); }
  18% { transform: translate(var(--nav-home-x, 0px), calc(var(--nav-home-y, 0px) - 3px)) scale(calc(var(--nav-home-scale, .5) * 1.12)) rotate(-5deg); }
  32% { transform: translate(var(--nav-home-x, 0px), calc(var(--nav-home-y, 0px) + 4px)) scale(calc(var(--nav-home-scale, .5) * 1.18), calc(var(--nav-home-scale, .5) * 1.06)); }
  46% { transform: translate(var(--nav-home-x, 0px), calc(var(--nav-home-y, 0px) - 3px)) scale(calc(var(--nav-home-scale, .5) * 1.12)) rotate(5deg); }
  60% { transform: translate(var(--nav-home-x, 0px), calc(var(--nav-home-y, 0px) + 4px)) scale(calc(var(--nav-home-scale, .5) * 1.16), calc(var(--nav-home-scale, .5) * 1.08)); }
  80% { transform: translate(var(--nav-home-x, 0px), calc(var(--nav-home-y, 0px) + 1px)) scale(calc(var(--nav-home-scale, .5) * 1.04)) rotate(-3deg); }
  100% { transform: translate(var(--nav-home-x, 0px), var(--nav-home-y, 0px)) scale(var(--nav-home-scale, .5)); }
}
@keyframes nav-home-cheer-left { 0% { transform: none; } 18%, 46% { transform: translate(-3px,-8px) rotate(-24deg); } 32%, 60% { transform: translate(-1px,-2px) rotate(-8deg); } 100% { transform: translate(-1px,4px) rotate(-10deg); } }
@keyframes nav-home-cheer-right { 0% { transform: none; } 18%, 46% { transform: translate(3px,-8px) rotate(24deg); } 32%, 60% { transform: translate(1px,-2px) rotate(8deg); } 100% { transform: translate(1px,-3px) rotate(-6deg); } }
@keyframes nav-home-blink { 0%, 90%, 100% { transform: none; } 94% { transform: scaleY(.1); } }
@keyframes nav-home-look { 0%, 16%, 100% { transform: translateX(0); } 24%, 44% { transform: translateX(-2.5px); } 54%, 74% { transform: translateX(2.5px); } 84% { transform: translateX(0); } }
.crab-h5 .navcrab.arrived[data-mode=me] .nav-wave { animation: none; }
.crab-h5 .navcrab .nav-prop[data-obj=me] { display: none; }

/* The whole bar is one stretch of beach: a tide line along the top, the objects left on the sand. */
.crab-h5 .nav.crab-nav { border-top: 0; background: linear-gradient(transparent 10px, var(--sand) 10px); }
.crab-h5 .crab-nav-tide { position: absolute; left: 0; top: -4px; z-index: -1; width: 100%; height: 16px; overflow: visible; pointer-events: none; }
.crab-h5 .crab-nav::after { content: ''; position: absolute; left: 0; right: 0; top: 12px; bottom: 0; z-index: -1; pointer-events: none; opacity: .55; background: radial-gradient(circle, #D9C59C 0 .7px, transparent 1.1px) 11px 6px / 59px 37px, radial-gradient(circle, #DDCAA3 0 .6px, transparent 1px) 37px 19px / 83px 47px, radial-gradient(circle, #E0CEA8 0 .9px, transparent 1.3px) 23px 31px / 107px 53px; }
.crab-h5 .crab-nav button .beach-obj { opacity: 1; overflow: visible; }
.crab-h5 .crab-nav button .beach-spyglass, .crab-h5 .crab-nav button .beach-ball { width: 48px; height: 35px; transform: translateY(-3px); }
.crab-h5 .crab-nav button.taken .beach-spyglass, .crab-h5 .crab-nav button.taken .beach-ball { opacity: 1; transform: translateY(-3px); }
.crab-h5 .crab-nav .beach-item { transition: opacity .16s; }
.crab-h5 .crab-nav button.taken .beach-item { opacity: 0; }
.crab-h5 .navcrab.settled[data-mode=events] .nav-arm-right { transform: none; }
.crab-h5 .navcrab .nav-ball { transform-box: fill-box; transform-origin: 50% 50%; }
.crab-h5 .navcrab.arrived[data-mode=events] .nav-ball { animation: nav-ball-hop .7s cubic-bezier(.3,.7,.4,1) .12s; }
@keyframes nav-ball-hop { 0%, 100% { transform: translateY(0) rotate(0); } 38% { transform: translateY(-7px) rotate(-18deg); } 66% { transform: translateY(0) rotate(4deg); } 82% { transform: translateY(-1.5px) rotate(-2deg); } }

/* An actual resident's card: avatar and name lead, small keepsakes below. */
.crab-h5 .scene-identity .h5-social-home { padding-top: 18px; }
.crab-h5 .scene-resident-pass { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: start; gap: 19px; position: relative; margin: 19px 0 0; padding: 55px 19px 21px; border: var(--comic-line); border-radius: 10px 10px 24px 10px; background: var(--surface); box-shadow: 4px 5px 0 #201c2222; overflow: visible; }
.crab-h5 .scene-resident-pass::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 35px; border-bottom: var(--comic-line); border-radius: 8px 8px 0 0; background: var(--blue); }
.crab-h5 .scene-pass-hanger { position: absolute; z-index: 3; width: 48px; height: 13px; left: calc(50% - 24px); top: -7px; border: var(--comic-line); border-radius: 7px; background: var(--sand); }
.crab-h5 .scene-pass-hanger::before { content: ''; position: absolute; width: 12px; height: 38px; left: 16px; bottom: 6px; border: var(--comic-line); border-radius: 5px 5px 0 0; background: var(--coral); }
.crab-h5 .scene-pass-label { position: absolute; z-index: 2; left: 16px; top: 10px; font: 700 10px/1.5 var(--sans); letter-spacing: 1.4px; }
.crab-h5 .scene-pass-stamp { position: absolute; right: 13px; top: 7px; z-index: 2; width: 42px; transform: rotate(11deg); }
.crab-h5 .scene-resident-pass .social-profile-avatar { grid-column: 1; grid-row: 1; width: 76px; height: 90px; border: var(--comic-line); border-radius: 9px; background: var(--yellow-soft); object-fit: cover; }
.crab-h5 .scene-resident-pass > div { grid-column: 2; min-width: 0; }
.crab-h5 .scene-resident-pass .scene-pass-eyebrow { display: none; }
.crab-h5 .scene-resident-pass h1 { margin-top: 0; font-size: 26px; overflow-wrap: anywhere; }
.crab-h5 .scene-resident-pass p { margin: 8px 0 10px; font-size: 12px; line-height: 1.8; }
.crab-h5 .scene-resident-pass small { display: inline-block; padding: 4px 8px; border-radius: 4px; background: var(--yellow-soft); font: 600 10px/1.6 var(--mono); }
.crab-h5 .scene-resident-pass > .social-text-button { position: static; grid-column: 1 / -1; justify-self: end; min-height: 44px; margin-top: -6px; }
.crab-h5 .scene-pocket-links { gap: 10px; margin: 24px 0 27px; padding: 0; border: 0; background: transparent; }
.crab-h5 .scene-pocket-links > button { display: grid; justify-items: center; position: relative; gap: 4px; min-height: 91px; padding: 11px 4px 8px; border: 1px solid #201c2238; border-top: 2px dashed #201c2260; border-radius: 2px 2px 14px 14px; background: #fff8e8; }
.crab-h5 .scene-pocket-links > button:nth-child(even) { background: #e4eef3; }
.crab-h5 .scene-pocket-links .scene-drawing { width: 28px; margin-top: -22px; transform: rotate(-8deg); }
.crab-h5 .scene-pocket-links > button:nth-child(even) .scene-drawing { transform: rotate(8deg); }
.crab-h5 .scene-pocket-links strong { font: 600 20px/1.2 var(--mono); }
.crab-h5 .scene-pocket-links span:not(.scene-drawing) { font-size: 10px; }
.crab-h5 .scene-identity .menu-list { margin-top: 26px; padding: 0 6px; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.crab-h5 .scene-identity .menu-icon { background: transparent; border: 0; }
.crab-h5 .scene-identity .social-post { border-radius: 5px; padding-bottom: 9px; box-shadow: 0 2px 0 #201c2217; }
.crab-h5 .scene-identity .social-post > img { margin: 6px 6px 0; width: calc(100% - 12px); }
.crab-h5 .scene-identity .social-empty { margin: 0; padding: 15px 14px 17px; border: 1px dashed #201c2245; border-radius: 11px; background: #fff8e8; }
.crab-h5 .scene-identity .social-empty p { margin: 6px 0 0; font-size: 12px; line-height: 1.7; }
.crab-h5 .scene-identity .social-empty strong { font-size: 14px; }
.crab-h5 .scene-identity .h5-social-home:has(.social-empty) + .menu-list { margin-top: 20px; }

/* Profile: a sunlit underwater portrait, with a quiet reading layer above the reef. */
.crab-h5 .profile-view > .profile-scroll { padding: 0 0 calc(104px + env(safe-area-inset-bottom)); background: var(--sand); }
.crab-h5 .profile-cove { position: relative; isolation: isolate; margin: 0; padding: calc(10px + var(--h5-safe-top)) 20px 42px; overflow: hidden; background: #EFF8FD; }
.crab-h5 .profile-topbar { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.crab-h5 .profile-brand { color: var(--ink); font: 900 17px/1.2 var(--sans); letter-spacing: -.5px; }
.crab-h5 .profile-brand i { color: var(--surface); font-style: normal; }
.crab-h5 .profile-ocean { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.crab-h5 .profile-ocean > svg { position: absolute; display: block; }
.crab-h5 .profile-ocean-water, .crab-h5 .profile-water-light { inset: 0; width: 100%; height: 100%; }
.crab-h5 .profile-water-light { width: calc(100% + 24px); left: -12px; animation: profile-water-shimmer 14s ease-in-out infinite alternate paused; }
.crab-h5 .profile-water-ripples { top: calc(var(--h5-safe-top) + 8px); right: 96px; width: 76px; height: 14px; opacity: .6; }
.crab-h5 .profile-fish { --fish-distance: calc(min(430px, 100vw) + 120px); position: absolute; left: calc(100% + 24px); top: calc(var(--h5-safe-top) + 29px); width: 44px; height: 28px; animation: profile-fish-pass-left 26s -8s cubic-bezier(.4,0,.3,1) infinite paused; }
.crab-h5 .profile-fish-body { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.crab-h5 .profile-fish-coral { left: -64px; top: calc(var(--h5-safe-top) + 33px); width: 30px; height: 20px; animation: profile-fish-pass-right 31s -16s cubic-bezier(.4,0,.3,1) infinite paused; }
.crab-h5 .profile-fish-tail { transform-box: view-box; transform-origin: 46px 22px; animation: profile-fish-tailbeat 1.25s ease-in-out infinite paused; }
.crab-h5 .profile-fish-fin { transform-box: view-box; transform-origin: 28px 23px; animation: profile-fish-finbeat 1.8s -.6s ease-in-out infinite alternate paused; }
.crab-h5 .profile-fish-eye { transform-box: view-box; transform-origin: 15px 21px; animation: profile-fish-blink 13s -4s ease-in-out infinite paused; }
.crab-h5 .profile-fish-coral .profile-fish-tail { transform-origin: 33px 16px; animation-duration: .9s; animation-delay: -.3s; }
.crab-h5 .profile-fish-coral .profile-fish-fin { transform-origin: 19px 16px; animation-duration: 1.4s; }
.crab-h5 .profile-fish-coral .profile-fish-eye { transform-origin: 11px 15px; animation-duration: 17s; animation-delay: -9s; }
.crab-h5 .profile-fish-lane { position: absolute; top: calc(var(--h5-safe-top) + 50px); left: 61%; right: 14px; height: 84px; }
.crab-h5 .profile-companion { left: 0; top: 0; width: 54px; height: 36px; animation: none; }
.crab-h5 .profile-companion .profile-fish-tail { transform-origin: 54px 24px; animation-duration: 1.5s; }
.crab-h5 .profile-companion .profile-fish-fin { transform-origin: 34px 27px; animation-duration: 2.4s; }
.crab-h5 .profile-water-caustics { left: 0; bottom: 20px; width: 100%; height: 54px; opacity: .35; animation: profile-caustic-drift 7s ease-in-out infinite alternate paused; }
.crab-h5 .profile-ocean-bubbles { position: absolute; inset: 0; }
.crab-h5 .profile-ocean-bubbles i { --bubble-rise: -102px; --bubble-drift: 8px; position: absolute; left: 10px; bottom: 78px; width: 9px; height: 9px; border: 1.4px solid #FFFEFBD9; border-radius: 50%; background: #E0EFFF20; opacity: 0; animation: profile-bubble-rise 9s linear infinite paused; }
.crab-h5 .profile-ocean-bubbles i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 2px; height: 2px; border-radius: 50%; background: var(--surface); }
.crab-h5 .profile-ocean-bubbles i:nth-child(2) { left: 22px; bottom: 72px; width: 5px; height: 5px; animation-delay: -3.5s; animation-duration: 8s; }
.crab-h5 .profile-ocean-bubbles i:nth-child(3) { left: 37%; bottom: 70px; width: 5px; height: 5px; --bubble-rise: -66px; animation-delay: -6s; animation-duration: 11s; }
.crab-h5 .profile-ocean-bubbles i:nth-child(4) { left: auto; right: 14px; bottom: 87px; width: 13px; height: 13px; --bubble-rise: -150px; --bubble-drift: -5px; animation-delay: -2s; animation-duration: 12s; }
.crab-h5 .profile-ocean-bubbles i:nth-child(5) { left: auto; right: 25px; bottom: 79px; width: 6px; height: 6px; --bubble-rise: -124px; animation-delay: -7s; animation-duration: 10s; }
.crab-h5 .profile-ocean-bubbles i:nth-child(6) { left: 8px; bottom: 52px; width: 5px; height: 5px; animation-delay: -7s; animation-duration: 13s; }
.crab-h5 .profile-ocean-bubbles i:nth-child(7) { left: auto; right: 31%; bottom: 39px; width: 7px; height: 7px; --bubble-rise: -52px; animation-delay: -4s; animation-duration: 8s; }
.crab-h5 .profile-ocean-bubbles i:nth-child(8) { left: auto; right: 6px; bottom: 164px; width: 4px; height: 4px; --bubble-rise: -60px; animation-delay: -5s; animation-duration: 9s; }
.crab-h5 .profile-seabed-habitat { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.crab-h5 .profile-seabed-habitat > svg { position: absolute; display: block; overflow: visible; }
.crab-h5 .profile-seabed-midground { position: relative; flex: 1; min-width: 0; height: 44px; margin-right: 120px; align-self: flex-end; pointer-events: none; container-type: inline-size; }
.crab-h5 .profile-seabed-midground > svg { position: absolute; display: block; height: auto; }
.crab-h5 .profile-seabed-keepsakes { left: 42%; bottom: 1px; width: 54px; transform: translateX(-50%); }
@container (max-width: 64px) { .crab-h5 .profile-seabed-midground > .profile-seabed-keepsakes { display: none; } }
.crab-h5 .profile-seabed-edge { right: -6px; bottom: 47px; width: 64px; height: 61px; }
.crab-h5 .profile-seabed-edge .profile-seagrass { animation-delay: -3s; }
.crab-h5 :is(.profile-seabed-habitat,.profile-seabed-midground) :is(path,circle,ellipse) { vector-effect: non-scaling-stroke; }
.crab-h5 .profile-seagrass { transform-box: fill-box; transform-origin: 50% 100%; animation: profile-reef-sway 8s ease-in-out infinite alternate paused; }
.crab-h5 .profile-ocean :is(path,circle,ellipse) { vector-effect: non-scaling-stroke; }
.crab-h5 .profile-identity { position: relative; z-index: 3; display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: start; gap: 14px; margin-top: 22px; }
.crab-h5 .profile-theme-underwater .profile-identity { margin-top: 8px; }
.crab-h5 .profile-cove-copy { min-width: 0; padding: 9px 0 12px; }
.crab-h5 .profile-cove h1 { margin: 0; color: var(--ink); font: 900 30px/1.3 var(--sans); letter-spacing: -.6px; overflow-wrap: anywhere; }
.crab-h5 .profile-cove h1 > span { padding: 0 3px; background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* The edit shell joins a small garden rooted along the continuous seabed. */
.crab-h5 .profile-seabed { position: relative; z-index: 3; display: flex; justify-content: flex-start; margin-top: -24px; padding-left: 6px; }
/* Tall profile copy gets a small clear water lane before the seabed. */
.crab-h5 .profile-cove.profile-roomy-copy .profile-seabed { margin-top: 44px; }
.crab-h5 .profile-edit-slot { position: relative; left: -12px; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 120px); }
.crab-h5 .profile-edit { position: relative; display: block; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--ink); font: 600 13px/1.4 var(--sans); text-align: left; -webkit-tap-highlight-color: transparent; }
.crab-h5 .profile-edit-prop { display: flex; align-items: flex-end; gap: 6px; min-height: 44px; }
.crab-h5 .profile-edit-garden-art { position: relative; display: block; flex: 0 0 48px; width: 48px; height: 40px; pointer-events: none; }
.crab-h5 .profile-edit-garden-art svg { position: relative; display: block; width: 100%; height: 100%; }
.crab-h5 .profile-edit-garden-art path { vector-effect: non-scaling-stroke; }
.crab-h5 .profile-edit-label { display: block; min-width: 0; padding: 5px 0; overflow-wrap: anywhere; }
.crab-h5 .profile-edit:focus-visible { outline: none; }
.crab-h5 .profile-edit:focus-visible .profile-edit-label { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.crab-h5 .profile-edit:active { translate: 0 1px; }
/* The real photo remains the visual anchor, with the approved white rim and ink outline. */
.crab-h5 .profile-avatar-frame { display: grid; place-items: center; width: 112px; height: 112px; }
.crab-h5 .profile-cove-avatar .social-profile-avatar { display: block; width: 98px; height: 98px; border: 4px solid var(--surface); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1.6px var(--ink), 2px 3px 0 1.6px #201c2230; object-fit: cover; }
.crab-h5 .profile-cove .profile-bio { max-width: 100%; margin: 3px 0 0; color: #203D49; font: 500 14px/1.65 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .profile-horizon { position: absolute; z-index: 1; bottom: -1px; left: 0; width: 100%; height: 80px; }
.crab-h5 .profile-cove > .profile-cove-crab { position: absolute; z-index: 2; right: 27px; bottom: 9px; width: 96px; min-height: 64px; }
.crab-h5 .profile-cove-crab .scene-crab { transform-origin: 50% 82%; }
.crab-h5 .profile-cove-crab .claw { transform-box: view-box; }
.crab-h5 .profile-cove-crab .claw.l { transform-origin: 49px 87px; }
.crab-h5 .profile-cove-crab .claw.r { transform-origin: 151px 84px; }
.crab-h5 .profile-cove-crab .pupil { transform-box: view-box; transition: none; }
.crab-h5 .profile-reaction-dots { position: absolute; z-index: 3; right: 80px; bottom: 68px; width: 46px; height: 32px; pointer-events: none; }
.crab-h5 .profile-reaction-dots i { --profile-pop-x: -15px; position: absolute; left: 22px; bottom: 0; width: 7px; height: 7px; border: 1.4px solid var(--ink); border-radius: 50%; background: var(--surface); opacity: 0; }
.crab-h5 .profile-reaction-dots i:nth-child(2) { --profile-pop-x: 5px; width: 5px; height: 5px; }
.crab-h5 .profile-reaction-dots i:nth-child(3) { --profile-pop-x: 19px; width: 4px; height: 4px; background: var(--sun); }
/* The real activity strip rests on the seabed. */
.crab-h5 .profile-treasure-strip { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: -34px 18px 0; padding: 6px 2px; border: var(--comic-line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.crab-h5 .profile-treasure-strip button { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 0; min-height: 62px; padding: 6px 2px; color: var(--ink); text-align: center; border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.crab-h5 .profile-treasure-strip button + button::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; border-left: 1px solid var(--line); }
.crab-h5 .profile-treasure-strip button:active { background: var(--yellow-soft); }
.crab-h5 .profile-treasure-strip button:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.crab-h5 .profile-treasure-strip strong { font: 600 22px/1.1 var(--mono); overflow-wrap: anywhere; }
.crab-h5 .profile-treasure-strip button > span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; color: var(--ink-2); font: 600 12px/1.4 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .profile-mark { display: block; flex: none; width: 14px; height: 14px; }
.crab-h5 .profile-mark svg { display: block; width: 100%; height: 100%; }
.crab-h5 .profile-journal { padding: 0 20px 20px; }
.crab-h5 .profile-tool-dock > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.crab-h5 .profile-tool-dock h2 { margin: 0; color: var(--ink); font: 900 18px/1.4 var(--sans); letter-spacing: -.4px; }
/* Four full-width entries share the settings layout and keep their own useful artwork. */
.crab-h5 .profile-tool-dock { margin-top: 24px; }
.crab-h5 .profile-tool-grid { display: grid; grid-template-columns: minmax(0,1fr); grid-auto-rows: 1fr; gap: 12px; }
.crab-h5 .profile-tool-copy { display: block; min-width: 0; }
.crab-h5 .profile-tool strong { display: block; font: 800 16px/1.45 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .profile-tool-art { position: relative; display: block; flex: none; width: 66px; height: 64px; }
.crab-h5 .profile-tool-art .scene-drawing, .crab-h5 .profile-tool-art svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.crab-h5 .profile-tool-art svg :is(path,rect,circle,line,polyline,ellipse) { vector-effect: non-scaling-stroke; }
.crab-h5 :is(.profile-tool-entry,.profile-settings-entry) { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr) 28px; align-items: center; gap: 12px; min-width: 0; width: 100%; min-height: 76px; padding: 12px; border: var(--comic-line); border-radius: 18px; background: var(--surface); box-shadow: 3px 3px 0 #201c2224; color: var(--ink); text-align: left; -webkit-tap-highlight-color: transparent; }
.crab-h5 :is(.profile-tool-entry,.profile-settings-entry) .profile-tool-art { display: grid; place-items: center; width: 48px; height: 48px; }
.crab-h5 :is(.profile-tool-entry,.profile-settings-entry) .profile-tool-art::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--blue-soft); }
.crab-h5 :is(.profile-tool-entry,.profile-settings-entry) .profile-tool-art .ui-icon { width: 24px; height: 24px; color: var(--ink); }
.crab-h5 .profile-settings-arrow { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); line-height: 0; pointer-events: none; }
.crab-h5 .profile-settings-arrow svg { display: block; width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crab-h5 :is(.profile-tool-entry,.profile-settings-entry):focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.crab-h5 :is(.profile-tool-entry,.profile-settings-entry):active { translate: 1px 2px; box-shadow: none; }
@media (max-width: 350px) {
  .crab-h5 :is(.profile-tool-entry,.profile-settings-entry) { grid-template-columns: 44px minmax(0,1fr) 28px; gap: 10px; min-height: 68px; padding: 10px; }
  .crab-h5 :is(.profile-tool-entry,.profile-settings-entry) .profile-tool-art { width: 44px; height: 44px; }
  .crab-h5 :is(.profile-tool-entry,.profile-settings-entry) .profile-tool-art .ui-icon { width: 22px; height: 22px; }
}
.crab-h5 .profile-cove-crab .scene-crab { animation: profile-crab-breathe 8s ease-in-out infinite paused; }
.crab-h5 .profile-cove.scene-motion-enabled.scene-in-view .profile-cove-crab .scene-crab,
.crab-h5 .profile-cove.scene-motion-enabled.scene-in-view :is(.profile-water-light,.profile-fish,.profile-fish-tail,.profile-fish-fin,.profile-fish-eye,.profile-water-caustics,.profile-ocean-bubbles i,.profile-seagrass) { animation-play-state: running; }
.crab-h5 .profile-cove:not(.scene-motion-enabled.scene-in-view) .profile-cove-crab * { animation-play-state: paused; }
.crab-h5 .profile-cove-crab.scene-greeting .scene-crab { animation: scene-hello 2s ease-in-out; }
.crab-h5 .profile-cove-crab[data-profile-action=wave] .claw.r { animation: profile-crab-wave 2.8s cubic-bezier(.4,0,.6,1) both; }
.crab-h5 .profile-cove-crab[data-profile-action=clap] .claw.l { animation: profile-crab-clap-left .42s ease-in-out 3 alternate; }
.crab-h5 .profile-cove-crab[data-profile-action=clap] .claw.r { animation: profile-crab-clap-right .42s ease-in-out 3 alternate; }
.crab-h5 .profile-cove-crab[data-profile-action=stretch] .claw.l { animation: profile-crab-stretch-left 1.2s ease-in-out; }
.crab-h5 .profile-cove-crab[data-profile-action=stretch] .claw.r { animation: profile-crab-stretch-right 1.2s ease-in-out; }
.crab-h5 .profile-cove-crab.profile-blink .lid { transform: scaleY(1); }
.crab-h5 .profile-cove-crab.scene-greeting + .profile-reaction-dots i { animation: profile-reaction-pop 1.8s ease-out both; }
.crab-h5 .profile-cove-crab.scene-greeting + .profile-reaction-dots i:nth-child(2) { animation-delay: .08s; }
.crab-h5 .profile-cove-crab.scene-greeting + .profile-reaction-dots i:nth-child(3) { animation-delay: .16s; }
@keyframes profile-crab-breathe { 0%,38%,65%,100% { transform: translateY(0); } 48%,55% { transform: translateY(-3px); } }
/* One complete gesture: prepare, lift, two softer swings, then lower to rest. */
@keyframes profile-crab-wave {
  0%,100% { transform: translate(0,0) rotate(0); }
  9% { transform: translate(0,.5px) rotate(3deg); }
  27% { transform: translate(-.8px,-1.2px) rotate(-21deg); }
  43% { transform: translate(-.5px,-.8px) rotate(-12deg); }
  57% { transform: translate(-.7px,-1px) rotate(-19deg); }
  70% { transform: translate(-.5px,-.7px) rotate(-13deg); }
  85% { transform: translate(-.15px,-.25px) rotate(-5deg); }
}
@keyframes profile-crab-clap-left { to { transform: rotate(-22deg) translate(-3px,-4px); } }
@keyframes profile-crab-clap-right { to { transform: rotate(22deg) translate(3px,-4px); } }
@keyframes profile-crab-stretch-left { 45%,65% { transform: rotate(-24deg) translate(-4px,-5px); } }
@keyframes profile-crab-stretch-right { 45%,65% { transform: rotate(24deg) translate(4px,-5px); } }
@keyframes profile-reaction-pop { 0% { opacity: 0; transform: translate(0,8px) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--profile-pop-x),-28px) scale(1.05); } }
@keyframes profile-water-shimmer { from { transform: translateX(-6px); opacity: .65; } to { transform: translateX(8px); opacity: 1; } }
/* Original yellow/coral fish keep their separate, offscreen-reset crossings. */
@keyframes profile-fish-pass-left {
  0% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(calc(var(--fish-distance) * -.23),3px) rotate(-3deg); }
  38% { transform: translate(calc(var(--fish-distance) * -.42),1px) rotate(3deg); }
  46% { transform: translate(calc(var(--fish-distance) * -.46),2px) rotate(-2deg); }
  65% { transform: translate(calc(var(--fish-distance) * -.68),4px) rotate(-3deg); }
  84% { transform: translate(calc(var(--fish-distance) * -.89),1px) rotate(3deg); }
  100% { transform: translate(calc(var(--fish-distance) * -1),0) rotate(0); }
}
@keyframes profile-fish-pass-right {
  0% { transform: translate(0,2px) rotate(0); }
  22% { transform: translate(calc(var(--fish-distance) * .27),5px) rotate(4deg); }
  40% { transform: translate(calc(var(--fish-distance) * .45),1px) rotate(-3deg); }
  53% { transform: translate(calc(var(--fish-distance) * .48),2px) rotate(2deg); }
  72% { transform: translate(calc(var(--fish-distance) * .73),4px) rotate(4deg); }
  100% { transform: translate(var(--fish-distance),0) rotate(-2deg); }
}
@keyframes profile-fish-tailbeat { 0%,100% { transform: rotate(4deg); } 25% { transform: rotate(-7deg); } 48% { transform: rotate(7deg); } 76% { transform: rotate(-5deg); } }
@keyframes profile-fish-finbeat { from { transform: rotate(-10deg); } to { transform: rotate(7deg); } }
@keyframes profile-fish-blink { 0%,73%,76%,100% { transform: scaleY(1); } 74%,75% { transform: scaleY(.15); } }
@keyframes profile-caustic-drift { from { transform: translate(-5px,2px); opacity: .2; } to { transform: translate(6px,-2px); opacity: .5; } }
@keyframes profile-bubble-rise { 0% { opacity: 0; transform: translate(0,0) scale(.8); } 15%,70% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--bubble-drift),var(--bubble-rise)) scale(1.08); } }
@keyframes profile-reef-sway { from { transform: skewX(-3deg); } to { transform: skewX(3deg); } }
@media (prefers-reduced-motion: reduce) {
  .crab-h5 .message-fetch-scene * { animation: none !important; transition: none !important; }
  .crab-h5 .message-drift-scene.is-delivered .message-drift-callout { opacity: 1; transform: rotate(-3deg); }
  .crab-h5 .profile-cove *, .crab-h5 .profile-cove *::before, .crab-h5 .profile-cove *::after { animation: none !important; transition: none !important; }
  .crab-h5 .profile-ocean-bubbles i { opacity: .6; }
  .crab-h5 .profile-fish-yellow { left: auto; right: 69px; }
  .crab-h5 .profile-fish-coral { left: 40%; }
}

/* Writing a postcard gives image selection and the message different faces. */
.crab-h5 .scene-compose-head { display: flex; align-items: center; min-height: 160px; padding: 10px 0 12px; }
.crab-h5 .scene-compose-head > div:first-child { position: relative; z-index: 2; max-width: 70%; }
.crab-h5 .scene-compose-head h1 { font-size: 32px; }
.crab-h5 .scene-compose-objects { position: absolute; right: 1px; top: 21px; width: 118px; height: 124px; }
.crab-h5 .scene-blank-postcard { position: absolute; width: 95px; height: 71px; right: 0; top: 0; border: var(--comic-line); border-radius: 3px; background: var(--blue-soft); transform: rotate(11deg); }
.crab-h5 .scene-blank-postcard::before { content: ''; position: absolute; width: 20px; height: 22px; right: 9px; top: 9px; border: 1.5px dashed var(--ink); background: var(--sun); }
.crab-h5 .scene-blank-postcard::after { content: ''; position: absolute; left: 9px; bottom: 14px; width: 40px; height: 13px; border-block: 1px solid var(--ink); }
.crab-h5 .scene-compose-objects > .scene-drawing { position: absolute; width: 73px; left: 0; top: 34px; transform: rotate(-12deg); }
.crab-h5 .scene-writing-crab { position: absolute; width: 80px; right: -3px; bottom: -4px; }
.crab-h5 .scene-postcard .scene-photo-sheet { position: relative; padding: 18px; border: 1px solid #201c2270; border-radius: 5px; box-shadow: 3px 4px 0 #201c221a; }
.crab-h5 .scene-sheet-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; min-height: 30px; color: var(--ink); font: 700 13px/1.7 var(--sans); }
.crab-h5 .scene-sheet-caption > .scene-drawing { width: 31px; transform: rotate(-8deg); }
.crab-h5 .scene-sheet-caption .scene-stamp { margin-left: auto; transform: rotate(5deg); }
.crab-h5 .scene-photo-sheet .status-line { border-top: 1px solid var(--line); padding-top: 12px; font-size: 11px; }
.crab-h5 .scene-photo-sheet .upload-cell { border-radius: 3px; background: #e4edf0; }
.crab-h5 .scene-postcard .scene-writing-sheet { position: relative; padding: 21px 18px 18px; border: 1px solid #201c2270; border-top: 3px double var(--ink); border-radius: 3px 3px 16px 3px; background: var(--surface); }
.crab-h5 .scene-writing-sheet::after { content: ''; position: absolute; top: -5px; right: 20px; width: 50px; height: 9px; border: 1px solid #201c2240; background: var(--yellow-soft); transform: rotate(4deg); }
.crab-h5 .scene-postcard .type-tabs { overflow: visible; border: 0; gap: 9px; background: transparent; }
.crab-h5 .scene-postcard .type-tabs button { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; border: 1px solid #201c2245; border-radius: 20px; font-size: 12px; }
.crab-h5 .scene-postcard .type-tabs button.is-active { border-color: var(--ink); box-shadow: 1px 2px 0 var(--ink); }
.crab-h5 .scene-type-mark { display: inline-block; width: 24px; height: 24px; flex: none; }
.crab-h5 .scene-type-mark svg { display: block; width: 100%; height: 100%; }
.crab-h5 .scene-writing-sheet .mobile-input, .crab-h5 .scene-writing-sheet .mobile-textarea { border: 0; border-bottom: 1.5px solid #201c2260; border-radius: 0; padding-inline: 3px; background: transparent; }
.crab-h5 .scene-writing-sheet .mobile-textarea { min-height: 180px; }
.crab-h5 .scene-writing-sheet .form-actions { border-top: 1.6px dashed #201c2245; padding-top: 18px; }
.crab-h5 .scene-writing-sheet .form-actions .primary-button { flex: 1.2; }
.crab-h5 .scene-writing-sheet #draft-status { padding-top: 13px; font-size: 11px; }

/* Collected stories: a keepsake stack, with space for the real photographs. */
.crab-h5 .scene-collection-head { display: flex; align-items: center; min-height: 140px; gap: 14px; padding: 12px 0 19px; border-bottom: 1.5px solid #201c2245; }
.crab-h5 .scene-collection-head > div:first-child { min-width: 0; flex: 1; }
.crab-h5 .scene-collection-head h1 { max-width: 245px; font-size: 27px; }
.crab-h5 .scene-collection-head p { max-width: 245px; margin-top: 9px; font-size: 12px; }
.crab-h5 .scene-keepsakes { position: relative; flex: none; width: 74px; height: 81px; }
.crab-h5 .scene-keepsakes > i { position: absolute; width: 58px; height: 68px; top: 2px; right: 1px; border: var(--comic-line); border-radius: 4px; background: var(--blue-soft); transform: rotate(12deg); }
.crab-h5 .scene-keepsakes > i:nth-child(2) { top: 6px; right: 12px; background: var(--surface); transform: rotate(-10deg); }
.crab-h5 .scene-keepsakes .scene-drawing { position: absolute; width: 43px; left: 12px; top: 21px; transform: rotate(-10deg); }
.crab-h5 .scene-collection .crab-card, .crab-h5 .scene-sent .crab-card { border-radius: 5px 5px 11px 5px; box-shadow: 2px 3px 0 #201c221a; }
.crab-h5 .scene-collection .card-visual, .crab-h5 .scene-sent .card-visual { margin: 5px 5px 0; border-radius: 2px; }
.crab-h5 .scene-neighbors .social-follow-list { display: grid; gap: 13px; }
.crab-h5 .scene-neighbors .social-follow-list article { position: relative; padding: 17px 14px; border: 1px solid #201c2245; border-radius: 5px 16px 16px 5px; background: var(--surface); }
.crab-h5 .scene-neighbors .social-follow-list article::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 5px; border-radius: 5px 0 0 5px; background: var(--blue); }
.crab-h5 .scene-neighbors .social-follow-list article:nth-child(even)::before { background: var(--coral); }
.crab-h5 .scene-neighbors .social-private-note { display: inline-block; margin-top: 0; padding: 5px 10px; border: 1px dashed var(--line); border-radius: 15px; font-size: 10px; }

/* A lookout and a set of city signposts: small and fast to use. */
.crab-h5 .scene-lookout-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 103px; margin-bottom: 16px; }
.crab-h5 .scene-lookout-head h1 { font-size: 25px; }
.crab-h5 .scene-lookout-head > .scene-drawing { width: 66px; transform: rotate(-9deg); }
.crab-h5 .scene-lookout .search-box:focus-within { outline: 0; box-shadow: 2px 3px 0 var(--ink), 0 0 0 3px #236caf; }
.crab-h5 .scene-lookout .search-box input:focus-visible, .crab-h5 .scene-lookout .search-box input:focus { outline: 0; box-shadow: none; }
.crab-h5 .search-history { margin: 22px 0 16px; padding-bottom: 17px; border-bottom: 1.5px solid #201c2230; }
.crab-h5 .search-history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-bottom: 8px; }
.crab-h5 .search-history-head h2 { min-width: 0; margin: 0; color: var(--ink); font: 800 17px/1.35 var(--sans); }
.crab-h5 .search-history-clear { flex: none; min-height: 44px; padding: 0 2px 0 10px; border: 0; background: transparent; color: var(--ink-2); font: 700 13px/1.4 var(--sans); cursor: pointer; }
.crab-h5 .search-history-clear:focus-visible, .crab-h5 .search-history-item:focus-visible { outline: 3px solid #236caf; outline-offset: 2px; }
.crab-h5 .search-history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.crab-h5 .search-history-item { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 48px; padding: 9px 11px; border: 1.5px solid #c9bfae; border-radius: 10px 14px 8px 12px; background: var(--surface); color: var(--ink); box-shadow: 2px 2px 0 #201c2215; font: 500 15px/1.35 var(--sans); text-align: left; cursor: pointer; touch-action: manipulation; }
.crab-h5 .search-history-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.crab-h5 .search-history-item svg { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.crab-h5 .search-history-item span { min-width: 0; overflow-wrap: anywhere; }
.crab-h5 .search-history-item:active { box-shadow: none; transform: translate(1px, 1px); }
.crab-h5 .search-people { margin: 4px 0 16px; }
.crab-h5 .search-people-list { display: grid; gap: 8px; }
.crab-h5 .search-person { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: var(--comic-line); border-radius: 8px 18px 16px 8px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 2px 3px 0 #201c2214; }
.crab-h5 .search-person:focus-visible { outline: 3px solid #236caf; outline-offset: 2px; }
.crab-h5 .search-person-face { flex: none; width: 40px; height: 40px; }
.crab-h5 .search-person-avatar { width: 40px; height: 40px; border: var(--comic-line); border-radius: 50%; object-fit: cover; }
.crab-h5 .search-person-copy { display: grid; gap: 2px; min-width: 0; }
.crab-h5 .search-person-copy strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.crab-h5 .search-person-copy small { color: var(--ink-2); font-size: 12px; line-height: 1.3; }
.crab-h5 .search-people-note { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.crab-h5 .scene-lookout .chip { border-radius: 6px 13px 5px 12px; background: #fff7df; }
.crab-h5 .scene-destination-head { display: flex; min-height: 178px; align-items: center; padding: 6px 0 20px; }
.crab-h5 .scene-destination-head > div:first-child { position: relative; z-index: 2; max-width: 72%; }
.crab-h5 .scene-destination-head h1 { font-size: 34px; }
.crab-h5 .scene-destination-head p { font-size: 12px; }
.crab-h5 .scene-signpost { position: absolute; right: 1px; top: 22px; width: 100px; height: 145px; }
.crab-h5 .scene-signpost > i { position: absolute; width: 9px; height: 108px; right: 41px; bottom: 0; border: var(--comic-line); border-radius: 3px; background: #d9b789; transform: rotate(7deg); }
.crab-h5 .scene-signpost > span:not(.scene-drawing) { position: absolute; right: 0; top: 30px; width: 100px; padding: 7px 7px; border: var(--comic-line); background: var(--blue-soft); border-radius: 4px 16px 16px 4px; font: 600 9px/1.4 var(--mono); transform: rotate(7deg); }
.crab-h5 .scene-signpost > span:nth-of-type(2) { top: 70px; right: 4px; border-radius: 16px 4px 4px 16px; background: var(--yellow-soft); transform: rotate(-5deg); }
.crab-h5 .scene-signpost > .scene-drawing { position: absolute; top: -8px; right: 22px; width: 27px; }
.crab-h5 .scene-destinations .permission-row { border: 1px dashed #201c2260; border-radius: 13px; background: transparent; }
.crab-h5 .scene-destinations .city-list { display: grid; gap: 13px; margin-top: 24px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.crab-h5 .scene-destinations .city-option { display: flex; align-items: center; justify-content: flex-start; gap: 14px; position: relative; padding: 17px 16px; border: var(--comic-line); border-radius: 6px 26px 26px 6px; background: var(--surface); }
.crab-h5 .scene-destinations .city-option:nth-child(even) { margin-left: 13px; border-radius: 26px 6px 6px 26px; }
.crab-h5 .scene-city-code { font: 600 11px/1 var(--mono); color: var(--ink-2); letter-spacing: 1px; }
.crab-h5 .scene-destinations .city-option-name { flex: 1; justify-content: space-between; flex-direction: row-reverse; }
.crab-h5 .scene-destinations .city-option.is-active { background: var(--blue); box-shadow: 2px 3px 0 var(--ink); }
.crab-h5 .scene-destinations .city-option.is-active .city-radio { background: var(--sun); }

/* Personal tools have their own silhouettes, without crowding the controls. */
.crab-h5 .scene-edit-head, .crab-h5 .scene-settings-head { min-height: 134px; padding: 7px 0 19px; }
.crab-h5 .scene-edit-head h1, .crab-h5 .scene-settings-head h1 { max-width: 75%; font-size: 28px; }
.crab-h5 .scene-edit-head > .scene-drawing, .crab-h5 .scene-settings-head > .scene-drawing { position: absolute; right: 5px; top: 35px; width: 75px; transform: rotate(7deg); }
.crab-h5 .scene-edit-head > .scene-drawing { width: 70px; transform: rotate(-9deg); }
.crab-h5 .scene-identity-edit .scene-photo-booth { padding: 17px; border: 1px solid #201c2260; border-radius: 5px; background: var(--surface); box-shadow: 3px 4px 0 #201c221b; }
.crab-h5 .scene-photo-booth .avatar-picker-head { padding-top: 10px; border-top: 1.6px dashed #201c2238; }
.crab-h5 .scene-identity-edit .scene-profile-notes { margin-top: 23px; padding: 0 4px; border: 0; background: transparent; }
.crab-h5 .scene-identity-edit .avatar-options { margin-top: 20px; }
.crab-h5 .scene-language-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 9px 0 24px; border-bottom: 1px solid var(--line); }
.crab-h5 .scene-speech-objects { position: relative; height: 111px; width: 100%; }
.crab-h5 .scene-speech-objects > span:not(.scene-crab) { position: absolute; left: 11px; top: 5px; padding: 11px 23px; border: var(--comic-line); border-radius: 24px 24px 24px 4px; background: var(--blue); font: 900 24px/1.4 var(--sans); transform: rotate(-6deg); box-shadow: 2px 3px 0 var(--ink); }
.crab-h5 .scene-speech-objects > span:nth-child(2) { left: 125px; top: 40px; background: var(--surface); border-radius: 24px 24px 4px 24px; transform: rotate(5deg); }
.crab-h5 .scene-speech-objects .scene-crab { position: absolute; width: 77px; right: 1px; top: 9px; transform: rotate(9deg); }
.crab-h5 .scene-language-head h1 { font-size: 28px; }
.crab-h5 .scene-speech-objects + div { padding: 0 2px; }
.crab-h5 .scene-preferences .settings-group, .crab-h5 .scene-conversation .preference-group { border-width: 1px 0; border-radius: 0; padding-inline: 4px; background: transparent; }
.crab-h5 .scene-page.scene-conversation .preference-group { border: 1px solid #201c2245; border-radius: 4px 17px 17px 17px; box-shadow: 2px 3px 0 #201c2215; }
.crab-h5 .scene-preferences .settings-group h4 { display: inline-flex; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--yellow-soft); transform: rotate(-3deg); }
.crab-h5 .scene-preferences .settings-group:nth-of-type(2) h4 { background: var(--blue-soft); transform: rotate(2deg); }

/* Shared work becomes a little workbench and a quiet path of milestones. */
.crab-h5 .scene-help-head { display: flex; align-items: center; min-height: 187px; padding: 8px 0 28px; margin-bottom: 17px; }
.crab-h5 .scene-help-head > div:first-child { position: relative; z-index: 2; max-width: 75%; }
.crab-h5 .scene-help-head h1 { font-size: 31px; }
.crab-h5 .scene-help-head p { max-width: 225px; font-size: 12px; }
.crab-h5 .scene-help-head::after { content: ''; position: absolute; z-index: -1; bottom: 0; right: -12px; width: 78%; height: 45px; border-bottom: 1.6px solid #201c224a; border-radius: 50%; background: #eddfb9; transform: rotate(-4deg); }
.crab-h5 .scene-help-objects { position: absolute; right: -2px; top: 15px; width: 100px; height: 151px; }
.crab-h5 .scene-toolbox { position: absolute; width: 67px; right: 0; bottom: 6px; transform: rotate(9deg); }
.crab-h5 .scene-buoy { position: absolute; width: 60px; right: 3px; top: 0; transform: rotate(-13deg); }
.crab-h5 .scene-helper { position: absolute; width: 67px; left: -5px; bottom: -10px; transform: rotate(-6deg); }
.crab-h5 .scene-help-desk .work-record { position: relative; margin-top: 11px; padding: 22px 17px 17px; border: 1px solid #201c2260; border-radius: 2px 12px 12px 12px; background: var(--surface); }
.crab-h5 .scene-help-desk .work-record::before { content: ''; position: absolute; top: -10px; left: -1px; width: 82px; height: 10px; border: 1px solid #201c2260; border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--blue-soft); }
.crab-h5 .scene-help-desk .work-record:nth-child(even)::before { background: var(--yellow-soft); }
.crab-h5 .scene-work-route .work-dialog h1, .crab-h5 .scene-work-route .work-detail h1 { font-size: 24px; }
.crab-h5 .scene-work-route .work-timeline { margin-left: 10px; border-left: 1.6px dashed #201c2250; }
.crab-h5 .scene-work-route .work-timeline li::before { width: 11px; height: 11px; background: var(--sun); box-shadow: 2px 2px 0 #201c2230; }
.crab-h5 .scene-work-route .work-request-note { border-radius: 4px 12px 12px 12px; border-style: dashed; }
.crab-h5 .scene-work-route .work-dialog form { padding: 18px 0 0; border-top: 1.6px dashed #201c2245; }
.crab-h5 .scene-work-route .work-dialog textarea { border-radius: 4px 13px 13px 13px; }

/* Dates, money and real order state are the contents of these ticket stubs. */
.crab-h5 .scene-receipts-head { display: flex; min-height: 153px; align-items: center; padding: 8px 0 24px; }
.crab-h5 .scene-receipts-head > div:first-child { max-width: 75%; }
.crab-h5 .scene-receipts-head h1 { font-size: 30px; }
.crab-h5 .scene-receipt-stack { position: absolute; right: 9px; top: 20px; width: 89px; height: 110px; }
.crab-h5 .scene-receipt-stack > i { position: absolute; top: 3px; right: 0; width: 65px; height: 90px; border: var(--comic-line); border-radius: 2px 2px 9px 9px; background: var(--blue-soft); transform: rotate(12deg); }
.crab-h5 .scene-receipt-stack > i:nth-child(2) { right: 16px; top: 10px; background: var(--surface); transform: rotate(-9deg); }
.crab-h5 .scene-receipt-stack > i:nth-child(2)::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 14px; height: 13px; border-top: 1px dashed var(--ink); border-bottom: 1px solid var(--ink); }
.crab-h5 .scene-receipt-stack > .scene-drawing { position: absolute; width: 38px; top: 20px; left: 20px; transform: rotate(-9deg); }
.crab-h5 .scene-receipts .orders-summary { position: relative; padding: 20px 4px; border-width: 1.6px 0; border-style: dashed; border-radius: 0; background: transparent; }
.crab-h5 .scene-receipts .order-card { border: 1px solid #201c2250; border-radius: 4px; box-shadow: 2px 3px 0 #201c221a; }
.crab-h5 .scene-receipts .order-card-foot { border-top-style: dashed; }
.crab-h5 .scene-ticket-label { border-bottom: 0; margin-bottom: 6px; }
.crab-h5 .scene-ticket-title { position: relative; padding: 21px 18px 16px; margin-top: 10px; border: var(--comic-line); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--blue-soft); }
.crab-h5 .scene-receipt .scene-ticket-title h2 { margin: 10px 0 6px; font-size: 23px; }
.crab-h5 .scene-receipt .scene-ticket-body { position: relative; padding: 13px 18px 22px; margin: 0 0 23px; border: var(--comic-line); border-top: 1.6px dashed #201c2260; border-radius: 0 0 10px 10px; background: var(--surface); box-shadow: 3px 4px 0 #201c2220; }
.crab-h5 .scene-ticket-body::before, .crab-h5 .scene-ticket-body::after { content: ''; position: absolute; width: 14px; height: 14px; top: -8px; border: var(--comic-line); border-radius: 50%; background: var(--sand); }
.crab-h5 .scene-ticket-body::before { left: -9px; }
.crab-h5 .scene-ticket-body::after { right: -9px; }
.crab-h5 .scene-event-ticket .event-detail-thumb { border: 6px solid var(--surface); border-radius: 3px; outline: 1px solid #201c2250; box-shadow: 3px 4px 0 #201c2220; }
.crab-h5 .scene-event-ticket .event-detail-meta { border-radius: 3px 3px 12px 12px; border-top: 1.6px dashed #201c2260; background: var(--surface); }
.crab-h5 .scene-event-ticket .event-host { border: 0; border-left: 4px solid var(--sun); border-radius: 0 9px 9px 0; background: #fff7dd; }

/* Quiet reading surfaces: a seal, a folded corner, then uninterrupted copy. */
.crab-h5 .scene-harbor-note { position: relative; padding: 24px 20px 22px; border: 1px solid #201c2260; border-radius: 5px 5px 20px 5px; background: var(--surface); box-shadow: 3px 4px 0 #201c2217; }
.crab-h5 .scene-harbor-note::before { content: ''; position: absolute; top: -5px; left: 21px; width: 63px; height: 10px; border: 1px solid #201c2238; background: var(--blue-soft); transform: rotate(-5deg); }
.crab-h5 .scene-harbor-note .scene-note-seal { width: 53px; align-self: flex-start; margin-top: 2px; }
.crab-h5 .scene-harbor-note strong { font-size: 18px; }
.crab-h5 .scene-harbor .guidance-list { border-width: 1px 0; border-radius: 0; background: transparent; }
.crab-h5 .scene-harbor .guidance-list > div { padding-inline: 1px; }
.crab-h5 .scene-harbor .rule-list { border-radius: 3px; border-style: dashed; background: #fff9ec; }
.crab-h5 .scene-harbor .support-contact-list { border-width: 1px; border-radius: 4px 16px 16px 4px; background: var(--blue-soft); }
.crab-h5 .scene-harbor .support-copy { background: var(--sun); box-shadow: 2px 2px 0 var(--ink); }
.crab-h5 .scene-harbor .support-copy:active { box-shadow: none; }
.crab-h5 .scene-notice .secondary-lead { margin-top: 16px; }
.crab-h5 .scene-notice .report-reasons { border: 1px solid #201c2250; border-radius: 5px 16px 16px 5px; }
.crab-h5 .scene-notice .report-reason { min-height: 68px; }
.crab-h5 .scene-notice .report-details { margin-block: 10px 16px; border-radius: 4px 12px 12px 12px; }
.crab-h5 .scene-notice .scene-folded-note { position: relative; padding-top: 30px; border: 1px solid #201c2260; border-radius: 3px 3px 20px 3px; }
.crab-h5 .scene-folded-note::after { content: ''; position: absolute; top: -1px; right: -1px; width: 24px; height: 24px; border-left: 1px solid #201c2250; border-bottom: 1px solid #201c2250; background: var(--yellow-soft); border-radius: 0 3px 0 8px; }
.crab-h5 .scene-success-mail { width: 66px; margin: 0 auto 15px; transform: rotate(-9deg); }
.crab-h5 .scene-folded-note .success-mark { width: 31px; height: 31px; margin-top: -33px; margin-left: calc(50% + 17px); position: relative; background: var(--sun); }
/* Native note: compact identity bar, photo, quiet reading, then a comment stream. */
.crab-h5 .phone-screen.is-post-detail { max-width: 430px; }
.crab-h5 .scene-story { background: var(--surface); }
.crab-h5 .scene-story .post-icon { stroke-width: 1.55; }
.crab-h5 .scene-story .post-topbar { min-height: calc(52px + var(--h5-safe-top)); padding: calc(4px + var(--h5-safe-top)) 6px 4px 2px; gap: 6px; border-bottom: 0; background: var(--surface); }
.crab-h5 .scene-story .post-back { flex: 0 0 44px; width: 44px; }
.crab-h5 .scene-story .post-icon-button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); }
.crab-h5 .scene-story .post-icon-button .post-icon { width: 22px; height: 22px; }
.crab-h5 .scene-story .post-topbar-author { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.crab-h5 .scene-story .post-author-face { display: flex; flex: none; }
.crab-h5 .scene-story .post-topbar-author .member-link { font-weight: 500; }
.crab-h5 .scene-story .post-topbar-author .member-link:hover span { color: inherit; text-decoration: none; }
.crab-h5 .scene-story .post-topbar-author .post-avatar { flex: none; flex-basis: 28px; width: 28px; height: 28px; max-width: 28px; border: 0; box-shadow: inset 0 0 0 .5px #201c2214; }
.crab-h5 .scene-story .post-topbar-author .post-author-info { display: grid; gap: 0; min-width: 0; }
.crab-h5 .scene-story .post-topbar-author .post-author-info a { min-width: 0; }
.crab-h5 .scene-story .post-topbar-author strong { display: block; max-width: 100%; overflow: hidden; color: var(--ink); font-size: 14px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.crab-h5 .scene-story .post-topbar-author .post-author-info > span { overflow: hidden; color: #8d8893; font-size: 11px; line-height: 1.3; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.crab-h5 .scene-story .post-topbar > .post-follow,
.crab-h5 .scene-story .post-topbar > .post-edit { position: relative; min-width: 54px; min-height: 44px; height: 44px; margin-left: 2px; padding: 0 12px; border: 0; border-radius: 0; color: var(--coral); background: transparent; box-shadow: none; font-size: 12px; font-weight: 600; }
.crab-h5 .scene-story .post-topbar > .post-follow::before,
.crab-h5 .scene-story .post-topbar > .post-edit::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(100% - 4px); min-width: 54px; height: 28px; transform: translate(-50%, -50%); border: 1px solid var(--coral); border-radius: 14px; pointer-events: none; }
.crab-h5 .scene-story .post-topbar > .post-follow.is-active::before { border-color: #d9d4cf; }
.crab-h5 .scene-story .post-topbar > .post-follow.is-active { border-color: #d9d4cf; color: #8d8893; }
.crab-h5 .scene-story .post-topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0; }
.crab-h5 .scene-story .post-gallery { margin: 0; border: 0; border-radius: 0; background: #1a171c; touch-action: auto; }
.crab-h5 .scene-story .post-gallery .detail-hero { width: 100%; height: auto; max-height: none; aspect-ratio: auto; border-radius: 0; object-fit: contain; object-position: center center; background: #1a171c; }
.crab-h5 .scene-story .post-copy { padding: 14px 16px 18px; border-bottom: .5px solid #201c2214; }
.crab-h5 .scene-story .detail-title { margin: 0 0 8px; font-size: 17px; line-height: 1.45; font-weight: 700; letter-spacing: -.015em; }
.crab-h5 .scene-story .detail-body { color: #3a3640; font-size: 15px; line-height: 1.64; }
.crab-h5 .scene-story .post-note-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.crab-h5 .scene-story .post-tag { min-width: 0; overflow: hidden; color: #c45b4c; font-size: 13px; line-height: 1.4; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.crab-h5 .scene-story .post-translate { min-height: 44px; padding: 0; border: 0; background: transparent; color: #8d8893; box-shadow: none; font-size: 12px; font-weight: 500; }
.crab-h5 .scene-story .post-translate .post-icon { display: none; }
.crab-h5 .scene-story .post-place-stamp { min-height: 32px; margin: 12px 0 0; padding: 0 10px; border: 0; border-radius: 16px; background: #f4efe6; font-family: var(--sans); font-size: 12px; font-weight: 500; }
.crab-h5 .scene-story .post-place-actions .post-place-stamp { min-height: 44px; margin: 0; }
.crab-h5 .scene-story .post-apple-maps { border: 0; background: var(--blue-soft); font-weight: 600; }
.crab-h5 .scene-story .post-contact,
.crab-h5 .scene-story .post-service { margin-top: 14px; border-width: 1px; border-radius: 12px; box-shadow: none; }
.crab-h5 .scene-story .post-comments { padding: 14px 16px 22px; border-top: 0; background: var(--surface); }
.crab-h5 .scene-story .post-comments-heading { margin-bottom: 2px; }
.crab-h5 .scene-story .post-comments-heading h2 { gap: 6px; font-size: 15px; line-height: 1.4; font-weight: 650; }
.crab-h5 .scene-story .post-comments-heading h2 span { padding: 0; color: #8d8893; background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 500; }
/* A quiet request summary: actual terms and the next action take priority. */
.crab-h5 .scene-story .work-offer { margin: 22px 0 4px; padding: 18px 16px 16px; border: 1px solid #dedbd5; border-radius: 16px; background: var(--surface); box-shadow: none; }
.crab-h5 .scene-story .work-offer-heading { align-items: flex-start; flex-wrap: nowrap; gap: 10px; }
.crab-h5 .scene-story .work-offer-heading > span:first-child { display: flex; align-items: center; flex: 1 1 auto; gap: 7px; min-width: 0; font: 750 16px/1.6 var(--sans); letter-spacing: 0; }
.crab-h5 .story-offer-label { min-width: 0; overflow-wrap: anywhere; }
.crab-h5 .story-offer-symbol { display: flex; flex: 0 0 24px; width: 24px; height: 25px; align-items: center; }
.crab-h5 .story-offer-symbol svg { display: block; width: 100%; height: auto; }
.crab-h5 .scene-story .work-offer-heading > span:last-child { display: inline-flex; align-items: center; max-width: 50%; flex: 0 1 auto; padding: 5px 9px; border: 0; border-radius: 20px; background: var(--blue-soft); color: #294e75; font: 500 12px/1.5 var(--sans); white-space: normal; overflow-wrap: anywhere; }
.crab-h5 .scene-story .work-offer-heading > .work-status::before { content: ''; display: inline-block; flex: 0 0 5px; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: currentColor; }
.crab-h5 .scene-story .work-offer-heading > span:is(.work-status-completed,.work-status-helping,.work-status-active) { color: #225444; background: #e9f5ee; }
.crab-h5 .scene-story .work-offer-heading > span:is(.work-status-pending,.work-status-awaiting-confirmation) { color: #6a501e; background: #fff4d5; }
.crab-h5 .scene-story .work-offer-heading > span:is(.work-status-cancelled,.work-status-declined,.work-status-closed) { color: var(--ink-2); background: #f0eeeb; }
.crab-h5 .scene-story .work-offer h2 { margin: 16px 0; font: 650 16px/1.6 var(--sans); }
.crab-h5 .scene-story .work-facts { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; margin: 20px 0; }
.crab-h5 .scene-story .work-facts > div { min-width: 0; }
.crab-h5 .scene-story .work-facts > div + div { padding-left: 16px; border-left: 1px solid #e7e4df; }
.crab-h5 .scene-story .work-facts small { margin-bottom: 5px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.crab-h5 .scene-story .work-facts strong { display: block; color: var(--ink); font: 650 17px/1.5 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .scene-story .work-facts > div + div strong { font-size: 15px; font-weight: 500; }
.crab-h5 .scene-story .work-offer :is(.work-primary,.work-secondary) { min-height: 48px; padding: 11px 14px; border-radius: 12px; font: 650 15px/1.5 var(--sans); white-space: normal; overflow-wrap: anywhere; box-shadow: none; }
.crab-h5 .scene-story .work-offer .work-primary { border: 1.4px solid var(--ink); background: var(--coral); color: var(--ink); }
.crab-h5 .scene-story .work-offer .work-secondary { border: 1px solid #dedbd5; background: transparent; color: var(--ink-2); }
.crab-h5 .scene-story .work-offer .work-primary:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
.crab-h5 .scene-story .work-offer :is(.work-primary,.work-secondary):focus-visible { outline: 3px solid #236caf; outline-offset: 3px; }
.crab-h5 .scene-story .work-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #e7e4df; }
.crab-h5 .scene-story .work-steps li { position: relative; min-width: 0; color: var(--ink-2); font: 400 12px/1.65 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .scene-story .work-steps li::before { display: grid; place-items: center; width: 23px; height: 23px; margin-bottom: 7px; border-radius: 50%; content: counter(step); color: #294e75; background: var(--blue-soft); font: 600 12px/1 var(--sans); }
.crab-h5 .scene-story .work-steps li:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: 31px; right: 0; height: 1px; background: #dedbd5; }
.crab-h5 .scene-story .work-offer .work-hint { margin: 16px 0 0; color: var(--ink-2); font: 400 13px/1.75 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .scene-story .work-offer .work-helpers { margin: 16px 0 0; font-size: 13px; line-height: 1.7; }
@media (max-width: 360px) {
  .crab-h5 .scene-story .work-offer { padding: 16px 14px; }
  .crab-h5 .scene-story .work-offer-heading { gap: 6px; }
  .crab-h5 .scene-story .work-offer-heading > span:first-child { gap: 5px; font-size: 15px; }
  .crab-h5 .scene-story .work-facts { gap: 12px; }
  .crab-h5 .scene-story .work-facts > div + div { padding-left: 12px; }
}
/* A small invitation to join the conversation; the reading surface stays still. */
.crab-h5 .scene-story .post-comments-empty { margin: 0; gap: 8px; padding: 18px 0 24px; }
.crab-h5 .comment-crab-invite { display: block; width: 160px; height: 124px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.crab-h5 .comment-crab-invite:focus-visible { outline: 3px solid #236caf; outline-offset: 4px; border-radius: 24px; }
.crab-h5 .comment-crab-art { position: relative; display: block; width: 100%; height: 100%; }
.crab-h5 .comment-crab-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
.crab-h5 .comment-crab-bubble { position: absolute; top: 1px; right: 0; width: 58px; height: 43px; transform: rotate(6deg); }
.crab-h5 .comment-crab-bubble svg { display: block; width: 100%; height: 100%; overflow: visible; }
.crab-h5 .comment-crab-actor { position: absolute; left: 14px; bottom: 7px; width: 116px; transform-origin: 50% 91%; }
.crab-h5 .comment-crab-actor .lid { display: none; }
.crab-h5 .comment-crab-actor,
.crab-h5 .comment-crab-actor .claw.r,
.crab-h5 .comment-crab-pincer { animation-duration: 8.4s; animation-timing-function: cubic-bezier(.4, 0, .25, 1); animation-iteration-count: infinite; animation-play-state: paused; }
.crab-h5 .comment-crab-actor { animation-name: comment-crab-lean; }
.crab-h5 .comment-crab-actor .claw.r { transform-box: view-box; transform-origin: 151px 84px; animation-name: comment-crab-wave; }
.crab-h5 .comment-crab-pincer { transform-box: view-box; transform-origin: 170px 66px; animation-name: comment-crab-wrist; }
.crab-h5 .post-comments-empty.scene-motion-enabled.scene-in-view .comment-crab-actor,
.crab-h5 .post-comments-empty.scene-motion-enabled.scene-in-view .claw.r,
.crab-h5 .post-comments-empty.scene-motion-enabled.scene-in-view .comment-crab-pincer { animation-play-state: running; }
.crab-h5 .scene-story .post-comments-empty strong { margin: 2px 0 0; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.6; }
.crab-h5 .scene-story .post-comments-empty p { max-width: 28em; margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
/* A little anticipation, two unequal waves, then a long relaxed pause. */
@keyframes comment-crab-wave {
  0%, 9%, 45%, 100% { transform: rotate(0); }
  13% { transform: rotate(3deg); }
  21% { transform: rotate(-14deg); }
  27% { transform: rotate(-6deg); }
  32% { transform: rotate(-11deg); }
  37% { transform: rotate(-4deg); }
}
@keyframes comment-crab-wrist {
  0%, 15%, 46%, 100% { transform: rotate(0); }
  23% { transform: rotate(-9deg); }
  29% { transform: rotate(5deg); }
  34% { transform: rotate(-6deg); }
  39% { transform: rotate(2deg); }
}
@keyframes comment-crab-lean {
  0%, 9%, 46%, 100% { transform: translate(0, 0) rotate(0); }
  14% { transform: translate(-.3px, .4px) rotate(-.5deg); }
  22%, 32% { transform: translate(.6px, -.5px) rotate(.8deg); }
  28% { transform: translate(.3px, -.2px) rotate(.4deg); }
  39% { transform: translate(0, .2px) rotate(-.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .crab-h5 .comment-crab-actor, .crab-h5 .comment-crab-actor .claw.r, .crab-h5 .comment-crab-pincer { animation: none; }
}
.crab-h5 .scene-story .post-comment { grid-template-columns: 28px minmax(0, 1fr) 44px; align-items: start; gap: 10px; padding: 12px 0; border-top: 0; }
.crab-h5 .scene-story .post-comment-thread + .post-comment-thread { border-top: .5px solid #201c2212; }
.crab-h5 .scene-story .post-comment-replies { margin: 0 0 2px 16px; padding-left: 10px; border-left: 1.5px solid #201c2218; }
.crab-h5 .scene-story .post-comment-replies .post-comment { grid-template-columns: 24px minmax(0, 1fr) 44px; padding: 10px 0; }
.crab-h5 .scene-story .comment-face { display: flex; width: 28px; overflow: hidden; }
.crab-h5 .scene-story .post-comment-replies .comment-face { width: 24px; }
.crab-h5 .scene-story .post-comment-avatar { flex: none; width: 28px; height: 28px; max-width: 28px; border: 0; box-shadow: inset 0 0 0 .5px #201c2214; background: var(--soft); }
.crab-h5 .scene-story .post-comment-replies .post-comment-avatar { width: 24px; height: 24px; max-width: 24px; }
.crab-h5 .scene-story .post-comment-meta { display: block; min-height: 18px; }
.crab-h5 .scene-story .post-comment-meta a { font-weight: 500; }
.crab-h5 .scene-story .post-comment-meta a:hover { text-decoration: none; }
.crab-h5 .scene-story .post-comment-meta strong { color: #8d8893; font-size: 13px; line-height: 1.35; font-weight: 500; }
.crab-h5 .scene-story .post-comment-reply-to { display: block; margin-top: 2px; color: #b3aeb6; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.crab-h5 .scene-story .post-comment p { margin-top: 3px; color: var(--ink); font-size: 14px; line-height: 1.55; }
.crab-h5 .scene-story .post-comment-foot { justify-content: flex-start; flex-wrap: wrap; gap: 10px; min-height: 18px; margin: 4px 0 0; }
.crab-h5 .scene-story .post-comment-foot time { color: #b3aeb6; font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.crab-h5 .scene-story .post-comment-translate,
.crab-h5 .scene-story .post-comment-reply { min-height: 44px; margin: -13px 0; padding: 0 2px; border: 0; background: transparent; color: #b3aeb6; box-shadow: none; font-size: 11px; font-weight: 500; text-decoration: none; }
.crab-h5 .scene-story .post-comment-translate[aria-busy="true"] { cursor: wait; }
.crab-h5 .scene-story .post-comment-like { align-self: start; flex-direction: column; gap: 0; min-width: 44px; min-height: 44px; margin-top: -8px; padding: 0; color: #c3bec6; }
.crab-h5 .scene-story .post-comment-like .post-icon { width: 18px; height: 18px; }
.crab-h5 .scene-story .post-comment-like.is-active { color: var(--coral); }
.crab-h5 .scene-story .post-comment-like.is-active .post-icon { fill: #ff7a6330; stroke: var(--coral); }
.crab-h5 .scene-story .post-comment-delete { min-height: 18px; padding: 0; color: #b3aeb6; font-size: 11px; font-weight: 500; text-decoration: none; }
.crab-h5 .scene-story .post-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px; padding: 7px 10px max(8px, env(safe-area-inset-bottom)); border-top: .5px solid #201c2214; background: var(--surface); box-shadow: none; }
.crab-h5 .scene-story .post-composer form { display: flex; flex-direction: column; min-width: 0; }
.crab-h5 .scene-story .post-composer-reply { align-items: center; min-height: 44px; gap: 6px; margin: 0 4px; }
.crab-h5 .scene-story .post-composer-reply span { color: #8d8893; font-size: 12px; }
.crab-h5 .scene-story .post-composer-reply-cancel { min-height: 44px; min-width: 44px; margin: 0; padding: 0 4px; color: #8d8893; font-size: 12px; font-weight: 500; }
.crab-h5 .scene-story .post-compose-row { position: relative; gap: 0; }
.crab-h5 .scene-story .post-compose-row textarea { height: 44px; min-height: 44px; padding: 12px 14px; border: 0; border-radius: 22px; background: #f3efe8; font-size: 16px; line-height: 20px; }
.crab-h5 .scene-story .post-compose-row textarea::placeholder { font-size: 14px; white-space: nowrap; }
.crab-h5 .scene-story .post-compose-row:has(.post-send:not(:disabled)) textarea,
.crab-h5 .scene-story .post-compose-row:has(.post-send[aria-busy="true"]) textarea { padding-right: 62px; }
.crab-h5 .scene-story .post-compose-row textarea:focus { border: 0; outline: none; background: #f3efe8; box-shadow: inset 0 0 0 1.5px #c45b4c; }
.crab-h5 .scene-story .post-send { position: absolute; right: 2px; bottom: 0; min-width: 44px; height: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 22px; background: transparent; box-shadow: none; color: #c45b4c; font-size: 13px; font-weight: 700; }
.crab-h5 .scene-story .post-send span { position: static; width: auto; height: auto; clip-path: none; white-space: nowrap; }
.crab-h5 .scene-story .post-send .post-icon { display: none; }
.crab-h5 .scene-story .post-send:disabled:not([aria-busy="true"]) { display: none; }
.crab-h5 .scene-story .post-send[aria-busy="true"] { opacity: .55; }
.crab-h5 .scene-story .post-send:focus-visible { outline: 2px solid var(--coral); outline-offset: -5px; }
.crab-h5 .scene-story .post-composer-actions { display: flex; flex: 0 0 auto; align-items: center; }
.crab-h5 .scene-story .post-composer-action { display: grid; grid-template-rows: 20px 12px; place-items: center; min-width: 44px; min-height: 44px; padding: 2px 2px 0; border: 0; background: transparent; color: var(--ink); font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; }
.crab-h5 .scene-story .post-composer-action .post-icon { width: 22px; height: 22px; }
.crab-h5 .scene-story .post-composer-action.is-active { color: var(--coral); }
.crab-h5 .scene-story .post-composer-action.is-active .post-icon { fill: #ff7a6330; stroke: var(--coral); }
@media (max-width: 359px) {
  .crab-h5 .scene-story .post-topbar { padding-inline: 2px 4px; gap: 4px; }
  .crab-h5 .scene-story .post-topbar-author { gap: 6px; }
  .crab-h5 .scene-story .post-topbar-author .post-author-info > span { display: none; }
  .crab-h5 .scene-story .post-topbar > .post-follow,
  .crab-h5 .scene-story .post-topbar > .post-edit { min-width: 48px; padding-inline: 8px; }
  .crab-h5 .scene-story .post-copy,
  .crab-h5 .scene-story .post-comments { padding-inline: 14px; }
  .crab-h5 .scene-story .post-composer { gap: 0; padding-inline: 8px; }
  .crab-h5 .scene-story .post-comment-replies { margin-left: 10px; padding-left: 8px; }
}

/* Ambient object motion pauses offscreen/when hidden; actions give one greeting. */
.crab-h5 .scene-ambient { animation: scene-object-bob 4.8s ease-in-out infinite; animation-play-state: paused; }
.crab-h5 .scene-motion-enabled.scene-in-view .scene-ambient { animation-play-state: running; }
.crab-h5 .scene-greeting .scene-crab { animation: scene-hello .75s ease-in-out; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view :is(.scene-weekend-crab,.scene-weekend-friend)[data-crab-action=walk]:not(.scene-greeting) .scene-crab { animation: weekend-crab-walk .35s ease-in-out infinite alternate; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view :is(.scene-weekend-crab,.scene-weekend-friend)[data-crab-action=walk] .crab-feet { animation: weekend-feet-walk .7s ease-in-out infinite alternate; }
.crab-h5 .scene-weekend-crab.scene-greeting .scene-crab { animation-duration: 1.4s; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=approach] .scene-weekend-friend .pupil { animation: weekend-friend-notice 3s ease-in-out 2; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=hello] .scene-weekend-crab .claw.r { animation: weekend-wave-right .7s ease-in-out 3 alternate; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=hello] .scene-weekend-friend .claw.l { animation: weekend-wave-left .7s .18s ease-in-out 3 alternate; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=chat] .scene-weekend-crab .pupil { transform: translate(5px,-1px); }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=chat] .scene-weekend-friend .pupil { transform: translate(-5px,1px); }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=chat] .scene-crab { animation: weekend-pair-chat 1.55s ease-in-out 2 alternate; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=chat] .scene-weekend-friend .scene-crab { animation-delay: .25s; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=highfive] .scene-weekend-crab .claw.r { animation: weekend-highfive-main 2s ease-in-out both; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=highfive] .scene-weekend-friend .claw.l { animation: weekend-highfive-friend 2s ease-in-out both; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=shy] .scene-weekend-crab .claw.r, .crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=scratch] .scene-weekend-crab .claw.r { animation: weekend-head-scratch .65s ease-in-out 4 alternate; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=shy] .scene-weekend-friend .scene-crab { animation: weekend-friend-shy 1.4s ease-in-out 2; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=laugh] .scene-crab { animation: weekend-pair-laugh 1.1s ease-in-out 2; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=laugh] .scene-weekend-friend .scene-crab { animation-delay: .22s; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=together] .scene-crab { animation: weekend-pair-sway 1.65s ease-in-out 2 alternate; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=together] .scene-weekend-friend .scene-crab { animation-delay: .18s; }
.crab-h5 .scene-weekend-head.scene-motion-enabled.scene-in-view .scene-weekend-track[data-pair-action=scratch] .scene-weekend-friend .pupil { transform: translate(-5px,1px); }
.crab-h5 .message-drift-scene.is-delivering .message-fetch-trip { animation: message-fetch-trip var(--dig-duration) linear both; }
.crab-h5 .message-drift-scene.is-delivering .message-dune-door { animation: message-dune-peek var(--dig-duration) linear both; }
.crab-h5 .message-drift-scene.is-delivering .message-dune-front { animation: message-dune-rustle var(--dig-duration) ease-out both; }
.crab-h5 .message-drift-scene.is-delivering .message-dig-sand-left { animation: message-dig-left var(--dig-duration) linear both; }
.crab-h5 .message-drift-scene.is-delivering .message-dig-sand-right { animation: message-dig-right var(--dig-duration) linear both; }
.crab-h5 .message-drift-scene.is-delivering .message-water-bottle { animation: message-bottle-surf var(--fetch-duration) linear both; }
.crab-h5 .message-drift-scene.is-delivering .message-water-bottle > .message-bottle-glass { animation: message-bottle-roll var(--fetch-duration) linear both; }
.crab-h5 .message-drift-scene.is-delivering :is(.message-bottle-wake,.message-bottle-waterline) { animation: message-bottle-contact var(--fetch-duration) linear both; }
.crab-h5 .message-drift-scene.is-delivering .message-water-bottle .message-bottle-reflection { animation: message-bottle-reflection var(--fetch-duration) ease-in-out both; }
.crab-h5 .message-drift-scene.is-delivering .message-fetch-cargo { animation: message-bottle-handover var(--fetch-duration) linear both; }
.crab-h5 .message-drift-scene.is-delivering .message-fetch-body .claw.l { animation: message-pincer-reach var(--dig-duration) ease-in-out both; }
.crab-h5 .message-drift-scene.is-delivering .message-fetch-body .claw.r { animation: message-pincer-dig var(--dig-duration) ease-in-out both; }
.crab-h5 .message-drift-scene.is-delivering .message-fetch-body .crab-feet { animation: message-fetch-feet .075s 1.04s ease-in-out 6 alternate; }
.crab-h5 .message-drift-scene.is-delivering .message-fetch-scene * { animation-play-state: paused; }
.crab-h5 .message-drift-scene.is-delivering.scene-motion-enabled.scene-in-view .message-fetch-scene * { animation-play-state: running; }
.crab-h5 .message-drift-scene.is-delivered.scene-motion-enabled.scene-in-view .message-fetch-cargo > g { animation-play-state: running; }
.crab-h5 .message-read-done { animation: message-stamp-in .36s cubic-bezier(.2,.9,.25,1.18) both; }
@keyframes scene-object-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes scene-hello { 0%,100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 -7px; rotate: -7deg; } 60% { translate: 0 -3px; rotate: 7deg; } }
@keyframes weekend-crab-walk { from { translate: 0 .5px; rotate: -.5deg; } to { translate: 0 -1.5px; rotate: .5deg; } }
@keyframes weekend-feet-walk { from { transform: translateX(-2px) skewX(2deg); } to { transform: translateX(2px) skewX(-2deg); } }
@keyframes weekend-friend-notice { 0%,20%,100% { transform: translate(0); } 34%,82% { transform: translate(-5px,1px); } }
@keyframes weekend-wave-right { from { transform: rotate(-5deg); } to { transform: rotate(-34deg) translate(-5px,-7px); } }
@keyframes weekend-wave-left { from { transform: rotate(5deg); } to { transform: rotate(34deg) translate(5px,-7px); } }
@keyframes weekend-pair-chat { from { translate: 0 0; rotate: -.6deg; } to { translate: 0 -2px; rotate: .6deg; } }
@keyframes weekend-highfive-main { 0%,20%,100% { transform: rotate(0); } 48%,70% { transform: rotate(-30deg) translate(8px,-5px); } }
@keyframes weekend-highfive-friend { 0%,20%,100% { transform: rotate(0); } 48%,70% { transform: rotate(30deg) translate(-8px,-5px); } }
@keyframes weekend-head-scratch { from { transform: rotate(-16deg) translate(-3px,-4px); } to { transform: rotate(-50deg) translate(-12px,-17px); } }
@keyframes weekend-friend-shy { 0%,100% { translate: 0 0; rotate: 0; } 35% { translate: 0 -2px; rotate: -3deg; } 68% { translate: 0 -1px; rotate: 3deg; } }
@keyframes weekend-pair-laugh { 0%,100% { translate: 0 0; scale: 1; } 38% { translate: 0 -7px; scale: .98 1.02; } 68% { translate: 0 1px; scale: 1.02 .98; } }
@keyframes weekend-pair-sway { from { translate: -1px 0; rotate: -1deg; } to { translate: 1px -2px; rotate: 1deg; } }
@keyframes message-fetch-trip { 0%,51% { transform: translate(312px,95px); opacity: 0; } 52% { transform: translate(312px,95px); opacity: 1; } 58% { transform: translate(309px,69px); opacity: 1; } 64% { transform: translate(304px,46px); opacity: 1; } 82%,100% { transform: translate(236px,43px); opacity: 1; } }
@keyframes message-pincer-reach { 0%,51%,65%,81% { transform: rotate(0); } 54%,61% { transform: rotate(-29deg) translate(-3px,3px); } 57%,63% { transform: rotate(17deg); } 85% { transform: rotate(-18deg); } 89%,100% { transform: rotate(0); } }
@keyframes message-pincer-dig { 0%,51%,65%,100% { transform: rotate(0); } 54%,61% { transform: rotate(-17deg); } 57%,63% { transform: rotate(29deg) translate(3px,3px); } }
@keyframes message-fetch-feet { from { transform: translateX(-2px) rotate(-3deg); } to { transform: translateX(2px) rotate(3deg); } }
@keyframes message-dune-peek { 0%,51%,68%,100% { opacity: 0; } 55%,63% { opacity: .7; } }
@keyframes message-dune-rustle { 0%,51%,68%,100% { transform: translate(0); } 55%,62% { transform: translate(-2px,1px); } 58%,65% { transform: translate(2px,-1px); } }
@keyframes message-dig-left { 0%,51% { opacity: 0; transform: translate(0); } 55% { opacity: 1; transform: translate(-6px,-6px); } 60% { opacity: 0; transform: translate(-16px,2px); } 60.01% { opacity: 0; transform: translate(0); } 64% { opacity: 1; transform: translate(-10px,-9px); } 71%,100% { opacity: 0; transform: translate(-22px,5px); } }
@keyframes message-dig-right { 0%,54% { opacity: 0; transform: translate(0); } 58% { opacity: 1; transform: translate(6px,-8px); } 63% { opacity: 0; transform: translate(16px,3px); } 63.01% { opacity: 0; transform: translate(0); } 67% { opacity: 1; transform: translate(10px,-7px); } 74%,100% { opacity: 0; transform: translate(21px,4px); } }
@keyframes message-bottle-surf {
  0.000000% { opacity: 1; transform: translate(104.000000px,26.000000px); }
  1.390469% { opacity: 1; transform: translate(104.020881px,25.975572px); }
  2.780938% { opacity: 1; transform: translate(104.083523px,25.907487px); }
  4.171406% { opacity: 1; transform: translate(104.187927px,25.803544px); }
  5.561875% { opacity: 1; transform: translate(104.334092px,25.671542px); }
  6.952344% { opacity: 1; transform: translate(104.522019px,25.519281px); }
  8.342813% { opacity: 1; transform: translate(104.751707px,25.354560px); }
  9.733281% { opacity: 1; transform: translate(105.023157px,25.185178px); }
  11.123750% { opacity: 1; transform: translate(105.336368px,25.018935px); }
  12.514219% { opacity: 1; transform: translate(105.691341px,24.863628px); }
  13.904688% { opacity: 1; transform: translate(106.088076px,24.727058px); }
  15.295156% { opacity: 1; transform: translate(106.526571px,24.617024px); }
  15.555556% { opacity: 1; transform: translate(106.613333px,24.600000px); }
  16.666667% { opacity: 1; transform: translate(107.000000px,24.518637px); }
  16.685625% { opacity: 1; transform: translate(107.006828px,24.517063px); }
  18.076094% { opacity: 1; transform: translate(107.526972px,24.386890px); }
  19.466563% { opacity: 1; transform: translate(108.089915px,24.232711px); }
  20.857031% { opacity: 1; transform: translate(108.702600px,24.062016px); }
  22.247500% { opacity: 1; transform: translate(109.371966px,23.882296px); }
  23.637969% { opacity: 1; transform: translate(110.104956px,23.701042px); }
  25.028438% { opacity: 1; transform: translate(110.908508px,23.525744px); }
  26.418906% { opacity: 1; transform: translate(111.789565px,23.363894px); }
  27.809375% { opacity: 1; transform: translate(112.755068px,23.222981px); }
  29.199844% { opacity: 1; transform: translate(113.811957px,23.110498px); }
  30.590313% { opacity: 1; transform: translate(114.967173px,23.033934px); }
  31.980781% { opacity: 1; transform: translate(116.227656px,23.000780px); }
  32.222222% { opacity: 1; transform: translate(116.457765px,23.000000px); }
  33.371250% { opacity: 1; transform: translate(117.600348px,23.047991px); }
  34.444444% { opacity: 1; transform: translate(118.740932px,23.175926px); }
  34.761719% { opacity: 1; transform: translate(119.092191px,23.228366px); }
  35.555556% { opacity: 1; transform: translate(120.000000px,23.387500px); }
  36.152188% { opacity: 1; transform: translate(120.716079px,23.532411px); }
  37.542656% { opacity: 1; transform: translate(122.518924px,23.949239px); }
  38.888889% { opacity: 1; transform: translate(124.429980px,24.450000px); }
  38.933125% { opacity: 1; transform: translate(124.495358px,24.467962px); }
  40.323594% { opacity: 1; transform: translate(126.628155px,25.077691px); }
  41.714063% { opacity: 1; transform: translate(128.900091px,25.767540px); }
  43.104531% { opacity: 1; transform: translate(131.293941px,26.526620px); }
  44.495000% { opacity: 1; transform: translate(133.792480px,27.344044px); }
  45.555556% { opacity: 1; transform: translate(135.757910px,28.000000px); }
  45.885469% { opacity: 1; transform: translate(136.378484px,28.212519px); }
  47.275938% { opacity: 1; transform: translate(139.034727px,29.206237px); }
  48.666406% { opacity: 1; transform: translate(141.743985px,30.344734px); }
  50.056875% { opacity: 1; transform: translate(144.489033px,31.609671px); }
  51.447344% { opacity: 1; transform: translate(147.252647px,32.982705px); }
  52.777778% { opacity: 1; transform: translate(149.898425px,34.380731px); }
  52.837813% { opacity: 1; transform: translate(150.017601px,34.445495px); }
  53.333333% { opacity: 1; transform: translate(151.000000px,34.985000px); }
  54.228281% { opacity: 1; transform: translate(152.781677px,35.979701px); }
  55.618750% { opacity: 1; transform: translate(155.578143px,37.566982px); }
  57.009219% { opacity: 1; transform: translate(158.389246px,39.188996px); }
  58.399688% { opacity: 1; transform: translate(161.192524px,40.827404px); }
  59.790156% { opacity: 1; transform: translate(163.965513px,42.463862px); }
  61.111111% { opacity: 1; transform: translate(166.551359px,44.000000px); }
  61.180625% { opacity: 1; transform: translate(166.685753px,44.080188px); }
  62.571094% { opacity: 1; transform: translate(169.330780px,45.722276px); }
  63.961562% { opacity: 1; transform: translate(171.878130px,47.410152px); }
  65.352031% { opacity: 1; transform: translate(174.305343px,49.104591px); }
  66.742500% { opacity: 1; transform: translate(176.589956px,50.766367px); }
  67.777778% { opacity: 1; transform: translate(178.185012px,51.959128px); }
  68.132969% { opacity: 1; transform: translate(178.709506px,52.356255px); }
  68.333333% { opacity: 1; transform: translate(179.000000px,52.577119px); }
  69.523438% { opacity: 1; transform: translate(180.720935px,53.835029px); }
  70.913906% { opacity: 1; transform: translate(182.719249px,55.163464px); }
  72.304375% { opacity: 1; transform: translate(184.653576px,56.302335px); }
  73.333333% { opacity: 1; transform: translate(186.012500px,57.000000px); }
  73.694844% { opacity: 1; transform: translate(186.470688px,57.209549px); }
  75.000000% { opacity: 1; transform: translate(188.022222px,57.781578px); }
  75.085312% { opacity: 1; transform: translate(188.117355px,57.809490px); }
  76.475781% { opacity: 1; transform: translate(189.540348px,58.116456px); }
  77.866250% { opacity: 1; transform: translate(190.686439px,58.175680px); }
  78.333333% { opacity: 1; transform: translate(191.000000px,58.147889px); }
  79.256719% { opacity: 1; transform: translate(191.526617px,58.032394px); }
  79.444444% { opacity: 1; transform: translate(191.620816px,58.000000px); }
  80.647188% { opacity: 1; transform: translate(192.131579px,57.610208px); }
  82.037656% { opacity: 1; transform: translate(192.548903px,56.824813px); }
  82.222222% { opacity: 1; transform: translate(192.592500px,56.701968px); }
  83.428125% { opacity: 1; transform: translate(192.821787px,55.840545px); }
  84.818594% { opacity: 1; transform: translate(192.993424px,54.825076px); }
  86.111111% { opacity: 1; transform: translate(193.100000px,54.000000px); }
  86.209062% { opacity: 1; transform: translate(193.107166px,53.945722px); }
  87.222222% { opacity: 1; transform: translate(193.187426px,53.445763px); }
  87.599531% { opacity: 1; transform: translate(193.215666px,53.298846px); }
  88.990000% { opacity: 1; transform: translate(193.272531px,53.034442px); }
  89%,100% { opacity: 0; transform: translate(193.272531px,53.034442px); }
}
@keyframes message-bottle-roll {
  0.000000% { transform: rotate(-4.000000deg); }
  1.390469% { transform: rotate(-3.956153deg); }
  2.780938% { transform: rotate(-3.832973deg); }
  4.171406% { transform: rotate(-3.643003deg); }
  5.561875% { transform: rotate(-3.398786deg); }
  6.952344% { transform: rotate(-3.112865deg); }
  8.342813% { transform: rotate(-2.797781deg); }
  9.733281% { transform: rotate(-2.466079deg); }
  11.123750% { transform: rotate(-2.130300deg); }
  12.514219% { transform: rotate(-1.802988deg); }
  13.904688% { transform: rotate(-1.496684deg); }
  15.295156% { transform: rotate(-1.223933deg); }
  15.555556% { transform: rotate(-1.177600deg); }
  16.666667% { transform: rotate(-1.000000deg); }
  16.685625% { transform: rotate(-0.997266deg); }
  18.076094% { transform: rotate(-0.774369deg); }
  19.466563% { transform: rotate(-0.514012deg); }
  20.857031% { transform: rotate(-0.226070deg); }
  22.247500% { transform: rotate(0.079582deg); }
  23.637969% { transform: rotate(0.393069deg); }
  25.028438% { transform: rotate(0.704514deg); }
  26.418906% { transform: rotate(1.004042deg); }
  27.809375% { transform: rotate(1.281778deg); }
  29.199844% { transform: rotate(1.527846deg); }
  30.590313% { transform: rotate(1.732371deg); }
  31.980781% { transform: rotate(1.885477deg); }
  32.222222% { transform: rotate(1.906094deg); }
  33.371250% { transform: rotate(1.977288deg); }
  34.444444% { transform: rotate(2.000000deg); }
  34.761719% { transform: rotate(1.996087deg); }
  35.555556% { transform: rotate(1.953229deg); }
  36.152188% { transform: rotate(1.891689deg); }
  37.542656% { transform: rotate(1.660186deg); }
  38.888889% { transform: rotate(1.333946deg); }
  38.933125% { transform: rotate(1.321735deg); }
  40.323594% { transform: rotate(0.896489deg); }
  41.714063% { transform: rotate(0.404607deg); }
  43.104531% { transform: rotate(-0.133757deg); }
  44.495000% { transform: rotate(-0.698447deg); }
  45.555556% { transform: rotate(-1.134374deg); }
  45.885469% { transform: rotate(-1.269307deg); }
  47.275938% { transform: rotate(-1.826181deg); }
  48.666406% { transform: rotate(-2.348913deg); }
  50.056875% { transform: rotate(-2.817348deg); }
  51.447344% { transform: rotate(-3.211328deg); }
  52.777778% { transform: rotate(-3.500000deg); }
  52.837813% { transform: rotate(-3.510744deg); }
  53.333333% { transform: rotate(-3.594737deg); }
  54.228281% { transform: rotate(-3.726159deg); }
  55.618750% { transform: rotate(-3.883025deg); }
  57.009219% { transform: rotate(-3.989467deg); }
  58.399688% { transform: rotate(-4.053609deg); }
  59.790156% { transform: rotate(-4.083577deg); }
  61.111111% { transform: rotate(-4.087791deg); }
  61.180625% { transform: rotate(-4.087494deg); }
  62.571094% { transform: rotate(-4.073486deg); }
  63.961562% { transform: rotate(-4.049677deg); }
  65.352031% { transform: rotate(-4.024193deg); }
  66.742500% { transform: rotate(-4.005157deg); }
  67.777778% { transform: rotate(-4.000000deg); }
  68.132969% { transform: rotate(-4.003573deg); }
  68.333333% { transform: rotate(-4.008830deg); }
  69.523438% { transform: rotate(-4.092479deg); }
  70.913906% { transform: rotate(-4.318443deg); }
  72.304375% { transform: rotate(-4.705015deg); }
  73.333333% { transform: rotate(-5.108330deg); }
  73.694844% { transform: rotate(-5.275744deg); }
  75.000000% { transform: rotate(-6.000000deg); }
  75.085312% { transform: rotate(-6.054392deg); }
  76.475781% { transform: rotate(-7.106457deg); }
  77.866250% { transform: rotate(-8.410700deg); }
  78.333333% { transform: rotate(-8.890200deg); }
  79.256719% { transform: rotate(-9.880107deg); }
  79.444444% { transform: rotate(-10.086400deg); }
  80.647188% { transform: rotate(-11.427663deg); }
  82.037656% { transform: rotate(-12.966352deg); }
  82.222222% { transform: rotate(-13.165275deg); }
  83.428125% { transform: rotate(-14.409160deg); }
  84.818594% { transform: rotate(-15.669071deg); }
  86.111111% { transform: rotate(-16.600000deg); }
  86.209062% { transform: rotate(-16.660688deg); }
  87.222222% { transform: rotate(-17.321049deg); }
  87.599531% { transform: rotate(-17.548207deg); }
  88.990000% { transform: rotate(-18.000000deg); }
  89%,100% { transform: rotate(-18deg); }
}
@keyframes message-bottle-contact {
  0.000000% { opacity: 0.400000; }
  1.390469% { opacity: 0.406154; }
  2.780938% { opacity: 0.423337; }
  4.171406% { opacity: 0.449634; }
  5.561875% { opacity: 0.483129; }
  6.952344% { opacity: 0.521904; }
  8.342813% { opacity: 0.564044; }
  9.733281% { opacity: 0.607633; }
  11.123750% { opacity: 0.650754; }
  12.514219% { opacity: 0.691492; }
  13.904688% { opacity: 0.727929; }
  15.295156% { opacity: 0.758150; }
  15.555556% { opacity: 0.762963; }
  16.666667% { opacity: 0.780000; }
  16.685625% { opacity: 0.780239; }
  18.076094% { opacity: 0.797427; }
  19.466563% { opacity: 0.813929; }
  20.857031% { opacity: 0.829686; }
  22.247500% { opacity: 0.844639; }
  23.637969% { opacity: 0.858730; }
  25.028438% { opacity: 0.871900; }
  26.418906% { opacity: 0.884090; }
  27.809375% { opacity: 0.895241; }
  29.199844% { opacity: 0.905295; }
  30.590313% { opacity: 0.914192; }
  31.980781% { opacity: 0.921874; }
  32.222222% { opacity: 0.923080; }
  33.371250% { opacity: 0.928282; }
  34.444444% { opacity: 0.932320; }
  34.761719% { opacity: 0.933358; }
  35.555556% { opacity: 0.935635; }
  36.152188% { opacity: 0.937041; }
  37.542656% { opacity: 0.939275; }
  38.888889% { opacity: 0.940000; }
  38.933125% { opacity: 0.940000; }
  40.323594% { opacity: 0.939761; }
  41.714063% { opacity: 0.939112; }
  43.104531% { opacity: 0.938114; }
  44.495000% { opacity: 0.936824; }
  45.555556% { opacity: 0.935680; }
  45.885469% { opacity: 0.935301; }
  47.275938% { opacity: 0.933604; }
  48.666406% { opacity: 0.931792; }
  50.056875% { opacity: 0.929923; }
  51.447344% { opacity: 0.928057; }
  52.777778% { opacity: 0.926328; }
  52.837813% { opacity: 0.926252; }
  53.333333% { opacity: 0.925635; }
  54.228281% { opacity: 0.924567; }
  55.618750% { opacity: 0.923061; }
  57.009219% { opacity: 0.921793; }
  58.399688% { opacity: 0.920821; }
  59.790156% { opacity: 0.920204; }
  61.111111% { opacity: 0.920000; }
  61.180625% { opacity: 0.919994; }
  62.571094% { opacity: 0.917442; }
  63.961562% { opacity: 0.910807; }
  65.352031% { opacity: 0.900884; }
  66.742500% { opacity: 0.888468; }
  67.777778% { opacity: 0.878077; }
  68.132969% { opacity: 0.874354; }
  68.333333% { opacity: 0.872227; }
  69.523438% { opacity: 0.859337; }
  70.913906% { opacity: 0.844212; }
  72.304375% { opacity: 0.829774; }
  73.333333% { opacity: 0.820000; }
  73.694844% { opacity: 0.815160; }
  75.000000% { opacity: 0.773975; }
  75.085312% { opacity: 0.770143; }
  76.475781% { opacity: 0.692213; }
  77.866250% { opacity: 0.593312; }
  78.333333% { opacity: 0.557471; }
  79.256719% { opacity: 0.485383; }
  79.444444% { opacity: 0.470771; }
  80.647188% { opacity: 0.380369; }
  82.037656% { opacity: 0.290212; }
  82.222222% { opacity: 0.280000; }
  83.428125% { opacity: 0.201499; }
  84.818594% { opacity: 0.099508; }
  86.111111% { opacity: 0.024966; }
  86.209062% { opacity: 0.020991; }
  87.222222% { opacity: 0.000000; }
  87.599531% { opacity: 0.000000; }
  88.990000% { opacity: 0.000000; }
  89%,100% { opacity: 0; }
}
@keyframes message-bottle-reflection { 0% { opacity: .6; } 26% { opacity: .95; } 60% { opacity: .72; } 89%,100% { opacity: .8; } }
@keyframes message-bottle-handover { 0%,88.99% { opacity: 0; } 89%,100% { opacity: 1; } }
@keyframes message-carried-bottle-sway { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(-21deg); } }
@keyframes nav-hole-dig { 0%,100% { transform: translateY(0) scale(1.04); } 48% { transform: translateY(1px) scale(1.07,1.02); } }
@keyframes nav-hole-receive { 0%,100% { transform: translateY(0) scale(1.04); } 55% { transform: translateY(1px) scale(1.06,.98); } }
@keyframes nav-dune-open { 0%,25% { opacity: 0; transform: scale(.5,.15); } 65% { opacity: .55; transform: scale(.8,.7); } 100% { opacity: .88; transform: scale(1); } }
@keyframes nav-dune-close { 0%,55% { opacity: .88; transform: scale(1); } 100% { opacity: 0; transform: scale(.8,.12); } }
@keyframes nav-dune-sand-left { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 22% { opacity: 1; } 65% { opacity: .9; transform: translate(-9px,-8px) scale(1); } 100% { opacity: 0; transform: translate(-14px,1px) scale(.75); } }
@keyframes nav-dune-sand-right { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 22% { opacity: 1; } 65% { opacity: .9; transform: translate(9px,-7px) scale(1); } 100% { opacity: 0; transform: translate(14px,1px) scale(.75); } }
@keyframes nav-crab-dig-pose { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(1px) rotate(2deg); } }
@keyframes nav-crab-enter-hole { 0% { transform: translateY(0); } 28% { transform: translateY(7px) rotate(-2deg); } 68% { transform: translateY(28px) rotate(1deg); } 100% { transform: translateY(52px); } }
@keyframes nav-crab-dig { from { transform: translateX(-2px) rotate(-5deg); } to { transform: translateX(2px) rotate(5deg); } }
@keyframes nav-claw-scrape-left { 0%,100% { transform: translate(1px,-3px) rotate(-24deg); } 50% { transform: translate(-6px,7px) rotate(22deg); } }
@keyframes nav-claw-scrape-right { 0%,100% { transform: translate(6px,7px) rotate(-22deg); } 50% { transform: translate(-1px,-3px) rotate(24deg); } }
@keyframes message-callout-in { from { opacity: 0; transform: translateY(8px) rotate(-6deg) scale(.85); } to { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); } }
@keyframes message-letter-arrive { from { opacity: 0; transform: translateX(18px) rotate(1deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes message-stamp-in { from { opacity: 0; transform: scale(.78) rotate(-6deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@media (max-width: 360px) {
  .crab-h5 .scene-stage h1 { font-size: 26px; }
  .crab-h5 .scene-eyebrow { font-size: 9px; letter-spacing: .6px; }
  .crab-h5 .scene-weekend-head { margin-inline: -14px; padding-inline: 14px; }
  .crab-h5 .scene-planner-head { margin-inline: -14px; padding-inline: 14px; min-height: 142px; }
  .crab-h5 .scene-planner-head > div:first-child { max-width: 66%; }
  .crab-h5 .scene-planner-head h1 { font-size: 22px; }
  .crab-h5 .scene-planner-head p { max-width: 188px; font-size: 11px; }
  .crab-h5 .scene-planner-objects { width: 108px; }
  .crab-h5 .scene-planner-objects .scene-drawing { width: 48px; right: 36px; }
  .crab-h5 .scene-planner-crab { width: 64px; }
  .crab-h5 .schedule-ticket { grid-template-columns: 46px minmax(0,1fr) auto; gap: 8px; padding: 10px 8px 10px 8px; }
  .crab-h5 .schedule-day-tile { width: 44px; min-height: 50px; }
  .crab-h5 .schedule-ticket-copy h3 { font-size: 15px; }
  .crab-h5 .scene-weekend-track { left: 8px; right: 8px; }
  .crab-h5 .scene-weekend-crab { width: 61px; }
  .crab-h5 .scene-weekend-friend { width: 59px; }
  .crab-h5 .scene-weekend-dialogue { width: 148px; }
  .crab-h5 .scene-weekend-dialogue b { font-size: 8px; }
  .crab-h5 .message-drift-scene { padding-inline: 18px; }
  .crab-h5 .message-delivery-art { margin-inline: -18px; }
  .crab-h5 .message-thread { grid-template-columns: 44px minmax(0,1fr) auto; gap: 8px; padding: 12px 10px; }
  .crab-h5 .message-thread .message-thread-art { width: 36px; }
  .crab-h5 .message-thread-copy strong { font-size: 15px; }
  .crab-h5 .message-letter { grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; padding: 14px 12px; }
  .crab-h5 .message-letter-symbol .ui-icon { width: 24px; height: 24px; }
  .crab-h5 .message-letter-title { font-size: 15px; }
  .crab-h5 .scene-mail-head { padding: 23px 16px; min-height: 201px; }
  .crab-h5 .scene-mail-head > .scene-stamp { right: 9px; padding: 5px; }
  .crab-h5 .scene-mail-copy { max-width: 86%; }
  .crab-h5 .scene-mail-copy h1 { font-size: 25px; }
  .crab-h5 .scene-mail-copy p { max-width: 203px; }
  .crab-h5 .scene-resident-pass { grid-template-columns: 62px minmax(0,1fr); padding: 52px 14px 18px; gap: 13px; }
  .crab-h5 .scene-resident-pass .social-profile-avatar { width: 61px; height: 77px; }
  .crab-h5 .scene-resident-pass h1 { font-size: 22px; }
  .crab-h5 .scene-pocket-links { gap: 7px; }
  .crab-h5 .scene-pocket-links > button { min-height: 87px; }
  .crab-h5 .profile-cove { padding-inline: 16px; }
  .crab-h5 .profile-brand { font-size: 15px; }
  .crab-h5 .profile-cove > .profile-cove-crab { width: 84px; right: 14px; bottom: 13px; }
  .crab-h5 .profile-reaction-dots { right: 66px; bottom: 62px; }
  .crab-h5 .profile-identity { grid-template-columns: 100px minmax(0,1fr); gap: 10px; }
  .crab-h5 .profile-avatar-frame { width: 100px; height: 100px; }
  .crab-h5 .profile-cove-avatar .social-profile-avatar { width: 84px; height: 84px; }
  .crab-h5 .profile-cove h1 { font-size: 27px; }
  .crab-h5 .profile-cove .profile-bio { max-width: 100%; font-size: 14px; }
  .crab-h5 .profile-cove-copy { padding-top: 11px; }
  .crab-h5 .profile-seabed { padding-left: 4px; }
  .crab-h5 .profile-seabed-midground { margin-right: 104px; }
  .crab-h5 .profile-seabed-keepsakes { bottom: 1px; }
  .crab-h5 .profile-seabed-edge { right: -10px; width: 58px; height: 55px; }
  .crab-h5 .profile-edit-slot { max-width: calc(100% - 104px); }
  .crab-h5 .profile-water-ripples { right: 88px; width: 60px; }
  .crab-h5 .profile-treasure-strip { margin-inline: 14px; }
  .crab-h5 .profile-treasure-strip strong { font-size: 20px; }
  .crab-h5 .profile-treasure-strip button > span { flex-direction: column; gap: 2px; font-size: 11px; }
  .crab-h5 .profile-journal { padding-inline: 16px; }
  .crab-h5 .scene-compose-objects { width: 102px; right: -5px; scale: .86; transform-origin: right center; }
  .crab-h5 .scene-compose-head > div:first-child { max-width: 71%; }
  .crab-h5 .scene-compose-head h1 { font-size: 28px; }
  .crab-h5 .scene-postcard .scene-photo-sheet, .crab-h5 .scene-postcard .scene-writing-sheet { padding-inline: 14px; }
  .crab-h5 .scene-postcard .type-tabs { gap: 5px; }
  .crab-h5 .scene-type-mark { width: 20px; }
  .crab-h5 .scene-collection-head { gap: 8px; }
  .crab-h5 .scene-collection-head h1 { font-size: 24px; }
  .crab-h5 .scene-keepsakes { width: 60px; scale: .86; transform-origin: right center; }
  .crab-h5 .scene-lookout-head h1 { font-size: 23px; }
  .crab-h5 .scene-lookout-head > .scene-drawing { width: 55px; }
  .crab-h5 .scene-signpost { right: -5px; scale: .86; transform-origin: right center; }
  .crab-h5 .scene-destination-head h1 { font-size: 30px; }
  .crab-h5 .scene-edit-head > .scene-drawing, .crab-h5 .scene-settings-head > .scene-drawing { width: 64px; right: 0; }
  .crab-h5 .scene-speech-objects > span:not(.scene-crab) { left: 4px; font-size: 22px; padding-inline: 19px; }
  .crab-h5 .scene-speech-objects > span:nth-child(2) { left: 105px; }
  .crab-h5 .scene-speech-objects .scene-crab { width: 63px; }
  .crab-h5 .scene-help-objects { right: -7px; scale: .86; transform-origin: right center; }
  .crab-h5 .scene-help-head > div:first-child { max-width: 73%; }
  .crab-h5 .scene-help-head p { max-width: 185px; }
  .crab-h5 .scene-receipt-stack { scale: .85; right: 0; transform-origin: right center; }
  .crab-h5 .scene-harbor-note { padding-inline: 15px; }
  .crab-h5 .scene-harbor-note .scene-note-seal { width: 41px; }
}
html:not([lang^=zh]) .crab-h5 .scene-stage h1 { font-size: 27px; line-height: 1.2; }
html:not([lang^=zh]) .crab-h5 .scene-mail-copy { max-width: 76%; }
html:not([lang^=zh]) .crab-h5 .scene-collection-head h1 { font-size: 25px; }
html:not([lang^=zh]) .crab-h5 .scene-collection-head .scene-eyebrow { font-size: 8px; }
html:not([lang^=zh]) .crab-h5 .scene-lookout-head h1 { font-size: 24px; }
@media (prefers-reduced-motion: reduce) {
  .crab-h5 .scene-ambient, .crab-h5 .scene-greeting .scene-crab, .crab-h5 .scene-weekend-crab, .crab-h5 .scene-weekend-crab *, .crab-h5 .scene-weekend-friend, .crab-h5 .scene-weekend-friend *, .crab-h5 .scene-weekend-dialogue, .crab-h5 .message-drift-bottle, .crab-h5 .message-drift-hole, .crab-h5 .message-drift-hole-front, .crab-h5 .message-drift-crab, .crab-h5 .message-drift-crab *, .crab-h5 .message-drift-waves, .crab-h5 .message-drift-callout, .crab-h5 .message-inbox-content, .crab-h5 .message-letter, .crab-h5 .message-letter-full, .crab-h5 .message-thread, .crab-h5 .message-read-done, .crab-h5 .message-sand-hole-nav { animation: none !important; transition: none !important; }
}

/* A quiet gradient profile is available when the default underwater scene is disabled. */
.crab-h5 .profile-theme-simple { --profile-gradient-top: #41454D; --profile-gradient-bottom: #756A54; }
.crab-h5 .profile-simple-surface { background: linear-gradient(180deg, var(--profile-gradient-top), var(--profile-gradient-bottom)); }
.crab-h5 .profile-theme-simple .profile-cove { padding-bottom: 12px; background: transparent; }
.crab-h5 .profile-theme-simple .profile-brand,
.crab-h5 .profile-theme-simple .profile-brand i,
.crab-h5 .profile-theme-simple .profile-cove h1 { color: var(--surface); }
.crab-h5 .profile-theme-simple .profile-cove h1 > span { padding: 0; background: none; }
.crab-h5 .profile-theme-simple .profile-cove .profile-bio { color: #F3EBDD; }
.crab-h5 .profile-theme-simple .profile-identity { margin-top: 24px; }
.crab-h5 .profile-theme-simple .profile-cove-avatar .social-profile-avatar { box-shadow: none; }
.crab-h5 .profile-simple-edit { min-height: 44px; max-width: 54%; padding: 9px 14px; border: 1px solid #FFFEFB70; border-radius: 22px; background: #FFFEFB14; color: var(--surface); font: 600 13px/1.5 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .profile-simple-edit:focus-visible { outline: 2px solid var(--surface); outline-offset: 3px; }
.crab-h5 .profile-simple-edit:active { background: #FFFEFB28; }
.crab-h5 .profile-theme-simple .profile-treasure-strip { margin: 0; padding: 4px 18px 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.crab-h5 .profile-theme-simple .profile-treasure-strip button { color: var(--surface); }
.crab-h5 .profile-theme-simple .profile-treasure-strip button > span { color: #F3EBDD; }
.crab-h5 .profile-theme-simple .profile-treasure-strip button + button::before { border-color: #FFFEFB38; }
.crab-h5 .profile-theme-simple .profile-treasure-strip button:active { background: #FFFEFB14; }
.crab-h5 .profile-theme-simple .profile-treasure-strip button:focus-visible { outline-color: var(--surface); }
.crab-h5 .profile-theme-simple .profile-mark { display: none; }