@font-face{font-family:Instrument;src:url('fonts/instrument-sans.woff2');font-display:swap;font-weight:100 900}
*{box-sizing:border-box}html{background:#e4e9df;color:#18372d}body{margin:0;font:16px/1.5 Instrument,Arial,sans-serif}a{color:inherit}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,a,select{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,iframe:focus-visible{outline:3px solid #a34c23;outline-offset:4px}.preview-skip{position:fixed;top:-80px;left:16px;background:#fff;padding:12px;z-index:10}.preview-skip:focus{top:10px}.preview-header{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:#f8f6ee;border-bottom:1px solid #adbda9;padding:18px 24px}.preview-title{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.preview-title>a{font-size:14px;text-underline-offset:4px;min-height:44px;display:flex;align-items:center}.preview-title h1{font-size:20px;letter-spacing:-.025em;margin:0;font-weight:600}.preview-concepts{display:flex;gap:5px;flex-wrap:wrap}.preview-concepts a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 16px;text-decoration:none;font-size:15px;border-radius:8px;border:1px solid transparent}.preview-concepts a[aria-current="page"]{background:#193d32;color:#fff}.preview-concepts a:hover{border-color:#7a9a81}.preview-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.preview-modes{display:flex;padding:4px;background:#e6eadf;border-radius:10px;gap:3px}.preview-modes button{border:0;min-height:44px;padding:8px 15px;background:none;border-radius:7px;cursor:pointer;font-size:15px}.preview-modes button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 5px #243e2520;font-weight:600}.preview-tools label{font-size:12px;display:grid;gap:3px}.preview-tools select{min-height:40px;border:1px solid #7a947e;border-radius:6px;background:#fff;padding:6px 10px;font-size:14px;max-width:100%}.open-website{display:flex;align-items:center;min-height:48px;font-size:14px;text-underline-offset:5px}main{padding:18px 24px 12px}.preview-caption{display:flex;gap:15px;justify-content:space-between;flex-wrap:wrap;max-width:1500px;margin:0 auto 14px}.preview-caption p{margin:0;font-size:14px}.preview-caption p:first-child{font-weight:600}.preview-caption p:last-child{font-size:13px;color:#4e6759}.preview-stage{display:flex;justify-content:center;align-items:start;max-width:1500px;margin:0 auto}.preview-frame{--device-border:8px;width:390px;max-width:100%;border:8px solid #17382e;border-radius:24px;background:#17382e;box-shadow:0 12px 35px #193b2a24;overflow:hidden}.preview-frame iframe{display:block;width:100%;height:max(480px,calc(100dvh - 205px));border:0;background:#f8f5ed}.preview-frame.desktop{width:100%;border-width:1px;border-color:#8a9f8a;border-radius:8px}.preview-frame.desktop iframe{height:max(480px,calc(100dvh - 190px))}.preview-footnote{text-align:center;font-size:12px;color:#506957;margin:16px auto 8px}
@media(max-width:700px){.preview-header{padding:14px 16px;gap:12px}.preview-title{justify-content:space-between;width:100%;gap:10px}.preview-title h1{font-size:19px}.preview-concepts{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.preview-concepts a{font-size:14px;padding:9px}.preview-tools{gap:12px;width:100%;justify-content:space-between}.preview-tools .open-website{width:100%;font-size:14px}.preview-tools select{font-size:13px}main{padding:14px 12px}.preview-caption{gap:5px}.preview-frame{--device-border:5px;border-width:5px;border-radius:18px}.preview-caption p:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.preview-stage:has(.desktop){display:block;overflow-x:auto}.preview-frame.desktop{max-width:none;min-width:1102px}