/* RRverse internal tools (shared with comidas.rrverse.com): Martel Light display, Inter text,
   black panel, warm canvas, square corners. The signature HTML keeps its own inline styles. */
@font-face{font-family:Martel;src:url(assets/fonts/Martel-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/Inter-VariableFont.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --black:#0a0a0a;--ink:#141414;--canvas:#f5f3ee;--paper:#fff;
  --line:#e2ddd2;--field:#cdc7ba;--muted:#5f5b54;--quiet:#7c766c;
  --on-dark:#fff;--on-dark-muted:#a3a3a3;--on-dark-quiet:#8a8a8a;--on-dark-line:#333;
  --focus:#141414;--success:#2f5d45;--error:#a3262e;
  --serif:Martel,'Iowan Old Style',Georgia,serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);background:var(--canvas);
  font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scrollbar-color:var(--field) var(--canvas)
}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas)}
::selection{background:var(--ink);color:var(--canvas)}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,select,summary{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:-1px;border-color:var(--focus)}
[hidden]{display:none!important}
.skip{position:fixed;top:12px;left:12px;padding:12px 16px;background:var(--paper);color:var(--ink);z-index:10;transform:translateY(-180%)}
.skip:focus{transform:none}

/* Type */
h1,h2{font-family:var(--serif);font-weight:300;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,3.4vw,52px);line-height:1.04;letter-spacing:-.045em}
h1 em{font-style:italic;font-synthesis:style;color:var(--on-dark-quiet)}
h2{font-size:clamp(26px,2.2vw,33px);line-height:1.08;letter-spacing:-.04em}
.lede{font-size:13.5px;line-height:1.65;font-weight:300;color:var(--muted);margin:10px 0 0;max-width:60ch}

