/* The website's mockups. Generated with the design system's mockups. Do not edit by hand: change the generator and run it again. */
.mockup *, .mockup *::before, .mockup *::after { box-sizing: border-box; }
.mockup { --panel: var(--color-frame-panel); --lip: var(--color-frame-lip); --slot: var(--color-frame-slot); --slot-shade: var(--color-frame-slot-line); --brown: var(--color-frame-ink); --brown-muted: var(--color-frame-muted); --rubric: var(--color-rubric); --gold: var(--color-frame-focus-halo); --ring: var(--color-frame-focus); --action: var(--color-action); --on-action: var(--color-on-action); --ink: var(--color-focus); --muted: var(--color-ink-muted); --grain: url("/assets/mockups/grain.png?v=8d022166"); }
.mockup .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mockup .pxt { display: inline-flex; line-height: 0; }
.mockup .pxt svg, .mockup img.picon, .mockup img.px { image-rendering: pixelated; }
.mockup .icon-box { width: 24px; height: 24px; display: grid; place-items: center; }
.mockup .grain { background-image: var(--grain); background-size: calc(64 * var(--u)); background-repeat: repeat; image-rendering: pixelated; }
.mockup .panel { color: var(--brown); border: calc(4 * var(--u)) solid transparent; border-image: url("/assets/mockups/frame.png?v=a2e2b5dc") 6 / calc(6 * var(--u)) / calc(2 * var(--u)) stretch;
  background-image: var(--grain); background-size: calc(64 * var(--u)); background-clip: padding-box; background-origin: padding-box; }
.mockup .stage { overflow-x: auto; padding: 4px 0; }
.mockup .stage-size { width: 1088px; height: 768px; margin: 0 auto; }
.mockup .game { --u: 1px; position: relative; width: 544px; height: 384px; overflow: hidden; transform: scale(2); transform-origin: 0 0; font: 8px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.mockup .game .world { position: absolute; inset: 0; width: 544px; height: 384px; image-rendering: pixelated; background: var(--world) 0 0 / 544px 384px; }
.mockup .game > .panel { position: absolute; }
.mockup .game [data-edge] { transition: translate 300ms cubic-bezier(0.25, 0.1, 0.25, 1); }
.mockup .game.peek [data-edge] { translate: var(--peek); }
.mockup .game:not(.peek) > .hand[data-edge] { translate: 0 71px; }
.mockup .game.hand-shown:not(.peek) > .hand[data-edge], .mockup .game:not(.peek) > .hand[data-edge]:hover { translate: none; }
@media (prefers-reduced-motion: reduce) {
.mockup .game [data-edge] { transition: none; }
}
.mockup .dialog { padding: 2px 8px 2px 6px; display: flex; flex-direction: column; gap: 3px; }
.mockup .dialog p { margin: 0; }
.mockup .initial { float: left; margin: 1px 2px 0 0; line-height: 0; }
.mockup .ribbon { align-self: flex-start; display: inline-flex; align-items: center; padding: 0 3px; height: calc(10 * var(--u)); border: solid transparent; border-width: 0 calc(3 * var(--u)); border-image: var(--ribbon) 0 3 fill / 0 calc(3 * var(--u)) / 0 stretch; }
.mockup .panel, .mockup .pcard, .mockup .ribbon, .mockup .title-band, .mockup .face, .mockup .site, .mockup .grain-sample { image-rendering: pixelated; }
.mockup .dialog .more { position: absolute; right: 8px; bottom: 6px; line-height: 0; }
.mockup .stats { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3px 0; }
.mockup .rule { width: 13px; height: 1px; background: var(--slot-shade); }
.mockup .stats .side, .mockup .stats .list { align-self: stretch; display: flex; flex-direction: column; gap: 3px; }
.mockup .stats .side { gap: 6px; }
.mockup .stats .list { align-items: flex-start; padding-left: 2px; }
.mockup .stat-icon { width: 16px; display: grid; place-items: center; }
.mockup .list .stat-icon { width: 9px; }
.mockup .health { display: flex; align-self: center; }
.mockup .stat { position: relative; display: flex; align-items: center; gap: 2px; }
.mockup .counted { padding-left: 1px; }
.mockup .counted .stat-icon { justify-items: end; padding-right: 3px; }
.mockup .counted.low .stat-icon { padding-right: 5px; }
.mockup .counted.low .count { bottom: -4px; }
.mockup .counted .count { position: absolute; right: 1px; bottom: -1px; padding: 1px 0 0 1px; background: var(--panel); line-height: 0; }
.mockup .menu-tabs { position: absolute; left: calc(100% + 6px); top: 10px; display: flex; flex-direction: column; gap: 1px; }
.mockup .mtab { --o: var(--brown); width: 13px; height: 26px; padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--color-ramp-earth-2); cursor: pointer;
  box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o), inset var(--u) var(--u) 0 var(--color-ramp-earth-3), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--color-ramp-earth-1); }
