/* Clastie Studio — scoped to the home editor. */
.publicHome { --studio-panel:#101a27; --studio-border:#263343; }
.publicHome :focus-visible { outline:2px solid #ff9a50; outline-offset:4px; }
.publicHome .editor[hidden],.publicHome [hidden].studioEditText { display:none; }
.publicHome .editor { padding:40px 0 80px; scroll-margin-top:18px; }
.editor .editorHead { align-items:center; padding:10px 0 28px; }
.editor .editorEyebrow { font-size:10px; letter-spacing:.2em; }
.editor .editorHead h2 { font:600 clamp(26px,3.4vw,44px)/1.15 'Space Grotesk',sans-serif; letter-spacing:-.05em; margin:12px 0 10px; }
.editor .editorHead p { font-size:14px; color:#a5b0bf; }
.editor .ghostBtn { display:flex; align-items:center; gap:16px; min-height:44px; border-color:var(--studio-border); background:#101925; white-space:nowrap; }
.editor .ghostBtn span { font-size:22px; color:#b2bfce; }
.editor .editorGrid { grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr); gap:24px; align-items:start; }
.editor .stageCard { position:sticky; top:20px; z-index:2; padding:0; border:1px solid var(--studio-border); background:#0d1622; border-radius:22px; overflow:hidden; box-shadow:0 24px 60px #0003; }
.studioPreviewHead { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; font-size:10px; letter-spacing:.1em; color:#a4afbd; }
.studioPreviewHead>span:first-child { display:flex; align-items:center; gap:7px; }
.studioPreviewHead i { width:6px; height:6px; border-radius:50%; background:#98d5b0; box-shadow:0 0 12px #98d5b033; }
#studioResolution { letter-spacing:0; font-variant-numeric:tabular-nums; }
.studioCanvasWell { display:flex; justify-content:center; align-items:center; padding:18px; min-width:0; background-color:#080e16; background-image:radial-gradient(#273341 1px,transparent 1px); background-size:16px 16px; }
.editor .videoStage { flex:none; width:min(100%,340px); height:auto; min-height:0; max-height:none; border-radius:8px; aspect-ratio:9/16; touch-action:pan-y; box-shadow:0 12px 40px #0007; }
.editor .videoStage video { display:block; min-height:0; width:100%; height:100%; object-fit:contain; }
.studioTransport { display:flex; align-items:center; gap:12px; padding:14px 20px 4px; }
.studioTransport button { display:grid; place-items:center; width:42px; height:42px; border:1px solid #354052; border-radius:50%; background:#1a2635; color:#fff; cursor:pointer; }
.studioTransport button:disabled { opacity:.4; cursor:wait; }
#studioTime { font-size:12px; font-variant-numeric:tabular-nums; }
#studioTime em { color:#77889e; font-style:normal; }
.studioFormat { margin-left:auto; font-size:9px; letter-spacing:.12em; color:#aab7c7; padding:5px 8px; border:1px solid var(--studio-border); border-radius:5px; }
.editor .stageHint { padding:12px 20px 18px; font-size:11px; color:#8798ad; text-align:left; }
.studioEditText { margin:0 20px 16px; border:1px solid #755035; padding:10px 14px; border-radius:9px; background:#2a211c; color:#ffb583; cursor:pointer; }
.editor .editorTools { background:var(--studio-panel); border:1px solid var(--studio-border); border-radius:22px; padding:20px; min-width:0; }
.editor .editorTabsNav { display:block; position:static; padding:0 0 20px; margin:0 0 4px; background:transparent; border-bottom:1px solid var(--studio-border); }
.editor .editorTabsNav>button { display:none; }
.editor .editorTabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); position:static; gap:4px; padding:0; overflow:visible; background:transparent; }
.editor .editorTabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:66px; padding:9px 2px; border:1px solid transparent; border-radius:12px; font:500 11px 'Space Grotesk',sans-serif; color:#a7b3c3; background:transparent; box-shadow:none; }
.editorTabs svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.editor .editorTabs button:hover { background:#1b2838; color:#fff; }
.editor .editorTabs button.active { color:#ffac70; background:#ff7c1517; border-color:#ff8c323d; }
.editor .editorPanel { padding:20px 0 4px; border:0; }
.editor .toolTitle { font-size:16px; font-weight:600; gap:9px; margin-bottom:18px; }
.editor .toolTitle b { color:#ff9850; font-size:10px; background:#ff8b1612; border:1px solid #ff8b1626; border-radius:6px; padding:5px 7px; }
.editor .easyCut { padding:16px; background:#142131; border-color:#2b3d52; border-radius:14px; }
.editor .easyCutTitle { align-items:start; flex-direction:column; gap:5px; }
.editor .easyCutTitle span { color:#9bacc0; font-size:11px; }
.editor button { transition:background-color .15s,border-color .15s; -webkit-tap-highlight-color:transparent; }
.editor .smallBtn,.editor .motionPointBtn,.editor .seekButtons button,.editor .markButtons button,.editor .historyActions button { min-height:44px; font:500 12px 'Space Grotesk',sans-serif; border-color:#304054; background:#101b29; color:#d6deea; border-radius:9px; }
.editor .seekButtons { grid-template-columns:1fr 1fr 1.4fr 1fr 1fr; gap:5px; }
.editor .seekButtons button:nth-child(n) { grid-row:auto; grid-column:auto; }
.editor .seekButtons .playCut { background:#ff8734; color:#211307; border-color:#ff8734; font-weight:700; }
.editor .markButtons { grid-template-columns:1fr 1fr; }
.editor .markButtons button { font-size:11px; color:#ffd0ad; background:#211f20; border-color:#564034; }
.editor .timelineEditor { border:0; margin-top:20px; }
.editor .timelineTop { flex-direction:row; flex-wrap:wrap; }
.editor .historyActions { width:auto; }
.editor .historyActions button { min-height:38px; }
.editor .zoomControl { width:auto; flex:1; max-width:190px; font-size:11px; }
.editor .zoomControl input { width:100%; min-width:40px; }
.editor .timelineRuler { padding:0 39px 8px; font-size:10px; }
.editor .timelineRuler b { color:#ffb47d; }
.editor .timelineTrack { background:#0a1320; border-color:#293d54; }
.editor .timelineClip.active { background:linear-gradient(135deg,#684326,#38291f); border-color:#f9a25e; box-shadow:none; }
.editor .timelineClip span { font-size:10px; }
.editor .timelineActions { gap:6px; }
.editor .timelineActions .smallBtn { flex:1 1 auto; font-size:11px; }
.editor .dangerBtn { color:#ffa2a9; }
.editor .microHelp { color:#94a4b8; font-size:11px; line-height:1.65; }
.editor .advancedCut { border-color:var(--studio-border); background:#0c1623; }
.editor .advancedCut summary { padding:14px; color:#bec9d7; font:500 12px 'Space Grotesk',sans-serif; }
.editor .field,.editor .miniSelect,.editor input[type=number] { min-height:44px; font-size:16px; background:#0a1421; border:1px solid #2c3b4d; color:#eef3fa; border-radius:10px; }
.editor textarea.field { min-height:88px; line-height:1.5; resize:vertical; }
.editor .addLayerBtn { background:#ff8734; color:#241509; border:0; padding:15px; font-size:13px; min-height:48px; }
.editor .objectControls { margin-top:18px; }
.editor .disabledPanel { opacity:.4; }
.editor .fontRow label,.editor .threeInputs label,.editor .twoInputs label,.editor .sliderLabel,.editor .effectLabel { color:#abb8ca; font-size:12px; }
.editor .fontRow { margin-top:14px; }
.editor .effectPanel { background:#0c1623; border-color:#26384c; border-radius:14px; padding:14px; }
.editor .effectGrid label { color:#aab8cb; font-size:11px; }
.editor input[type=range] { min-height:28px; accent-color:#ff943f; }
.editor .uploadBox { min-height:96px; border:1px dashed #526079; background:#152232; border-radius:14px; color:#d2deec; font-size:13px; }
.editor .presetChoice { background:#0b1521; border-color:#2b3a4e; }
.editor .presetChoice em { font-size:11px; }
.editor .layerRow { min-height:52px; background:#0c1623; border-color:#2b3b50; }
.editor .layerRow em { font-size:12px; }
.editor .layerRow.active { border-color:#d28247; background:#28221e; }
.editor .emptyLayers { color:#a4b3c5; padding:28px 16px; font-size:13px; text-align:center; border:1px dashed #304057; border-radius:12px; }
.editor .motionSteps>div { background:#0c1623; border-color:#2b3b50; }
.editor .motionSteps span { font-size:12px; color:#a6b5c8; }
.editor .persistentExport { position:static; margin:22px -20px -20px; padding:18px 20px 20px; background:#0b1521; border-color:#29394d; border-radius:0 0 22px 22px; box-shadow:none; }
.editor .persistentExportHead { margin-bottom:10px; }
.editor .persistentExportHead span { color:#9ba9bc; font-size:10px; }
.editor .persistentExportHead small { color:#9ba9bc; font-size:10px; }
.editor .exportBtn { min-height:52px; margin:0; border-radius:12px; background:#ff8734; color:#271507; font:700 14px 'Space Grotesk',sans-serif; box-shadow:0 5px 20px #ff7b151a; }
.editor .exportBtn:hover:not(:disabled),.editor .addLayerBtn:hover { background:#ffa363; }
.editor .exportStatus { color:#aab8ca; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.editor .resizeHandle { width:24px; height:24px; right:-12px; bottom:-12px; }
.editor .editorObject { touch-action:none; }
.publicHome .result { padding:22px; border-radius:18px; }
.publicHome .result h3 { font-size:18px; margin-bottom:16px; }
.publicHome .result .downloadBtn,.publicHome .result .editOpen { min-height:48px; padding:14px 18px; border-radius:10px; font-size:13px; }
.publicHome .result .downloadBtn { background:#172536; color:#e6edf7; border:1px solid #35465c; }
.publicHome .result .editOpen { background:#ff8734; color:#251408; border:0; margin-top:0; }
@media(max-width:900px) {
  .publicHome .nav { height:auto; min-height:76px; flex-wrap:wrap; gap:12px; padding:12px 0; }
  .publicHome .mainNav { display:flex; order:3; width:100%; gap:4px; justify-content:center; border-top:1px solid #223044; padding-top:8px; }
  .publicHome .mainNav a { flex:1; text-align:center; font-size:12px; padding:10px 6px; }
  .publicHome .mainNav a.active:after { bottom:0; }
  .editor .editorGrid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .editor .stageCard { position:relative; top:auto; }
  .editor .editorTools { padding:18px; }
  .editor .persistentExport { margin:18px -18px -18px; padding:18px; }
  .studioCanvasWell { padding:14px; }
}
@media(max-width:520px) {
  .publicHome .editor { width:calc(100% - 24px); padding:28px 0 48px; }
  .editor .editorHead { flex-direction:row; align-items:flex-start; gap:12px; padding:0 0 20px; }
  .editor .editorHead h2 { font-size:27px; max-width:260px; }
  .editor .editorHead p { font-size:12px; line-height:1.5; max-width:240px; }
  .editor .ghostBtn { padding:8px 10px; font-size:11px; gap:8px; }
  .editor .stageCard,.editor .editorTools { border-radius:17px; }
  .studioPreviewHead { padding:13px 14px; font-size:9px; }
  .studioTransport { padding:10px 14px 0; }
  .editor .stageHint { font-size:10px; padding:10px 14px 12px; }
  .studioEditText { margin:0 14px 12px; min-height:44px; }
  .editor .editorTools { padding:12px; }
  .editor .editorTabsNav { padding-bottom:12px; }
  .editor .editorTabs { gap:2px; }
  .editor .editorTabs button { font-size:10px; min-height:62px; border-radius:9px; }
  .editor .editorPanel { padding-top:16px; }
  .editor .toolTitle { font-size:15px; }
  .editor .easyCut { padding:12px; }
  .editor .seekButtons button { font-size:10px; }
  .editor .markButtons button { font-size:10px; padding:8px 4px; }
  .editor .timelineTop { gap:10px; }
  .editor .zoomControl { max-width:none; flex-basis:100%; }
  .editor .twoInputs { grid-template-columns:1fr 1fr; }
  .editor .threeInputs { grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr); }
  .editor .persistentExport { margin:18px -12px -12px; padding:16px 12px max(16px,env(safe-area-inset-bottom)); border-radius:0 0 17px 17px; }
  .editor .persistentExportHead small { display:none; }
  .publicHome .result .downloadBtn,.publicHome .result .editOpen { display:flex; width:100%; justify-content:center; margin:8px 0 0; }
  .publicHome .navActions { gap:5px; }
  .publicHome .navActions>a { padding:9px 8px; font-size:10px; }
  .publicHome .hero h1 { font-size:clamp(40px,12vw,62px); line-height:1; }
  .publicHome .inputwrap input { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .publicHome *, .publicHome *:before,.publicHome *:after { animation:none!important; scroll-behavior:auto!important; transition:none!important; } }