/* The square card. Every size inside .embed is in em, and 1em is 1/48 of the card's width,
   so the card scales like an image: identical layout at 250px and at 500px. */
.frame{container-type:inline-size;aspect-ratio:1/1;overflow:hidden;background:#faf9f5}
.embed{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:calc(100vw / 48);font-size:calc(100cqw / 48);
  height:100%;box-sizing:border-box;padding:1.2em;display:flex;flex-direction:column;color:#1a1a19;line-height:1.2;
  color-scheme:light;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.embed b{font-weight:750;color:#1a1a19}
.embed .key{width:1.9em;height:.9em;flex:none}

/* "I run Opus 5.5 / for [task] / at [effort]" */
.embed .ttl{display:flex;align-items:center;gap:.45em;font-size:1.6em;font-weight:500;color:#55534e;letter-spacing:-.01em}
.embed .row{display:grid;grid-template-columns:2.4em minmax(0,1fr);align-items:center;margin-top:.6em}
.embed .lab{font-size:1.5em;color:#55534e}
.embed .seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5em}
.embed .seg button{font:inherit;font-size:1.45em;font-weight:700;height:2.15em;border-radius:.5em;border:1px solid #c3c2b7;background:transparent;color:#55534e;cursor:pointer;padding:0;margin:0;touch-action:manipulation;-webkit-appearance:none;appearance:none}
.embed .seg.task button[aria-pressed="true"]{background:#1a1a19;color:#faf9f5;border-color:#1a1a19}
.embed .seg.lvl button[aria-pressed="true"]{background:#d97757;color:#1a1a19;border-color:#d97757}
.embed .seg button:focus-visible{outline:.15em solid #1a1a19;outline-offset:.15em}

/* the verdict: green when a free win exists, grey when it does not */
.embed .vd{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:.9em;border-radius:1em;padding:1em 1.2em .6em;background:rgba(26,26,25,.06);transition:background .25s}
.embed .vd.win{background:rgba(98,153,135,.2)}
.embed .vh{display:flex;align-items:center;gap:.45em;font-size:1.6em;font-weight:500;color:#55534e;height:1.5em;flex:none}
.embed .wins{height:7.4em;flex:none;margin-top:.2em}
.embed .w{display:flex;align-items:baseline;gap:.5em;height:3.7em}
.embed .w .n{font-size:3.1em;font-weight:800;letter-spacing:-.03em}
.embed .w .wd{font-size:2em;font-weight:750;letter-spacing:-.02em}
.embed .w .s{font-size:1.45em;color:#55534e}
.embed .w .to{margin-left:auto;align-self:center;font-size:1.5em;font-weight:750;background:#629987;color:#1a1a19;border-radius:999px;padding:.22em .75em;white-space:nowrap}
.embed .nw{font-size:2.9em;font-weight:800;letter-spacing:-.03em;color:#55534e;height:1.28em;display:flex;align-items:center}
.embed .cl{font-size:1.5em;color:#55534e;line-height:1.3;margin-top:.15em}
.embed .cl i{font-style:normal;font-weight:750;color:#1a1a19;background:rgba(98,153,135,.5);border-radius:.3em;padding:0 .35em}
.embed .chart{flex:1 1 0;min-height:0;width:100%;display:block;overflow:visible}
.embed .chart text{font-family:inherit}
.embed .ax{display:flex;justify-content:space-between;font-size:1.1em;color:#8a8880;flex:none;margin-top:.2em}

@media (prefers-reduced-motion: reduce){.embed .vd{transition:none}}

/* The bare card page that X loads in its frame: one square, centred, nothing else. */
html.card-page,html.card-page body{margin:0;height:100%;background:#faf9f5;overflow:hidden}
html.card-page body{display:grid;place-items:center}
html.card-page .frame{width:min(100vw,100vh)}