
.aw-main {
  --aw-deep: #061A1D;
  --aw-water: #0B3236;
  --aw-water-hi: #13545A;
  --aw-enamel: #E9EDE8;
  --aw-enamel-edge: #BFC7C3;
  --aw-ink: #15191A;
  --aw-ink-sub: #3A4446;
  --aw-teal: #0E5652;
  --aw-coral: #B3401A;
  --aw-orange: #EE6A1F;
  --aw-max: calc(var(--k-max) + var(--k-gutter) * 2);
  display: block; overflow: clip;
  padding-bottom: var(--k-sp-3);
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(95, 214, 194, .08), transparent 70%),
    linear-gradient(180deg, var(--aw-deep) 0, #04181A 40%, #031113 100%);
}
.aw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.aw-hero { padding: var(--k-sp-4) clamp(8px, 2vw, 28px) 0; }
.aw-tank { position: relative; max-width: 1400px; margin: 0 auto; }

.aw-hood {
  position: relative; z-index: 3; height: 40px;
  background: var(--svc-grain) 0 0 / 200px, linear-gradient(180deg, #5b6168 0, #33373c 55%, #1d2024 100%);
  border: 2px solid #0b0c0e; border-radius: var(--k-rm) var(--k-rm) 0 0;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .8);
}
.aw-hood::before, .aw-hood::after {
  content: ""; position: absolute; top: 10px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d4d8dc, #50555b 70%); box-shadow: 0 1px 0 #0b0c0e;
}
.aw-hood::before { left: 14px; }
.aw-hood::after { right: 14px; }
.aw-hood-led {
  position: absolute; left: 6%; right: 6%; bottom: -4px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #bff7ef, #fff, #bff7ef);
  box-shadow: 0 0 14px 3px rgba(170, 255, 240, .55), 0 0 60px 10px rgba(120, 230, 215, .22);
}
.aw-hood-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%);
  font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .26em; color: #F1F4F6;
  white-space: nowrap; text-shadow: 0 1px 0 #0b0c0e, 0 -1px 0 rgba(255, 255, 255, .12);
}

.aw-water {
  position: relative; overflow: hidden;
  min-height: clamp(560px, calc(100svh - 64px - 150px), 760px);
  border-left: 10px solid #25292e; border-right: 10px solid #25292e;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(140, 240, 225, .22), transparent 70%),
    linear-gradient(180deg, #14575B 0, #0D3D42 38%, #082A2E 72%, #061F22 100%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .55);
}
.aw-water::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 55%; pointer-events: none; opacity: .5;
  background:
    radial-gradient(ellipse 22px 8px at 20% 20%, rgba(210, 255, 248, .22), transparent 70%) 0 0 / 120px 60px,
    radial-gradient(ellipse 30px 9px at 70% 60%, rgba(210, 255, 248, .16), transparent 70%) 0 0 / 170px 80px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
.aw-rays {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, transparent 12%, rgba(190, 255, 245, .07) 16%, transparent 22%),
    linear-gradient(80deg, transparent 40%, rgba(190, 255, 245, .06) 46%, transparent 52%),
    linear-gradient(98deg, transparent 66%, rgba(190, 255, 245, .07) 71%, transparent 77%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0, transparent 80%);
}
.aw-glass {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    linear-gradient(115deg, transparent 58%, rgba(255, 255, 255, .06) 60%, transparent 64%),
    linear-gradient(115deg, transparent 66%, rgba(255, 255, 255, .035) 67.5%, transparent 70%);
}
.aw-reef {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; width: 100%; height: clamp(170px, 24vw, 260px);
}

