:root{
  --paper:#f4efe3;
  --paper-2:#ebe3d3;
  --ink:#18221b;
  --muted:#5e675f;
  --forest:#173b2b;
  --forest-2:#24533d;
  --gold:#b68a35;
  --gold-soft:#d8bd82;
  --line:#d6ccb9;
  --white:#fffdf7;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html{background:#09110d}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 16% 8%,rgba(61,112,80,.24),transparent 28rem),
    radial-gradient(circle at 88% 78%,rgba(182,138,53,.12),transparent 34rem),
    #09110d;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

.screenbar{
  width:min(210mm,calc(100vw - 24px));
  min-height:64px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  color:#d9dfd9;
}
.screenbar a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#d9dfd9;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
}
.screenbar a img{width:36px;height:auto;display:block}
.screenbar .actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.screenbar .language{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  color:#c7d0c8;
  font-size:12px;
  font-weight:750;
  text-decoration:none;
}
.screenbar button{
  min-height:44px;
  border:1px solid rgba(216,189,130,.4);
  border-radius:10px;
  padding:0 17px;
  background:linear-gradient(180deg,#c69a45,#a77726);
  color:#111b14;
  font:800 13px var(--sans);
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.screenbar button:hover{filter:brightness(1.08)}
.screenbar button:focus-visible,.screenbar a:focus-visible{outline:3px solid #d8bd82;outline-offset:3px}

.sheet{
  position:relative;
  width:min(210mm,calc(100vw - 24px));
  min-height:297mm;
  margin:0 auto 48px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.05);
}

.sheet-header{
  position:relative;
  min-height:50mm;
  padding:10mm 11mm 8mm;
  overflow:hidden;
  color:var(--white);
  background:
    linear-gradient(113deg,rgba(255,255,255,.035) 0 1px,transparent 1px 100%),
    linear-gradient(135deg,var(--forest),#102d20 72%);
}
.contours{
  position:absolute;
  inset:-10% -2% -30% 39%;
  width:68%;
  height:150%;
  opacity:.2;
  pointer-events:none;
}
.contours path{fill:none;stroke:#e5c985;stroke-width:1.1}
.head-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-size:10pt;font-weight:900;letter-spacing:.12em}
.brand img{display:block;width:41px;height:auto;filter:drop-shadow(0 2px 7px rgba(0,0,0,.25))}
.brand b{color:var(--gold-soft)}
.edition{font:700 7.1pt var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#bed0c3;text-align:right}
.sheet-header h1{
  position:relative;
  z-index:1;
  max-width:145mm;
  margin:7mm 0 2.4mm;
  font:600 27pt/1.02 var(--serif);
  letter-spacing:-.025em;
}
.sheet-header h1 em{font-style:normal;color:var(--gold-soft)}
.deck{position:relative;z-index:1;margin:0;max-width:138mm;color:#d9e2db;font-size:9.3pt;line-height:1.45}
.meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:5px;margin-top:4mm}
.meta span{padding:1.4mm 2.6mm;border:1px solid rgba(255,255,255,.17);border-radius:99px;background:rgba(255,255,255,.055);font:750 6.8pt var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#e7ece8}

.sheet-body{padding:7mm 10mm 6mm}
.workflow-label{margin:0 0 2.6mm;font:850 7pt var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.workflow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.2mm;
  margin-bottom:5mm;
}
.workflow-step{
  min-width:0;
  padding:3mm 3.2mm 2.8mm;
  border:1px solid #cbbd9f;
  border-radius:3mm;
  background:rgba(255,255,255,.42);
}
.workflow-step .number{font:850 6.4pt var(--mono);letter-spacing:.1em;color:var(--gold);text-transform:uppercase}
.workflow-step .combo{display:flex;align-items:center;gap:1mm;min-height:8mm;margin:1.4mm 0 1mm;white-space:nowrap}
.workflow-step strong{display:block;font-size:7.8pt;line-height:1.2;color:var(--forest)}

.columns{display:grid;grid-template-columns:1fr 1fr;gap:4mm;align-items:start}
.column{display:grid;gap:3.2mm}
.card{border:1px solid var(--line);border-radius:3mm;background:rgba(255,255,255,.32);overflow:hidden;break-inside:avoid}
.card-title{
  display:flex;
  align-items:center;
  gap:2mm;
  margin:0;
  padding:2.4mm 3.2mm 2.1mm;
  color:var(--forest);
  border-bottom:1px solid var(--line);
  background:rgba(23,59,43,.045);
  font:850 7.2pt var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card-title .index{display:grid;place-items:center;width:5mm;height:5mm;border-radius:50%;background:var(--forest);color:#fff;font-size:6pt;letter-spacing:0}
.shortcut-list{margin:0;padding:1.2mm 3.1mm 1.5mm;list-style:none}
.shortcut{
  display:grid;
  grid-template-columns:32mm minmax(0,1fr);
  gap:2.5mm;
  align-items:center;
  min-height:7.3mm;
  border-bottom:1px solid rgba(124,113,91,.16);
}
.shortcut:last-child{border-bottom:0}
.keys{display:flex;align-items:center;gap:.7mm;white-space:nowrap;min-width:0}
kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:5.8mm;
  min-height:5.6mm;
  padding:.45mm 1.4mm .3mm;
  border:1px solid #b9ad96;
  border-bottom-width:1.5px;
  border-radius:1.25mm;
  background:#fffdf8;
  color:#173426;
  box-shadow:0 1.1mm 0 #d8cebc;
  font:800 7.2pt var(--mono);
  line-height:1;
}
kbd.wide{padding-inline:2.2mm;font-size:6.3pt}
.plus,.slash,.range{color:#8b806c;font:700 6.5pt var(--mono)}
.action{min-width:0;font-size:7.45pt;line-height:1.25;color:#39463d}
.action b{color:var(--forest);font-weight:850}
.action small{display:block;margin-top:.35mm;color:#72796f;font-size:6.35pt;line-height:1.2}

.recipes-label{margin:4.3mm 0 2.2mm;font:850 6.7pt var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.recipes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4mm}
.recipe{position:relative;min-height:22mm;padding:3mm 3.2mm 2.8mm;border-radius:2.7mm;background:var(--forest);color:#f7f3e9;overflow:hidden;break-inside:avoid}
.recipe::after{content:"";position:absolute;right:-9mm;bottom:-13mm;width:27mm;height:27mm;border:1px solid rgba(216,189,130,.22);border-radius:50%;box-shadow:0 0 0 4mm rgba(216,189,130,.07)}
.recipe h3{position:relative;z-index:1;margin:0 0 1.3mm;font:800 8pt var(--serif);letter-spacing:.01em;color:var(--gold-soft)}
.recipe .recipe-keys{position:relative;z-index:1;display:flex;align-items:center;gap:.65mm;margin-bottom:1.6mm;white-space:nowrap}
.recipe .recipe-keys kbd{min-width:5mm;min-height:4.8mm;padding:.35mm 1.1mm;box-shadow:none;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;font-size:6.2pt}
.recipe p{position:relative;z-index:1;margin:0;max-width:48mm;color:#cbd7ce;font-size:6.2pt;line-height:1.3}

.sheet-footer{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:5mm;
  margin-top:4.2mm;
  padding-top:3mm;
  border-top:1px solid #c9bfae;
}
.guard{margin:0;max-width:142mm;color:#687168;font-size:6.65pt;line-height:1.4}
.guard b{color:var(--forest)}
.url{text-align:right;color:var(--forest);font:900 7.2pt var(--mono);letter-spacing:.045em;white-space:nowrap}
.url small{display:block;margin-bottom:.8mm;color:var(--gold);font-size:5.8pt;letter-spacing:.13em;text-transform:uppercase}

@media(max-width:680px){
  .screenbar{min-height:72px;align-items:center}
  .screenbar .brand-name{display:none}
  .screenbar .actions{gap:6px}
  .screenbar .language{padding-inline:11px}
  .screenbar button{padding-inline:13px}
  .sheet{min-height:0;margin-bottom:24px}
  .sheet-header{min-height:0;padding:24px 20px 22px}
  .edition{max-width:45%;font-size:8px}
  .sheet-header h1{margin:26px 0 9px;font-size:clamp(30px,10vw,42px)}
  .deck{font-size:13px}
  .meta{margin-top:14px}
  .meta span{font-size:8px;padding:5px 8px}
  .sheet-body{padding:20px 16px 18px}
  .workflow{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
  .workflow-step{padding:11px;border-radius:10px}
  .workflow-step .number{font-size:8px}
  .workflow-step strong{font-size:11px}
  .columns{grid-template-columns:1fr;gap:12px}
  .column{gap:12px}
  .card{border-radius:11px}
  .card-title{padding:10px 12px;font-size:9px}
  .card-title .index{width:20px;height:20px;font-size:8px}
  .shortcut-list{padding:5px 12px 7px}
  .shortcut{grid-template-columns:132px minmax(0,1fr);gap:8px;min-height:34px;padding:3px 0}
  kbd{min-width:23px;min-height:22px;padding:2px 5px;font-size:10px;border-radius:5px;box-shadow:0 3px 0 #d8cebc}
  kbd.wide{padding-inline:7px;font-size:9px}
  .action{font-size:10.5px}.action small{font-size:9px}
  .recipes-label{margin:16px 0 8px;font-size:9px}
  .recipes{grid-template-columns:1fr;gap:8px}
  .recipe{min-height:0;padding:12px;border-radius:10px}
  .recipe h3{font-size:13px}.recipe p{max-width:none;font-size:9.5px}
  .recipe .recipe-keys{margin-bottom:6px}.recipe .recipe-keys kbd{min-width:20px;min-height:20px;padding:2px 5px;font-size:9px}
  .sheet-footer{grid-template-columns:1fr;gap:10px;margin-top:16px;padding-top:12px}
  .guard{font-size:9px}.url{text-align:left;font-size:10px}.url small{font-size:8px}
}

@media(max-width:390px){
  .shortcut{grid-template-columns:124px minmax(0,1fr)}
  .screenbar .language{font-size:0}
  .screenbar .language::after{content:attr(data-short);font-size:12px}
}

@page{size:A4 portrait;margin:0}
@media print{
  html,body{width:210mm;height:297mm;background:#fff}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .screenbar{display:none!important}
  .sheet{width:210mm;height:297mm;min-height:297mm;margin:0;box-shadow:none;overflow:hidden}
  .sheet-header{height:50mm;min-height:50mm}
  .sheet-body{height:247mm}
  a{color:inherit;text-decoration:none}
}