/* Workspace home (K10/S3/S4/S6) — page-specific rules only. Shell (sidebar/meters/
   search header) is static/shell.css; reuses .app-shell/.sidebar/.upload-zone/
   .project-card/.badge/.button/.hint from qawlak.css. */
#upload-progress{height:auto;background:none;display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}#upload-progress .qk-progress{flex:1;min-width:120px}#upload-progress button{font-size:12px;padding:var(--space-1) var(--space-3)}
.kebab{position:relative;margin-inline-start:auto}.kebab>summary{list-style:none;cursor:pointer;border-radius:6px;display:grid;place-items:center;color:var(--color-text-muted)}.kebab>summary::-webkit-details-marker{display:none}.kebab>summary:hover{background:var(--color-surface-raised)}.kebab[open]>summary{background:var(--color-surface-raised)}.kebab-menu{position:absolute;inset-inline-end:0;top:30px;z-index:5;background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;box-shadow:var(--shadow-raised);display:grid;min-width:140px;padding:4px;gap:2px}
.project-card{position:relative}.project-card .project-meta{display:flex;align-items:start;gap:8px}.project-card .project-open{flex:1;min-width:0;min-height:44px;display:block;color:inherit;text-decoration:none;border-radius:4px}
.job-list{display:grid;gap:8px;margin-top:12px}.job-row{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:var(--space-3) var(--space-4);font-size:13px}.job-row strong{font-weight:600}.job-row .hint{margin:0}.job-row button{font-size:12px;padding:var(--space-2) var(--space-3)}
dialog.export-dialog{max-width:460px}.export-dialog .format-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:var(--space-3) 0;border-top:1px solid var(--color-border)}.export-dialog .format-row:first-of-type{border-top:0}.export-dialog .format-row a,.export-dialog .format-row span{font-size:13px}.export-dialog .format-row a:not([href]){color:var(--color-text-muted);pointer-events:none}
.export-section{border-top:1px solid var(--color-border);padding-top:16px;margin-top:16px}.export-section:first-of-type{border-top:0;margin-top:0}.export-section h3{font-size:14px;margin-bottom:var(--space-3)}.export-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-3)}.export-controls label{font-size:12px}.export-controls select{font-size:12px;padding:var(--space-2)}.export-section .button{width:100%}.export-section a{display:block;text-align:center;margin-top:8px;font-size:13px}
@media(max-width:800px){.job-row{grid-template-columns:1fr auto}.job-row .hint{grid-column:1/-1}}
/* P6-05: multi-select bulk bar + card checkbox */
.project-pick{position:absolute;top:8px;inset-inline-start:8px;width:18px;height:18px;margin:0;z-index:2;accent-color:var(--color-action)}
.project-card:has(.project-pick:checked){outline:2px solid var(--color-action);outline-offset:2px}
.bulk-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--color-surface);border:1px solid var(--color-action);border-radius:12px;padding:var(--space-3) var(--space-4);margin-bottom:12px;font-size:13px}
.bulk-bar label{display:flex;align-items:center;gap:8px;font-size:13px}.bulk-bar select{font-size:13px;padding:var(--space-2) var(--space-2)}

/* ============================================================================
   Home, rebuilt as a creator surface (Karan, 10 Sep).
   References: app.kalakar.io home (research/kalakar-app/screenshot-…-15.jpg) for the
   full-width drop zone above a "Recent videos" poster grid; 21st.dev @joyco/file-dropzone
   for the drop-area anatomy (dashed rounded panel, circular icon chip, headline + limits
   line + explicit Select button, data-dragging tint, role="alert" error line); 21st.dev
   @uilayout.contact/conditiongrid for badges overlaid on the card art rather than listed
   under it. Everything below is vanilla CSS on the existing tokens — no framework.
   ========================================================================== */