.mockup .mtab:focus-visible, .mockup .close:focus-visible { outline: 1px solid var(--rubric); outline-offset: 2px; }
.mockup .mtab[aria-disabled="true"] { cursor: default; }
.mockup .stage:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.mockup .unseen, .mockup .unseen * { animation-play-state: paused !important; }
.mockup .posed, .mockup .posed *, .mockup .posed *::before, .mockup .posed *::after { animation: none !important; transition: none !important; }
.mockup .mtab .up, .mockup .mtab .down { display: contents; }
.mockup .mtab .down, .mockup .mtab[aria-pressed="true"] .up { display: none; }
.mockup .mtab[aria-pressed="true"] .down { display: contents; }
.mockup .mtab[aria-pressed="true"] { background: var(--panel); box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o),
  inset var(--u) var(--u) 0 var(--slot-shade); }
.mockup .mtab { position: relative; }
.mockup .mtab::before { content: ""; position: absolute; inset: 0 -5px; }
.mockup .mtab::after { --o: var(--brown); content: attr(data-name); position: absolute; left: calc(100% + 5px); top: 50%; translate: 0 -50%; z-index: 2;
  padding: 1px 4px; white-space: nowrap; font: 700 8px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--brown); background: var(--panel);
  box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o); opacity: 0; pointer-events: none; }
.mockup .mtab:hover::after, .mockup .mtab:focus-visible::after { opacity: 1; }
.mockup .modal { position: absolute; inset: 0; background: color-mix(in srgb, var(--brown) 45%, transparent); }
.mockup .modal[hidden] { display: none; }
.mockup .modal .sheet { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 2px 8px 2px 6px; }
.mockup .modal .sheet p { margin: 0; max-width: 220px; }
.mockup .close { position: absolute; right: 2px; top: 1px; width: 13px; height: 13px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.mockup .drawer .bag { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(8, 1fr); gap: var(--u); height: 100%; padding: var(--u); background: var(--slot-shade); }
.mockup .slot { position: relative; display: grid; place-items: center; background: var(--slot); }
.mockup .slot .count { position: absolute; right: 1px; bottom: 1px; }
.mockup .tab { --o: var(--brown); position: absolute; right: calc(100% + 6px); top: 104px; padding: 6px 2px; background: var(--color-ramp-earth-3); box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o), inset var(--u) var(--u) 0 var(--color-ramp-earth-4), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--color-ramp-earth-2); }
.mockup .hand { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 6px; display: flex; justify-content: center; align-items: flex-end; gap: 6px; }
.mockup .pcard { width: 60px; height: 84px; color: var(--brown); display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: calc(4 * var(--u)) solid transparent; border-image: url("/assets/mockups/card-frame.png?v=81aec861") 4 / calc(4 * var(--u)) / 0 stretch;
  background-image: var(--grain); background-size: calc(64 * var(--u)); background-clip: padding-box; background-origin: padding-box; }
.mockup .pcard .title-band { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 2px;
  color: var(--panel); font-size: 7px; font-weight: 700; line-height: 14px; height: calc(10 * var(--u)); border: solid transparent; border-width: 0 calc(3 * var(--u)); border-image: var(--ribbon) 0 3 fill / 0 calc(3 * var(--u)) / 0 stretch; height: calc(14 * var(--u)); }
.mockup .pcard .title-band .long { font-size: 6px; }
.mockup .pcard .title-band > :first-child { position: relative; top: -1px; }
.mockup .pcard .title-band > .long { top: 0; }
.mockup .pcard .shards { display: flex; align-items: flex-start; gap: 1px; line-height: 0; }
.mockup .pcard .shards .pxt { margin-top: 1px; }
.mockup .pcard .word { font-weight: 800; line-height: 1.1; }
.mockup .pcard .cost { display: flex; align-items: center; gap: 2px; }
.mockup .peek-toggle { --o: var(--brown); position: absolute; z-index: 3; padding: 0; border: 0; display: grid; place-items: center; background: var(--color-ramp-earth-3); cursor: pointer;
  box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o), inset var(--u) var(--u) 0 var(--color-ramp-earth-4), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--color-ramp-earth-2); }
