:root{--example-bg:#f7f5f0;--example-card:#fffdf9;--example-ink:#181714;--example-muted:#6f6a63;--example-accent:#f4511e;--example-accent-ink:#b83a16;--example-line:#18171412;--example-code:#f6f4ef}body:has(.example-view){background:var(--example-bg);color:var(--example-ink);overflow-x:hidden}.example-header{justify-content:space-between;align-items:center;max-width:1440px;margin:0 auto;padding:28px 40px 0;font-family:DM Sans Variable,Arial,sans-serif;display:flex}.example-brand{color:var(--example-ink);letter-spacing:-.1em;font-size:42px;font-weight:500;line-height:.8}.example-brand span{color:var(--example-accent-ink)}.example-header nav{color:var(--example-muted);gap:28px;font-size:14px;display:flex}.example-header nav a,.deck-navigation a{transition:color .16s}.example-header nav a:hover,.deck-navigation a:hover{color:var(--example-accent-ink)}.example-view{min-height:calc(100svh - 82px);font-family:DM Sans Variable,Arial,sans-serif}.deck-stage{place-items:center;min-height:calc(100svh - 164px);padding:24px 24px 18px;display:grid;position:relative}.deck-stack{isolation:isolate;width:min(720px,100vw - 48px);position:relative}.deck-card{border:1px solid var(--example-line);background:var(--example-card);width:100%;min-height:720px;color:var(--example-ink);border-radius:24px}.front-card{z-index:3;cursor:grab;touch-action:pan-y;user-select:none;will-change:transform;position:relative}.front-card.is-grabbed{cursor:grabbing}.rear-card{z-index:1;pointer-events:none;flex-direction:column;justify-content:flex-end;padding:34px 40px;display:flex;position:absolute;inset:0;overflow:hidden}.rear-card-one{z-index:2;background:#fbfaf6;rotate:1.5deg}.rear-card-two{background:#f4f1eb;rotate:-1.7deg}.rear-card span{color:var(--example-muted);font-size:13px}.rear-card strong{letter-spacing:-.04em;max-width:440px;margin-top:9px;font-size:34px;font-weight:500;line-height:1}.card-content{flex-direction:column;height:720px;padding:30px 38px 32px;display:flex}.card-progress{color:var(--example-muted);justify-content:space-between;font-size:13px;line-height:1;display:flex;position:absolute;top:30px;left:38px;right:38px}.card-content h1{max-width:620px;color:var(--example-ink);letter-spacing:-.055em;margin:58px 0 0;font-size:clamp(38px,3.8vw,54px);font-weight:500;line-height:.98}.card-situation{color:#4f4c47;max-width:600px;margin:20px 0 0;font-size:18px;line-height:1.28}.card-result{gap:10px;margin-top:24px;display:grid}.result-row-label{color:#5e5a54;justify-content:space-between;gap:18px;font-size:16px;line-height:1.1;display:flex}.result-row-label strong{color:inherit;font-variant-numeric:tabular-nums;font-weight:500}.result-row.is-winning .result-row-label{color:var(--example-ink);font-weight:500}.result-row.is-winning .result-row-label strong{color:var(--example-accent-ink)}.result-bar{background:#e5e1da;border-radius:99px;height:4px;margin-top:7px;display:block;overflow:hidden}.result-bar>span{border-radius:inherit;background:#b3aea5;height:100%;display:block}.result-row.is-winning .result-bar>span{background:var(--example-accent)}.card-code{border:1px solid var(--example-line);background:var(--example-code);border-radius:14px;flex-direction:column;height:240px;min-height:240px;margin-top:20px;display:flex;overflow:hidden}.card-code .code-toolbar{color:var(--example-muted);background:0 0;justify-content:space-between;align-items:center;gap:20px;padding:13px 15px 0;font-size:12px;display:flex}.code-tabs{align-items:center;gap:21px;display:flex}.code-tabs button{min-height:44px;color:inherit;font:inherit;white-space:nowrap;background:0 0;border:0;border-bottom:1px solid #0000;padding:0 0 9px}.code-tabs button.is-active{border-bottom-color:var(--example-accent);color:var(--example-ink)}.code-tabs span{white-space:nowrap;padding-bottom:9px}.card-code .copy-code{min-width:44px;min-height:44px;color:var(--example-ink);text-align:right;padding:0 0 9px;font-size:12px}.card-code .code{color:#302e2a;white-space:pre-wrap;overflow-wrap:anywhere;background:0 0;flex:1;min-height:0;margin:0;padding:12px 15px 17px;font:13px/1.55 Courier New,monospace;overflow:auto}.card-code .code code{font:inherit}.code-token-comment{color:#626a62}.code-token-string{color:#a34b21}.code-token-keyword{color:#3e6486}.code-token-function{color:#735b27}.code-token-number{color:#8b5c29}.code-token-property{color:#4e7657}.card-action{color:#4f2d21;margin:16px 0 0;font-size:16px;line-height:1.25}.deck-navigation{width:min(920px,100vw - 48px);color:var(--example-muted);grid-template-columns:1fr 1fr;align-items:center;gap:28px;margin:0 auto;padding:0 0 25px;font-size:14px;display:grid}.deck-navigation a{align-items:center;gap:10px;min-height:44px;display:flex}.deck-navigation a:last-child{text-align:right;justify-content:flex-end}@media (width<=767px){.example-header{padding:20px 18px 0}.example-brand{font-size:38px}.example-header nav{gap:18px;font-size:13px}.deck-stage{min-height:0;padding:24px 12px 18px}.deck-stack{width:calc(100vw - 24px)}.deck-card{min-height:0}.card-content{height:auto;min-height:0;padding:24px 22px 25px}.card-content h1{margin-top:48px;font-size:clamp(32px,9vw,46px)}.card-situation{margin-top:17px;font-size:17px}.card-result{margin-top:20px}.card-code{height:230px;min-height:230px;margin-top:20px}.card-code .code-toolbar{gap:10px;padding-left:12px;padding-right:12px}.code-tabs{gap:13px}.card-code .code{padding-left:12px;padding-right:12px;font-size:12px}.card-progress{top:24px;left:22px;right:22px}.rear-card{padding:28px 26px}.rear-card strong{font-size:28px}.deck-navigation{grid-template-columns:1fr 1fr;gap:12px;width:calc(100vw - 36px);padding-bottom:24px}}@media (prefers-reduced-motion:reduce){.front-card{cursor:default}}