/* --- Drop zone ------------------------------------------------------------ */
/* Whole-page drag: one calm ring, no full-screen takeover that hides where the file lands. */
body.page-dragging .drop-hero{background:var(--color-tint);border-color:var(--color-action);border-style:solid}
body.page-dragging::after{
 content:'';position:fixed;inset:0;z-index:50;pointer-events:none;
 border:2px solid var(--color-action);border-radius:4px;
}

/* --- Project cards -------------------------------------------------------- */
.project-card{background:transparent;border:0;border-radius:0;overflow:visible;display:flex;flex-direction:column}
/* D5-02: the link comes first in the DOM (focus order); the poster still reads first on screen. */
.project-card .project-poster{order:-1}
.project-card:hover{background:transparent}
.project-card .project-poster{
 position:relative;display:block;aspect-ratio:16/9;width:100%;height:auto;
 border-radius:12px;overflow:hidden;background:var(--studio-stage);border:1px solid var(--color-border);
}
.project-card .project-poster video,.project-card .project-poster img{
 width:100%;height:100%;object-fit:cover;display:block;background:var(--studio-stage);
}
.project-card .project-poster img{position:relative} /* UX 1.3: a decoded frame paints over the fallback glyph, not under it */
.project-card .project-poster .poster-fallback{
 position:absolute;inset:0;display:grid;place-items:center;color:var(--studio-fg-3);font-size:34px;
}
.project-card .poster-play{
 position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .18s;
 background:linear-gradient(to top,var(--studio-scrim),transparent 55%);
}
.project-card:hover .poster-play,.project-card:focus-within .poster-play{opacity:1}
.poster-play span{
 width:44px;height:44px;border-radius:50%;background:var(--studio-scrim-strong);
 display:grid;place-items:center;color:var(--studio-fg);font-size:15px;padding-inline-start:var(--space-1);
}
.project-card .poster-time{
 position:absolute;inset-block-end:8px;inset-inline-end:8px;direction:ltr;
 background:var(--studio-scrim-strong);color:var(--studio-fg);font-size:12px;font-variant-numeric:tabular-nums;
 padding:var(--space-1) var(--space-2);border-radius:6px;
}
.project-card .poster-state{
 position:absolute;inset-block-start:8px;inset-inline-end:8px;
 background:var(--studio-scrim-strong);color:var(--studio-fg);font-size:12px;padding:var(--space-1) var(--space-2);border-radius:99px;
}
.project-card .poster-state[data-state=error]{color:var(--color-danger)}
.project-card .project-meta{padding:var(--space-3) 2px 0;display:flex;align-items:start;gap:var(--space-2)}
.project-card strong{font-size:14px;font-weight:600}
.project-card small{display:block;margin-top:var(--space-1);color:var(--color-text-muted);font-size:12px}
.project-card .project-pick{inset-block-start:8px;inset-inline-start:8px;opacity:0;transition:opacity .15s}
/* The multi-select box is a power feature: out of the way until you hover, focus, or start
   selecting, so a normal grid is just video art. */
.project-card:hover .project-pick,.project-card:focus-within .project-pick,
.project-card .project-pick:checked,body.selecting .project-pick{opacity:1}
.project-card:has(.project-pick:checked){outline:0}
.project-card:has(.project-pick:checked) .project-poster{outline:2px solid var(--color-action);outline-offset:2px}

/* --- Empty state: one line, one action ------------------------------------ */
#project-grid .empty-projects{
 display:flex;flex-direction:column;align-items:center;gap:12px;
 border:0;background:none;padding:var(--space-7) var(--space-5);color:var(--color-text-muted);
}
#project-grid .empty-projects p{margin:0;font-size:14px;color:var(--color-text)}
.empty-projects .button{font-size:13px}
/* D15-16: the first-run "open a sample in your language" button measured 41 px at 390; it keeps the 44 px target on phones and touch. */
@media (max-width:560px),(hover:none){.onboard-choice .qk-btn,.onboard-choice select{min-height:44px}}