.mockup .peek-toggle img { rotate: 90deg; }
.mockup .peek-toggle[aria-pressed="true"] img { rotate: 270deg; }
.mockup .peek-toggle:focus-visible { outline: 1px solid var(--rubric); outline-offset: 1px; }
.mockup .peek-toggle::before { content: ""; position: absolute; inset: -4px; }
.mockup .peek-toggle::after { --o: var(--brown); content: attr(data-name); position: absolute; left: calc(100% + 5px); bottom: 0; z-index: 2;
  padding: 1px 4px; white-space: nowrap; font: 700 8px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--brown); background: var(--panel);
  box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o); opacity: 0; pointer-events: none; }
.mockup .peek-toggle:hover::after, .mockup .peek-toggle:focus-visible::after { opacity: 1; }
.mockup .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.mockup .site { --u: 2px; background-color: var(--panel); background-image: var(--grain); background-size: calc(64 * var(--u)); image-rendering: pixelated; color: var(--brown); border: 1px solid var(--slot-shade); }
.mockup .site-top { position: relative; }
.mockup .site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.mockup .site-head > .panel { padding: 2px 10px; }
.mockup .lockup { display: inline-flex; align-items: center; gap: 12px; }
.mockup .lockup svg, .mockup .lockup img { image-rendering: pixelated; }
.mockup .site-head nav { display: flex; gap: 24px; }
.mockup .site-head a { color: var(--brown); text-decoration: none; display: inline-flex; align-items: baseline; padding: 2px 3px; }
.mockup .site-head a .initial { display: inline-block; line-height: 0; }
.mockup .site-head a:hover { background: var(--lip); }
.mockup .site-head a:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.mockup .hero-art { height: 320px; background: var(--hero) center / 1200px auto; image-rendering: pixelated; }
.mockup .intro-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; padding: 40px 24px 32px; align-items: start; }
@media (max-width: 760px) {
.mockup .intro-row { grid-template-columns: 1fr; }
}
.mockup .intro-row p { font-size: 19px; margin: 0 0 20px; }
.mockup .btn { --u: 2px; --o: var(--action); display: inline-block; min-height: 44px; padding: 10px 22px; background: var(--action); color: var(--on-action); font-weight: 700; text-decoration: none; box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o); }
.mockup button.btn { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.mockup .rail { height: 6px; margin: 0 24px; background: var(--brown); box-shadow: inset 0 3px 0 var(--color-ramp-earth-3); }
.mockup .site { --hero: url("/assets/mockups/village-band.png?v=872fa988"); }
.mockup .game { --world: url("/assets/mockups/world.png?v=6206101d"); }
.mockup .battle .buyrow { position: absolute; display: flex; justify-content: safe center; align-items: flex-start; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; pointer-events: none; }
.mockup .battle .buyrow .mini { pointer-events: auto; }
.mockup .battle .buyrow::-webkit-scrollbar { display: none; }
.mockup .buyrow > * + * { margin-left: -10px; }
.mockup .mini { --u: 1px; position: relative; flex: none; width: 32px; height: 44px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; color: inherit; font: inherit; background-color: var(--panel);
  border: calc(4 * var(--u)) solid transparent; border-image: url("/assets/mockups/card-frame.png?v=81aec861") 4 / calc(4 * var(--u)) / 0 stretch; image-rendering: pixelated;
  background-image: var(--grain); background-size: calc(64 * var(--u)); background-clip: padding-box; background-origin: padding-box; }
.mockup .mini-band { align-self: stretch; height: 16px; padding: 2px; display: flex; align-items: flex-start; gap: 2px; background: var(--mark); line-height: 0; }
.mockup .mini-band .pxt { margin-top: 1px; }
.mockup .mini.tiny { width: 24px; height: 32px; }
.mockup .mini.tiny .mini-band { height: 5px; }
.mockup button.mini { cursor: pointer; transform-origin: top left; transition: transform 120ms; }
.mockup button.mini:hover, .mockup button.mini:focus-visible, .mockup button.mini.picked { transform: translateY(10px) scale(1.25); }
.mockup button.mini.picked { z-index: 1; }
.mockup button.mini:focus-visible, .mockup .dealt:focus-visible, .mockup .foe-next:focus-visible { outline: 1px solid var(--rubric); outline-offset: 1px; }
.mockup button.mini.picked, .mockup .dealt.picked .pcard { box-shadow: 0 -2px 0 var(--gold), 0 2px 0 var(--gold), -2px 0 0 var(--gold), 2px 0 0 var(--gold),
  0 0 0 2px var(--ring), 0 -3px 0 var(--ring), 0 3px 0 var(--ring), -3px 0 0 var(--ring), 3px 0 0 var(--ring); }
.mockup .buyrow.done button.mini { opacity: 0.5; }
.mockup .flyer { position: absolute; z-index: 6; line-height: 0; pointer-events: none; }
.mockup .zone { position: absolute; inset: 0; pointer-events: none; }
.mockup .zone .flow { animation: zone-flow 0.8s steps(4) infinite; }
@keyframes zone-flow { to { stroke-dashoffset: -8; } }
.mockup .hero { position: absolute; line-height: 0; image-rendering: pixelated; }
.mockup .foe-unit { position: absolute; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: foe-bob 1.6s steps(1) infinite; }
.mockup .foe-health { --o: var(--brown); padding: 2px 3px; line-height: 0; background: var(--panel); box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o); }
@keyframes foe-bob { 0% { translate: 0 0; } 50% { translate: 0 -1px; } }
.mockup .crab { width: 64px; height: 64px; background-repeat: no-repeat; image-rendering: pixelated; }
.mockup .foe-name { display: none; position: absolute; top: 100%; left: 50%; translate: -50% 2px; z-index: 5; line-height: 0; }
.mockup .crab:hover + .foe-name { display: block; }
.mockup .foe-next { position: relative; z-index: 4; padding: 0; border: 0; background: none; line-height: 0; cursor: help; color: inherit; font: inherit; }
.mockup .foe-next .full { display: none; position: absolute; left: 50%; bottom: 0; translate: -50% 0; }
.mockup .foe-next:hover .full, .mockup .foe-next:focus-visible .full, .mockup .foe-next.open .full { display: block; }
.mockup .dealt { position: relative; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: bottom center; transition: transform 150ms; color: inherit; font: inherit; }
.mockup .dealt:hover, .mockup .dealt:focus-visible, .mockup .dealt.picked, .mockup .dealt.raised { transform: translateY(-8px); z-index: 3; }
.mockup .dealt.picked { z-index: 4; }
.mockup .hand.done .dealt { opacity: 0.5; cursor: default; transform: none; }
.mockup .end-turn { --o: var(--brown); position: absolute; padding: 0; border: 0; display: grid; place-items: center; background: var(--color-ramp-earth-2); cursor: pointer;
  box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o), inset var(--u) var(--u) 0 var(--color-ramp-earth-3), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--color-ramp-earth-1); }
