
/* Public demo usability and responsive layout. */
[hidden]{display:none!important}
html{scroll-padding-top:160px}
body{overflow-wrap:break-word}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ff8200;outline-offset:4px}
button{font:inherit}
.demo{position:relative;line-height:1.6;padding:9px 16px;font-size:10px}
.nav{margin-top:0;top:0}
.grid>*,.panel-grid>*,.layout>*,.hero>*,.content>*,.kpis>*{min-width:0}
.navlinks,.links{min-width:0}
.demo-next{margin:28px auto 0;padding:28px 0;border-top:1px solid currentColor;display:flex;justify-content:space-between;gap:24px;align-items:center}
.demo-next p{font-size:14px;line-height:1.6;margin:6px 0;opacity:.8}
.demo-next strong{font-size:20px}
.demo-next nav{display:flex;gap:18px;flex-wrap:wrap;flex-shrink:0}
.demo-next a{text-decoration:underline;text-underline-offset:4px;font-size:14px;padding:12px 0}
.demo-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #65585c;background:#211b26;color:#f4ede2;border-radius:16px;overflow:auto}
.demo-dialog::backdrop{background:rgba(0,0,0,.72)}
.dialog-head{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:22px;border-bottom:1px solid #65585c}
.dialog-head h2{font-size:24px;line-height:1.2;margin:0}
.dialog-head button{width:40px;height:40px;flex-shrink:0;background:transparent;border:1px solid currentColor;color:inherit;font-size:24px;cursor:pointer}
.dialog-body{padding:22px;line-height:1.6}
.dialog-body p{font-size:14px}
.dialog-body form{display:grid;gap:16px}
.dialog-body label{display:grid;gap:7px;font-size:14px}
.dialog-body input:not([type=radio]),.dialog-body select,.dialog-body textarea{width:100%;padding:12px;background:#fff;color:#222;border:1px solid #aaa;border-radius:5px;font:inherit}
.dialog-body .btn{margin:4px 4px 4px 0;font-size:14px;min-height:44px}
.dialog-body ul{padding-left:22px}
.dialog-body li{margin:12px 0}
.answer-options label{display:flex;align-items:start;border:1px solid #65585c;padding:12px;border-radius:6px}
.answer-options input{margin-top:5px}
.sample-note{font-size:12px!important;opacity:.8}
.sample-flashcard{padding:24px;border:1px solid #65585c;min-height:150px}
.plan-options{display:flex;flex-wrap:wrap;gap:8px}
.small-action{padding:8px!important;font-size:11px!important;margin-left:auto;flex-shrink:0}
.completed b{text-decoration:line-through;opacity:.6}
.toast{max-width:calc(100% - 32px);font-size:13px}
@media(max-width:800px){
 .demo-next{align-items:flex-start;flex-direction:column}
 .nav{height:auto;min-height:76px;gap:14px;padding-top:14px;padding-bottom:14px}
 .page-head{align-items:flex-start;flex-direction:column;gap:12px}
 .page-head h1{font-size:clamp(30px,8vw,42px)}
 .page-head p{font-size:14px;line-height:1.5}
 .row{flex-wrap:wrap;font-size:12px}
 .hero-actions,.actions{flex-wrap:wrap}
 .section-head h2,.head h2,.est h2,.booking h2,.section h2{font-size:clamp(36px,9vw,58px)}
 .footer,.foot{gap:16px;flex-wrap:wrap;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.hero h1{font-size:32px;margin:28px 0 7px}.compact-cards .card,.compact-cards .panel-card{padding:16px;min-height:160px}.compact-cards .hero{min-height:420px}.btn+ .btn{margin-left:8px}.card[hidden]{display:none!important}@media(max-width:1000px){.grid,.panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.grid,.panel-grid{grid-template-columns:minmax(0,1fr)}.links button{font-size:13px;min-height:44px}.hero{min-height:470px}.hero-actions{flex-wrap:wrap}.card,.panel-card{padding:20px}.search{display:block;width:100%;min-width:0;order:4}.nav{gap:12px}.forecast{gap:20px}}

.demo-next a{color:inherit}