/* --- Jobs, demoted to a quiet strip --------------------------------------- */
.job-strip{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;font-size:13px;color:var(--color-text-muted);margin-top:var(--space-5)}
.job-strip .qk-icon{color:var(--color-action)}
.job-strip button{font-size:12px;padding:var(--space-2) var(--space-3)}

/* --- Motion layer (ported to vanilla CSS; no framer-motion, no build step) ---
   21st.dev @isaiahbjork/video-upload-card → the drop border animates while a file is over
   the page: here as marching ants drawn with a repeating-linear-gradient background and one
   @keyframes on background-position, so nothing but a paint changes.
   21st.dev @isaiahbjork/hover-detail-card → contextual actions rise into view on hover
   instead of hiding in a kebab; ported as a translate/opacity row, transform+opacity only.
   21st.dev @minhxthanh/moving-dot-card → the idea of motion living on the border, not the
   card body. Skipped from all three: 3D tilt, glassmorphism, gradient washes and particles —
   they fight the one-accent brand rule and cost frames for nothing.
   -------------------------------------------------------------------------- */
/* Each layer keeps its own edge anchor; only the offset along that edge moves. Listing just
   the travel (and dropping the 100%/0 anchors) slides the bottom and end rules into the middle. */
@keyframes qk-ants{
 from{background-position:0 0,0 100%,0 0,100% 0}
 to{background-position:24px 0,-24px 100%,0 -24px,100% 24px}
}
/* The ants live on a pseudo-element, not the label itself: the label is a flex container with
   padding, and background-position percentages there resolve against a box that is not the one
   you see. An absolutely positioned ::before has exactly the geometry it is given. */
body.page-dragging .drop-hero{border-color:transparent;background:var(--color-tint)}
body.page-dragging .drop-hero::before{
 content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
 background-image:
  repeating-linear-gradient(90deg,var(--color-action) 0 12px,transparent 12px 24px),
  repeating-linear-gradient(90deg,var(--color-action) 0 12px,transparent 12px 24px),
  repeating-linear-gradient(0deg,var(--color-action) 0 12px,transparent 12px 24px),
  repeating-linear-gradient(0deg,var(--color-action) 0 12px,transparent 12px 24px);
 background-size:100% 2px,100% 2px,2px 100%,2px 100%;
 background-position:0 0,0 100%,0 0,100% 0;
 background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
 animation:qk-ants .6s linear infinite;
}
.project-card .project-poster{transition:transform .18s ease-out,box-shadow .18s ease-out}
.project-card:hover .project-poster,.project-card:focus-within .project-poster{
 transform:translateY(-3px);box-shadow:0 14px 30px var(--studio-scrim);
}
/* Quick actions, revealed on the art instead of buried in a kebab. */
.poster-actions{
 position:absolute;inset-block-end:8px;inset-inline-start:8px;display:flex;gap:var(--space-2);
 opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;
}
.project-card:hover .poster-actions,.project-card:focus-within .poster-actions{opacity:1;transform:none}
.poster-actions button{width:30px;height:30px;padding:0}



/* A job in flight belongs on its own card, not in a list underneath. */
.poster-busy{
 position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
 background:var(--studio-scrim);color:var(--studio-fg);font-size:12px;
}
.poster-ring{
 width:42px;height:42px;border-radius:50%;
 background:conic-gradient(var(--lime-500) calc(var(--p,0)*1%),var(--studio-fill-hover) 0);
 display:grid;place-items:center;
}
.poster-ring::after{content:'';width:32px;height:32px;border-radius:50%;background:var(--studio-scrim-strong)}
.poster-elapsed{font-variant-numeric:tabular-nums;direction:ltr}
@media(prefers-reduced-motion:reduce){
 body.page-dragging .drop-hero::before{animation:none}
 .poster-ring[data-indeterminate]{animation:none}
 .project-card:hover .project-poster,.project-card:focus-within .project-poster{transform:none}
 .poster-actions{transition:none}
}
.project-card strong bdi{unicode-bidi:isolate}
.project-card .project-meta,.project-card small{text-align:start}

