:root{--green:#30533a;--orange:#ff6b00;--bg:#f7f5ef;--line:rgba(247,245,239,.18);--ease:cubic-bezier(.2,.82,.2,1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--green);font-family:Arial,Helvetica,sans-serif;color:var(--bg)}body{overflow:hidden}
a{color:inherit;text-decoration:none}.preview-bar{height:84px;position:relative;z-index:5;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:28px;padding:12px clamp(18px,3vw,48px);border-bottom:1px solid var(--line);background:var(--green)}
.preview-brand img{display:block;width:150px}.preview-project{display:grid;gap:3px;min-width:0}.preview-kicker{font-size:9px;font-weight:800;letter-spacing:.18em;color:#f7f5ef99}.preview-project strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-switch{display:flex;border:1px solid #f7f5ef45;border-radius:999px;padding:4px}.device-switch button{border:0;background:transparent;color:#f7f5eb99;cursor:pointer;padding:8px 13px;border-radius:999px;font:700 10px/1 Arial;text-transform:uppercase;letter-spacing:.08em;transition:.25s ease}.device-switch button:hover{color:var(--bg)}.device-switch button.active{background:var(--orange);color:var(--green)}.preview-close{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.preview-close b{display:grid;place-items:center;width:32px;height:32px;border:1px solid #f7f5ef55;border-radius:50%;font-size:20px;font-weight:300;transition:.25s ease}.preview-close:hover b{background:var(--orange);border-color:var(--orange);color:var(--green);transform:rotate(90deg)}
.preview-stage{height:calc(100vh - 84px);padding:18px clamp(16px,3vw,44px) 30px;display:flex;flex-direction:column;align-items:center;gap:14px;overflow:hidden}.preview-meta{width:min(100%,1540px);display:flex;align-items:center;gap:9px;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#f7f5ef9b}.orange-dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}.preview-rule{height:1px;background:#f7f5ef2c;flex:1}.browser-frame{width:min(100%,1540px);height:calc(100% - 28px);background:var(--bg);border-radius:14px;overflow:hidden;box-shadow:0 24px 70px #10201655;transition:width .65s var(--ease),border-radius .45s ease;position:relative}.browser-chrome{height:34px;background:#ece9e1;border-bottom:1px solid #d9d5cb;display:flex;align-items:center;gap:6px;padding:0 12px;color:#696b66;font-size:9px}.browser-chrome>span{width:7px;height:7px;border-radius:50%;background:#c4c1b9}.browser-chrome div{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browser-frame iframe{display:block;width:100%;height:calc(100% - 34px);border:0;background:white}.preview-stage[data-device="tablet"] .browser-frame{width:min(820px,100%);border-radius:18px}.preview-stage[data-device="mobile"] .browser-frame{width:min(410px,100%);border-radius:24px}.preview-stage[data-device="mobile"] .browser-chrome{height:28px}.preview-stage[data-device="mobile"] iframe{height:calc(100% - 28px)}
@media(max-width:760px){.preview-bar{height:68px;grid-template-columns:auto 1fr auto;padding:9px 14px;gap:12px}.preview-brand img{width:116px}.preview-project{display:none}.device-switch{display:none}.preview-close span{display:none}.preview-close b{width:34px;height:34px}.preview-stage{height:calc(100dvh - 68px);padding:0;gap:0}.preview-meta{display:none}.browser-frame,.preview-stage[data-device] .browser-frame{width:100%;height:100%;border-radius:0;box-shadow:none}.browser-chrome{display:none}.browser-frame iframe,.preview-stage[data-device="mobile"] iframe{height:100%}}
@media(prefers-reduced-motion:reduce){.browser-frame,.preview-close b{transition:none}}

/* v11.7 — phone landscape behaves like phone portrait: no device controls/chrome */
@media (hover:none) and (pointer:coarse) and (max-height:600px){
  .preview-bar{height:58px;grid-template-columns:auto 1fr auto;padding:7px 12px;gap:10px}
  .preview-brand img{width:108px}
  .preview-project,.device-switch{display:none!important}
  .preview-close span{display:none}
  .preview-close b{width:32px;height:32px}
  .preview-stage{height:calc(100dvh - 58px);padding:0;gap:0}
  .preview-meta{display:none}
  .browser-frame,.preview-stage[data-device] .browser-frame{width:100%;height:100%;border-radius:0;box-shadow:none}
  .browser-chrome{display:none}
  .browser-frame iframe,.preview-stage[data-device="mobile"] iframe,.preview-stage[data-device="tablet"] iframe,.preview-stage[data-device="desktop"] iframe{height:100%}
}