:root{
      --font-size: 48px;
      --speed: 42;
      --accent:#b9a7ff;
      --accent-2:#6c7dff;
      --danger:#ff5f6d;
      --warning:#ffd76a;
      --glass:rgba(255,255,255,.10);
      --glass-strong:rgba(255,255,255,.16);
      --glass-dark:rgba(8,10,20,.62);
      --line:rgba(255,255,255,.17);
      --line-soft:rgba(255,255,255,.09);
      --text:#f7f7ff;
      --muted:rgba(228,231,247,.66);
      --shadow:0 24px 80px rgba(0,0,0,.38);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
    }

    *{box-sizing:border-box}
    html,body{
      margin:0;
      width:100%;
      height:100%;
      overflow:hidden;
      background:#03040a;
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif;
    }

    button,input,textarea{font:inherit}
    button{border:0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
    button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid rgba(185,167,255,.78);outline-offset:2px}

    #app{
      position:fixed;
      inset:0;
      overflow:hidden;
      background:
        radial-gradient(circle at 18% 18%,rgba(116,91,255,.24),transparent 34%),
        radial-gradient(circle at 84% 12%,rgba(53,139,255,.18),transparent 28%),
        radial-gradient(circle at 72% 82%,rgba(208,121,255,.13),transparent 32%),
        linear-gradient(145deg,#050611 0%,#0b1021 44%,#03040a 100%);
    }

    #ambient{
      position:absolute;
      inset:-20%;
      background:
        radial-gradient(circle at 30% 40%,rgba(155,117,255,.14),transparent 26%),
        radial-gradient(circle at 70% 36%,rgba(72,148,255,.11),transparent 22%),
        radial-gradient(circle at 50% 80%, rgba(255,255,255,.05), transparent 26%);
      filter:blur(50px);
      animation:floatAmbient 12s ease-in-out infinite alternate;
      pointer-events:none;
    }

    @keyframes floatAmbient{
      from{transform:translate3d(-2%,-1%,0) scale(1)}
      to{transform:translate3d(2%,2%,0) scale(1.06)}
    }

    #camera{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scaleX(-1);
      background:linear-gradient(145deg,#101427,#03040a);
      opacity:.88;
      transition:filter .6s ease,transform .6s ease,opacity .6s ease;
    }

    #app.prompt-running #camera{
      filter:blur(14px);
      transform:scaleX(-1) scale(1.08);
      opacity:.94;
    }

    #cameraGlow{
      position:absolute;
      inset:0;
      background:
        linear-gradient(to bottom,rgba(0,0,0,.30),transparent 30%,rgba(0,0,0,.22)),
        radial-gradient(circle at 50% 50%,transparent 36%,rgba(0,0,0,.44) 100%);
      pointer-events:none;
    }

    .screen{
      position:absolute;
      inset:0;
      display:none;
    }

    .screen.active{display:block}

    .safe{
      position:absolute;
      inset:
        max(16px,env(safe-area-inset-top))
        max(16px,env(safe-area-inset-right))
        max(16px,env(safe-area-inset-bottom))
        max(16px,env(safe-area-inset-left));
    }

    .glass{
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(135deg,rgba(218,221,255,.16),rgba(94,104,166,.07));
      border:1px solid var(--line);
      box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(255,255,255,.04);
      backdrop-filter:blur(28px) saturate(155%);
      -webkit-backdrop-filter:blur(28px) saturate(155%);
    }

    .glass::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(120deg,rgba(224,220,255,.20),transparent 22%,transparent 68%,rgba(118,137,255,.09));
      opacity:.65;
    }

    .glass::after{
      content:"";
      position:absolute;
      inset:1px;
      border-radius:inherit;
      pointer-events:none;
      box-shadow:inset 0 0 28px rgba(255,255,255,.025);
    }

    #setup .safe{
      display:flex;
      flex-direction:column;
      gap:16px;
      overflow:auto;
      padding-bottom:10px;
      scrollbar-width:none;
    }

    #setup .safe::-webkit-scrollbar{display:none}

    .hero{
      display:grid;
      grid-template-columns:1fr auto;
      gap:16px;
      align-items:center;
      padding:18px 20px;
      border-radius:28px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }

    .brandMark{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(145deg,#e1dcff,#a593ff 56%,#6c7dff);
      color:#090812;
      font-weight:900;
      font-size:20px;
      box-shadow:
        0 12px 30px rgba(108,125,255,.32),
        inset 0 1px 0 rgba(255,255,255,.55);
      flex:0 0 auto;
    }

    .titleWrap{min-width:0}

    .title{
      font-size:24px;
      line-height:1.05;
      letter-spacing:-.035em;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .status{
      margin-top:5px;
      font-size:13px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .statusDot{
      display:inline-block;
      width:7px;
      height:7px;
      margin-right:7px;
      border-radius:50%;
      background:rgba(255,255,255,.35);
      box-shadow:0 0 0 5px rgba(255,255,255,.03);
      vertical-align:1px;
    }

    .statusDot.live{
      background:var(--accent);
      box-shadow:0 0 14px rgba(185,167,255,.82),0 0 0 5px rgba(108,125,255,.10);
    }

    .topActions{display:flex;gap:10px}

    .iconPill{
      min-height:48px;
      padding:0 16px;
      border-radius:17px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      background:rgba(255,255,255,.085);
      border:1px solid rgba(255,255,255,.13);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      font-weight:700;
      transition:transform .18s ease,background .18s ease,border-color .18s ease;
    }

    .iconPill:active{transform:scale(.97)}
    .iconPill:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.22)}

    .workspace{
      display:grid;
      grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);
      gap:16px;
      min-height:0;
      flex:1;
    }

    .editorCard{
      border-radius:var(--radius-xl);
      padding:18px;
      display:flex;
      flex-direction:column;
      min-height:0;
    }

    .cardHeader{
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }

    .cardTitle{
      font-size:15px;
      font-weight:760;
      letter-spacing:-.01em;
    }

    .cardHint{
      font-size:12px;
      color:var(--muted);
    }

    textarea{
      position:relative;
      z-index:1;
      width:100%;
      flex:1;
      min-height:350px;
      resize:none;
      border:1px solid rgba(255,255,255,.11);
      outline:0;
      border-radius:24px;
      padding:24px;
      background:
        linear-gradient(145deg,rgba(0,0,0,.28),rgba(255,255,255,.025));
      color:#fff;
      line-height:1.56;
      font-size:20px;
      letter-spacing:-.01em;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 12px 40px rgba(0,0,0,.18);
    }

    textarea::placeholder{color:rgba(255,255,255,.34)}

    .side{
      display:flex;
      flex-direction:column;
      gap:16px;
      min-height:0;
    }

    .settingsCard{
      border-radius:var(--radius-xl);
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .setting{
      position:relative;
      z-index:1;
      padding:16px;
      border-radius:20px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.085);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }

    .setting label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
      color:var(--muted);
      font-size:14px;
    }

    .setting strong{
      color:#fff;
      font-size:13px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
    }

    input[type=range]{
      width:100%;
      appearance:none;
      -webkit-appearance:none;
      height:6px;
      border-radius:999px;
      background:linear-gradient(90deg,rgba(185,167,255,.95),rgba(108,125,255,.28));
      outline:none;
    }

    input[type=range]::-webkit-slider-thumb{
      appearance:none;
      -webkit-appearance:none;
      width:24px;
      height:24px;
      border-radius:50%;
      background:#f6fff9;
      border:5px solid var(--accent-2);
      box-shadow:0 4px 18px rgba(0,0,0,.35),0 0 0 4px rgba(185,167,255,.14);
    }

    input[type=range]::-moz-range-thumb{
      width:16px;
      height:16px;
      border-radius:50%;
      background:#f6fff9;
      border:5px solid var(--accent-2);
      box-shadow:0 4px 18px rgba(0,0,0,.35),0 0 0 4px rgba(185,167,255,.14);
    }

    .quickPreview{
      position:relative;
      z-index:1;
      border-radius:22px;
      min-height:130px;
      overflow:hidden;
      background:
        radial-gradient(circle at 20% 20%,rgba(146,126,255,.20),transparent 28%),
        linear-gradient(145deg,rgba(0,0,0,.34),rgba(255,255,255,.035));
      border:1px solid rgba(255,255,255,.09);
      display:grid;
      place-items:center;
      padding:20px;
      text-align:center;
    }

    .quickPreview span{
      font-weight:800;
      font-size:20px;
      line-height:1.3;
      text-shadow:0 4px 18px rgba(0,0,0,.78);
    }

    .actionsCard{
      border-radius:var(--radius-xl);
      padding:14px;
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      margin-top:auto;
    }

    .btn{
      position:relative;
      z-index:1;
      min-height:60px;
      border-radius:20px;
      font-weight:800;
      letter-spacing:-.01em;
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.08);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 10px 24px rgba(0,0,0,.14);
      transition:transform .18s ease,filter .18s ease,background .18s ease;
    }

    .btn:active{transform:scale(.98)}
    .btn:hover{filter:brightness(1.08)}

    .btn.primary{
      background:
        linear-gradient(145deg,#ded8ff,#9b8cff 58%,#6172ff);
      color:#080914;
      border-color:rgba(255,255,255,.30);
      box-shadow:
        0 18px 38px rgba(108,125,255,.32),
        inset 0 1px 0 rgba(255,255,255,.58);
    }

    .btn.secondary{
      background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
    }

    .btn.danger{background:linear-gradient(145deg,#ff7985,#ff5363)}

    .btn:disabled{opacity:.42;cursor:not-allowed}

    #promptWrap{
      position:absolute;
      left:50%;
      top:8%;
      transform:translateX(-50%);
      width:min(92vw,1040px);
      height:54vh;
      overflow:hidden;
      border-radius:34px;
      background:
        linear-gradient(145deg,rgba(8,10,22,.66),rgba(116,126,190,.075));
      border:1px solid rgba(255,255,255,.18);
      box-shadow:
        0 34px 100px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(255,255,255,.04);
      backdrop-filter:blur(14px) saturate(130%);
      -webkit-backdrop-filter:blur(14px) saturate(130%);
      transition:backdrop-filter .8s ease,-webkit-backdrop-filter .8s ease;
    }

    #promptWrap{
      touch-action:none;
      -webkit-user-select:none;
      user-select:none;
      -webkit-touch-callout:none;
      cursor:grab;
    }

    #run.dragging #promptWrap{cursor:grabbing}

    #run.scrolling #promptWrap{
      backdrop-filter:blur(1.4px) saturate(115%);
      -webkit-backdrop-filter:blur(1.4px) saturate(115%);
    }

    #promptWrap::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(to bottom,rgba(255,255,255,.06),transparent 14%,transparent 82%,rgba(255,255,255,.04)),
        radial-gradient(circle at 50% 0%,rgba(157,137,255,.16),transparent 40%);
      pointer-events:none;
      z-index:1;
    }

    #guide{
      position:absolute;
      left:5%;
      right:5%;
      top:34%;
      height:2px;
      background:linear-gradient(90deg,transparent,rgba(108,125,255,.64),rgba(116,215,255,.98),rgba(185,167,255,.88),transparent);
      box-shadow:0 0 20px rgba(116,196,255,.72);
      z-index:3;
      pointer-events:none;
      will-change:transform;
    }

    #guide::before{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:10px;
      height:10px;
      transform:translate(-50%,-50%) rotate(45deg);
      border-radius:2px;
      background:var(--accent);
      box-shadow:0 0 18px rgba(185,167,255,.92);
    }

    #prompt{
      position:absolute;
      left:0;
      right:0;
      top:0;
      padding:36vh 7vw 42vh;
      font-size:var(--font-size);
      line-height:1.34;
      font-weight:800;
      text-align:center;
      text-shadow:0 4px 20px rgba(0,0,0,.96);
      white-space:pre-wrap;
      will-change:transform;
      z-index:2;
    }

    #cameraPreviewWrap{
      position:absolute;
      left:50%;
      top:calc(8% + 54vh + 12px);
      width:min(92vw,1040px);
      height:min(20vh,170px);
      overflow:hidden;
      border-radius:34px;
      background:linear-gradient(145deg,rgba(7,9,20,.88),rgba(105,116,183,.07));
      border:1px solid rgba(255,255,255,.18);
      box-shadow:
        0 24px 70px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(255,255,255,.04);
      transform:translateX(-50%) translateY(8px);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .35s ease,transform .35s ease,visibility .35s;
      z-index:4;
    }

    #run.scrolling:not(.paused) #cameraPreviewWrap{
      opacity:1;
      visibility:visible;
      transform:translateX(-50%) translateY(0);
    }

    #cameraPreview{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      object-position:center;
      transform:scaleX(-1);
      background:#03040a;
    }

    #runTop{
      position:absolute;
      top:8%;
      left:50%;
      right:auto;
      width:min(92vw,1040px);
      min-height:56px;
      padding:4px 4px 0;
      transform:translateX(-50%);
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      pointer-events:none;
      z-index:5;
    }

    #runTop > *{pointer-events:auto}

    #backBtn{
      position:relative;
      width:90px;
      min-height:48px;
      height:48px;
      padding:0 11px;
      border-radius:30px;
      gap:7px;
      justify-content:center;
      overflow:hidden;
      color:#f7f7ff;
      font-size:14px;
      letter-spacing:-.01em;
      background:
        radial-gradient(circle at 18% 0%,rgba(218,210,255,.22),transparent 54%),
        linear-gradient(145deg,rgba(17,20,43,.94),rgba(86,91,145,.26));
      border:1px solid rgba(218,213,255,.24);
      box-shadow:
        0 12px 30px rgba(0,0,0,.34),
        0 0 22px rgba(108,125,255,.10),
        inset 0 1px 0 rgba(255,255,255,.18);
      backdrop-filter:blur(24px) saturate(145%);
      -webkit-backdrop-filter:blur(24px) saturate(145%);
      transition:transform .18s ease,background .18s ease,border-color .18s ease;
    }

    #backBtn::after{
      content:"";
      position:absolute;
      inset:1px;
      border-radius:29px;
      pointer-events:none;
      box-shadow:inset 0 -1px 0 rgba(255,255,255,.04);
    }

    #backBtn:hover{
      background:
        radial-gradient(circle at 18% 0%,rgba(229,223,255,.28),transparent 56%),
        linear-gradient(145deg,rgba(24,27,55,.96),rgba(100,105,168,.32));
      border-color:rgba(218,213,255,.34);
    }

    #backBtn:active{transform:scale(.96)}

    .pill{
      min-height:48px;
      padding:0 16px;
      border-radius:18px;
      background:linear-gradient(145deg,rgba(10,12,28,.76),rgba(116,126,190,.10));
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(20px) saturate(135%);
      -webkit-backdrop-filter:blur(20px) saturate(135%);
      display:flex;
      align-items:center;
      gap:9px;
      font-weight:760;
      box-shadow:0 14px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.14);
    }

    .dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--danger);
      box-shadow:0 0 14px rgba(255,95,109,.9);
      animation:pulse 1.2s ease-in-out infinite;
    }

    @keyframes pulse{
      0%,100%{transform:scale(1);opacity:1}
      50%{transform:scale(.72);opacity:.62}
    }

    #runControls{
      position:absolute;
      left:50%;
      bottom:max(18px,env(safe-area-inset-bottom));
      transform:translateX(-50%);
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px;
      border-radius:24px;
      background:linear-gradient(145deg,rgba(9,11,26,.78),rgba(116,126,190,.11));
      border:1px solid rgba(255,255,255,.17);
      box-shadow:0 20px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.16);
      backdrop-filter:blur(22px) saturate(140%);
      -webkit-backdrop-filter:blur(22px) saturate(140%);
      z-index:5;
    }

    .iconBtn{
      min-width:54px;
      height:54px;
      padding:0 16px;
      border-radius:17px;
      background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
      border:1px solid rgba(255,255,255,.11);
      font-size:20px;
      font-weight:900;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
      transition:transform .16s ease,filter .16s ease;
    }

    .iconBtn:active{transform:scale(.95)}
    .iconBtn:hover{filter:brightness(1.12)}

    .iconBtn.record{
      background:linear-gradient(145deg,#ff7884,#ff4e5f);
      box-shadow:0 12px 28px rgba(255,78,95,.28),inset 0 1px 0 rgba(255,255,255,.26);
    }

    .iconBtn.stop{
      background:#fff;
      color:#111;
    }

    #countdown{
      position:absolute;
      inset:0;
      display:none;
      place-items:center;
      background:
        radial-gradient(circle at center,rgba(155,133,255,.16),rgba(0,0,0,.60));
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      font-size:min(34vw,190px);
      font-weight:900;
      text-shadow:0 14px 50px rgba(0,0,0,.76);
      z-index:20;
    }

    #countdown.show{display:grid}

    #toast{
      position:absolute;
      left:50%;
      bottom:110px;
      transform:translateX(-50%) translateY(18px);
      background:linear-gradient(145deg,rgba(8,10,24,.88),rgba(116,126,190,.12));
      border:1px solid rgba(255,255,255,.15);
      border-radius:999px;
      padding:13px 18px;
      opacity:0;
      transition:.25s;
      pointer-events:none;
      white-space:nowrap;
      z-index:40;
      box-shadow:0 14px 34px rgba(0,0,0,.28);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }

    #toast.show{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }

    #playback{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      height:100dvh;
      max-height:100dvh;
      min-height:0;
      overflow:hidden;
      background:
        radial-gradient(circle at 20% 10%,rgba(149,126,255,.14),transparent 28%),
        linear-gradient(145deg,#070914,#03040a);
      display:none;
      z-index:30;
      padding:
        max(18px,env(safe-area-inset-top))
        max(18px,env(safe-area-inset-right))
        max(18px,env(safe-area-inset-bottom))
        max(18px,env(safe-area-inset-left));
    }

    #playback.active{
      display:grid;
      grid-template-rows:minmax(0,1fr) auto;
      gap:14px;
    }

    #recordedVideo{
      width:100%;
      height:100%;
      min-width:0;
      min-height:0;
      object-fit:contain;
      background:#000;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 26px 80px rgba(0,0,0,.4);
    }

    .playbackActions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      min-width:0;
      flex:0 0 auto;
    }

    .footerNote{
      position:relative;
      z-index:1;
      text-align:center;
      font-size:11px;
      color:rgba(255,255,255,.42);
      padding:2px 8px 0;
    }

    @media(max-width:900px){
      .workspace{
        grid-template-columns:1fr;
        flex:initial;
      }
      .side{min-height:auto}
      textarea{min-height:330px}
      .actionsCard{margin-top:0}
    }

    @media(max-width:700px){
      .hero{grid-template-columns:1fr auto;padding:14px}
      .brandMark{width:44px;height:44px;border-radius:14px}
      .title{font-size:21px}
      .iconPill .label{display:none}
      .workspace{gap:12px}
      .editorCard,.settingsCard,.actionsCard{border-radius:26px}
      textarea{min-height:38vh;font-size:18px;padding:20px}
      #promptWrap{
        top:max(6px,env(safe-area-inset-top));
        height:55vh;
        width:94vw;
        border-radius:26px;
      }
      #runTop{
        top:max(6px,env(safe-area-inset-top));
        width:94vw;
      }
      #backBtn{border-radius:22px}
      #backBtn::after{border-radius:21px}
      #cameraPreviewWrap{
        top:calc(max(6px,env(safe-area-inset-top)) + 55vh + 12px);
        width:94vw;
        height:22vh;
        border-radius:26px;
      }
      #prompt{padding-left:6vw;padding-right:6vw}
      .playbackActions{grid-template-columns:1fr}
      #runControls{gap:8px;padding:8px}
      .iconBtn{min-width:50px;height:50px;padding:0 13px}
    }