/* Split layout: brand panel + work canvas, as in RR Comidas */
.split{display:grid;grid-template-columns:clamp(300px,30vw,460px) minmax(0,1fr);min-height:100vh}
.panel{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--black);color:var(--on-dark);padding:44px}
.panel ::selection{background:var(--on-dark);color:var(--black)}
.panel :focus-visible{outline-color:var(--on-dark)}
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:9px;text-decoration:none;align-self:flex-start}
.brand img{display:block;width:98px;height:auto}
.brand span{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.panel-body{margin:auto 0;padding:48px 0}
.panel-body p{font-size:15px;line-height:1.7;font-weight:300;color:var(--on-dark-muted);max-width:40ch;margin:28px 0 0}
.steps{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:14px;font-size:13px;font-weight:300;color:#d4d4d4}
.steps li{display:flex;align-items:center;gap:14px}
.tick{flex:none;width:24px;height:24px;border:1px solid var(--on-dark-line);display:grid;place-items:center}
.tick svg{width:14px;height:14px;fill:none;stroke:var(--on-dark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.panel footer{display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.02em;color:#8f8f8f}
.panel footer a{text-decoration:none}
.panel footer a:hover{color:var(--on-dark)}

.work{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:clamp(36px,4vw,64px);align-items:start;padding:clamp(44px,5vw,80px) clamp(28px,4.5vw,72px) 72px;max-width:1240px;width:100%}

/* Form */
.editor form{margin-top:32px}
label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
label span{font-size:11px;letter-spacing:.06em;color:var(--quiet);font-weight:400}
input,select{width:100%;min-width:0;height:46px;background:var(--paper);color:var(--ink);border:1px solid var(--field);border-radius:0;padding:0 14px;margin-bottom:20px;font-size:14.4px;caret-color:var(--ink);transition:border-color .2s var(--ease)}
input:hover,select:hover{border-color:var(--quiet)}
input::placeholder{color:#8b857a;opacity:1}
input:user-invalid{border-color:var(--error)}
.primary,.secondary{min-height:46px;border-radius:0;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.02em;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.primary{width:100%;margin-top:6px;color:var(--paper);background:var(--ink);border:1px solid var(--ink)}
.primary:hover{background:#2b2b2b}
.primary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.primary:hover svg{transform:translateX(3px)}
.secondary{background:transparent;border:1px solid var(--field);color:var(--ink)}
.secondary:hover{border-color:var(--ink)}
button:disabled{opacity:.5;cursor:wait}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.status{font-size:13px;line-height:1.6;color:var(--success);margin:16px 0 0}
.status.error{color:var(--error)}
.status:empty{display:none}

/* Preview */
.result{min-width:0}
.previews{margin-top:32px;border:1px solid var(--line);display:grid}
.preview-pane{padding:22px 24px 18px;min-width:0}
.preview-pane.light{background:var(--paper);color:#202225}
.preview-pane.dark{background:#202225;color:#f3f4f6}
.preview-label{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:28px;color:var(--quiet)}
.dark .preview-label{color:#a9adb5}
.preview-label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
iframe{width:100%;height:140px;display:block;border:0;color-scheme:light}

/* Help */
.help{margin-top:56px}
.help h2{font-size:clamp(22px,1.8vw,26px);margin-bottom:12px}
details{border-bottom:1px solid var(--line);font-size:13.5px}
summary{padding:18px 0;font-weight:500;list-style:none;display:flex;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary:after{content:'';margin-left:auto;width:12px;height:12px;flex:none;background:linear-gradient(currentColor 0 0) center/12px 1px no-repeat,linear-gradient(currentColor 0 0) center/1px 12px no-repeat;transition:transform .3s var(--ease)}
details[open]>summary:after{transform:rotate(45deg)}
summary:hover{color:#000}
details p,details ol{line-height:1.75;font-weight:300;color:var(--muted);max-width:65ch;margin:0 0 20px}
details ol{padding-left:20px}
details li+li{margin-top:6px}
details li::marker{color:var(--quiet);font-size:12px}
code{font-size:12px;overflow-wrap:anywhere}
#manual-copy{margin-top:20px;border-top:1px solid var(--line)}
#manual-content{background:var(--paper);color:#202225;padding:20px;margin-bottom:16px;overflow:auto;border:1px solid var(--line)}
#manual-copy .secondary{margin-bottom:18px}

/* Shared top bar for secondary pages (lab) */
.topbar{height:56px;display:flex;align-items:center;gap:20px;background:var(--black);color:var(--on-dark);padding:0 clamp(20px,4vw,60px)}
.topbar .brand{flex-direction:row;align-items:center;align-self:center;gap:16px}
.topbar .brand img{width:84px}
.product-name{font-size:12px;color:var(--on-dark-muted)}
.topbar :focus-visible{outline-color:var(--on-dark)}
main.lab{max-width:1480px;margin:auto;padding:0 clamp(20px,4vw,60px)}
.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:64px 0 44px}
.intro h1{color:var(--ink)}
.intro p{font-size:14px;line-height:1.7;font-weight:300;color:var(--muted);margin:0 0 4px}
.preview-heading p,.preview-note{font-size:13px;font-weight:300;color:var(--muted)}
.preview-heading{margin:0 0 24px}
.preview-heading p{margin:10px 0 0}
.preview-note{font-size:12px;line-height:1.6;margin:14px 0 0}
body:not(.split)>footer{max-width:1480px;margin:64px auto 0;padding:24px clamp(20px,4vw,60px);display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font-size:11px;color:var(--quiet)}
body:not(.split)>footer a{text-decoration:none}

@media(max-width:1180px){
  .work{grid-template-columns:1fr;max-width:680px}
}
@media(max-width:860px){
  .split{display:block}
  .panel{position:static;height:auto;padding:28px 20px 36px}
  .panel-body{padding:44px 0 0;margin:0}
  .panel footer{display:none}
  h1{font-size:38px}
  .panel-body p{font-size:14px;margin-top:20px}
  .steps{margin-top:28px}
  .work{padding:40px 20px 56px;gap:48px;max-width:none}
  input,select{font-size:16px;min-height:46px}
  .preview-pane{padding:22px 20px 16px}
  .help{margin-top:48px}
  summary{min-height:54px}
  .intro{display:block;padding:40px 0 32px}
  .intro p{margin-top:16px}
  .actions>*{flex:1}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}