/* MallowShare v20.0 | Production visual system. Progressive enhancement only. */
:root{--launch-ink:#142437;--launch-purple:#4991e9;--launch-pink:#5be4e6;--launch-line:#dce8f6;--launch-muted:#6c7989}
*{scroll-margin-top:22px}
html{scroll-behavior:smooth}
body{font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.skip-main{position:fixed;left:14px;top:-75px;z-index:100000;color:white;background:#316db7;text-decoration:none;padding:12px 20px;border-radius:12px;font-weight:800;box-shadow:0 8px 24px #30629f33}
.skip-main:focus-visible{top:12px}
.topbar{max-width:1440px;margin-inline:auto;padding-inline:clamp(16px,4vw,70px)}
.brand{font-weight:850;letter-spacing:-.052em}
.brandmark{box-shadow:0 8px 20px rgba(85,139,206,.16)}
.top-right .language-switch,.top-right .round-button{transition:background .18s ease,box-shadow .18s ease,border-color .18s ease}
.top-right .language-switch:hover,.top-right .round-button:hover{border-color:#a6c8f1;background:#f0f7ff}
.landing{background:radial-gradient(ellipse 72% 70% at 3% 16%,rgba(201,225,254,.34),transparent 84%),radial-gradient(ellipse 66% 72% at 97% 8%,rgba(199,236,255,.43),transparent 85%),#fafcff}
.landing-inner{max-width:1260px;column-gap:clamp(22px,5.5vw,82px);align-items:start;padding:clamp(30px,5vw,65px) clamp(16px,4vw,45px) 16px;min-height:0}
.intro{padding-top:clamp(26px,4vw,58px)}
.intro .eyebrow{box-shadow:0 8px 25px rgba(71,118,175,.06);background:rgba(255,255,255,.72)}
.intro h1{letter-spacing:-.078em;line-height:1.02;margin-top:25px;margin-bottom:24px}
.intro .gradient-ink{background:linear-gradient(105deg,#4795f5 0%,#5796e2 48%,#5ae7e9 94%);-webkit-background-clip:text;background-clip:text}
.intro-copy{max-width:515px;font-size:clamp(15px,1.3vw,18px);line-height:1.72;letter-spacing:-.006em;color:#5e6d7f}
.welcome-replay{border-radius:13px;box-shadow:0 9px 22px rgba(75,143,226,.08);background:white;border:1px solid #d5e6fb}
.welcome-replay:hover{border-color:#8ab7ee;box-shadow:0 14px 26px rgba(70,131,205,.12);transform:translateY(-1px)}
.hero-points{margin-top:20px;gap:14px}
.hero-points span{color:#5b6879;font-weight:670}
.hero-art{opacity:.96;transform:translateY(-9px)}
.access-card{margin:0 0 24px;max-width:535px;padding:clamp(22px,2.3vw,34px);border-radius:30px;background:#fff;border:1px solid #e2ecf8;box-shadow:0 26px 75px rgba(56,89,130,.12),0 2px 8px rgba(56,89,130,.04)}
.access-heading{margin-bottom:22px}
.access-heading h2{letter-spacing:-.043em}
.access-heading p{margin-top:3px}
.access-icon{border-radius:17px;box-shadow:inset 0 0 0 1px #ddecfe}
.segmented{background:#f6f9fd;padding:5px;min-height:46px;border-radius:16px;border:1px solid #eef2f8}
.segmented button{border-radius:12px;min-height:35px}
.access-card .field{transition:box-shadow .18s ease,border-color .18s ease,background-color .18s ease}
.access-card .field:focus-within{background:#fff;box-shadow:0 0 0 4px rgba(100,161,235,.11);border-color:#80afe9}
.access-card select:focus-visible{box-shadow:0 0 0 4px rgba(100,161,235,.14)}
.access-form .quick-start{order:initial;display:flex;align-items:center;justify-content:center;gap:8px;min-height:59px;margin-top:18px;padding:15px 12px;border-radius:16px;box-shadow:0 13px 30px rgba(75,139,217,.21);background:linear-gradient(108deg,#3d89e7,#5298ed 56%,#60e0e2);font-weight:850;font-size:14px;letter-spacing:-.005em;transition:transform .18s ease,box-shadow .18s ease}
.access-form .quick-start:hover{transform:translateY(-2px);box-shadow:0 17px 33px rgba(75,139,217,.3)}
.access-form .quick-start:active{transform:translateY(0)}
.access-form .quick-divider{color:#6d7e93;margin:14px auto 19px;letter-spacing:.08em;font-weight:800;font-size:10px}
.access-form .cta{border-radius:14px;min-height:52px;margin-top:17px}
.access-card .trust{border-top:1px solid #eaf0f8;padding-top:16px;margin-top:17px;line-height:1.55}
.landing .converter-banner{border-radius:23px;box-shadow:0 15px 34px #5086c712}
.landing-bottom{margin-bottom:6px}
.seo-information{border-top:1px solid #e0ebf9;background:linear-gradient(180deg,#fff 0%,#fafcff 100%);padding-top:clamp(38px,4.5vw,72px)}
.seo-information h2,.explore-guides h2{letter-spacing:-.048em}
.seo-steps{gap:18px}
.seo-steps article{background:#fff;min-height:0;border:1px solid #ddeafa;box-shadow:0 16px 45px rgba(29,60,98,.065);border-radius:22px;transition:transform .2s ease,box-shadow .2s ease}
.seo-steps article:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(29,60,98,.1)}
.explore-guides{padding-top:clamp(28px,4vw,54px)}
.explore-grid{gap:17px}
.explore-card{border-radius:22px;border-color:#e1ebf8;background:linear-gradient(150deg,#fff,#fcfdff);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.explore-card:hover{transform:translateY(-4px);box-shadow:0 19px 40px rgba(52,95,147,.1);border-color:#b9d6fa}
.explore-card .explore-arrow{transition:transform .2s ease}
.explore-card:hover .explore-arrow{transform:translate(2px,-2px)}
.explore-mini-grid a{transition:background .18s ease,border-color .18s ease}
.explore-mini-grid a:hover{background:#eaf3ff;border-color:#c4defe}
.brand-share-row{border-radius:19px}
.sharefit-landing{max-width:1120px;border-radius:19px;box-shadow:0 12px 28px #6494ce10}
.mallow-ad-section{background:linear-gradient(125deg,#ffffff 0%,#f7fbff 100%);border:1px solid #d4e2f2;border-radius:23px;box-shadow:0 15px 45px rgba(58,96,143,.075)}
.mallow-ad-house{border-radius:17px}
.mallow-ad-house:hover{border-color:#b0cff6;box-shadow:0 12px 23px #4876ae12}
.mallow-ad-footnote{font-size:11px}
.mallow-global-footer{margin-top:48px;margin-bottom:24px;padding-block:24px;line-height:1.7}
/* Room: strong core-task focus, advanced actions stay discoverable but subordinate. */
.room-page{max-width:1390px;margin-inline:auto}
.room-head{align-items:center;gap:16px}
.room-head h1{letter-spacing:-.05em}
.room-alert{border-radius:16px}
.quick-guide{border-radius:18px;padding:13px 18px}
.turbo-tips{border-radius:18px;gap:14px}
.main-panel,.chat-panel{border-radius:24px;box-shadow:0 14px 48px rgba(35,67,107,.07);border-color:#e2ebf6}
.section-nav{border-radius:22px 22px 0 0}
.tab-panel{min-width:0}
.dropzone{border-radius:23px;border-color:#a5cdfe;background:linear-gradient(128deg,#f6faff 0%,#f2f8ff 100%);transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.dropzone:hover,.dropzone:focus-visible,.dropzone.dragover{border-color:#4c96f0;background:linear-gradient(125deg,#f1f8ff,#ecf5ff);box-shadow:0 0 0 4px #5a9df012}
.dropzone .upload-orb{box-shadow:0 8px 17px #6299dc17}
.upload-controls .pill{border-radius:12px;min-height:40px}
.files-heading{padding-top:7px}
.file-item{box-shadow:0 5px 20px #415c7e08;border-color:#e5ecf4}
.file-item:hover{border-color:#b9d3f2;box-shadow:0 10px 25px #3d689d14}
.handoff-bar{border-radius:19px;box-shadow:0 13px 35px #27806a12}
.handoff-primary,.handoff-secondary{min-height:40px}
.sharefit-inline{border-radius:15px}
.studio-details,.v11-studio,.mallow-tools{border-radius:18px}
.studio-details:not([open]){box-shadow:none}
.chat-panel{overflow:hidden}
.chat-head{border-bottom-color:#e1eaf4}
.chat-compose textarea{border-radius:14px}
/* Dark mode contrast and presentation. Avoid light-on-light sections. */
body.dark .landing{background:radial-gradient(ellipse at 0% 12%,#3a547325,transparent 72%),radial-gradient(ellipse at 100% 0%,#2c779125,transparent 75%),#1a2533}
body.dark .intro-copy,body.dark .hero-points span{color:#bdcbdb}
body.dark .intro .eyebrow{background:#253446;color:#b9d5f8}
body.dark .access-card,body.dark .seo-steps article,body.dark .mallow-ad-section{background:#25303e;border-color:#415164;box-shadow:0 16px 38px #0c162247}
body.dark .access-card .trust{border-color:#415164}
body.dark .access-card .segmented{background:#1f2b39;border-color:#384656}
body.dark .access-card .field:focus-within{background:#263445}
body.dark .seo-information{background:linear-gradient(180deg,#1b2939,#192636);border-color:#435060}
body.dark .seo-steps article{color:#eef6ff}
body.dark .explore-card{background:linear-gradient(150deg,#283442,#25313f);border-color:#4a596c}
body.dark .mallow-ad-section{background:#25313f}
body.dark .mallow-ad-house{border-color:#46586e}
body.dark .mallow-ad-head h2{color:#f6faff}
body.dark .dropzone{background:linear-gradient(120deg,#2c3846,#263445);border-color:#6a96cb}
body.dark .main-panel,body.dark .chat-panel{border-color:#46515f;box-shadow:0 14px 42px #0b152166}
/* Comfortable mobile controls, no cropped heading, no overflow. */
@media(max-width:1050px){
 .landing-inner{padding-top:28px}
 .intro{padding-top:22px}
 .access-card{max-width:100%}
}
@media(max-width:800px){
 .topbar{padding-inline:clamp(12px,3vw,23px)}
 .landing-inner{padding:27px clamp(13px,3.3vw,26px) 14px;gap:26px}
 .intro{padding-top:0}
 .intro h1{margin:18px 0 18px}
 .intro-copy{max-width:580px}
 .hero-art{display:none}
 .access-card{padding:clamp(16px,4vw,25px)}
 .landing .converter-banner{margin-top:12px}
 .seo-information{padding-top:35px}
 .room-head{align-items:flex-start}
}
@media(max-width:560px){
 .brand{font-size:18px}
 .brandmark img{width:29px;height:29px}
 .intro .eyebrow{font-size:9px}
 .intro h1{font-size:clamp(38px,10.4vw,59px);margin:18px 0 12px;line-height:1.04}
 .intro-copy{font-size:14px;line-height:1.63;margin-bottom:18px}
 .hero-points{gap:7px;flex-wrap:wrap;margin-top:12px}
 .hero-points span{font-size:10px;white-space:nowrap}
 .welcome-replay{padding:11px 14px;font-size:12px}
 .access-card{border-radius:23px;padding:18px 16px;margin:0 auto 12px}
 .access-heading{margin-bottom:15px}
 .access-heading h2{font-size:22px}
 .access-form .quick-start{min-height:52px;font-size:12px;border-radius:13px;margin-top:13px;padding:12px 9px}
 .access-form .quick-divider{font-size:9px;margin:11px auto 15px}
 .access-form .cta{margin-top:12px;min-height:48px}
 .access-card .field{min-height:44px}
 .seo-information h2,.explore-guides h2{font-size:clamp(24px,7vw,32px)}
 .seo-steps article{padding:18px 19px;border-radius:17px}
 .explore-grid{gap:12px}
 .explore-card{border-radius:18px}
 .mallow-ad-section{margin-inline:10px;border-radius:20px}
 .room-page{padding-inline:10px}
 .room-head{gap:10px}
 .quick-guide{padding:11px 12px}
 .turbo-tips{padding:10px 13px}
 .main-panel,.chat-panel{border-radius:18px}
 .dropzone{border-radius:17px}
 .handoff-bar{border-radius:16px;padding:13px}
 .mallow-global-footer{margin-top:28px}
}
@media(max-width:359px){
 .top-caption{display:none}
 .intro h1{font-size:36px}
 .hero-points{gap:6px}
 .hero-points span{font-size:9px}
 .access-form .quick-start{font-size:11px}
 .access-heading h2{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* On phones, opening the file picker must not require scrolling past room tips. */
.room-mobile-upload{display:none}
@media(max-width:800px){
 .room-head .head-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
 .room-mobile-upload{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:0;border-radius:12px;background:linear-gradient(105deg,#4792ee,#6fa6ea);color:white;font-size:12px;font-weight:850;box-shadow:0 8px 17px #5180b93b;cursor:pointer}
 .room-mobile-upload:focus-visible{outline:3px solid #579ef5;outline-offset:3px}
}
@media(max-width:420px){
 .room-head .head-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;width:100%}
 .room-head .timer-card{grid-column:1/-1}
 .room-mobile-upload{min-width:0}
 .room-head .head-actions #invite-button{min-width:0}
}


/* v24 — RESTORE the original v20 homepage. POSITIONING ONLY; retain all original controls, styles and tabs. */
@media(min-width:851px){
  .landing{padding-top:11px}
  .landing-inner{padding-top:clamp(8px,1.3vw,17px);padding-bottom:10px;align-items:start}
  .intro{padding-top:clamp(10px,1.7vw,20px);padding-bottom:18px}
  .intro h1{margin-top:15px;margin-bottom:16px}
  .intro-copy{line-height:1.58;margin-bottom:14px}
  .welcome-replay{margin-bottom:12px}
  .hero-points{margin-top:12px}
  .access-card{padding:clamp(17px,1.6vw,22px);margin-bottom:12px}
  .access-heading{margin-bottom:10px}
  .segmented{margin-bottom:8px}
  .access-form .quick-start{margin-top:8px;min-height:50px;padding:10px}
  .access-form .quick-divider{margin:7px auto 10px}
  .access-form label{margin:8px 0 5px}
  .access-card .field{min-height:42px}
  .access-form .cta{margin-top:10px;min-height:46px}
  .access-card .trust{padding-top:10px;margin-top:12px}
}
/* Phones need the entry card first; otherwise it sits below the long marketing headline. */
@media(max-width:850px){
  .landing{padding-top:10px}
  .landing-inner{display:flex;flex-direction:column;gap:16px;align-items:stretch;padding-top:8px}
  .landing-inner>.access-card{order:-1;margin:0 auto 8px;width:100%;max-width:590px}
  .landing-inner>.intro{order:0;padding:0 4px 12px}
  .access-heading{margin-bottom:12px}
  .segmented{margin-bottom:10px}
  .access-form .quick-start{margin-top:10px;min-height:48px}
  .access-form .quick-divider{margin:9px auto 12px}
}
@media(max-width:540px){
  .landing-inner{padding-top:4px;gap:12px}
  .access-card{padding:16px 15px;margin:0 auto 7px}
  .access-heading{margin-bottom:10px}
  .intro h1{margin-top:14px;margin-bottom:10px}
  .access-form .quick-start{min-height:46px;font-size:12px!important;padding:10px}
}