.mockup .end-turn:focus-visible { outline: 1px solid var(--rubric); outline-offset: 2px; }
.mockup .end-turn.ready { box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o), inset 0 0 0 2px var(--gold); animation: end-ready 1s steps(1) infinite; }
@keyframes end-ready { 50% { box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o), inset 0 0 0 1px var(--gold); } }
.mockup .end-turn:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) {
.mockup .dealt, .mockup button.mini { transition: none; }
.mockup .zone .flow, .mockup .foe-unit, .mockup .end-turn.ready { animation: none; }
}
.mockup [hidden] { display: none !important; }
.mockup .headline { margin: 0; line-height: 0; }
.mockup .headline svg { max-width: 100%; height: auto; }
.mockup .game.scene, .mockup .game.strip { background-size: 100% 100%; image-rendering: pixelated; }
.mockup .scene .planks { position: absolute; image-rendering: pixelated; clip-path: inset(100% 0 0 0); }
.mockup .scene.planked .planks { clip-path: inset(0); }
.mockup .scene .stepstone, .mockup .scene .splash, .mockup .scene .need { position: absolute; line-height: 0; }
.mockup .scene .stepstone, .mockup .scene .splash { opacity: 0; }
.mockup .scene .splash { z-index: 3; }
.mockup .scene .stepstone.down { opacity: 1; }
.mockup .scene .hero { position: absolute; z-index: 2; line-height: 0; image-rendering: pixelated; }
.mockup .scene .need { --o: var(--brown); display: flex; align-items: center; gap: 3px; padding: 2px 3px; background: var(--panel); box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o); }
.mockup .scene .need[hidden] { display: none; }
.mockup .scene .swell { position: absolute; left: 0; right: 0; top: 90px; height: 88px; background: var(--color-ramp-water-3); opacity: 0; }
.mockup .scene .dialog { position: absolute; z-index: 3; }
.mockup .scene .dialog[hidden] { display: none; }
@media (max-width: 620px) {
.mockup .build .stage-size { width: 544px !important; height: 288px !important; }
.mockup .build .game { transform: none; }
}
.mockup .scene .hand .dealt.played { visibility: hidden; }
.mockup .scene .hand .dealt[disabled] { cursor: default; transform: none; }
.mockup .rail-frame { overflow: hidden; padding-bottom: 8px; }
@media (max-width: 760px) {
.mockup .rail-frame { overflow-x: auto; }
}
.mockup .rail-run { width: max-content; min-width: 100%; }
.mockup .types .rail { margin: 0; width: 140%; }
.mockup .flags { list-style: none; margin: 0; padding: 0 0 0 40px; display: flex; gap: 56px; min-height: 290px; }
.mockup .flying, .mockup .furled { position: relative; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; color: inherit; font: inherit; }
.mockup .furled::before { content: ""; position: absolute; inset: 0 -13px -2px; }
.mockup .flying:focus-visible, .mockup .furled:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mockup .cloth { display: block; width: 60px; height: 84px; background-size: 780px 84px; image-rendering: pixelated; animation: glint 10s infinite; transition: translate 150ms steps(3); }
.mockup .flags li:nth-child(2) .cloth { animation-delay: -2.5s; }
.mockup .flags li:nth-child(3) .cloth { animation-delay: -5s; }
.mockup .flags li:nth-child(4) .cloth { animation-delay: -7.5s; }
@keyframes glint { 0% { background-position: 0 0; }
  92% { background-position: 0 0; animation-timing-function: steps(12); }
  100% { background-position: -720px 0; } }
