@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Pacifico&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#064d3c;background:#fff}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.hidden{display:none!important}.shell{max-width:1000px;min-height:100vh;margin:auto;position:relative;overflow:hidden;padding:0 24px 105px;background:radial-gradient(ellipse at top left,#fff1e8,transparent 33%),white;border-inline:1px solid #e4e6e1}header{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0 16px;position:relative;z-index:2}.brand{text-align:center;line-height:1;flex:1}.brand img{display:block;width:92px;height:78px;object-fit:contain;margin:0 auto -5px}.brand h1{margin:0;font-family:'Pacifico','Brush Script MT',cursive;font-weight:400;font-size:clamp(36px,7.4vw,70px);letter-spacing:-1.5px;white-space:nowrap}.summer{color:#ff772d}.springs{color:#007657}.brand strong{display:block;font-size:clamp(19px,3.7vw,32px);letter-spacing:.18em;color:#fa762b;margin-top:11px}.brand-flourish{color:#c89a43;font-size:18px;margin-top:9px}.nav-icon{border:0;background:transparent;color:#005a45;font-size:32px;min-width:68px;padding:12px 0}.nav-icon span{display:block;font-size:12px;font-weight:700}main{max-width:800px;margin:0 auto}.stage-wrap{padding:7px;background:#fff;border:1px solid #d7b16c;border-radius:19px;box-shadow:0 8px 28px #004e3514}.stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff;border-radius:13px;display:grid;place-items:center}.stage video,.stage img.capture{width:100%;height:100%;object-fit:cover}.stage video.mirror{transform:scaleX(-1)}.stage img.capture{position:absolute;inset:0}.overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.eventTitle{position:absolute;top:24px;text-align:center;width:100%;font-weight:800;color:white;text-shadow:0 2px 5px #073e30;pointer-events:none}.count{position:absolute;inset:0;display:grid;place-items:center;font-size:130px;font-weight:800;color:white;text-shadow:0 4px 18px #000}.hint{position:absolute;bottom:36px;background:#064d3ccc;color:white;border-radius:25px;padding:8px 16px;font-size:14px}.capture-controls{text-align:center;padding:18px 0 0}.timer-buttons{display:flex;gap:14px;justify-content:center}.timer{min-width:95px;border:1px solid #d6dad5;background:#fff;color:#064d3c;border-radius:16px;font-size:24px;font-weight:800;padding:10px 18px}.timer small{display:block;font-size:12px;font-weight:500}.timer.active{background:#006f53;color:white}.shutter{display:flex;align-items:center;justify-content:center;width:112px;height:112px;border:7px solid white;outline:2px solid #d8d8d8;border-radius:100%;background:#c69b44;color:white;margin:18px auto;box-shadow:0 4px 10px #0002}.outline{background:white;color:#005a45;border:2px solid #00624c;border-radius:13px;padding:10px 18px;font-weight:700;margin:3px}.after-actions{text-align:center;margin:15px}.status{text-align:center;min-height:22px;color:#456c60;font-size:13px}.share-panel{max-width:700px;margin:15px auto;background:#fff;border:1px solid #e6e3db;border-radius:20px;padding:24px;box-shadow:0 10px 32px #00523d0c}.share-panel h2{text-align:center;font-family:'Pacifico','Brush Script MT',cursive;font-weight:400;color:#00694e;font-size:clamp(29px,5vw,42px);margin:0}.share-panel h2 span{color:#ff762c}.share-help{text-align:center;color:#65756e;font-size:13px;line-height:1.5}.share-panel label,dialog label{display:block;font-weight:800;margin:16px 0 7px}.share-panel label small{font-weight:400}.share-panel textarea,dialog input,dialog select{width:100%;border:1px solid #c7d1cb;border-radius:12px;background:#fff;padding:12px;color:#063e32;font-size:16px;min-height:46px}.share-panel textarea{height:64px;resize:vertical}.share-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.share-buttons button{color:#fff;border:0;border-radius:12px;padding:15px 8px;font-weight:800}.orange{background:#ff762c}.green{background:#006c51}.gold{background:#c49a43}.share-bottom{display:flex;justify-content:center;margin:15px}.wave-bottom{position:absolute;bottom:0;left:0;right:0;height:85px;pointer-events:none}.wave-bottom svg{width:100%;height:100%}dialog{border:1px solid #dfd6c5;border-radius:20px;padding:24px;width:min(92vw,550px);box-shadow:0 20px 80px #0004;color:#064d3c}dialog::backdrop{background:#003c2b99}.settings-head{display:flex;align-items:center;justify-content:space-between}.settings-head h2{font-family:'Pacifico',cursive;font-size:28px}#removeFrame{margin-top:12px}@media(max-width:600px){.shell{padding:0 12px 90px}.nav-icon{min-width:35px;font-size:23px}.nav-icon span{font-size:10px}.brand img{width:70px;height:65px}.brand h1{font-size:clamp(28px,7vw,43px)}.brand strong{font-size:17px}.timer{min-width:78px;padding:9px}.share-panel{padding:14px}.share-buttons{gap:5px}.share-buttons button{font-size:12px}.stage-wrap{padding:4px}.wave-bottom{height:60px}}
/* v1.4: iPad landscape layout, optimized for 1024x768 and larger */
@media (orientation:landscape) and (min-width:700px) {
 html,body{min-height:100%;}
 .shell{max-width:none;width:100%;min-height:100dvh;padding:0 22px 52px;display:flex;flex-direction:column;overflow-x:hidden;}
 header{flex:0 0 auto;align-items:center;padding:4px 0 7px;min-height:94px;}
 .brand img{width:49px;height:42px;margin:0 auto -3px;}
 .brand h1{font-size:clamp(29px,3.6vw,46px);letter-spacing:-.5px;}
 .brand strong{font-size:clamp(13px,1.55vw,19px);margin-top:5px;letter-spacing:.19em;}
 .brand-flourish{font-size:11px;margin-top:2px;}
 .nav-icon{font-size:25px;padding:5px 0;min-width:70px;}
 .nav-icon span{font-size:11px;}
 main{max-width:1250px;width:100%;margin:auto;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;}
 .booth{width:100%;max-width:900px;margin:auto;min-width:0;}
 .stage-wrap{width:min(100%,calc((100dvh - 240px)*4/3));margin:auto;padding:5px;}
 .capture-controls{padding-top:8px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;max-width:800px;margin:auto;}
 .timer-buttons{grid-column:1;grid-row:1;gap:6px;}
 .timer{min-width:57px;padding:7px 8px;font-size:18px;border-radius:11px;}
 .timer small{font-size:10px;}
 .shutter{grid-column:2;grid-row:1 / span 2;width:78px;height:78px;border-width:5px;margin:4px auto;}
 .shutter svg{width:34px;height:34px;}
 #startBtn{grid-column:3;grid-row:1;margin:0;}
 #switchBtn{grid-column:3;grid-row:2;margin:0;}
 .status{margin:4px 0;min-height:16px;}
 .after-actions{margin:10px auto;}
 .wave-bottom{height:42px;}
 /* After capture, put photo and delivery controls side by side. */
 main:has(.share-panel:not(.hidden)){grid-template-columns:minmax(0,1.1fr) minmax(350px,.9fr);gap:18px;align-items:center;}
 main:has(.share-panel:not(.hidden)) .booth{max-width:none;}
 main:has(.share-panel:not(.hidden)) .stage-wrap{width:100%;max-width:calc((100dvh - 185px)*4/3);}
 main:has(.share-panel:not(.hidden)) .share-panel{width:100%;max-width:none;margin:0;padding:14px 17px;max-height:calc(100dvh - 142px);overflow-y:auto;}
 .share-panel h2{font-size:clamp(25px,2.9vw,35px);}
 .share-panel label{margin:9px 0 5px;font-size:13px;}
 .share-panel textarea{height:49px;min-height:45px;padding:9px;font-size:14px;}
 .share-help{font-size:11px;margin:7px 0;}
 .share-buttons{gap:6px;margin-top:11px;}
 .share-buttons button{padding:11px 5px;font-size:12px;}
 .share-bottom{margin:8px;gap:5px;}
 .share-bottom .outline{padding:8px 10px;font-size:12px;}
}
/* Short landscape iPads: maximize available camera height. */
@media (orientation:landscape) and (min-width:700px) and (max-height:650px){
 header{min-height:70px;}.brand img{display:none}.brand h1{font-size:30px}.brand strong{font-size:13px}.brand-flourish{display:none}
 .shell{padding-bottom:30px}.stage-wrap{width:min(100%,calc((100dvh - 170px)*4/3))}
 main:has(.share-panel:not(.hidden)) .stage-wrap{max-width:calc((100dvh - 125px)*4/3)}
 main:has(.share-panel:not(.hidden)) .share-panel{max-height:calc(100dvh - 105px)}
 .wave-bottom{height:25px}
}
@media (orientation:portrait) and (min-width:700px){.shell{max-width:1000px}}