/* Mobile layout corrections */
@media (max-width: 700px) {
  html, body { min-height: 100%; overflow: hidden; }
  #app { overflow: hidden; }
  #setup .safe {
    inset: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    gap: 12px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-x: hidden;
  }
  .hero {
    min-height: 78px;
    flex: 0 0 auto;
  }
  .workspace {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    min-height: auto;
  }
  .editorCard,
  .settingsCard,
  .actionsCard {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }
  .editorCard { min-height: auto; }
  textarea {
    min-height: 260px;
    height: 34vh;
    flex: none;
  }
  .side { overflow: visible; }
  .setting { min-height: 118px; }
  .quickPreview { min-height: 120px; }
  .actionsCard { padding-bottom: 18px; }
  .btn { min-height: 58px; }
}

@media (max-width: 430px) {
  .hero { padding: 12px; border-radius: 24px; }
  .brand { gap: 10px; }
  .brandMark { width: 42px; height: 42px; border-radius: 14px; }
  .title { font-size: 20px; }
  .status { font-size: 12px; }
  .editorCard, .settingsCard, .actionsCard { padding: 14px; border-radius: 24px; }
  textarea { min-height: 240px; height: 32vh; }
  .setting { padding: 14px; }
  .quickPreview span { font-size: 18px; }
}