.mockup .flying:hover .cloth, .mockup .flying:focus-visible .cloth, .mockup .flying.shown .cloth { translate: 0 -6px; }
.mockup .card-x2 { position: absolute; left: -30px; top: 96px; width: 120px; height: 168px; opacity: 0; translate: 0 -24px; transition: opacity 150ms steps(3), translate 150ms steps(3); pointer-events: none; }
.mockup .card-x2 > .pcard { --u: 1px; transform: scale(2); transform-origin: 0 0; font: 8px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.mockup .flying:hover .card-x2, .mockup .flying:focus-visible .card-x2, .mockup .flying.shown .card-x2 { opacity: 1; translate: 0 0; }
.mockup .furled img { image-rendering: pixelated; }
.mockup .furled:hover img, .mockup .furled:focus-visible img { animation: twitch 300ms steps(1) 1; }
@keyframes twitch { 25% { translate: -3px 0; } 50% { translate: 3px 0; } 75% { translate: -3px 0; } }
.mockup .still-out { --o: var(--brown); position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0; padding: 4px 8px; white-space: nowrap; font: 700 14px/1.3 system-ui, sans-serif; color: var(--brown); background: var(--panel); box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o); opacity: 0; }
.mockup .furled:hover .still-out, .mockup .furled:focus-visible .still-out { opacity: 1; }
.mockup .walk .view, .mockup .walk .layer { position: absolute; inset: 0; }
.mockup .walk .layer { background-size: 544px 384px; image-rendering: pixelated; }
.mockup .walk .edge { --o: var(--brown); position: absolute; z-index: 2; width: 16px; height: 16px; padding: 0; border: 0; display: grid; place-items: center; background: var(--color-ramp-earth-3); cursor: pointer;
  box-shadow: 0 calc(-1 * var(--u)) 0 var(--o), 0 var(--u) 0 var(--o), calc(-1 * var(--u)) 0 0 var(--o), var(--u) 0 0 var(--o), inset var(--u) var(--u) 0 var(--color-ramp-earth-4), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--color-ramp-earth-2); }
