
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
.oblique-embed {
  margin: 1.25rem auto 0;
  padding: clamp(22px, 3vw, 40px) clamp(16px, 3vw, 36px) 28px;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 40%, #f3f0e9 0%, #e9e6de 68%, #e2ded5 100%);
  color: #22231f;
  font-family: 'DM Sans', Arial, sans-serif;
  color-scheme: light;
}
.oblique-embed .oblique-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: min(100%, 920px); margin: 0 auto; }
.oblique-embed .experience { padding-top: 12px; }
.oblique-embed .info-panel { z-index: 5; }
.oblique-print-sheet { display: none; }
@media print {
  @page { margin: 12mm; }
  html.oblique-printing body > *:not(.oblique-print-sheet) { display: none !important; }
  html.oblique-printing .oblique-print-sheet { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8mm; }
  html.oblique-printing .print-card { display: flex; flex-direction: column; min-height: 55mm; padding: 10mm; border: 1px solid #777; border-radius: 2mm; break-inside: avoid; page-break-inside: avoid; background: white; color: #111; }
  html.oblique-printing .print-card strong { font: 700 9pt 'DM Sans', Arial, sans-serif; letter-spacing: .1em; }
  html.oblique-printing .print-card p { flex: 1; margin: 8mm 0; white-space: pre-line; font: 500 15pt/1.18 'Manrope', Arial, sans-serif; overflow-wrap: break-word; }
  html.oblique-printing .print-card span { font: 600 8pt 'DM Sans', Arial, sans-serif; }
  html.oblique-printing .print-card small { display: block; margin-top: 2mm; color: #444; font: 7pt/1.25 Arial, sans-serif; overflow-wrap: anywhere; }
  html.oblique-printing .print-card em { margin-top: 3mm; padding-top: 2mm; border-top: 1px solid #bbb; font: italic 8pt/1.3 Arial, sans-serif; overflow-wrap: anywhere; }
  html.oblique-printing .print-attempt { margin-top: 3mm; padding-top: 2mm; border-top: 1px solid #bbb; font: 8pt/1.3 Arial, sans-serif; overflow-wrap: anywhere; }
}


.oblique-embed, .oblique-embed * { box-sizing: border-box; }
.oblique-embed button { font: inherit; }
.oblique-embed [hidden] { display: none !important; }
.oblique-embed .brand-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px clamp(16px, 3vw, 28px);
  border-bottom: 1px solid rgba(50, 52, 44, .1);
  min-height: 40px;
  position: sticky;
  top: 0;
  z-index: 25;
  background: color-mix(in srgb, #e9e6de 88%, #f7f5ef);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.oblique-embed .brand-logo-link { display: inline-flex; line-height: 0; flex: 0 0 auto; border-radius: 4px; transition: transform .18s ease, opacity .18s ease; }
.oblique-embed .brand-logo-link:hover { opacity: .92; transform: scale(1.04); }
.oblique-embed .brand-logo-link:focus-visible { outline: 3px solid #df5a34; outline-offset: 3px; }
.oblique-embed .brand-logo { width: 28px; height: 28px; object-fit: contain; display: block; }
.oblique-embed .brand-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: flex-end;
  font-size: 11px;
  line-height: 1.2;
}
.oblique-embed .brand-links a { color: #6e7168; text-decoration: none; }
.oblique-embed .brand-links a:hover, .oblique-embed .brand-links a:focus-visible { color: #c34e30; text-decoration: underline; text-underline-offset: 3px; }
.oblique-embed .brand-links a:focus-visible { outline: 2px solid #df5a34; outline-offset: 3px; }
.oblique-embed .page { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: clamp(24px, 3.1vw, 48px) clamp(24px, 4.6vw, 76px) 26px; background: radial-gradient(circle at 50% 40%, #f3f0e9 0%, #e9e6de 68%, #e2ded5 100%); }
.oblique-embed .masthead, .oblique-embed .footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.oblique-embed .masthead { position: relative; z-index: 3; align-items: flex-start; }
.oblique-embed .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.oblique-embed .lead {
  max-width: 42rem;
  margin: 18px 0 0;
  color: #55584f;
  font-size: clamp(14px, 1.35vw, 16px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.55;
  text-wrap: pretty;
}
.oblique-embed .app-credit { margin: 0; color: #76786e; font-size: 11px; line-height: 1.4; }
.oblique-embed .app-credit a { color: #3e453d; text-decoration: underline; text-decoration-color: #a4a49a; text-underline-offset: 3px; }
.oblique-embed .app-credit a:hover { color: #c34e30; text-decoration-color: currentColor; }
.oblique-embed .app-credit a:focus-visible { outline: 3px solid #df5a34; outline-offset: 4px; }
.oblique-embed .wordmark { display: flex; flex-direction: column; font-family: 'Manrope', Arial, sans-serif; font-size: clamp(18px, 1.8vw, 27px); font-weight: 700; letter-spacing: -.075em; line-height: .98; }
.oblique-embed .wordmark-dot { color: #dd542e; }
.oblique-embed .info-nav { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: clamp(12px, 2.2vw, 28px); max-width: min(100%, 42rem); }
.oblique-embed .info-menu summary { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: #45473f; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
.oblique-embed .info-menu summary::-webkit-details-marker { display: none; }
.oblique-embed .info-menu summary:hover, .oblique-embed .info-menu[open] summary { color: #cb4d2a; }
.oblique-embed .info-menu summary:focus-visible, .oblique-embed .info-panel a:focus-visible { outline: 3px solid #df5a34; outline-offset: 4px; }
.oblique-embed .chevron { width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.oblique-embed .info-menu[open] .chevron { margin-top: 3px; transform: rotate(225deg); }
.oblique-embed .info-panel { position: absolute; top: calc(100% + 15px); right: 0; width: min(500px, calc(100vw - 48px)); max-height: min(72vh, 650px); overflow-y: auto; padding: clamp(25px, 3vw, 36px); border: 1px solid #d6d4cb; border-radius: 4px; background: #f7f5ef; box-shadow: 0 22px 55px rgba(31, 32, 27, .18); }
.oblique-embed .panel-kicker { color: #c34e30; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.oblique-embed .info-panel h2 { margin: 12px 0 20px; font-family: 'Manrope', Arial, sans-serif; font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.055em; line-height: 1.15; }
.oblique-embed .info-panel p { margin: 0 0 15px; color: #4c4e47; font-size: 13px; line-height: 1.65; }
.oblique-embed .info-panel em { color: #2e302a; }
.oblique-embed .info-panel strong { color: #2e302a; font-weight: 600; }
.oblique-embed .help-list { margin: 0 0 16px; padding-left: 1.2em; color: #4c4e47; font-size: 13px; line-height: 1.65; }
.oblique-embed .help-list li { margin: 0 0 10px; padding-left: .2em; }
.oblique-embed .help-list li::marker { color: #c34e30; font-weight: 700; }
.oblique-embed .help-tip { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid #d05530; background: #f3f0e8; color: #4a463c; font-size: 12.5px; line-height: 1.55; }
.oblique-embed .help-keys { margin: 0; color: #6f7269; font-size: 12px; line-height: 1.55; }
.oblique-embed .info-panel kbd, .oblique-embed .help-keys kbd {
  display: inline-block;
  min-width: 1.1em;
  padding: 1px 6px;
  border: 1px solid #c9cbc2;
  border-radius: 3px;
  background: #fffef9;
  color: #353831;
  font: 600 11px/1.4 'DM Sans', Arial, sans-serif;
  text-align: center;
}
.oblique-embed .panel-sources { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 21px; padding-top: 17px; border-top: 1px solid #d9d8d0; color: #85867d; font-size: 11px; line-height: 1.6; }
.oblique-embed .panel-sources a { color: #353831; text-decoration: underline; text-decoration-color: #b8b9af; text-underline-offset: 3px; }
.oblique-embed .panel-sources a:hover { color: #c34e30; }
.oblique-embed .experience { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vh, 30px); padding: 28px 0 34px; }
.oblique-embed .project-block { display: flex; flex-direction: column; gap: 6px; width: min(100%, 672px); }
.oblique-embed .project-lens { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 2px 7px; border-bottom: 1px solid #cecec5; }
.oblique-embed .project-lens label { flex: 0 0 auto; color: #85877e; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.oblique-embed .project-lens input { flex: 1; min-width: 0; padding: 5px 0; border: 0; background: transparent; color: #242a24; font: 500 13px 'DM Sans', Arial, sans-serif; }
.oblique-embed .project-lens input::placeholder { color: #a3a49b; }
.oblique-embed .project-lens button { padding: 5px 0; border: 0; background: none; color: #9b543d; font-size: 11px; cursor: pointer; }
.oblique-embed .project-lens input:focus-visible, .oblique-embed .project-lens button:focus-visible { outline: 2px solid #df5a34; outline-offset: 3px; }
.oblique-embed .project-hint { margin: 0; color: #8a8d84; font-size: 11px; line-height: 1.4; }
.oblique-embed .deck-picker { display: none; position: relative; align-items: center; gap: 16px; width: min(100%, 470px); border-bottom: 1px solid #bfc1b8; }
.oblique-embed .deck-picker label { color: #8a8a80; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.oblique-embed .deck-picker select { flex: 1; min-width: 0; padding: 13px 28px 13px 0; appearance: none; border: 0; background: transparent; color: #252923; font: 600 13px 'DM Sans', Arial, sans-serif; cursor: pointer; }
.oblique-embed .deck-picker::after { position: absolute; right: 2px; top: 12px; color: #d15432; content: '⌄'; font-size: 22px; line-height: 1; pointer-events: none; }
.oblique-embed .deck-picker select:focus-visible { outline: 3px solid #df5a34; outline-offset: -3px; }
.oblique-embed .deck-tabs { display: flex; flex-wrap: wrap; justify-content: flex-start; width: min(100%, 920px); overflow: visible; border-bottom: 1px solid #cacbc2; }
.oblique-embed .deck-tab { position: relative; flex: 0 0 auto; min-width: max-content; padding: 13px 13px 16px; border: 0; background: transparent; color: #777a71; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .2s ease; }
.oblique-embed .deck-tab:hover:not(:disabled), .oblique-embed .deck-tab.is-active { color: #20231e; }
.oblique-embed .deck-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #d55130; content: ''; }
.oblique-embed .deck-tab:disabled { color: #a7a99f; cursor: not-allowed; }
.oblique-embed .deck-tab:focus-visible { outline: 3px solid #df5a34; outline-offset: -4px; }
.oblique-embed .deck-picker select:disabled { opacity: .55; cursor: not-allowed; }
.oblique-embed .deck-caption { width: min(100%, 920px); margin: -8px 0 0; color: #7a7d74; font-size: 11px; line-height: 1.45; }
.oblique-embed .card-stack { position: relative; width: min(100%, 672px); aspect-ratio: 1.57; isolation: isolate; }
.oblique-embed .stack-card, .oblique-embed .card { position: absolute; inset: 0; border-radius: 5px; }
.oblique-embed .stack-card { background: #161816; box-shadow: 0 20px 30px rgba(32, 30, 24, .11); }
.oblique-embed .stack-card--back { transform: translate(15px, 15px) rotate(3deg); opacity: .4; }
.oblique-embed .stack-card--middle { transform: translate(7px, 8px) rotate(1.25deg); opacity: .74; }
.oblique-embed .card { z-index: 1; display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: clamp(24px, 4.1vw, 44px); border: 1px solid #323530; background: #191c19; color: #f3f1eb; text-align: left; box-shadow: 0 28px 55px rgba(24, 28, 22, .17), 0 3px 8px rgba(24, 28, 22, .14); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.oblique-embed .card:hover { transform: translateY(-5px) rotate(-.35deg); box-shadow: 0 35px 65px rgba(24, 28, 22, .21), 0 4px 10px rgba(24, 28, 22, .13); }
.oblique-embed .card:active { transform: translateY(1px) scale(.995); }
.oblique-embed .card-main { display: flex; flex: 1; flex-direction: column; width: 100%; min-height: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.oblique-embed .card--light { border-color: #d2d4cf; border-top: 3px solid var(--accent, #67756d); background: var(--card-bg, #fafaf7); color: #1c211d; }
.oblique-embed .card--light:hover { background: var(--card-bg, #fafaf7); }
.oblique-embed .card[data-deck="ambagious"] { --accent: #65796f; --card-bg: #f8f9f5; }
.oblique-embed .card[data-deck="routes"] { --accent: #b45d39; --card-bg: #fbf3ed; }
.oblique-embed .card[data-deck="music"] { --accent: #4f718b; --card-bg: #f0f5f7; }
.oblique-embed .card[data-deck="writing"] { --accent: #8b6178; --card-bg: #f7f1f5; }
.oblique-embed .card[data-deck="painting"] { --accent: #947341; --card-bg: #f8f4e9; }
.oblique-embed .card[data-deck="collage"] { --accent: #a75d4b; --card-bg: #f9f1eb; }
.oblique-embed .card[data-deck="dance"] { --accent: #517d6c; --card-bg: #eff6f0; }
.oblique-embed .card[data-deck="robert"] { --accent: #3d5c56; --card-bg: #eef3f1; }
.oblique-embed .card[data-deck="doktor"] { --accent: #b14a32; --card-bg: #f6eee8; }
.oblique-embed .card--light .card-top span:first-child, .oblique-embed .card--light .card-next { color: var(--accent); }
.oblique-embed .card--light .card-top, .oblique-embed .card--light .card-top span:last-child, .oblique-embed .card--light .card-bottom { color: #5e645d; }
.oblique-embed .card--light .card-bottom { letter-spacing: .1em; }
.oblique-embed .card:focus-within, .oblique-embed .draw-button:focus-visible, .oblique-embed .utility-button:focus-visible, .oblique-embed .saved-open:focus-visible, .oblique-embed .saved-close:focus-visible, .oblique-embed .saved-remove:focus-visible, .oblique-embed .footer a:focus-visible { outline: 3px solid #df5a34; outline-offset: 5px; }
.oblique-embed .card-top, .oblique-embed .card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; font-family: 'Manrope', Arial, sans-serif; font-size: clamp(9px, 1vw, 11px); font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
.oblique-embed .card-top span:first-child, .oblique-embed .creator-credit { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.oblique-embed .card-top { color: #e1e2d9; }
.oblique-embed .card-top span:last-child, .oblique-embed .card-bottom { color: #a4a79d; }
.oblique-embed .card-bottom { flex-shrink: 0; text-transform: uppercase; }
.oblique-embed .strategy { display: block; max-width: 560px; margin: auto 0; padding: 10px 0; white-space: pre-line; font-family: 'Manrope', Arial, sans-serif; font-size: clamp(27px, 4vw, 53px); font-weight: 500; letter-spacing: -.06em; line-height: 1.17; text-wrap: balance; overflow-wrap: break-word; transition: opacity .18s ease, transform .18s ease; }
.oblique-embed .strategy--long { font-size: clamp(23px, 3vw, 38px); }
.oblique-embed .card.is-changing .strategy { opacity: 0; transform: translateY(8px); }
.oblique-embed .card-next { margin-left: auto; padding: 0; border: 0; background: none; color: inherit; font: 400 23px/1 Arial, sans-serif; cursor: pointer; }
.oblique-embed .creator-credit { display: inline-flex; align-items: center; gap: 8px; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; text-transform: none; }
.oblique-embed .creator-credit[hidden] { display: none; }
.oblique-embed .creator-credit[href]:hover { color: #c34e30; text-decoration: underline; text-underline-offset: 3px; }
.oblique-embed .creator-credit:focus-visible { outline: 3px solid #df5a34; outline-offset: 4px; }
.oblique-embed .pair-card { width: min(100%, 672px); padding: 19px 24px 20px; border: 1px solid #cecec5; border-left: 3px solid #d05530; border-radius: 3px; background: #f9f7f1; box-shadow: 0 10px 26px rgba(24, 28, 22, .06); }
.oblique-embed .pair-head, .oblique-embed .pair-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #73776d; font-size: 10px; font-weight: 700; letter-spacing: .11em; }
.oblique-embed .pair-head { color: #b05135; }
.oblique-embed .pair-head button { padding: 0; border: 0; background: none; color: #70756d; font-size: 11px; font-weight: 500; letter-spacing: 0; cursor: pointer; }
.oblique-embed .pair-head button:disabled { opacity: .45; cursor: not-allowed; }
.oblique-embed .pair-card p { margin: 16px 0 20px; white-space: pre-line; font: 500 clamp(19px, 2.7vw, 27px)/1.23 'Manrope', Arial, sans-serif; letter-spacing: -.045em; overflow-wrap: break-word; }
.oblique-embed .pair-foot { flex-wrap: wrap; align-items: flex-end; letter-spacing: .04em; }
.oblique-embed .pair-foot a { color: #4d6356; text-decoration: underline; text-underline-offset: 3px; }
.oblique-embed .pair-foot > :last-child { text-align: right; }
.oblique-embed .experiment { width: min(100%, 672px); padding: 18px 20px 20px; border: 1px solid #d3d3c9; border-radius: 3px; background: rgba(255, 254, 248, .62); }
.oblique-embed .experiment label { display: block; color: #313a31; font: 600 13px/1.35 'Manrope', Arial, sans-serif; letter-spacing: -.02em; }
.oblique-embed .experiment-action-row { display: flex; align-items: stretch; gap: 10px; margin-top: 11px; }
.oblique-embed .experiment input, .oblique-embed .experiment textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #c9cbc0; border-radius: 2px; background: #fffefa; color: #273027; font: 12px/1.4 'DM Sans', Arial, sans-serif; }
.oblique-embed .experiment input::placeholder, .oblique-embed .experiment textarea::placeholder { color: #999d91; }
.oblique-embed .experiment input:read-only { background: #f0f0e9; color: #555e53; }
.oblique-embed .experiment textarea { display: block; min-height: 68px; margin: 9px 0 11px; resize: vertical; }
.oblique-embed .experiment button { flex: 0 0 auto; padding: 9px 13px; border: 1px solid #343b33; border-radius: 2px; background: #343b33; color: #fffefa; font-size: 11px; font-weight: 600; cursor: pointer; }
.oblique-embed .experiment button:disabled { opacity: .44; cursor: not-allowed; }
.oblique-embed .experiment button:focus-visible, .oblique-embed .experiment input:focus-visible, .oblique-embed .experiment textarea:focus-visible { outline: 2px solid #df5a34; outline-offset: 3px; }
.oblique-embed .experiment-result { margin-top: 16px; padding-top: 15px; border-top: 1px solid #d8d9ce; }
.oblique-embed .experiment-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.oblique-embed .experiment-result-actions #experiment-cancel { border-color: #c9cbc0; background: transparent; color: #596055; }
.oblique-embed #experiment-feedback { margin: 10px 0 0; color: #4a7358; font-size: 11px; }
.oblique-embed .controls { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, 672px); }
.oblique-embed .action-row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; width: 100%; }
.oblique-embed .utility-button { min-width: 0; flex: 1 1 7.5rem; padding: 14px 15px; border: 1px solid #c4c5bc; border-radius: 3px; background: #f4f2ec; color: #3b4038; font-size: 12px; font-weight: 600; cursor: pointer; }
.oblique-embed .utility-button:hover:not(:disabled) { border-color: #777d70; background: #fff; }
.oblique-embed .utility-button:disabled { opacity: .45; cursor: not-allowed; }
.oblique-embed .control-meta { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 22px; }
.oblique-embed .saved-open { padding: 2px 0; border: 0; border-bottom: 1px solid #a4a49a; background: none; color: #484c43; font-size: 11px; cursor: pointer; }
.oblique-embed .saved-open:hover { color: #c34e30; border-color: currentColor; }
.oblique-embed .extra-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.oblique-embed .extra-actions button { padding: 7px 12px; border: 1px solid #c9c9bf; border-radius: 3px; background: transparent; color: #454a42; font-size: 11px; cursor: pointer; }
.oblique-embed .extra-actions button:hover:not(:disabled) { border-color: #8f9488; background: #faf9f4; }
.oblique-embed .extra-actions button:disabled { opacity: .5; cursor: not-allowed; }
.oblique-embed #focus-status { color: #a14e34; font-size: 11px; font-variant-numeric: tabular-nums; }
.oblique-embed .copy-status { color: #4a7358; font-size: 11px; }
.oblique-embed .draw-button:disabled, .oblique-embed .card-main:disabled, .oblique-embed .card-next:disabled { opacity: .57; cursor: default; }
.oblique-embed .draw-button:disabled:hover { background: #22231f; transform: none; }
.oblique-embed .source-details { width: min(100%, 560px); color: #72766d; font-size: 11px; line-height: 1.5; text-align: center; }
.oblique-embed .source-details summary { display: inline-block; padding: 3px; color: #676c61; text-decoration: underline; text-decoration-color: #b9bab0; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.oblique-embed .source-details summary::-webkit-details-marker { display: none; }
.oblique-embed .source-details p { margin: 9px 0 7px; }
.oblique-embed .source-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.oblique-embed .source-links a { color: #414f43; text-decoration: underline; text-underline-offset: 3px; }
.oblique-embed .source-details summary:focus-visible, .oblique-embed .source-links a:focus-visible, .oblique-embed .pair-card button:focus-visible, .oblique-embed .pair-card a:focus-visible, .oblique-embed .extra-actions button:focus-visible { outline: 2px solid #df5a34; outline-offset: 3px; }
.oblique-embed .draw-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; flex: 1 1 12rem; padding: 16px 17px 16px 21px; border: 1px solid #22231f; border-radius: 3px; background: #22231f; color: #faf8f2; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.oblique-embed .draw-button:hover { background: #3b3e37; transform: translateY(-2px); }
.oblique-embed .draw-button:active { transform: translateY(0); }
.oblique-embed .draw-arrow { font-size: 22px; font-family: Arial, sans-serif; font-weight: 400; line-height: .7; }
.oblique-embed .deck-note { margin: 0; color: #85857b; font-size: 11px; letter-spacing: .035em; }
.oblique-embed .saved-dialog { width: min(600px, calc(100vw - 32px)); max-height: 80dvh; padding: 26px; border: 1px solid #d3d3c9; border-radius: 5px; background: #f8f6f0; color: #252923; box-shadow: 0 30px 80px rgba(20, 24, 19, .3); }
.oblique-embed .saved-dialog::backdrop { background: rgba(21, 25, 20, .48); }
.oblique-embed .saved-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.oblique-embed .saved-dialog h2 { margin: 0; font: 600 22px 'Manrope', Arial, sans-serif; letter-spacing: -.04em; }
.oblique-embed .saved-close { padding: 6px 0; border: 0; background: none; color: #5d6157; font-size: 12px; cursor: pointer; }
.oblique-embed .saved-printbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: #777b70; font-size: 11px; }
.oblique-embed .saved-printbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.oblique-embed .saved-printbar button { padding: 8px 12px; border: 1px solid #343b33; border-radius: 3px; background: #343b33; color: white; font-size: 11px; cursor: pointer; }
.oblique-embed .saved-printbar #download-saved { border-color: #c4c5bc; background: #f4f2ec; color: #3b4038; }
.oblique-embed .saved-printbar button:disabled { opacity: .45; cursor: not-allowed; }
.oblique-embed .saved-printbar button:focus-visible, .oblique-embed .saved-choice input:focus-visible, .oblique-embed .saved-note:focus-visible { outline: 2px solid #df5a34; outline-offset: 3px; }
.oblique-embed .saved-items { max-height: calc(80dvh - 182px); overflow-y: auto; }
.oblique-embed .saved-choice { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.oblique-embed .saved-choice input { margin: 0; accent-color: #ba5536; }
.oblique-embed .saved-note { display: block; width: 100%; padding: 9px 10px; margin: 0 0 12px; border: 1px solid #d3d5ca; border-radius: 2px; background: #fffcf7; color: #343b33; font: 12px 'DM Sans', Arial, sans-serif; }
.oblique-embed .saved-note::placeholder { color: #9a9d92; }
.oblique-embed .attempt-list { display: grid; gap: 8px; margin: 0 0 13px; }
.oblique-embed .attempt { padding: 11px 13px; border-left: 2px solid #bb6a47; background: #eeeee6; }
.oblique-embed .attempt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.oblique-embed .attempt-head strong { color: #6e513f; font-size: 11px; font-weight: 700; }
.oblique-embed .attempt-head button { flex: 0 0 auto; padding: 2px 0; border: 0; background: none; color: #925e4b; font-size: 10px; cursor: pointer; }
.oblique-embed .saved-item .attempt p { margin: 4px 0; color: #394038; font: 12px/1.4 'DM Sans', Arial, sans-serif; letter-spacing: 0; overflow-wrap: anywhere; }
.oblique-embed .attempt small { display: block; margin-top: 8px; color: #777c72; font-size: 10px; }
.oblique-embed .attempt a { display: inline-block; margin-top: 5px; color: #4b594b; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.oblique-embed .attempt-head button:focus-visible { outline: 2px solid #df5a34; outline-offset: 3px; }
.oblique-embed .saved-item { padding: 17px 0; border-top: 1px solid #dcdcd2; }
.oblique-embed .saved-item-label { color: #aa5539; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.oblique-embed .saved-item p { margin: 9px 0 13px; font: 500 18px/1.3 'Manrope', Arial, sans-serif; letter-spacing: -.04em; }
.oblique-embed .saved-item-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: #72766d; font-size: 11px; }
.oblique-embed .saved-item-foot .saved-remove { margin-left: auto; }
.oblique-embed .saved-item-foot a { color: #4b544a; text-decoration: underline; text-underline-offset: 3px; }
.oblique-embed .saved-remove { padding: 4px 0; border: 0; background: none; color: #7f5449; font-size: 11px; cursor: pointer; }
.oblique-embed .saved-empty { margin: 20px 0 5px; color: #777b70; font-size: 13px; }
.oblique-embed .footer { flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; color: #82847a; font-size: 11px; letter-spacing: .015em; }
.oblique-embed .footer-brand { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.oblique-embed .footer-brand a { color: #6e7168; text-decoration: none; border-bottom: none; padding-bottom: 0; }
.oblique-embed .footer-brand a:hover, .oblique-embed .footer-brand a:focus-visible { color: #c34e30; text-decoration: underline; text-underline-offset: 3px; }
.oblique-embed .footer-legal { flex: 1 1 100%; margin: 0; max-width: 46rem; line-height: 1.55; color: #6e7168; }
.oblique-embed .footer-legal a { color: #44463f; text-decoration: none; border-bottom: 1px solid #a4a49a; padding-bottom: 2px; }
.oblique-embed .footer-legal a:hover { color: #d4512e; border-color: currentColor; }
.oblique-embed .footer a:focus-visible { outline: 2px solid #df5a34; outline-offset: 3px; }
@media (max-width: 680px) {
  .oblique-embed .deck-caption { width: min(100%, 470px); }
  .oblique-embed .experience { gap: 20px; padding: 24px 0 32px; }
  .oblique-embed .project-block, .oblique-embed .pair-card, .oblique-embed .experiment { width: min(100%, 470px); }
  .oblique-embed .experiment { padding: 16px; }
  .oblique-embed .experiment-action-row { flex-direction: column; }
  .oblique-embed .experiment-action-row button { align-self: flex-start; }
  .oblique-embed .control-meta { flex-wrap: wrap; gap: 6px 16px; }
  .oblique-embed .pair-card { padding: 17px 19px; }
  .oblique-embed .controls { width: min(100%, 470px); }
  .oblique-embed .action-row { display: grid; grid-template-columns: 1fr 1fr; }
  .oblique-embed .action-row .draw-button { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; }
  .oblique-embed .utility-button { width: 100%; min-width: 0; }
  .oblique-embed .card-stack { width: min(100%, 470px); aspect-ratio: 1.08; }
  .oblique-embed .stack-card--back { transform: translate(9px, 10px) rotate(2.5deg); }
  .oblique-embed .stack-card--middle { transform: translate(4px, 5px) rotate(1deg); }
  .oblique-embed .card { padding: clamp(22px, 5vw, 32px); }
  .oblique-embed .creator-credit { font-size: 9px; }
  .oblique-embed .strategy { font-size: clamp(27px, 7.3vw, 40px); line-height: 1.19; }
  .oblique-embed .strategy--long { font-size: clamp(21px, 5.5vw, 30px); }
  .oblique-embed .card-top, .oblique-embed .card-bottom { font-size: 9px; letter-spacing: .12em; }
  .oblique-embed .card-bottom { align-items: flex-end; }
  .oblique-embed .card-bottom span:first-child { max-width: 175px; }
}
@media (max-width: 540px) {
  .oblique-embed .info-nav { width: 100%; justify-content: flex-end; margin-top: 0; gap: 12px; }
  .oblique-embed .info-menu summary { font-size: 11px; }
  .oblique-embed .info-panel { top: calc(100% + 12px); width: calc(100vw - 44px); max-height: 68dvh; padding: 24px; }
  .oblique-embed .extra-actions { gap: 6px; }
}
@media (max-width: 390px) {
  .oblique-embed .card-stack { aspect-ratio: .94; }
  .oblique-embed .strategy { font-size: clamp(23px, 7vw, 30px); }
  .oblique-embed .strategy--long { font-size: clamp(19px, 5.2vw, 24px); }
}
@media (max-height: 650px) and (min-width: 681px) {
  .oblique-embed .experience { padding: 24px 0; gap: 20px; }
  .oblique-embed .card-stack { width: min(62vw, 540px); }
}
@media (prefers-reduced-motion: reduce) {
  .oblique-embed *, .oblique-embed *::before, .oblique-embed *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.oblique-embed .deck-intro { flex: 1 1 auto; min-width: 0; }
.oblique-embed .deck-explain { margin: 8px 0 0; color: #4c4e47; font-size: 13px; line-height: 1.55; }
.oblique-embed .deck-full { margin: 8px 0 0; font-size: 12px; font-weight: 600; }
.oblique-embed .deck-full a { color: #9a3b24; text-decoration: underline; text-underline-offset: 3px; }
.oblique-embed .deck-full a:hover { color: #c34e30; }
.oblique-embed .deck-full a:focus-visible { outline: 2px solid #df5a34; outline-offset: 3px; }
.oblique-embed.oblique-embed--fit {
  margin: 0.85rem 0 0;
  padding: 14px 12px 16px;
  border-radius: 4px;
  container-type: inline-size;
}
.oblique-embed.oblique-embed--fit .oblique-head,
.oblique-embed.oblique-embed--fit .deck-caption,
.oblique-embed.oblique-embed--fit .card-stack,
.oblique-embed.oblique-embed--fit .project-block,
.oblique-embed.oblique-embed--fit .pair-card,
.oblique-embed.oblique-embed--fit .experiment,
.oblique-embed.oblique-embed--fit .controls {
  width: 100%;
}
.oblique-embed.oblique-embed--fit .card-stack { aspect-ratio: 1.45; }
.oblique-embed.oblique-embed--fit .strategy { font-size: clamp(18px, 8cqi, 32px); }
.oblique-embed.oblique-embed--fit .strategy--long { font-size: clamp(16px, 6.5cqi, 24px); }
.oblique-embed.oblique-embed--fit .experience { gap: 12px; padding: 8px 0 0; }
.oblique-embed.oblique-embed--fit .info-panel { position: static; width: 100%; max-height: none; margin-top: 8px; }
@media (min-width: 860px) {
  .oblique-embed.oblique-embed--wide {
    margin-top: 1.25rem;
    padding: 22px clamp(16px, 3vw, 36px) 26px;
  }
  .oblique-embed.oblique-embed--wide .oblique-head,
  .oblique-embed.oblique-embed--wide .deck-caption {
    width: 100%;
    max-width: none;
  }
  .oblique-embed.oblique-embed--wide .experience {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem);
    align-items: center;
    justify-content: center;
    column-gap: clamp(24px, 4vw, 48px);
    row-gap: 14px;
    width: 100%;
    padding-top: 12px;
  }
  .oblique-embed.oblique-embed--wide .card-stack {
    grid-column: 1;
    grid-row: 1 / span 6;
    width: 100%;
    max-width: 672px;
    aspect-ratio: 1.45;
  }
  .oblique-embed.oblique-embed--wide .project-block,
  .oblique-embed.oblique-embed--wide .pair-card,
  .oblique-embed.oblique-embed--wide .experiment,
  .oblique-embed.oblique-embed--wide .controls {
    grid-column: 2;
    width: 100%;
    max-width: 40rem;
    min-width: 0;
  }
  .oblique-embed.oblique-embed--wide .controls {
    container-type: inline-size;
  }
  .oblique-embed.oblique-embed--wide .action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .oblique-embed.oblique-embed--wide .draw-button,
  .oblique-embed.oblique-embed--wide .utility-button {
    min-width: 0;
    width: 100%;
    white-space: nowrap;
  }
  .oblique-embed.oblique-embed--wide .draw-button {
    gap: 12px;
    padding-right: 14px;
    padding-left: 14px;
  }
  .oblique-embed.oblique-embed--wide .info-panel {
    position: static;
    width: min(100%, 40rem);
    max-height: none;
    margin-top: 8px;
  }
}