.consent-line{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.35;margin:8px 0}.consent-line input{width:19px;height:19px;flex:none;accent-color:#007657}.captcha-slot{min-height:65px;margin:8px 0}.captcha-slot:empty{display:none}

/* v1.7 — prominent, accessible delivery confirmation */
#shareInfo.success-message {font-size:1.15rem;font-weight:700;color:#065f46;background:#e7f7ef;border:2px solid #10a06b;border-radius:14px;padding:16px 18px;line-height:1.5;}

/* v1.8 video capture */
.media-modes{display:flex;gap:8px;align-items:center}.media-modes button{min-width:90px}.media-modes .mode-selected{background:#006c51;color:white;border-color:#006c51}.capture-controls{flex-wrap:wrap}.recording{background:#b91c1c!important;color:white!important}.stage video.capture{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;z-index:3}

.media-modes{grid-column:1/-1;justify-content:center}#recordBtn{grid-column:2;min-width:185px;padding:14px;border:0;border-radius:12px;color:#fff;font-weight:800}#startBtn,#switchBtn{white-space:nowrap}

/* v1.9 animated GIF and video duration controls */
#videoDurationControl{display:flex;align-items:center;gap:8px;font-weight:600}#videoDuration{font-size:16px;padding:8px;border-radius:8px}.media-modes{flex-wrap:wrap}.stage img#gifPreview{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;z-index:4}

/* v2.0: cohesive, spacious capture action layout */
.capture-controls{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:12px!important;padding:12px 10px!important;width:100%;max-width:800px;margin:0 auto}
.capture-heading{font-size:11px;letter-spacing:.16em;font-weight:800;color:#697b72}
.media-modes{display:flex;justify-content:center;gap:12px;width:100%;flex-wrap:wrap}
.media-modes button{min-width:145px;padding:12px 18px!important;border-radius:14px!important;font-size:15px;box-shadow:0 2px 5px #003c2b0d}
.capture-action{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;width:100%;padding:8px 0}
.capture-action label{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:#145c48}
.capture-action select{border:2px solid #c4d6cd;border-radius:12px;background:#fff;padding:11px 16px;font-size:16px;font-weight:700;color:#064d3c}
.primary-capture{min-height:62px;min-width:265px;padding:15px 25px;border:0;border-radius:18px;background:#f5792d;color:white;font-weight:900;font-size:18px;letter-spacing:.02em;box-shadow:0 6px 0 #b84f16,0 10px 20px #0002}
.primary-capture:not(:disabled):active{transform:translateY(3px);box-shadow:0 3px 0 #b84f16}
.gif-capture{background:linear-gradient(120deg,#ec6b20,#f5a53e);min-width:300px}
.action-note{display:block;flex-basis:100%;font-size:13px;color:#59756b;text-align:center;font-weight:650}
#gifAction{gap:7px}
#startBtn,#switchBtn{min-width:160px}
#gifBtn{grid-column:auto!important}#recordBtn{grid-column:auto!important}
#shareTitle{font-size:clamp(26px,4vw,39px)}
@media (orientation:landscape) and (min-width:700px){.capture-controls{gap:9px!important}.media-modes button{padding:10px 15px!important}.capture-action{padding:2px 0}.primary-capture{min-height:52px;padding:11px 20px}.capture-heading{display:none}}
@media(max-width:600px){.media-modes button{min-width:96px;font-size:13px;padding:9px!important}.primary-capture{min-width:230px}.capture-action label{font-size:13px}}

/* v2.2: keep delivery feedback adjacent to send controls */
#shareInfo{font-weight:700;line-height:1.35;padding:10px 12px;border-radius:9px;background:#f2f7f5;border:1px solid #cbdcd5;overflow-wrap:anywhere}#shareInfo.success-message{background:#e7f8ed;border-color:#78bc91}.share-buttons{position:relative}

/* v2.3: iPad landscape no-scroll kiosk layout.
   Camera remains on the left; controls / delivery form occupy the right. */
@media (orientation:landscape) and (min-width:700px) {
 html,body{height:100%;overflow:hidden}
 .shell{height:100dvh;min-height:0;max-height:100dvh;overflow:hidden;padding:0 12px 6px;display:flex;flex-direction:column}
 header{height:56px;min-height:56px;padding:0 0 2px;align-items:center;flex:none}
 .brand{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
 .brand img{width:36px;height:36px;margin:0}
 .brand h1{font-size:clamp(23px,2.8vw,35px)}
 .brand strong{font-size:12px;letter-spacing:.12em;margin:0}
 .brand-flourish{display:none}
 .nav-icon{min-width:56px;font-size:23px;padding:2px}
 .nav-icon span{font-size:10px}
 main,main:has(.share-panel:not(.hidden)){width:100%;max-width:none;flex:1;min-height:0;display:block;margin:0}
 .booth{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(285px,.75fr);gap:12px;width:100%;height:100%;max-width:none;align-items:center;margin:0}
 .stage-wrap,main:has(.share-panel:not(.hidden)) .stage-wrap{grid-column:1;grid-row:1;width:auto;max-width:none;max-height:calc(100dvh - 73px);height:auto;aspect-ratio:4/3;justify-self:center;align-self:center;padding:4px}
 .stage{width:100%;height:100%;aspect-ratio:4/3}
 .capture-controls{grid-column:2;grid-row:1;align-self:center;display:flex!important;flex-direction:column;gap:7px!important;width:100%;max-width:none;padding:4px!important;margin:0}
 .media-modes{gap:6px;flex-wrap:nowrap}
 .media-modes button{min-width:0;flex:1;font-size:clamp(11px,1.15vw,14px);padding:9px 3px!important;margin:0;border-radius:10px!important;white-space:nowrap}
 .timer-buttons{gap:6px;grid-column:auto;grid-row:auto}
 .timer{min-width:0;flex:1;font-size:16px;padding:6px 3px;border-radius:9px}
 .timer small{font-size:10px}
 .shutter{grid-column:auto;grid-row:auto;width:66px;height:66px;margin:3px auto;border-width:4px}
 .shutter svg{width:32px;height:32px}
 .capture-action{padding:0;gap:8px}
 .capture-action label{font-size:12px;gap:6px}
 .capture-action select{font-size:14px;padding:7px}
 .primary-capture{min-width:0;width:100%;font-size:14px;min-height:46px;padding:8px 12px;border-radius:12px}
 #startBtn,#switchBtn{min-width:0;width:100%;padding:8px;margin:0;font-size:13px}
 #gifAction .action-note{font-size:11px}
 .after-actions{grid-column:2;grid-row:1;align-self:end;display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin:0 0 20px}
 .after-actions .outline{padding:8px;font-size:12px;margin:0}
 .status{grid-column:2;grid-row:1;align-self:end;margin:0 0 2px;font-size:11px;line-height:1.2;max-height:28px;overflow:hidden}
 /* When sharing, keep the captured media on the left and the form on the right. */
 main:has(.share-panel:not(.hidden)) .booth{width:calc(60% - 7px);float:left;display:flex;align-items:center;justify-content:center;position:relative}
 main:has(.share-panel:not(.hidden)) .stage-wrap{width:min(100%,calc((100dvh - 75px)*4/3));max-height:calc(100dvh - 75px)}
 main:has(.share-panel:not(.hidden)) .after-actions{position:absolute;bottom:8px;left:0;right:0;margin:0;z-index:5}
 main:has(.share-panel:not(.hidden)) .status{display:none}
 main:has(.share-panel:not(.hidden)) .share-panel{float:right;width:calc(40% - 7px);height:calc(100dvh - 68px);max-height:calc(100dvh - 68px);margin:0;padding:9px 12px;overflow-y:auto;overscroll-behavior:contain;border-radius:12px}
 .share-panel h2{font-size:clamp(21px,2.25vw,28px)}
 .share-panel label{margin:5px 0 2px;font-size:12px}
 .share-panel textarea{height:40px;min-height:40px;padding:6px 8px;font-size:14px}
 .share-help{margin:3px 0;font-size:10px;line-height:1.25}
 .consent-line{font-size:11px;line-height:1.2;margin:4px 0;gap:5px}
 .consent-line input{width:16px;height:16px}
 .captcha-slot{min-height:0;margin:3px 0}
 #shareInfo,#shareInfo.success-message{font-size:11px;line-height:1.2;padding:5px 7px;margin:4px 0}
 .share-buttons{gap:5px;margin-top:6px}
 .share-buttons button{padding:9px 2px;font-size:11px;min-height:39px}
 .share-bottom{margin:5px 0;gap:5px}
 .share-bottom .outline{font-size:11px;padding:6px 9px}
 .wave-bottom{display:none}
}
@media (orientation:landscape) and (min-width:700px) and (max-height:650px){
 header{height:44px;min-height:44px}
 .brand img{display:none}.brand h1{font-size:25px}
 .booth{grid-template-columns:minmax(0,1.35fr) minmax(260px,.75fr)}
 .stage-wrap,main:has(.share-panel:not(.hidden)) .stage-wrap{max-height:calc(100dvh - 54px)}
 main:has(.share-panel:not(.hidden)) .share-panel{height:calc(100dvh - 54px);max-height:calc(100dvh - 54px)}
 .capture-controls{gap:4px!important}.media-modes button{padding:6px 2px!important}
 .shutter{width:52px;height:52px}.timer{padding:4px 2px}
}

/* v2.4 FIX: explicit preview geometry; never allow grid intrinsic sizing to collapse the stage. */
@media (orientation:landscape) and (min-width:700px){
 .booth{grid-template-columns:minmax(0,65fr) minmax(300px,35fr);align-items:center;min-height:0}
 .stage-wrap,main:has(.share-panel:not(.hidden)) .stage-wrap{
   box-sizing:border-box;display:block;grid-column:1;grid-row:1;
   width:min(100%,calc((100dvh - 100px)*4/3))!important;
   height:auto!important;aspect-ratio:4/3!important;
   max-width:100%!important;max-height:calc(100dvh - 78px)!important;
   min-width:0;min-height:0;justify-self:center;align-self:center;
 }
 .stage{position:relative;display:block;width:100%!important;height:100%!important;aspect-ratio:4/3!important;min-width:0;min-height:0;overflow:hidden;background:#092a25}
 .stage #camera,.stage #captured,.stage #recordedVideo,.stage #gifPreview{
   position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;
 }
 .stage #frame{position:absolute;inset:0;width:100%;height:100%}
 .capture-controls{grid-column:2;min-width:0}
 main:has(.share-panel:not(.hidden)) .booth{width:60%;float:left}
 main:has(.share-panel:not(.hidden)) .stage-wrap{width:min(100%,calc((100dvh - 105px)*4/3))!important}
}
@media (orientation:landscape) and (min-width:700px) and (max-height:650px){
 .stage-wrap,main:has(.share-panel:not(.hidden)) .stage-wrap{width:min(100%,calc((100dvh - 72px)*4/3))!important;max-height:calc(100dvh - 56px)!important}
}

/* v2.5: Dedicated capture and sharing layouts, iPad landscape. */
@media (orientation:landscape) and (min-width:700px){
  main:has(.share-panel:not(.hidden)){display:grid!important;grid-template-columns:minmax(0,60fr) minmax(350px,40fr);column-gap:12px;align-items:stretch;min-height:0;overflow:hidden}
  main:has(.share-panel:not(.hidden)) .booth{
    float:none!important;position:relative!important;display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto!important;
    width:100%!important;height:100%!important;min-height:0;gap:8px!important;
    align-items:center;justify-items:center;overflow:hidden
  }
  main:has(.share-panel:not(.hidden)) .capture-controls{display:none!important}
  main:has(.share-panel:not(.hidden)) .stage-wrap{
    position:relative!important;grid-column:1!important;grid-row:1!important;
    width:min(100%,calc((100dvh - 172px)*4/3))!important;
    max-height:calc(100dvh - 172px)!important;max-width:100%!important;
    align-self:center!important;justify-self:center!important;margin:0!important;
    height:auto!important;aspect-ratio:4/3!important
  }
  main:has(.share-panel:not(.hidden)) .after-actions{
    position:static!important;grid-column:1!important;grid-row:2!important;
    display:flex!important;flex-wrap:wrap;align-self:start!important;justify-self:center;
    justify-content:center;gap:8px;margin:0 0 12px!important;z-index:1
  }
  main:has(.share-panel:not(.hidden)) .after-actions .outline{font-size:13px;padding:10px 14px;min-height:42px}
  main:has(.share-panel:not(.hidden)) .status{display:none!important}
  main:has(.share-panel:not(.hidden)) .share-panel{
    grid-column:2;grid-row:1;float:none!important;width:100%!important;
    height:100%!important;max-height:none!important;margin:0!important;
    overflow-y:auto;min-height:0
  }
}
@media (orientation:landscape) and (min-width:700px) and (max-height:650px){
  main:has(.share-panel:not(.hidden)) .stage-wrap{
    width:min(100%,calc((100dvh - 125px)*4/3))!important;
    max-height:calc(100dvh - 125px)!important
  }
  main:has(.share-panel:not(.hidden)) .after-actions{margin-bottom:3px!important}
  main:has(.share-panel:not(.hidden)) .after-actions .outline{min-height:36px;padding:6px 10px}
}

/* v2.7: header-aware, two-column iPad landscape kiosk. Restores v2.5 layout. */
@media (orientation:landscape) and (min-width:700px){
 html,body{width:100%;height:100%;overflow:hidden}
 .shell{height:100dvh;min-height:0;max-height:100dvh;padding:0 12px 8px;overflow:hidden;display:flex;flex-direction:column}
 header{height:58px;min-height:58px;flex:0 0 58px;padding:0 0 4px}
 main,main:has(.share-panel:not(.hidden)){
  flex:1;min-height:0;width:100%;max-width:none;margin:0;display:grid!important;
  grid-template-columns:minmax(0,60fr) minmax(340px,40fr);gap:12px;
  align-items:stretch;align-content:stretch;overflow:hidden
 }
 .booth,main:has(.share-panel:not(.hidden)) .booth{
  grid-column:1;grid-row:1;width:100%!important;height:100%!important;min-height:0;
  max-width:none!important;float:none!important;position:relative!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:5px!important;align-items:center;justify-items:center;overflow:hidden
 }
 /* Camera uses both columns in capture mode; controls live in the second main column. */
 main:not(:has(.share-panel:not(.hidden))) .booth{display:contents!important}
 .stage-wrap,main:has(.share-panel:not(.hidden)) .stage-wrap{
  position:relative!important;grid-column:1!important;grid-row:1!important;
  box-sizing:border-box;aspect-ratio:4/3!important;
  width:min(100%,calc((100dvh - 90px)*4/3))!important;
  height:auto!important;max-height:calc(100dvh - 90px)!important;
  max-width:100%!important;min-width:0;min-height:0;
  justify-self:center!important;align-self:center!important;margin:0!important;
  padding:4px
 }
 .stage{position:relative!important;display:block!important;aspect-ratio:4/3!important;width:100%!important;height:100%!important;overflow:hidden}
 .stage #camera,.stage #captured,.stage #recordedVideo,.stage #gifPreview{
  position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover
 }
 .stage #frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
 main:not(:has(.share-panel:not(.hidden))) .capture-controls{
  grid-column:2!important;grid-row:1!important;align-self:center!important;
  display:flex!important;flex-direction:column;justify-content:center;align-items:stretch;
  width:100%;max-width:none;padding:6px!important;margin:0;gap:10px!important;
  max-height:100%;overflow-y:auto
 }
 .media-modes{display:flex;gap:5px;flex-wrap:nowrap;width:100%}
 .media-modes button{flex:1;min-width:0;white-space:normal;font-size:clamp(11px,1.2vw,15px);padding:11px 3px!important}
 .timer-buttons{display:flex;justify-content:center;gap:7px}
 .timer{flex:0 1 82px;font-size:18px;padding:7px 3px}
 .shutter{width:76px;height:76px;margin:4px auto}
 #startBtn,#switchBtn{width:100%;min-width:0;padding:11px;margin:0}
 .capture-action{width:100%;flex-wrap:wrap}.primary-capture{width:100%;min-width:0}
 main:not(:has(.share-panel:not(.hidden))) .after-actions{display:none!important}
 main:not(:has(.share-panel:not(.hidden))) .status{grid-column:2;grid-row:1;align-self:end;margin:0 0 4px}
 main:has(.share-panel:not(.hidden)) .capture-controls{display:none!important}
 main:has(.share-panel:not(.hidden)) .stage-wrap{
  width:min(100%,calc((100dvh - 150px)*4/3))!important;
  max-height:calc(100dvh - 150px)!important
 }
 main:has(.share-panel:not(.hidden)) .after-actions{
  display:flex!important;position:static!important;grid-column:1!important;grid-row:2!important;
  align-self:start!important;justify-self:center;justify-content:center;gap:8px;
  margin:0 0 8px!important;flex-wrap:wrap
 }
 main:has(.share-panel:not(.hidden)) .after-actions .outline{min-height:40px;padding:8px 12px}
 main:has(.share-panel:not(.hidden)) .status{display:none!important}
 main:has(.share-panel:not(.hidden)) .share-panel{
  grid-column:2!important;grid-row:1!important;width:100%!important;
  height:100%!important;max-height:100%!important;float:none!important;
  margin:0!important;overflow-y:auto;overscroll-behavior:contain
 }
 .wave-bottom{display:none}
}
@media (orientation:landscape) and (min-width:700px) and (max-height:650px){
 header{height:46px;min-height:46px;flex-basis:46px}
 .stage-wrap{width:min(100%,calc((100dvh - 65px)*4/3))!important;max-height:calc(100dvh - 65px)!important}
 main:has(.share-panel:not(.hidden)) .stage-wrap{width:min(100%,calc((100dvh - 115px)*4/3))!important;max-height:calc(100dvh - 115px)!important}
 .media-modes button{padding:7px 3px!important}.shutter{width:60px;height:60px}
}