body{margin:0;background:var(--surface-1);color:var(--ink-1);font-family:var(--font-sans,Arial,sans-serif)}*{box-sizing:border-box}.demo-app{max-width:1200px;margin:auto;padding:0 20px 32px}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}.demo-brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:750;text-decoration:none;color:var(--ink-1)}.demo-brand img{width:48px;height:48px}.demo-brand small{display:inline-block;font-size:12px;color:var(--vival-red);padding:4px 8px;border-radius:99px;background:var(--vival-red-soft)}.demo-notice{font-size:12px;color:var(--ink-3);padding-bottom:18px}.demo-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.demo-nav button{padding:12px 18px;border:1px solid var(--line-1);background:var(--surface-0);border-radius:12px;font:inherit;cursor:pointer}.demo-nav .active{background:var(--vival-red);color:white;border-color:var(--vival-red)}.demo-message{display:flex;align-items:center;gap:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:14px 18px;margin:16px 0;line-height:1.5}.demo-message span{flex:1}.demo-message button{border:0;background:transparent;font-size:22px;cursor:pointer}.demo-panel,.demo-receive{padding:26px;background:var(--surface-0);border:1px solid var(--line-1);border-radius:20px;margin:20px 0;box-shadow:var(--shadow-sm)}.demo-panel-heading,.demo-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.demo-panel-heading h1{font-size:22px}.demo-panel-footer{margin-top:24px}.demo-controls{display:grid;gap:18px;max-width:660px}.demo-app label{display:grid;gap:8px;font-size:14px;font-weight:600;margin:16px 0}.demo-app input:not([type=checkbox]),.demo-app select{width:100%;min-width:0;padding:12px;border:1px solid var(--line-1);border-radius:10px;background:var(--surface-0);font:inherit;color:var(--ink-1)}.demo-app label.demo-check{display:flex;align-items:flex-start;line-height:1.5;font-weight:400}.demo-check input{margin-top:5px;flex-shrink:0}.demo-scenarios,.demo-rayon-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}.demo-scenarios article,.demo-rayon-cards article{min-width:0;background:var(--surface-0);padding:22px;border:1px solid var(--line-1);border-radius:16px}.demo-scenarios h2,.demo-rayon-cards h2,.demo-receive h2{font-size:18px;line-height:1.4}.demo-scenarios p,.demo-rayon-cards p,.demo-receive p,.demo-dialog p{font-size:14px;line-height:1.65}.demo-scenarios .btn{margin-top:10px}.demo-margins h1,.demo-haccp h1{font-size:26px;margin:30px 0 10px}.demo-margins>div:first-of-type{padding:0!important}.demo-rayon-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-rayon-cards dl{margin:20px 0}.demo-rayon-cards dl>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line-1)}.demo-rayon-cards dt{font-size:13px;color:var(--ink-3)}.demo-rayon-cards dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.demo-temperature,.demo-danger{display:block;font-size:36px;color:#059669;margin:18px 0}.demo-danger{color:#b91c1c}.demo-overlay{position:fixed;inset:0;z-index:300;background:#17203380;display:flex;align-items:center;justify-content:center;padding:20px}.demo-dialog{width:100%;max-width:500px;max-height:90dvh;overflow:auto;background:var(--surface-0);padding:28px;border-radius:20px}.demo-app .xl-wrap{padding:0}.demo-app .xl-live-label::after{content:' · DÉMO';font-size:10px}.demo-app .xl-live-meta{display:none}.demo-app .xl-note-section{display:none}@media(max-width:700px){.demo-app{padding:0 12px 24px}.demo-brand{font-size:17px}.demo-brand img{width:40px;height:40px}.demo-header>.btn{font-size:12px;padding:10px}.demo-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.demo-nav button{font-size:12px;padding:12px 6px;overflow-wrap:anywhere}.demo-scenarios,.demo-rayon-cards{grid-template-columns:1fr}.demo-panel,.demo-receive{padding:18px}.demo-app .margin-summary-toggle{padding:18px!important}.demo-dialog{padding:20px}.demo-rayon-cards article{padding:18px}.demo-rayon-cards dl>div{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.demo-success{color:#047857;font-weight:600}.demo-pair-code{display:grid;justify-items:start;gap:10px;margin-top:20px;padding:20px;background:#eff6ff;border-radius:14px}.demo-pair-code strong{font-size:42px;letter-spacing:.2em;font-variant-numeric:tabular-nums}.demo-pair-code small{color:var(--ink-3);line-height:1.5}