@import url('./shared/tokens.css');

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #182620; color: #f8f2e8; font: 500 16px/1.45 var(--sans); }
button, select { font: inherit; }
:focus-visible { outline: 3px solid #f3bf63; outline-offset: 3px; }
.presenter { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr; }
.presenter-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px clamp(16px, 3vw, 42px); border-bottom: 1px solid #ffffff20; }
.presenter-header p { margin: 0; color: #cbd6d0; }
.presenter-header strong { display: block; color: #fff; font-family: var(--display); font-size: 1.35rem; }
.presenter-controls { display: flex; align-items: end; gap: 10px; padding: 12px clamp(16px, 3vw, 42px); overflow-x: auto; background: #20362e; }
.presenter-controls label { display: grid; gap: 4px; min-width: max-content; }
.presenter-controls span { color: #cbd6d0; font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.presenter-controls select, .presenter-controls button, .restore-controls { min-height: 44px; border: 1px solid #ffffff40; border-radius: 8px; padding: 8px 12px; background: #fffdf8; color: #172c27; font-weight: 750; cursor: pointer; }
.presenter-controls button.primary { background: #c5593c; color: #fff; border-color: #c5593c; }
.preview-area { min-height: 0; display: grid; place-items: start center; overflow: auto; padding: 22px; background: #111b17; }
.preview-frame { width: min(100%, 1280px); height: calc(100vh - 170px); min-height: 620px; border: 0; background: #fff; box-shadow: 0 20px 70px #0008; transition: width .25s ease; }
.preview-area[data-viewport='phone'] .preview-frame { width: 375px; }
.preview-area[data-viewport='tablet'] .preview-frame { width: 768px; }
.preview-area[data-viewport='desktop'] .preview-frame { width: 1280px; }
.restore-controls { display: none; position: fixed; z-index: 50; top: 10px; right: 10px; }
body[data-clean='true'] .presenter { display: block; }
body[data-clean='true'] .presenter-header, body[data-clean='true'] .presenter-controls { display: none; }
body[data-clean='true'] .preview-area { padding: 0; min-height: 100vh; }
body[data-clean='true'] .preview-frame { width: 100%; height: 100vh; min-height: 100vh; box-shadow: none; }
body[data-clean='true'] .restore-controls { display: block; opacity: .22; }
body[data-clean='true'] .restore-controls:hover, body[data-clean='true'] .restore-controls:focus-visible { opacity: 1; }
@media(max-width:700px){.presenter-header{align-items:flex-start;flex-direction:column}.preview-area{padding:8px}.preview-frame{height:calc(100vh - 230px)}.presenter-controls label:nth-child(3){display:none}}
@media(prefers-reduced-motion:reduce){.preview-frame{transition:none}}