/* --- Project cards join the template-card family -------------------------
   Same lift and the same @property border beam ui.css gives the studio's template
   cards, so a card behaves identically wherever a creator meets one. The beam is the
   layer's own mechanism (--qk-angle + conic-gradient + a mask), not a second effect. */
.project-card .project-poster::after{
 content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:conic-gradient(from var(--qk-angle),transparent 0deg 300deg,var(--studio-accent,#C8E87A) 340deg,transparent 360deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 opacity:0;transition:opacity var(--studio-dur-state,160ms) var(--studio-ease-out,ease);
 z-index:3;
}
.project-card:hover .project-poster::after,
.project-card:focus-within .project-poster::after{opacity:1;animation:qk-orbit 2.4s linear infinite}

/* The busy ring is the CTA's loading state in round form: one shared --qk-angle sweep
   rather than a second spinner with its own rhythm. */
.poster-ring[data-indeterminate]{
 background:conic-gradient(from var(--qk-angle),transparent 0deg 250deg,var(--studio-accent,#C8E87A) 310deg,transparent 360deg);
 animation:qk-orbit 1.1s linear infinite;
}

/* The completion seal, centred on the frame it belongs to. */
.poster-seal{position:absolute;inset:0;width:auto;height:auto;place-items:center;z-index:4;background:var(--studio-scrim)}
.poster-seal svg{width:56px;height:56px}
#upload-seal{margin-inline:auto}


@media(prefers-reduced-motion:reduce){
 .project-card:hover .project-poster::after,
 .project-card:focus-within .project-poster::after,
 .poster-ring[data-indeterminate]{animation:none}
}
/* D2-16: the header CTA is one line at 390px — the pill shrinks, the label never wraps. */
@media(max-width:560px){.search-header .qk-cta{white-space:nowrap;padding-inline:var(--space-4);flex:none}}
/* P9-06: the header already fills a phone; there the install prompt lives behind the sidebar "App" link (download.html). */
@media (max-width: 560px) { .app-header [data-install-app] { display: none; } }
/* L3-4: measured 419 px of header in a 390 px phone. Wafa also sits in the sidebar (shell.js), so on phones it lives
   there only; menu, theme, language and New project stay in the header. */
@media (max-width: 560px) { .search-header a[href$="/wafa.html"] { display: none; } }

.unfinished-uploads{display:grid;gap:8px;margin-top:var(--space-5)}   /* D6-14 */
.unfinished-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);font-size:13px}
.unfinished-row strong{min-width:0;overflow-wrap:anywhere}
.unfinished-row .hint{margin-inline-end:auto}
.unfinished-row .qk-btn{min-height:44px}
.bulk-bar .qk-btn,.bulk-bar select{min-height:44px}   /* D6-16 */
/* D7-07: the title search stays reachable on a phone; shell.css hides it at <=800 px, so the header wraps and search takes its own full row (16 px so iOS does not zoom on focus). */
@media(max-width:800px){.search-header{flex-wrap:wrap;row-gap:var(--space-3);height:auto;min-height:62px;padding-block:var(--space-2)}.search-header input[type=search]{display:block;order:1;flex:1 1 100%;max-width:none;min-height:44px;font-size:16px}}
/* D8-15: 44 px targets on the workspace at every width. The 18 px checkbox sits centred in a 44 px label (the label takes over the
   old corner position; the box inside is static), and the phone menu toggle is 44 px wide like every other header control. */
.project-pick-hit{position:absolute;top:0;inset-inline-start:0;z-index:2;display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
.project-pick-hit .project-pick{position:static}
@media(max-width:800px){#menu-toggle{min-width:44px;min-height:44px;justify-content:center}.search-header .qk-btn,.search-header .qk-cta{min-height:44px}.poster-actions .qk-iconbtn{min-width:44px;min-height:44px}}


/* Polish loop round 2: the home header in C's shape language.
   The search was a 24 px box with a 64 % ivory border -- the only square, hard-edged thing on a
   screen of pills -- and the install pill floated mid-header because it and the language pill
   both claimed margin-inline-start:auto. Search becomes a var(--space-7) px pill on the input hairline with
   its magnifier drawn from the sprite path; the install pill sits beside the language pill. */
.search-header #search.qk-field{height:40px;min-width:min(320px,100%);padding-inline:var(--space-7) var(--space-4);border-radius:var(--studio-radius-pill,999px);border-color:rgba(245,241,231,.4);background:var(--studio-panel) no-repeat right 14px center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F1E7' stroke-opacity='.64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");font-size:var(--studio-text-value,13px)}
.search-header #search.qk-field:dir(ltr){background-position:left 14px center}
.search-header #search.qk-field:hover{background-color:var(--studio-raise)}
.search-header #search.qk-field:focus{border-color:var(--studio-accent);background-color:var(--studio-panel)}
.search-header [data-install-app]:not([hidden])~[data-language-toggle]{margin-inline-start:0}
.search-header .language-toggle{min-height:40px;padding-inline:16px;border-radius:var(--studio-radius-pill,999px)}
/* Polish R6 (Karan: "no duplicate controls"): on home the lime field IS New project, so the
   header's copy of the same trigger steps out while the field is on the page. */
body:has(.drop-hero) .search-header .qk-cta[data-upload-trigger]{display:none}

/* ============================================================================
   Direction B "الرف" (The Shelf), signed-in home build, 13 Oct 2026 (Karan: "do what you recommend";
   research/design-directions/workspace/README.md). Projects are phone-shaped 9:16 cards on one shelf and the
   upload is the first card: same size, same corners, the one lime thing on the screen. #project-grid is
   display:contents so its cards (and its empty / no-match card) are shelf items beside the upload card.
   Every function of the old field (dialect, other languages, multi-upload, resume, bulk bar, schedule, jobs,
   consent) keeps its id and its script; only the layout and skin change.
   ========================================================================== */
.page-main:has(.home-stage){max-width:none;padding:var(--space-6) var(--space-6) var(--space-7)}
.home-stage{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.home-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-4)}
.home-head h1{margin:0;font:var(--studio-display-weight,400) 40px/1.3 var(--studio-display-font)}
.home-head #project-total{font-size:13px;color:var(--studio-fg-3)}
.home-head .home-limits{flex:1 1 100%;margin:0;font-size:12px}
.home-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-5) var(--space-4);align-items:start}
#project-grid{display:contents}
.home-shelf .project-card .project-poster{aspect-ratio:9/16;border-radius:var(--studio-radius-tile,18px);background:var(--studio-raise);border:0}
.home-shelf .project-card .project-poster .poster-fallback{color:var(--studio-fg-3)}
.home-shelf .project-card strong{font-weight:700;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* The upload card: lime, 9:16 like every project. It carries its own ink, so the drag ants, the focus ring and
   the select turn forest-deep. The label fills the card (a click anywhere opens the file picker); the dialect
   select is its own control at the foot, outside the label. */
.up-card{
 --color-action:var(--studio-accent-ink);
 position:relative;isolation:isolate;display:flex;flex-direction:column;aspect-ratio:9/16;min-width:0;
 border-radius:var(--studio-radius-tile,18px);background:var(--studio-accent);color:var(--studio-accent-ink);overflow:hidden;
 transition:transform var(--studio-dur-press,90ms) var(--studio-ease-out,ease);
}
.up-card:hover,.up-card:has(.drop-hero[data-dragging]),body.page-dragging .up-card{background:var(--lime-400)}
.up-card:active{transform:scale(.99)}
.up-card:has(.drop-hero:focus-visible){outline:3px solid var(--studio-fg);outline-offset:4px}
.drop-hero:focus-visible{outline:0}
.drop-hero{
 flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-height:0;
 padding:var(--space-4) var(--space-4) var(--space-3);cursor:pointer;color:inherit;text-align:start;position:relative;
}
.drop-hero .drop-chip{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--studio-accent-ink);color:var(--studio-accent);flex:none}
.drop-hero .drop-giant{margin-top:auto;font:var(--studio-display-weight,400) 88px/1.1 var(--studio-display-font);letter-spacing:0;white-space:nowrap;pointer-events:none}
:lang(en) .drop-hero .drop-giant{font-size:56px}
.drop-hero b{font:700 14px/1.5 var(--studio-font)}
.dialect-pill{position:relative;display:flex;align-items:center;gap:var(--space-1);margin:0 var(--space-4) var(--space-4);min-height:44px;padding-inline:var(--space-4) var(--space-3);border-radius:var(--studio-radius-pill,999px);box-shadow:inset 0 0 0 2px var(--studio-accent-ink);font:700 13px/1 var(--studio-font);color:var(--studio-accent-ink);cursor:pointer}
.dialect-pill>span::after{content:':'}
.dialect-pill:hover{background:rgba(11,31,25,.08)}
.dialect-pill:has(select:focus-visible){outline:3px solid var(--studio-accent-ink);outline-offset:2px}
.dialect-pill select{flex:1;min-width:0;appearance:none;border:0;background:none;color:inherit;font:inherit;padding:0;min-height:44px;cursor:pointer;outline:0}
.dialect-pill select option{background:var(--studio-bg);color:var(--studio-fg)}
.dialect-pill .qk-icon{flex:none;pointer-events:none}
body.page-dragging .drop-hero::before{border-radius:var(--studio-radius-tile,18px)}
.up-card #upload-seal{position:absolute;inset:0;margin:auto;z-index:2}

/* No projects yet (or none by that name): a dashed card of the same shape beside the upload card. */
.home-shelf #project-grid .empty-projects{
 grid-column:auto;aspect-ratio:9/16;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);
 padding:var(--space-4);border:1.5px dashed var(--studio-line-input);border-radius:var(--studio-radius-tile,18px);text-align:center;
}
.home-shelf #project-grid .empty-projects .state-illo{max-width:100%}
/* The training ask: one quiet line above the shelf, never a second lime. */
.home-stage .bulk-bar{margin:0;border-radius:var(--studio-radius-tile,18px);background:var(--studio-panel)}
.home-stage .job-row{border-radius:var(--studio-radius-block,12px);background:var(--studio-panel);border-color:transparent}
.home-stage .unfinished-uploads{margin-top:0}
.home-stage .unfinished-row{border-radius:var(--studio-radius-block,12px);background:var(--studio-panel)}
.home-stage .job-strip{margin-top:0}
.home-stage .recent-heading{margin:0 0 var(--space-3)}
#first-run{margin:0}
/* The minutes pill: on a phone the sidebar meter is behind the menu, so the header carries the figure. */
.search-header .minutes-pill{display:none}
@media(max-width:800px){.search-header .minutes-pill:not([hidden]){display:inline-flex;margin-inline-start:auto}.search-header .minutes-pill~[data-language-toggle]{margin-inline-start:0}}
@media(max-width:560px){
 .page-main:has(.home-stage){padding:var(--space-4) var(--space-4) var(--space-6)}
 .home-stage{gap:var(--space-4)}
 .home-head h1{font-size:32px}
 .home-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-3)}
 .drop-hero{padding:var(--space-3) var(--space-3) var(--space-2)}
 .drop-hero .drop-chip{width:44px;height:44px}
 .drop-hero .drop-giant{font-size:64px}
 :lang(en) .drop-hero .drop-giant{font-size:44px}
 .drop-hero b{font-size:12px}
 .dialect-pill{margin:0 var(--space-3) var(--space-3);padding-inline:var(--space-3) var(--space-2);font-size:12px}
}
@media(prefers-reduced-motion:reduce){.up-card{transition:none}.up-card:active{transform:none}}