.mockup .walk .edge img { rotate: var(--turn); }
.mockup .walk .edge[hidden] { display: none; }
.mockup .walk .edge:focus-visible { outline: 1px solid var(--rubric); outline-offset: 1px; }
.mockup .walk .edge::before { content: ""; position: absolute; inset: -3px; }
.mockup .walk .west { left: 4px; top: 184px; }
.mockup .walk .east { right: 4px; top: 184px; }
.mockup .walk .north { top: 4px; left: 264px; }
.mockup .walk .south { bottom: 4px; left: 264px; }
.mockup .minimap { position: absolute; right: 26px; top: 6px; z-index: 2; display: grid; grid-template-columns: repeat(var(--cols), 3px); grid-auto-rows: 2px; padding: 3px; }
.mockup .minimap span.kept { background: var(--color-ramp-earth-3); }
.mockup .minimap span.here { background: var(--rubric); }
.mockup .karmiel .note { max-width: 1088px; margin: 4px auto 0; color: var(--muted); }
.mockup .strip .layer { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; }
.mockup .strip .winter { clip-path: inset(0 100% 0 0); animation: winter 12s infinite; }
@keyframes winter { 0%, 35% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(34); }
  50%, 85% { clip-path: inset(0 0 0 0); animation-timing-function: steps(34); }
  100% { clip-path: inset(0 0 0 100%); } }
