.dock-panel {
  --dock-ink: #173d46;
  --dock-paper: #fffcf2;
  --dock-rule: #d6ddce;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: clamp(16px, 4vw, 26px);
  border: 2px solid var(--dock-ink);
  border-radius: 14px;
  background: var(--dock-paper);
  color: var(--dock-ink);
  font: 16px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 5px 0 #173d4618;
  overflow-wrap: anywhere;
}
.dock-panel *, .dock-panel *::before, .dock-panel *::after { box-sizing: border-box; }
.dock-panel [hidden] { display: none !important; }
.dock-panel button { font: inherit; cursor: pointer; min-height: 44px; touch-action: manipulation; }
.dock-panel button:focus-visible { outline: 3px solid #087b98; outline-offset: 4px; }
.dock-panel button:disabled { cursor: default; }
.dock-kicker { margin: 0 0 12px; font-size: .68rem; font-weight: 850; letter-spacing: .16em; }
.dock-progress { display: flex; gap: 6px; padding: 0; margin: 0 0 22px; list-style: none; }
.dock-step { flex: 1; padding: 8px 4px; border-top: 3px solid var(--dock-rule); color: #52656a; font-size: .65rem; font-weight: 750; }
.dock-step[aria-current] { border-color: var(--dock-ink); color: var(--dock-ink); }
.dock-step-done { border-color: #32806a; }
.dock-title { margin: 0 0 12px; font-size: clamp(1.4rem, 5vw, 1.75rem); line-height: 1.15; letter-spacing: -.035em; }
.dock-intro { margin: 0 0 20px; color: #48616a; font-size: .92rem; }
.dock-key-scene { position: relative; height: 112px; margin-bottom: 14px; overflow: hidden; border: 2px solid var(--dock-ink); background: #e5f0ed; }
.dock-key-scene::before { content: ""; position: absolute; inset: auto 0 0; height: 22px; border-top: 3px solid #7e654c; background: repeating-linear-gradient(90deg, #b79970 0 25px, #7e654c 25px 28px); }
.dock-key-scenery { position: absolute; bottom: 19px; left: 50%; display: flex; align-items: flex-end; gap: 12px; transform: translateX(-50%); }
.dock-cabinet { position: relative; width: 78px; height: 60px; border: 3px solid var(--dock-ink); background: #dcdccc; box-shadow: 3px 3px 0 #173d4640; }
.dock-cabinet::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--dock-ink); }
.dock-cabinet-label { position: absolute; top: -18px; left: -5px; width: 90px; text-align: center; font: 800 .6rem/1.4 ui-monospace, monospace; }
.dock-cabinet-key { position: absolute; inset: 0; display: grid; place-items: center; font-size: 29px; }
.dock-cabinet-found { background: #314e51; }
.dock-cabinet-found::after { display: none; }
.dock-float-ring { width: 45px; height: 45px; margin-bottom: 4px; border: 10px solid #ef86b1; border-radius: 50%; box-shadow: 0 0 0 2px #a14973, inset 0 0 0 2px #a14973, 3px 3px 0 #173d4640; }
.dock-search-count { margin: 0 0 9px; font: 700 .7rem/1.4 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; }
.dock-search-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dock-search {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 5px 8px;
  align-content: center;
  align-items: center;
  min-height: 102px !important;
  padding: 12px;
  border: 1px solid #b9c9c9;
  border-bottom-width: 3px;
  border-radius: 9px;
  background: #fff;
  color: var(--dock-ink);
  text-align: left;
}
.dock-search-icon { font-size: 1.6rem; text-align: center; }
.dock-search-label { font-size: .83rem; font-weight: 750; line-height: 1.3; }
.dock-search-result { grid-column: 2; color: #5b6c70; font-size: .67rem; line-height: 1.3; }
.dock-search:disabled { background: #eef0e9; border-color: #d5dbd2; }
.dock-searched { animation: dock-wobble .24s ease-out; }
.dock-found:disabled { background: #ffeb92; border-color: #c3a746; }
.dock-found .dock-search-result { color: #173d46; font-weight: 800; }
.dock-status { min-height: 72px; margin: 18px 0; padding: 12px 14px; border-left: 3px solid #e8b83b; border-radius: 0 6px 6px 0; background: #f4edda; font-size: .88rem; }
.dock-success { border-color: #32806a; background: #eaf2df; }
.dock-continue, .dock-lower { width: 100%; padding: 13px 14px; border: 2px solid var(--dock-ink); border-bottom-width: 4px; border-radius: 8px; background: #ffd65c; color: var(--dock-ink); font-weight: 850 !important; }
.dock-continue { margin-bottom: 10px; }
.dock-skip { display: block; margin: 0 auto; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; color: #45636b; text-decoration: underline; text-underline-offset: 4px; font-size: .82rem !important; }
.dock-scene { position: relative; height: 196px; overflow: hidden; border: 1px solid #bbd2d2; border-radius: 10px; background: linear-gradient(#e5f0ed, #f3f6e9); }
.dock-scene-label { position: absolute; top: 13px; left: 14px; color: #426369; font: 800 .62rem/1.4 ui-monospace, monospace; letter-spacing: .08em; }
.dock-piling { position: absolute; top: 41px; bottom: 0; width: 14px; border: 1px solid #7e654c; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, #b79970 0 5px, #ad8d64 5px 6px); }
.dock-piling-left { left: 23%; }
.dock-piling-right { right: 23%; }
.dock-pole-outlet { position: absolute; top: 63px; right: calc(23% - 10px); display: grid; gap: 3px; width: 35px; padding: 4px 2px; border: 2px solid var(--dock-ink); background: #fffcf2; box-shadow: 2px 2px 0 #173d4640; text-align: center; }
.dock-pole-label { font: 800 7px/1 ui-monospace, monospace; }
.dock-pole-power { border-top: 4px solid #d74e3a; padding-top: 2px; font: 800 7px/1 ui-monospace, monospace; }
.dock-powered .dock-pole-power { border-color: #3a9768; }
.dock-water { position: absolute; inset: auto 0 0; height: 51px; border-top: 3px solid #a6e0df; background: repeating-linear-gradient(175deg, transparent 0 12px, #ffffff16 12px 14px), linear-gradient(#6fbec6, #469bb1); }
.dock-carriage { position: absolute; top: 40px; left: 27%; right: 27%; height: 63px; transform: translateY(0); transition: transform 1.5s cubic-bezier(.3, .1, .4, 1); }
.dock-boat { display: block; font-size: 64px; line-height: 1; text-align: center; transform-origin: 50% 80%; animation: dock-sway 2.7s ease-in-out infinite; }
.dock-cradle { position: absolute; right: -7px; bottom: -3px; left: -7px; height: 7px; border-radius: 3px; background: #6b7470; box-shadow: 0 3px 0 #485453; }
.dock-lowering .dock-carriage, .dock-afloat .dock-carriage { transform: translateY(58px); }
.dock-afloat .dock-boat { animation: none; }
.dock-splash { position: absolute; right: 26%; bottom: 20px; opacity: 0; font-size: 1.8rem; }
.dock-afloat .dock-splash { opacity: 1; animation: dock-splash .45s ease-out; }
.dock-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.dock-lower { grid-column: 1 / -1; }
.dock-control { padding: 10px; border: 1px solid #bccaca; border-radius: 7px; background: #fff; color: var(--dock-ink); font-size: .78rem !important; font-weight: 650 !important; text-align: left; }
.dock-control:last-child { grid-column: 1 / -1; }
.dock-controls button:disabled { background: #e8ece5; border-color: #c7d1c7; color: #51645d; }
.dock-outlet { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #c5c7be; border-radius: 9px; background: #eeeee6; }
.dock-outlet-copy { flex: 1; min-width: 0; }
.dock-outlet-label { margin: 0 0 5px; font-size: .57rem; letter-spacing: .06em; font-weight: 850; }
.dock-outlet-location { margin: 0 0 6px; font-size: .7rem; font-weight: 650; }
.dock-power { display: flex; align-items: center; gap: 6px; margin: 0; font: 800 .8rem/1.5 ui-monospace, monospace; }
.dock-power::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; border: 1px solid #8f3028; border-radius: 50%; background: #d74e3a; }
.dock-powered .dock-power::before { border-color: #1e6242; background: #3a9768; }
.dock-outlet-help { margin: 5px 0 0; color: #56635e; font-size: .67rem; }
.dock-outlet-buttons { display: grid; gap: 6px; }
.dock-reset, .dock-test { min-width: 67px; padding: 8px 10px; border: 1px solid #65736c; border-bottom-width: 3px; border-radius: 4px; font-size: .7rem !important; font-weight: 850 !important; letter-spacing: .08em; }
.dock-reset { background: #fff; color: #173d46; }
.dock-test { background: #344b4e; color: #fff; }
.dock-outlet button:disabled { opacity: .65; }
.dock-stopped *, .dock-stopped *::before, .dock-stopped *::after { animation: none !important; transition: none !important; }
@media (hover: hover) {
  .dock-search:hover:not(:disabled), .dock-control:hover:not(:disabled) { background: #fff7cf; border-color: #637d7e; }
  .dock-continue:hover:not(:disabled), .dock-lower:hover:not(:disabled) { background: #ffe48b; }
  .dock-skip:hover:not(:disabled) { color: #173d46; background: #ecefe4; }
}
@media (max-width: 400px) {
  .dock-search { grid-template-columns: 1fr; gap: 4px; padding: 10px; }
  .dock-search-icon { text-align: left; }
  .dock-search-result { grid-column: 1; }
  .dock-step { font-size: .6rem; }
}
@keyframes dock-wobble { 35% { transform: rotate(-1.5deg); } 70% { transform: rotate(1deg); } }
@keyframes dock-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes dock-splash { from { transform: translateY(8px) scale(.5); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dock-panel *, .dock-panel *::before, .dock-panel *::after { animation: none !important; transition: none !important; }
}