/* Duet showcase homepage: the page's mat, the deck's paper, one toy-press button style. Sizes are cqw of the 16:9 mat. */
html, body { margin: 0; height: 100%; }
body { display: flex; align-items: center; justify-content: center; font-family: var(--story); color: var(--ink);
       background: var(--yellow) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23111' stroke-opacity='.12' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><path d='M0 24 q10 -14 20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0'/><path d='M0 140 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14'/><path d='M96 56 l-10 -10 M110 50 l0 -14 M124 56 l10 -10 M90 70 l-14 0 M130 70 l14 0'/><path d='M30 70 l.01 0 M50 100 l.01 0' stroke-width='10'/><path d='M14 56 a18 18 0 0 1 36 0 M60 116 a14 14 0 0 0 28 0'/></g></svg>") 0 0 / 160px 160px repeat;
       animation: drift 27s linear infinite; }
@keyframes drift { from { background-position: 0 0; } to { background-position: 160px 160px; } }
.defs { position: absolute; width: 0; height: 0; }

.mat { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; container-type: inline-size;
       display: flex; align-items: center; justify-content: center; }
.card { box-sizing: border-box; width: 90cqw; padding: 2cqw 3cqw; display: flex; align-items: center; gap: 4cqw;
        background: var(--paper); color: var(--ink); border: var(--frame-stroke) solid var(--ink);
        border-radius: var(--paper-radius); box-shadow: .7cqw .7cqw 0 var(--ink); }
/* left: the logo, the title, and the drawing in one column, all the same width */
.brand { flex: 0 0 36cqw; display: flex; flex-direction: column; align-items: center; gap: 1cqw; text-align: center; }
.logo { display: block; width: 20cqw; height: auto; color: var(--ink); }
.title { font-size: 3.2cqw; font-weight: 700; line-height: 1.1; text-wrap: balance; }
.key { color: #fff; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; }
.hero { display: block; width: 100%; height: auto; margin-top: .4cqw; }
/* right: the story, the two ways in, and what the demo is */
.text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 1.6cqw; text-align: left; }
.line { font-size: 1.9cqw; font-weight: 600; line-height: 1.35; }
.award { color: var(--red); }
.ext { color: inherit; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.ext:hover { color: var(--blue); }
.choices { display: flex; flex-direction: column; gap: 1.2cqw; margin: .4cqw 0; }
.big { display: block; text-align: center; font: 700 2.1cqw/1.1 var(--story); padding: 1.1cqw 2.4cqw; border-radius: 999px; text-decoration: none;
       border: var(--frame-stroke) solid var(--ink); color: #fff; box-shadow: .4cqw .4cqw 0 var(--ink);
       transition: transform .12s ease, box-shadow .12s ease; }
.big.green { background: var(--green); }
.big.yellow { background: var(--yellow); color: var(--ink); }
.big:hover { transform: translate(-.2cqw, -.2cqw) rotate(-1.5deg); box-shadow: .7cqw .7cqw 0 var(--ink); }
.big:active { transform: translate(.3cqw, .3cqw); box-shadow: .1cqw .1cqw 0 var(--ink); }
.caption { font-size: 1.35cqw; font-weight: 600; line-height: 1.35; opacity: .8; }
.brand > *, .text > * { margin: 0; animation: pop .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.brand > :nth-child(1) { animation-delay: 0ms; } .brand > :nth-child(2) { animation-delay: 120ms; } .brand > :nth-child(3) { animation-delay: 240ms; }
.text > :nth-child(1) { animation-delay: 300ms; } .text > :nth-child(2) { animation-delay: 400ms; } .text > :nth-child(3) { animation-delay: 500ms; } .text > :nth-child(4) { animation-delay: 600ms; }
.hero { margin-top: .4cqw; }
.foot { position: absolute; left: 0; right: 0; bottom: 1.2cqw; text-align: center; font-size: 1.15cqw; font-weight: 600; white-space: nowrap; }

/* a phone held upright: one column, the type scaled to the screen's width */
@media (max-aspect-ratio: 1 / 1) {
  html, body { height: auto; min-height: 100%; }
  body { display: block; }
  .mat { width: 100vw; min-height: 100vh; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: 4cqw; padding: 6cqw 0 5cqw; box-sizing: border-box; --caption: 3.2cqw; }
  .card { width: 88cqw; padding: 5cqw 5cqw 6cqw; gap: 5cqw; flex-direction: column; border-width: .8cqw; border-radius: 3cqw; box-shadow: 1.2cqw 1.2cqw 0 var(--ink); }
  .brand { flex: none; width: 100%; gap: 3cqw; }
  .logo { width: 44cqw; }
  .title { font-size: 7cqw; }
  .hero { margin-top: 1cqw; }
  .text { gap: 3.5cqw; text-align: center; }
  .line { font-size: 4cqw; }
  .choices { gap: 3cqw; margin: 1cqw 0; }
  .big { font-size: 4.6cqw; padding: 2.6cqw 5cqw; border-width: .8cqw; box-shadow: .9cqw .9cqw 0 var(--ink); }
  .caption { font-size: 3.2cqw; }
  .foot { position: static; padding: 0 6cqw; font-size: 2.8cqw; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { body, .card > *, .big { animation: none; transition: none; } }

/* developer mode (press D): click an element to copy its data-el name */
body.dev [data-el]{outline:1px dashed rgba(39,67,227,.4);outline-offset:-1px;}
body.dev [data-el]:hover{outline:2px solid #2743E3;background:rgba(39,67,227,.07);cursor:crosshair;}
.dev-badge{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:2147483000;display:none;padding:7px 14px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#2743E3;border-radius:999px;box-shadow:0 6px 20px rgba(39,67,227,.35);}
body.dev .dev-badge{display:block;}
.dev-label{position:fixed;z-index:2147483001;display:none;pointer-events:none;padding:4px 8px;font:600 11px/1 system-ui,sans-serif;color:#fff;background:#1B221D;border-radius:6px;white-space:nowrap;}
.dev-toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(10px);z-index:2147483002;opacity:0;padding:9px 16px;font:600 12px/1 system-ui,sans-serif;color:#fff;background:#1B2FA8;border-radius:999px;transition:opacity .2s,transform .2s;pointer-events:none;}
.dev-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}