.mockup .switch { display: none; max-width: 1088px; margin: 12px auto 0; }
.mockup .strip.show-winter .winter { clip-path: inset(0); }
.mockup .strip.split .winter { clip-path: inset(0 0 0 50%); }
@media (prefers-reduced-motion: reduce) {
.mockup .cloth, .mockup .strip .winter { animation: none; }
.mockup .switch { display: block; }
.mockup .flying .cloth, .mockup .card-x2 { transition: none; }
}
.mockup .s-583ec46e { width:32px;height:32px; }
.mockup .fill-earth-1 { fill: var(--color-ramp-earth-1); }
.mockup .fill-red-1 { fill: var(--color-ramp-red-1); }
.mockup .s-bc8698a9 { left:68px;top:4px;width:408px;height:56px; }
.mockup .s-0ac60ed6 { --ribbon:url("/assets/mockups/ribbon-rubric.png?v=acaba7e4"); }
.mockup .fill-linen-5 { fill: var(--color-ramp-linen-5); }
.mockup .s-9e3b3d73 { width:5px;height:3px; }
.mockup .s-dd880720 { left:4px;top:68px;width:27px;height:216px; }
.mockup .s-8d5fe77b { width:9px;height:69px; }
.mockup .s-ed44f0d7 { width:13px;height:10px; }
.mockup .s-9b3f5679 { width:9px;height:12px; }
.mockup .s-463d46b7 { width:7px;height:8px; }
.mockup .s-5ab9628b { width:8px;height:8px; }
.mockup .s-206b3d8e { width:9px;height:8px; }
.mockup .s-f2064055 { width:9px;height:7px; }
.mockup .s-9975e705 { width:9px;height:9px; }
.mockup .s-d56d5acb { width:11px;height:10px; }
.mockup .s-ae5b6921 { width:3px;height:7px; }
.mockup .s-2fbf8ad3 { width:11px;height:11px; }
.mockup .s-e984c08a { width:9px;height:10px; }
.mockup .s-6000454b { width:10px;height:11px; }
.mockup .s-5b86f76a { width:11px;height:9px; }
.mockup .s-ff12ec11 { left:484px;top:68px;width:56px;height:248px; }
.mockup .s-246d62f5 { width:5px;height:7px; }
.mockup .s-a1c8eab9 { width:16px;height:16px; }
.mockup .s-66d8ce5b { --mark:var(--color-ramp-water-2); }
.mockup .s-40491e69 { --ribbon:url("/assets/mockups/ribbon-tall-water.png?v=7d48806c"); }
.mockup .s-1817f2d0 { --mark:var(--color-ramp-soot-5); }
.mockup .s-814117b2 { --ribbon:url("/assets/mockups/ribbon-tall-stone.png?v=52d4fe13"); }
.mockup .s-219fe04d { --mark:var(--color-ramp-forest-4); }
.mockup .s-b204d6ec { --ribbon:url("/assets/mockups/ribbon-tall-wood.png?v=b65fe424"); }
.mockup .s-519d1893 { --mark:var(--color-ramp-stone-1); }
.mockup .s-917bde8d { --ribbon:url("/assets/mockups/ribbon-tall-wind.png?v=669a3679"); }
.mockup .s-dd1eb0bd { --mark:var(--color-ramp-sand-1); }
.mockup .s-c5a9275f { --ribbon:url("/assets/mockups/ribbon-tall-action.png?v=a5a0ef04"); }
.mockup .s-8fd988a7 { width:24px;height:24px; }
.mockup .s-9498c709 { left:4px;top:353px;width:27px;height:27px; }
.mockup .s-9449f7f0 { width:10px;height:14px; }
.mockup .s-2969b1cb { width:1088px;height:576px; }
.mockup .s-9c86ecc6 { width:544px;height:288px;background-image:url("/assets/mockups/stream.png?v=cb5f025a"); }
.mockup .s-943fedeb { left:256px;top:64px;width:32px;height:128px;background:url("/assets/mockups/stream-planks.png?v=6e6aabd8") -256px -64px; }
.mockup .s-04909c9a { left:264px;top:104px; }
.mockup .s-c50756e2 { width:16px;height:8px; }
.mockup .s-be1c5346 { left:264px;top:124px; }
.mockup .s-4ff78066 { left:264px;top:144px; }
.mockup .s-be416ee4 { left:256px;top:160px; }
.mockup .s-2d305001 { left:265px;top:156px; }
.mockup .s-dc7e9321 { width:13px;height:6px; }
.mockup .s-ab0b993e { left:290px;top:138px; }
.mockup .s-c76585c4 { width:5px;height:5px; }
.mockup .stroke-forest-3 { stroke: var(--color-ramp-forest-3); }
.mockup .stroke-grass-5 { stroke: var(--color-ramp-grass-5); }
.mockup .s-90fcdf66 { left:36px;top:4px;width:472px;height:88px; }
.mockup .s-81525a52 { left:192px;top:256px; }
.mockup .s-016fe064 { left:288px;bottom:96px; }
.mockup .s-3f9ab4b0 { width:57px;height:9px; }
.mockup .s-d9aad379 { background-image:url("/assets/mockups/crab.png?v=4fa60a5d"); }
.mockup .s-210d580b { left:484px;top:356px;width:56px;height:24px; }
.mockup .s-1bd9a4bc { background-image:url("/assets/mockups/pennant-water.png?v=4d3993fd"); }
.mockup .s-02cada17 { background-image:url("/assets/mockups/pennant-stone.png?v=525a695d"); }
.mockup .s-0c623d61 { background-image:url("/assets/mockups/pennant-wood.png?v=c2311445"); }
.mockup .s-efb21d76 { background-image:url("/assets/mockups/pennant-wind.png?v=e099b379"); }
.mockup .s-6349a64f { width:18px;height:42px; }
.mockup .s-495c3337 { --turn:180deg; }
.mockup .s-685e47ff { --turn:0deg; }
.mockup .s-a9c76668 { --turn:270deg; }
.mockup .s-82b41aac { --turn:90deg; }
.mockup .s-0942c4be { --cols:14; }
.mockup .s-85b46d53 { width:1088px;height:384px; }
.mockup .s-2df0e8a6 { width:544px;height:192px; }
.mockup .s-2013d93b { background-image:url("/assets/mockups/season-summer.png?v=c914dd03"); }
.mockup .s-c1a062bf { background-image:url("/assets/mockups/season-winter.png?v=c8560bc4"); }
@media (width >= 544px) { .mockup[data-live] > .frame { display: none !important; } }
.mockup .stage { padding: 0; }
.mockup p { margin: 0; }
.mockup[data-mockup="karmiel-screens"] .note { display: none; }
@media (width < 544px) {
  .mockup[data-live]:not([data-mockup="game-screen"]):not([data-mockup="crab-fight"]) > .frame { display: none !important; }
  .mockup[data-mockup="game-screen"] > .live, .mockup[data-mockup="crab-fight"] > .live { display: none; }
  .mockup[data-mockup="game-screen"] > .frame { width: 100%; height: 384px; object-fit: cover; object-position: max(-64px, 100%) 0; image-rendering: pixelated; }
  .mockup[data-mockup="crab-fight"] > .frame { width: 544px; height: 384px; image-rendering: pixelated; }
}