.aw-hero { --aw-band: clamp(300px, 24vw, 350px); }
.aw-hero-text {
  position: relative; z-index: 3; display: grid; justify-items: start; gap: var(--k-sp-2);
  max-width: 40rem; padding: var(--k-sp-5) var(--k-sp-4) var(--aw-band);
  text-shadow: 0 2px 12px rgba(0, 20, 22, .8);
}
.aw-chips { display: flex; gap: var(--k-sp-1); }
.aw-chips span {
  padding: 2px calc(var(--k-sp-2) + 6px);
  background-image: radial-gradient(circle at 6px 50%, #5b6168 0 2px, #0b0c0e 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 6px) 50%, #5b6168 0 2px, #0b0c0e 2.5px, transparent 3px);
  font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-xs); letter-spacing: .22em;
  color: var(--aw-ink); background: var(--aw-enamel); border-radius: var(--k-rs); text-shadow: none;
  box-shadow: 0 2px 0 #0b0c0e;
}
.aw-chips span:first-child { background: var(--k-accent); }
.aw-title {
  display: flex; align-items: center; gap: .22em;
  font-family: var(--k-font-head); font-weight: 900; font-size: clamp(26px, 9.6vw, 104px); line-height: 1.02;
  letter-spacing: .01em; color: #F4F1EA;
}
.aw-title-t {
  background: linear-gradient(180deg, #FFFFFF 0, #F1FBF9 30%, #BFE3DD 47%, #5E9C95 53%, #D6EFEB 70%, #FFFFFF 86%, #9FC9C3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  --aw-tb: max(1.5px, .028em);
  filter: drop-shadow(var(--aw-tb) 0 0 #041416) drop-shadow(calc(var(--aw-tb) * -1) 0 0 #041416) drop-shadow(0 var(--aw-tb) 0 #041416) drop-shadow(0 calc(var(--aw-tb) * -1) 0 #041416)
          drop-shadow(0 .05em 0 #041416) drop-shadow(0 .12em .16em rgba(0, 10, 12, .7));
}
.aw-title-plate {
  display: inline-block; padding: .04em .24em .2em; border-radius: .08em;
  background:
    radial-gradient(circle at .13em .13em, #D4D8DC 0 .035em, #50555b .05em, #0b0c0e .062em, transparent .07em),
    radial-gradient(circle at calc(100% - .13em) .13em, #D4D8DC 0 .035em, #50555b .05em, #0b0c0e .062em, transparent .07em),
    radial-gradient(circle at .13em calc(100% - .13em), #D4D8DC 0 .035em, #50555b .05em, #0b0c0e .062em, transparent .07em),
    radial-gradient(circle at calc(100% - .13em) calc(100% - .13em), #D4D8DC 0 .035em, #50555b .05em, #0b0c0e .062em, transparent .07em),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #3a4046 0, #22272b 55%, #15191c 100%);
  border: 3px solid #0b0c0e;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -3px 0 rgba(0, 0, 0, .5), 0 0 0 2px #5b6168, 0 0 0 4px #0b0c0e, 0 .1em .24em rgba(0, 10, 12, .7);
  text-shadow: none;
}
@media (max-width: 759px) {
  .aw-title-t {
    background-image: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 38%, #8FC4BD 50%, #3F7C75 56%, #E4F5F2 72%, #FFFFFF 100%);
  }
}
.aw-hero-text::before {
  content: ""; position: absolute; inset: 0 -20% 20% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 35% 45%, rgba(4, 30, 33, .55), transparent 75%);
}
.aw-mark {
  width: .78em; height: .78em; flex: none; border-radius: 20%;
  box-shadow: 0 0 0 3px #0b0c0e, 0 0 0 6px #8A9097, 0 0 0 8px #0b0c0e, 0 6px 16px rgba(0, 0, 0, .6);
}
.aw-tagline { font-weight: 900; font-size: var(--k-fs-h2); line-height: 1.4; letter-spacing: var(--k-head-ls); color: #F4F1EA; }
.aw-hero-lead { max-width: 30em; font-size: var(--k-fs-lead); font-weight: 700; color: #D9EFEC; }
.aw-hero-coin {
  display: flex; align-items: center; gap: var(--k-sp-1);
  padding: 4px var(--k-sp-2) 4px 6px; font-size: var(--k-fs-body); font-weight: 900; color: #FFE9A6;
  background: rgba(3, 22, 24, .6); border-left: 3px solid #F2C12E; border-radius: 0 var(--k-rs) var(--k-rs) 0;
}
.aw-hero-coin svg { width: 22px; height: 22px; flex: none; }

symbol[id^="aw-f-"] [stroke-width="13"] { stroke-width: var(--aw-w13, 13px); }
symbol[id^="aw-f-"] [stroke-width="8"] { stroke-width: var(--aw-w8, 8px); }
symbol[id^="aw-f-"] [stroke-width="11"] { stroke-width: var(--aw-w11, 11px); }
symbol[id^="aw-f-"] [stroke-width="6"] { stroke-width: var(--aw-w6, 6px); }
symbol[id^="aw-f-"] [stroke-width="5"] { stroke-width: var(--aw-w5, 5px); }
symbol[id^="aw-f-"] [stroke-width="3"] { stroke-width: var(--aw-w3, 3px); }
@media (max-width: 759px) {
  .aw-hero .aw-fish, .aw-lane .aw-fish { --aw-w13: 20px; --aw-w8: 14px; --aw-w11: 17px; --aw-w6: 10px; --aw-w5: 8px; --aw-w3: 4.5px; }
}

.aw-school { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.aw-hero .aw-school { inset: auto 0 0; height: var(--aw-band); z-index: 3; }
.aw-fish {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s, 1) * clamp(110px, 12.5vw, 180px)); aspect-ratio: 240 / 130;
  filter: drop-shadow(0 10px 8px rgba(0, 10, 12, .45));
}
.aw-fish > svg { display: block; width: 100%; height: 100%; }
.aw-fish-l > svg:not(.aw-still-coin) { transform: scaleX(-1); }
.aw-lens { filter: drop-shadow(0 0 3px rgba(127, 243, 228, .9)); }

.aw-flock > svg { position: absolute; width: 58%; height: auto; }
.aw-flock > svg:nth-child(1) { left: 0; top: 0; }
.aw-flock > svg:nth-child(2) { left: 46%; top: 42%; width: 50%; }
.aw-flock > svg:nth-child(3) { left: -34%; top: 58%; width: 52%; }
.aw-flock > svg:nth-child(4) { left: 30%; top: -44%; width: 46%; }

.aw-fish > .aw-still-coin { position: absolute; left: 36%; top: 80%; width: max(16px, 12%); height: auto; }
.aw-live .aw-still-coin { display: none; }

.aw-patrol { display: none; }
@media (min-width: 1360px) {
  .aw-patrol {
    display: block; position: absolute; z-index: 1; top: 30px; left: 960px; right: 24px; height: 150px;
    container-type: inline-size; pointer-events: none;
  }
  .aw-fish-p { --x: 18%; --y: 12px; }
}

.aw-desk {
  position: absolute; z-index: 5; right: 18px; top: 22px; display: grid; gap: var(--k-sp-2); justify-items: center;
  pointer-events: none;
}
.aw-icon {
  display: grid; justify-items: center; gap: 2px; width: 84px;
  font-size: var(--k-fs-sm); font-weight: 700; line-height: 1.3; color: #fff; text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .8);
}
.aw-icon svg { width: 46px; height: 46px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }

.aw-drops { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.aw-drop { position: absolute; left: 0; top: 0; width: 16px; height: 16px; will-change: transform, opacity; }

.aw-stand {
  position: relative; z-index: 3;
  padding: var(--k-sp-3) var(--k-sp-4);
  background: var(--svc-grain) 0 0 / 200px, linear-gradient(180deg, #3a3f45 0, #24272b 30%, #17191c 100%);
  border: 2px solid #0b0c0e; border-top: 6px solid #4d535a; border-radius: 0 0 var(--k-rm) var(--k-rm);
}
.aw-plate {
  position: relative; max-width: 52rem; margin: 0 auto; padding: var(--k-sp-2) var(--k-sp-4);
  font-weight: 700; font-size: var(--k-fs-sm); line-height: 1.7; color: #1d2122; text-align: center;
  background: linear-gradient(180deg, #d9dcd6, #b9beb8); border: 2px solid #0b0c0e; border-radius: var(--k-rs);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #0b0c0e;
}
.aw-plate::before, .aw-plate::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #eef0f2, #6b7077 70%); box-shadow: 0 0 0 1px #0b0c0e;
}
.aw-plate::before { left: 8px; }
.aw-plate::after { right: 8px; }

.aw-room {
  position: relative; width: calc(100% - clamp(8px, 2vw, 28px) * 2); max-width: 1400px; margin: var(--k-sp-4) auto 0;
}
.aw-room > .aw-hood { border-radius: var(--k-rm) var(--k-rm) 0 0; }
.aw-in {
  position: relative; z-index: 1; display: grid;
  padding: var(--k-sp-5) max(var(--k-gutter), calc((100% - var(--k-max)) / 2)) clamp(180px, 22vw, 250px);
  border-left: 10px solid #25292e; border-right: 10px solid #25292e;
  background:
    linear-gradient(100deg, transparent 10%, rgba(190, 255, 245, .05) 14%, transparent 20%) 0 0 / 100% 900px no-repeat,
    linear-gradient(80deg, transparent 60%, rgba(190, 255, 245, .05) 66%, transparent 72%) 0 0 / 100% 900px no-repeat,
    radial-gradient(ellipse 22px 8px at 20% 20%, rgba(210, 255, 248, .08), transparent 70%) 0 0 / 120px 60px,
    linear-gradient(180deg, #14575B 0, #0F474C 20%, #0B383C 55%, #082C30 85%, #072528 100%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .5);
}
.aw-reef-room { z-index: 2; bottom: 0; left: 10px; right: 10px; width: calc(100% - 20px); transform: scaleX(-1); }
.aw-in {
  overflow: clip; row-gap: 0; grid-template-columns: minmax(0, 1fr);
  --aw-gl: 150px; --aw-lane: clamp(112px, 10vw, 140px);
  padding-left: max(var(--aw-gl), calc((100% - var(--k-max)) / 2));
}
@media (min-width: 1240px) { .aw-in { --aw-gl: 170px; padding-right: max(var(--aw-gl), calc((100% - var(--k-max)) / 2)); } }
@media (max-width: 759px) {
  .aw-hero { padding-inline: 4px; }
  .aw-room { width: calc(100% - 8px); }
  .aw-in { --aw-gl: 16px; --aw-lane: 104px; padding-right: 16px; border-left-width: 4px; border-right-width: 4px; }
}

.aw-guide-track {
  position: absolute; z-index: 1; top: 0; bottom: clamp(120px, 14vw, 200px);
  left: 48px; width: calc(var(--aw-gl) - 56px); pointer-events: none;
}
.aw-guide-track::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(146 / 240 * 100% - 1.5px); width: 3px;
  background: linear-gradient(90deg, #0b1416, #9aa6a8 50%, #0b1416);
}
.aw-guide {
  position: sticky; top: 44vh; display: block; width: 100%; aspect-ratio: 240 / 170;
  filter: drop-shadow(1.5px 0 0 #041416) drop-shadow(-1.5px 0 0 #041416) drop-shadow(0 1.5px 0 #041416) drop-shadow(0 -1.5px 0 #041416) drop-shadow(0 10px 8px rgba(0, 10, 12, .5));
}
.aw-guide-lane { display: none; }
.aw-guide > svg { display: block; width: 100%; height: 100%; }
.aw-guide-drop { position: absolute; left: 0; top: 0; width: 16px; height: 16px; }
@media (max-width: 759px) {
  .aw-guide-track { display: none; }
  .aw-lane-guide .aw-flock { display: none; }
  .aw-lane-guide { height: 132px; }
  .aw-guide-lane { display: block; position: absolute; left: 14%; top: calc(50% - 36px); width: 100px; }
  .aw-lane-guide::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(14% + 100px * 146 / 240 - 1.5px); width: 3px;
    background: linear-gradient(90deg, #0b1416, #9aa6a8 50%, #0b1416);
  }
  .aw-plate-no { display: none; }
}
.aw-in > section { position: relative; z-index: 1; }
.aw-lane { position: relative; z-index: -1; height: var(--aw-lane); }
@media (max-width: 759px) { .aw-lane-guide { z-index: 0; } }
.aw-lane .aw-fish { top: calc(50% - var(--fw) * 65 / 240); }
.aw-lane .aw-flock { top: calc(50% - var(--fw) * 42 / 240); }
.aw-room::after {
  content: ""; position: absolute; inset: 40px 10px 0; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 72%, rgba(255, 255, 255, .04) 74%, transparent 78%);
}


.aw-walls { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aw-wall { position: absolute; top: 0; bottom: 0; width: 150px; opacity: .92; }
.aw-wall-l { left: 0; background: url(aquariumwall/wall-l.svg) 0 0 / 150px 600px repeat-y; }
.aw-wall-r { right: 0; overflow: hidden; background: url(aquariumwall/wall-r.svg) 0 0 / 150px 600px repeat-y; filter: saturate(.5) brightness(.72); }
.aw-bubbles {
  position: absolute; left: 84px; top: 0; width: 30px; height: calc(100% + 600px);
  background: url(aquariumwall/bubbles.svg) 0 0 / 30px 600px repeat-y;
}
@media (max-width: 899px) {
  .aw-wall { width: 90px; }
  .aw-wall-l { background-size: 90px 360px; }
  .aw-wall-r { background-size: 90px 360px; }
  .aw-bubbles { left: 50px; width: 18px; height: calc(100% + 360px); background-size: 18px 360px; }
}
@media (max-width: 759px) {
  .aw-wall { width: 12px; opacity: 1; }
  .aw-wall-l {
    background:
      repeating-linear-gradient(180deg, transparent 0 286px, #061112 286px 288px, #8a9795 288px 298px, #061112 298px 300px),
      linear-gradient(90deg, #061112 0 1.5px, #3a4447 1.5px, #9aa6a8 40%, #4b5557 70%, #1b2224 calc(100% - 1.5px), #061112 0);
  }
  .aw-wall-r {
    background: linear-gradient(90deg, #7fb8b0 0 1.5px, rgba(190, 245, 238, .12) 1.5px calc(100% - 1.5px), #062022 0);
  }
  .aw-bubbles { left: 1px; width: 10px; height: calc(100% + 200px); background-size: 10px 200px; }
}

.aw-lane .aw-fish { --fw: calc(var(--s, 1) * clamp(84px, 8vw, 116px)); width: var(--fw); filter: drop-shadow(0 8px 6px rgba(0, 10, 12, .45)) brightness(.86) saturate(.92); }

.aw-board {
  position: relative; color: var(--aw-ink);
  background:
    linear-gradient(0deg, rgba(40, 110, 100, .16), rgba(40, 110, 100, 0) 28px) 0 100% / 100% 28px no-repeat,
    linear-gradient(180deg, #F3F6F2, var(--aw-enamel) 30%, #DEE4DF);
  border: 3px solid #0b0c0e; border-radius: var(--k-rl);
  box-shadow: inset 0 0 0 4px var(--aw-enamel), inset 0 0 0 5px var(--aw-enamel-edge), 0 18px 34px -14px rgba(0, 0, 0, .85);
  padding: 0 var(--k-sp-4) var(--k-sp-4);
}
.aw-board::before, .aw-rig-head::before {
  content: ""; position: absolute; left: 56px; right: 56px; bottom: 100%; height: calc(var(--aw-lane) + 12px); z-index: -1;
  background: url(aquariumwall/chain.svg) 0 100% / 12px 28px repeat-y, url(aquariumwall/chain.svg) 100% 100% / 12px 28px repeat-y;
}
.aw-board::after, .aw-rig-head::after {
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  background:
    url(aquariumwall/corner-tl.svg) 0 0 / 38px no-repeat, url(aquariumwall/corner-tr.svg) 100% 0 / 38px no-repeat,
    url(aquariumwall/corner-bl.svg) 0 100% / 38px no-repeat, url(aquariumwall/corner-br.svg) 100% 100% / 38px no-repeat;
}
.aw-board-head {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--k-sp-3); row-gap: 2px;
  margin: 0 calc(var(--k-sp-4) * -1) var(--k-sp-4); padding: var(--k-sp-4) var(--k-sp-4) var(--k-sp-3);
  border-bottom: 3px solid var(--aw-teal);
}
.aw-eyebrow {
  flex-basis: 100%;
  font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .24em; color: var(--aw-coral);
}
.aw-h2 { font-weight: var(--k-head-w); font-size: var(--k-fs-h2); line-height: 1.35; letter-spacing: var(--k-head-ls); color: var(--aw-ink); }
.aw-board-note { font-size: var(--k-fs-sm); font-weight: 700; color: var(--aw-ink-sub); }
.aw-board-head { position: relative; }
.aw-plate-no {
  position: absolute; right: 52px; top: var(--k-sp-4);
  font-weight: 900; font-size: var(--k-fs-sm); letter-spacing: .3em; color: #434C4A;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(0, 0, 0, .35);
  cursor: default; user-select: none;
}
.aw-gpu-t { font-family: var(--k-font-en); font-weight: 800; font-size: 12px; letter-spacing: .12em; fill: #F2C12E; }
.aw-gpu-q { font-family: var(--k-font-body); font-weight: 900; font-size: 13px; fill: #F4F1EA; }
.aw-f-no { font-family: var(--k-font-en); font-weight: 800; font-size: 13px; letter-spacing: .08em; fill: #0B3F39; }

.aw-about-grid { display: grid; gap: var(--k-sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) and (max-width: 1239px) {
  .aw-layers .aw-layer-tag text { font-size: 25px; }
  .aw-layers .aw-layer-tag .aw-layer-sub { font-size: 21px; }
}
@media (max-width: 599px) {
  .aw-layers .aw-layer-tag text { font-size: 28px; }
  .aw-layers .aw-layer-tag .aw-layer-sub { font-size: 23px; }
}
@media (max-width: 479px) {
  .aw-tags .nb, .aw-layers figcaption .nb { white-space: normal; }
}
@media (min-width: 900px) { .aw-about-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.aw-prose { display: grid; gap: var(--k-sp-2); font-size: var(--k-fs-body); color: var(--aw-ink); }
.aw-lead { font-weight: 900; font-size: var(--k-fs-h3); line-height: 1.6; }
.aw-layers { margin: 0; padding: var(--k-sp-3); background: #0B2A2E; border: 3px solid #0b0c0e; border-radius: var(--k-rm); }
.aw-layers > svg { display: block; width: 100%; height: auto; }
.aw-layer-tag text { font-family: var(--k-font-body); font-weight: 900; font-size: 16px; fill: #F4F1EA; letter-spacing: .04em; }
.aw-layer-tag .aw-layer-sub { font-size: 13px; fill: #BFE6E0; }
@media (max-width: 599px) {
  .aw-week li > span:last-child .nb { white-space: normal; }
}
.aw-layers figcaption { margin-top: var(--k-sp-2); font-size: var(--k-fs-sm); font-weight: 700; color: #D9EFEC; }

.aw-tags { display: grid; gap: var(--k-sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .aw-tag-main { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
  .aw-tag-main p { font-size: var(--k-fs-h3); }
}
@media (min-width: 900px) {
  .aw-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aw-tag-main { grid-column: 1 / -1; }
}
@media (min-width: 1440px) {
  .aw-tags { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
  .aw-tag-main { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 480px) and (max-width: 899px) {
  .aw-tags li:not(.aw-tag-main) { grid-template-columns: 42% minmax(0, 1fr); align-items: center; }
  .aw-tags li:not(.aw-tag-main) p { padding: 0; font-size: var(--k-fs-sm); }
}
.aw-tags li, .aw-week li {
  position: relative; padding-top: calc(var(--k-sp-2) + 16px);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .9) 0 18%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #FBFDFB, #EEF5F2);
  border: 2px solid #0b0c0e; border-radius: 6px 6px var(--k-rm) var(--k-rm);
}
.aw-tags li::before, .aw-week li::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: #0B383C; box-shadow: inset 0 0 0 2px #0b0c0e, 0 1px 0 #fff;
}
.aw-tags li::after {
  content: ""; position: absolute; left: 50%; top: -12px; width: 16px; height: 26px; margin-left: -8px;
  border: 2.5px solid #8A9097; border-bottom-color: transparent; border-radius: 8px 8px 0 0; box-shadow: 0 -1px 0 #0b0c0e;
}
.aw-tags li {
  display: grid; align-content: start; gap: var(--k-sp-2); padding-inline: var(--k-sp-2); padding-bottom: var(--k-sp-2);
  box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .55);
}
.aw-tag-art { display: block; width: 100%; height: auto; }
.aw-tags p { padding: 0 var(--k-sp-1) var(--k-sp-1); font-weight: 900; font-size: var(--k-fs-h4); line-height: 1.6; color: var(--aw-ink); }

.aw-shots { display: grid; gap: var(--k-sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .aw-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-shot-main { grid-column: 1 / -1; }
}
.aw-shots figure { margin: 0; }
.aw-shots .shot {
  padding: 8px; background: linear-gradient(180deg, #4a5056, #1f2226); border: 3px solid #0b0c0e; border-radius: var(--k-rm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 0 #0b0c0e;
}
.aw-shots .shot img { border-radius: var(--k-rs); }
.aw-shots figcaption {
  display: flex; align-items: baseline; gap: var(--k-sp-2); margin-top: var(--k-sp-2);
  font-weight: 900; font-size: var(--k-fs-h4); color: var(--aw-ink);
}
.aw-shots figcaption b { font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-xs); letter-spacing: .2em; color: var(--aw-coral); }
.aw-credit { margin-top: var(--k-sp-3); font-size: var(--k-fs-sm); color: var(--aw-ink-sub); }

.aw-rig { display: grid; justify-items: stretch; --aw-strap: 14px; }
.aw-rig-head {
  position: relative; margin: 0 0 var(--k-sp-4); padding: var(--k-sp-3) var(--k-sp-4); column-gap: var(--k-sp-2);
  color: var(--aw-ink);
  background: linear-gradient(180deg, #F3F6F2, var(--aw-enamel) 30%, #DEE4DF);
  border: 3px solid #0b0c0e; border-radius: var(--k-rl);
  box-shadow: inset 0 0 0 4px var(--aw-enamel), inset 0 0 0 5px var(--aw-enamel-edge), 0 18px 34px -14px rgba(0, 0, 0, .85);
}
.aw-rig-head .aw-board-note { flex-basis: 100%; }
.aw-rig-head .aw-plate-no { top: var(--k-sp-3); }
.aw-rig-head::before { left: 40px; right: 40px; }
.aw-week { position: relative; display: grid; gap: var(--k-sp-3); padding-left: 48px; }
.aw-week::before {
  content: ""; position: absolute; left: 12px; top: calc(var(--k-sp-4) * -1 - 4px); bottom: calc(var(--k-sp-3) * -1 - 4px); width: 14px; border-radius: 0;
  background: linear-gradient(90deg, #3f454b, #b3b9bf 40%, #5a6066 80%, #2a2e33); border: 2px solid #0b0c0e;
}
.aw-week li { position: relative; display: grid; gap: 2px; padding-inline: var(--k-sp-3); padding-bottom: var(--k-sp-2); color: var(--aw-ink); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .8); }
.aw-week li::before {
  content: ""; position: absolute; left: -30px; top: 50%; width: 30px; height: 8px; margin-top: -4px;
  background: linear-gradient(180deg, #5a6066, #b3b9bf, #3f454b); border: 1.5px solid #0b0c0e; border-inline: 0;
}
.aw-valve {
  position: absolute; left: -48px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  background: radial-gradient(circle, #0b0c0e 0 4px, #C0431B 5px 9px, transparent 10px),
              conic-gradient(from 0deg, #C0431B 0 10%, transparent 10% 25%, #C0431B 25% 35%, transparent 35% 50%, #C0431B 50% 60%, transparent 60% 75%, #C0431B 75% 85%, transparent 85%);
  -webkit-mask: radial-gradient(circle, #000 0 17px, transparent 18px);
  mask: radial-gradient(circle, #000 0 17px, transparent 18px);
  box-shadow: 0 0 0 3px #E0633A inset;
}
.aw-day { font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .2em; color: var(--aw-coral); }
.aw-week b { font-size: var(--k-fs-h3); font-weight: 900; }
.aw-week li > span:last-child { font-size: var(--k-fs-body); color: var(--aw-ink-sub); }
.aw-week-note {
  position: relative; z-index: 1; margin-top: var(--k-sp-3); padding: var(--k-sp-2) var(--k-sp-3) var(--k-sp-2) 48px;
  font-weight: 900; font-size: var(--k-fs-body); line-height: 1.6; color: var(--aw-ink);
  background: linear-gradient(180deg, #F3F6F2, var(--aw-enamel) 40%, #DEE4DF);
  border: 3px solid #0b0c0e; border-radius: var(--k-rm);
  box-shadow: inset 0 0 0 3px var(--aw-enamel), inset 0 0 0 4px var(--aw-enamel-edge), 0 14px 26px -12px rgba(0, 0, 0, .85);
}
.aw-week-note::before {
  content: ""; position: absolute; left: 6px; top: -10px; width: 30px; height: 12px; border-radius: 2px;
  background: linear-gradient(90deg, #3f454b, #b3b9bf 40%, #5a6066 80%, #2a2e33); border: 2px solid #0b0c0e;
}
@media (min-width: 1440px) {
  .aw-rig { position: relative; }
  .aw-rig::before, .aw-rig::after {
    content: ""; position: absolute; top: 40px; bottom: 30px; width: var(--aw-strap); z-index: -1;
    background: linear-gradient(90deg, #2a2e33, #8A9097 35%, #5a6066 70%, #2a2e33); border: 2px solid #0b0c0e;
    background-clip: padding-box;
  }
  .aw-rig::before { left: 22px; }
  .aw-rig::after { right: 22px; }
  .aw-week { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 14px; padding: 62px 0 0; margin-inline: 0; }
  .aw-week::before {
    left: 14px; right: 14px; top: 10px; bottom: auto; width: auto; height: 30px; border: 0;
    background:
      linear-gradient(90deg, #2a2e33, #b3b9bf 45%, #3f454b) 0 0 / 30px 100% no-repeat,
      linear-gradient(90deg, #2a2e33, #b3b9bf 45%, #3f454b) 100% 0 / 30px 100% no-repeat,
      linear-gradient(180deg, #0b0c0e 0 2px, #3f454b 2px, #b3b9bf 40%, #5a6066 80%, #2a2e33 calc(100% - 2px), #0b0c0e 0) 0 8px / 100% 16px no-repeat;
    outline: 0;
  }
  .aw-valve { left: 50%; top: -58px; margin: 0 0 0 -18px; }
  .aw-week li { align-content: start; padding-inline: 12px; }
  .aw-week b { font-size: var(--k-fs-h4); }
  .aw-week li > span:last-child { font-size: 15px; }
  .aw-week li::before {
    left: 50%; top: -26px; width: 6px; height: 24px; margin: 0 0 0 -3px;
    background: linear-gradient(90deg, #5a6066, #b3b9bf, #3f454b); border: 1.5px solid #0b0c0e; border-block: 0;
  }
  .aw-week-note { margin-top: var(--k-sp-4); padding-left: var(--k-sp-3); text-align: center; }
  .aw-week-note::before { display: none; }
}

.aw-try {
  display: grid; gap: var(--k-sp-3); align-items: center; justify-items: start;
  padding: var(--k-sp-4);
  background: var(--svc-grain) 0 0 / 200px, linear-gradient(180deg, #3a3f45 0, #24272b 40%, #1a1c20 100%);
  border: 3px solid #0b0c0e; border-top: 8px solid #4d535a; border-radius: var(--k-rl);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .85);
}
@media (min-width: 760px) { .aw-try { grid-template-columns: 200px minmax(0, 1fr); } }
.aw-bank { width: 150px; height: auto; }
@media (min-width: 760px) { .aw-bank { width: 200px; } }
.aw-bank-t { font-family: var(--k-font-en); font-weight: 800; font-size: 14px; letter-spacing: .2em; fill: #E9B10C; }
.aw-try .svc-cta p { font-size: var(--k-fs-lead); font-weight: 700; color: var(--k-ink); }
.aw-try .svc-cta .aw-cta-note { font-size: var(--k-fs-xs); font-weight: 400; color: #A9BDBA; }
.aw-in > .aw-nav { position: relative; z-index: 1; margin-top: calc(var(--k-sp-4) + 14px); }
.aw-nav a {
  position: relative; padding-top: calc(var(--k-sp-2) + 12px); color: var(--aw-ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, .9) 0 18%, rgba(255, 255, 255, 0) 34%), linear-gradient(180deg, #FBFDFB, #E4ECE8);
  border: 2px solid #0b0c0e; border-radius: 6px 6px var(--k-rm) var(--k-rm);
  box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .7);
}
.aw-nav a::before {
  content: ""; position: absolute; left: 50%; top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: #0B383C; box-shadow: inset 0 0 0 2px #0b0c0e, 0 1px 0 #fff;
}
.aw-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% - 11px); width: 2.5px; height: calc(var(--k-sp-4) + 26px); margin-left: -1.25px; z-index: -1;
  background: #8A9097; box-shadow: 0 0 0 1px #0b0c0e;
}
.aw-nav .svc-dir { color: var(--aw-coral); }
.aw-nav .svc-name { font-size: var(--k-fs-body); font-weight: 900; }
@media (hover: hover) and (pointer: fine) {
  .aw-nav a:hover { color: var(--aw-ink); border-color: #0b0c0e; background: linear-gradient(180deg, #FFFFFF, #F1F7F4); }
}
@media (max-width: 759px) {
  .aw-nav a::after { height: calc(var(--k-sp-2) + 12px); }
  .aw-nav a:first-child::after { height: calc(var(--k-sp-4) + 26px); }
}

.aw-live .aw-fish { left: 0; }
.aw-live .aw-fish-r { animation: aw-swim-r var(--d) linear var(--dl) infinite; }
.aw-live .aw-fish-l { animation: aw-swim-l var(--d) linear var(--dl) infinite; }
.aw-live .aw-tail { transform-box: view-box; animation: aw-tail .9s ease-in-out infinite alternate; }
.aw-live .aw-tip { animation: aw-tip 2.4s ease-in-out infinite alternate; }
.aw-live .aw-fish-p { left: 0; animation: aw-patrol 26s linear infinite; }
.aw-live .aw-bubbles { animation: aw-bubble 9s linear infinite; }
@media (max-width: 899px) { .aw-live .aw-bubbles { animation-name: aw-bubble-s; } }
@media (max-width: 759px) { .aw-live .aw-bubbles { animation-name: aw-bubble-xs; } }
.aw-live .aw-guide > svg { animation: aw-bob 2.8s ease-in-out infinite alternate; }
@keyframes aw-bob { from { transform: translate3d(0, -5px, 0) rotate(-2deg); } to { transform: translate3d(0, 5px, 0) rotate(2deg); } }
.aw-paused .aw-fish, .aw-paused .aw-tail, .aw-paused .aw-tip, .aw-paused .aw-bubbles, .aw-paused .aw-guide > svg { animation-play-state: paused; }
@keyframes aw-patrol {
  0% { transform: translate3d(0, 0, 0) scaleX(1); }
  46% { transform: translate3d(calc(100cqw - 100%), 0, 0) scaleX(1); }
  50% { transform: translate3d(calc(100cqw - 100%), 0, 0) scaleX(-1); }
  96% { transform: translate3d(0, 0, 0) scaleX(-1); }
  100% { transform: translate3d(0, 0, 0) scaleX(1); }
}
@keyframes aw-bubble { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -600px, 0); } }
@keyframes aw-bubble-s { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -360px, 0); } }
@keyframes aw-bubble-xs { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -200px, 0); } }
@keyframes aw-swim-r { from { transform: translate3d(-260px, 0, 0); } to { transform: translate3d(calc(100vw + 40px), 0, 0); } }
@keyframes aw-swim-l { from { transform: translate3d(calc(100vw + 40px), 0, 0); } to { transform: translate3d(-260px, 0, 0); } }
@keyframes aw-tail { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes aw-tip { from { opacity: .45; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .aw-live .aw-fish { left: var(--x); animation: none; }
  .aw-live .aw-tail, .aw-live .aw-tip, .aw-live .aw-bubbles, .aw-live .aw-guide > svg { animation: none; }
}

@media (max-width: 759px) {
  .aw-hood-tag { letter-spacing: .18em; }
  .aw-water { min-height: 640px; border-left-width: 6px; border-right-width: 6px; }
  .aw-hero { --aw-band: 320px; }
  .aw-hero-text { padding: var(--k-sp-4) var(--k-sp-3) calc(var(--aw-band) + 40px); }
  .aw-fish { width: calc(var(--s, 1) * 104px); }
  .aw-hero .aw-fish-puff { width: 124px; }
  .aw-hero .aw-school { bottom: 40px; }
  .aw-desk { top: 10px; right: 8px; grid-auto-flow: column; gap: 2px; }
  .aw-icon { width: 50px; font-size: 11px; line-height: 1.2; }
  .aw-icon svg { width: 28px; height: 28px; }
  .aw-hero-text { padding-top: calc(var(--k-sp-4) + 40px); }
  .aw-board {
    padding: 0 var(--k-sp-3) var(--k-sp-3);
    background:
      linear-gradient(0deg, rgba(40, 110, 100, .16), rgba(40, 110, 100, 0) 28px) 0 100% / 100% 28px no-repeat,
      linear-gradient(180deg, #F3F6F2, var(--aw-enamel) 30%, #DEE4DF);
  }
  .aw-board-head { margin: 0 calc(var(--k-sp-3) * -1) var(--k-sp-3); padding: var(--k-sp-4) var(--k-sp-3) var(--k-sp-2); }
  .aw-rig-head { margin: 0 0 var(--k-sp-3); padding: var(--k-sp-3); }
  .aw-board::before, .aw-rig-head::before { left: 36px; right: 36px; }
  .aw-try { justify-items: center; text-align: center; grid-template-columns: minmax(0, 1fr); padding: var(--k-sp-3); }
  .aw-try .svc-cta { justify-items: center; width: 100%; min-width: 0; }
}
