@font-face {
      font-family: 'Archivo Variable';
      font-style: normal;
      font-display: swap;
      font-weight: 100 900;
      font-stretch: 62% 125%;
      src: url('/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
    }
    @font-face {
      font-family: 'Instrument Sans Variable';
      font-style: normal;
      font-display: swap;
      font-weight: 400 700;
      src: url('/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
    }

    :root {
      --canvas: #F7F5F2;
      --ink: #1E1919;
      --mute: #716B61;
      --panel: #FFFFFF;
      --sand: #EEE9E2;
      --hairline: #D3CEC9;
      --blue: #0061FE;
      --grid: rgba(0, 97, 254, 0.16);
      --azalea: #CD2F7B;
      --pink: #FFAFA5;
      --crimson: #9B0032;
      --sunset: #FA551E;
      --tangerine: #FF8C19;
      --gold: #9B6400;
      --vargas: #FAD24B;
      --canopy: #0F503C;
      --lime: #B4DC19;
      --ocean: #007891;
      --plum: #78286E;
      --orchid: #C8AFF0;
      --display: 'Archivo Variable', Archivo, sans-serif;
      --body: 'Instrument Sans Variable', 'Instrument Sans', sans-serif;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--sand);
      color: var(--ink);
      font-family: var(--body);
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    .toolbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--canvas);
      border-bottom: 1px solid var(--hairline);
    }
    .toolbar-inner {
      width: min(920px, calc(100% - 32px));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 60px;
    }
    .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-stretch: 110%; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
    .toolbar-actions { display: flex; align-items: center; gap: 16px; }
    .print-btn {
      height: 38px;
      padding: 0 14px;
      border: 2px solid var(--blue);
      border-radius: 10px;
      background: var(--blue);
      color: var(--canvas);
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
    }
    .print-btn:hover { background: #0044AF; border-color: #0044AF; }
    .back { color: var(--blue); text-decoration: none; font-size: 13px; font-weight: 500; }
    .back:hover { text-decoration: underline; text-underline-offset: 3px; }

    .page {
      width: min(920px, calc(100% - 32px));
      margin: 28px auto 56px;
      background: var(--canvas);
      border: 1px solid var(--hairline);
    }
    .page-inner { padding: 44px 48px 40px; }

    .topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
    .topline .kicker { display: block; margin-bottom: 8px; font-size: 11px; color: var(--blue); letter-spacing: 0.04em; text-transform: uppercase; }
    .topline h1 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 600; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1.02; }
    .topline .meta { text-align: right; font-size: 12px; color: var(--mute); line-height: 1.6; }
    .topline .meta strong { color: var(--ink); font-weight: 600; }

    .sample-label { margin: 14px 0 28px; padding: 10px 12px; border: 1px solid var(--tangerine); background: #FFF4E6; font-size: 12px; color: var(--ink); }
    .sample-label strong { font-weight: 600; }

    .kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
    .kpi { padding: 16px 14px 14px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
    .kpi small { display: block; font-size: 11px; color: var(--mute); line-height: 1.35; min-height: 30px; }
    .kpi b { display: block; margin-top: 6px; font-family: var(--display); font-size: clamp(1.55rem, 2.6vw, 2.1rem); font-weight: 600; font-stretch: 100%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
    .kpi span { display: block; margin-top: 6px; font-size: 11px; color: var(--mute); }

    h2 { margin: 34px 0 10px; font-family: var(--display); font-size: 22px; font-weight: 600; font-stretch: 110%; letter-spacing: -0.015em; }
    h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
    p { margin: 0 0 10px; }
    .lead { font-size: 15px; line-height: 1.55; max-width: 72ch; }
    .mute { color: var(--mute); }

    .matrix-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); margin-top: 12px; }
    .quad { padding: 16px; min-height: 132px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
    .quad.star { background: #EAF5C4; }
    .quad.plow { background: #FFF3C4; }
    .quad.puzzle { background: #EBDDF7; }
    .quad.dog { background: #FFE1DC; }
    .quad-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .quad-label strong { font-family: var(--display); font-size: 13px; font-weight: 700; font-stretch: 75%; letter-spacing: 0.04em; text-transform: uppercase; }
    .quad-label span { font-size: 10px; color: var(--mute); }
    .chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .chip { display: inline-block; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.72); border: 1px solid rgba(30,25,25,0.14); font-size: 11px; line-height: 1.35; }

    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th { text-align: left; font-size: 10px; font-weight: 500; color: var(--mute); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 8px 7px 0; border-bottom: 1px solid var(--ink); }
    td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
    th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    th:last-child, td:last-child { padding-right: 0; }
    .class { display: inline-block; padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 500; white-space: nowrap; }
    .star-c { background: var(--lime); color: var(--canopy); }
    .plow-c { background: var(--vargas); color: var(--gold); }
    .puzzle-c { background: var(--orchid); color: var(--plum); }
    .dog-c { background: var(--pink); color: var(--crimson); }
    .over { color: var(--crimson); }
    .good { color: var(--canopy); }

    .actions { margin-top: 10px; border-top: 1px solid var(--hairline); }
    .action { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
    .action-num { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--blue); padding-top: 2px; }
    .action p { margin: 3px 0 0; font-size: 12px; color: var(--mute); }
    .action-gain { font-family: var(--display); font-size: 16px; font-weight: 600; font-stretch: 100%; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .action-gain small { display: block; font-family: var(--body); font-size: 10px; font-weight: 400; color: var(--mute); text-align: right; }

    .total-band { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 16px 18px; background: var(--tangerine); }
    .total-band span { font-size: 13px; }
    .total-band strong { font-family: var(--display); font-size: 26px; font-weight: 600; font-stretch: 100%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

    .plan { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); margin-top: 12px; }
    .plan-cell { padding: 12px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
    .plan-cell small { display: block; font-size: 10px; color: var(--blue); margin-bottom: 6px; }
    .plan-cell p { margin: 0; font-size: 12px; line-height: 1.45; }

    .method { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 11px; color: var(--mute); line-height: 1.55; }
    .method p { margin-bottom: 6px; }

    .footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--ink); font-size: 11px; color: var(--mute); }
    .footer strong { display: block; font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--ink); }

    @media screen and (max-width: 720px) {
      .page-inner { padding: 28px 20px 26px; }
      .kpis { grid-template-columns: 1fr 1fr; }
      .matrix-wrap { grid-template-columns: 1fr; }
      .plan { grid-template-columns: 1fr 1fr; }
      .topline { flex-direction: column; }
      .topline .meta { text-align: left; }
      .toolbar-actions .back { display: none; }
      .action { grid-template-columns: 24px 1fr; }
      .action-gain { grid-column: 2; text-align: left; }
      .action-gain small { text-align: left; }
      .dish-table { display: block; }
      .dish-table thead { display: none; }
      .dish-table tbody { display: block; }
      .dish-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 14px;
        padding: 12px 0;
        border-bottom: 1px solid var(--hairline);
      }
      .dish-table td { display: block; border: 0; padding: 0; }
      .dish-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 9px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--mute);
      }
      .dish-table td:first-child,
      .dish-table td:nth-child(2) { grid-column: 1 / -1; }
      .dish-table td:first-child { font-weight: 600; }
      .dish-table td:first-child::before,
      .dish-table td:nth-child(2)::before { display: none; }
      .dish-table td:nth-child(2) { margin-top: -8px; }
      .dish-table td.num { text-align: left; white-space: normal; }
      .dish-table td:nth-child(7) {
        grid-column: 1 / -1;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-top: 2px;
        padding-top: 7px;
        border-top: 1px solid var(--hairline);
      }
      .dish-table td:nth-child(7)::before { margin: 0; }
      .class { font-size: 9px; padding: 2px 5px; }
    }

    @media print {
      @page { size: A4; margin: 12mm; }
      body { background: #FFFFFF; font-size: 11px; }
      .toolbar { display: none; }
      .page { width: 100%; margin: 0; border: 0; background: #FFFFFF; }
      .page-inner { padding: 0; }
      h2 { margin-top: 20px; }
      .kpi b { font-size: 22px; }
      .quad { min-height: 108px; }
      table { font-size: 10px; }
      th, td { padding-right: 6px; }
      .class { font-size: 9px; }
      .plan { page-break-inside: avoid; }
      table, .actions, .total-band { page-break-inside: avoid; }
      * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }