openvibers/openvibe.tools Commits

Move hand-set motion timings onto shared motion tokens (#177)

OP OpenVibers committed 12 days ago · f2ddee1355 · 21 files, +119 −119

Changes

ddiff --git a/apps/audio/public/css/style.css b/apps/audio/public/css/style.css
iindex 4814edd..8f6db35 100644
---- a/apps/audio/public/css/style.css
++++ b/apps/audio/public/css/style.css
@@@ -210,7 +210,7 @@ a:hover { color: var(--accent-hover); }
      padding: 28px 24px;
      margin-bottom: 24px;
  }
--.option-group { animation: fadeIn .25s ease; }
++.option-group { animation: fadeIn var(--ov-dur-2, .25s) var(--ov-ease-out, ease); }
  .option-label {
      display: block;
      font-size: .9rem;
@@@ -361,7 +361,7 @@ a:hover { color: var(--accent-hover); }
      height: 48px;
      border: 4px solid var(--accent); --spin-c: var(--accent);
      border-radius: 50%;
--    animation: spin 1.4s ease-out infinite;
++    animation: spin 1.4s var(--ov-ease-out, ease-out) infinite;
      margin: 0 auto 16px;
  }
  @keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
@@@ -375,7 +375,7 @@ a:hover { color: var(--accent-hover); }
      padding: 32px 24px;
      text-align: center;
      margin-bottom: 24px;
--    animation: fadeIn .35s ease;
++    animation: fadeIn var(--ov-dur-3, .35s) var(--ov-ease-out, ease);
  }
  .result-panel h2 {
      color: var(--success-text, var(--success));
@@@ -550,7 +550,7 @@ a:hover { color: var(--accent-hover); }
      font-size: .9rem;
      box-shadow: var(--shadow);
      z-index: 9999;
--    animation: slideUp .3s ease;
++    animation: slideUp var(--ov-dur-3, .3s) var(--ov-ease-out, ease);
  }
  .toast.error { border-color: var(--error); }
  .toast.success { border-color: var(--success); }
ddiff --git a/apps/docs/public/css/style.css b/apps/docs/public/css/style.css
iindex b989530..9c85d88 100644
---- a/apps/docs/public/css/style.css
++++ b/apps/docs/public/css/style.css
@@@ -86,7 +86,7 @@ body {
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
--    transition: all .15s;
++    transition: all var(--ov-dur-2, .15s);
      display: flex;
      align-items: center;
      gap: 6px;
@@@ -111,7 +111,7 @@ body {
      padding: 48px 24px;
      text-align: center;
      cursor: pointer;
--    transition: all .2s;
++    transition: all var(--ov-dur-2, .2s);
      background: var(--bg-secondary);
  }
  .upload-area:hover, .upload-area.dragover {
@@@ -253,7 +253,7 @@ body {
      color: var(--text-primary);
      font-family: inherit;
      font-size: 14px;
--    transition: border-color .15s;
++    transition: border-color var(--ov-dur-2, .15s);
  }
  .select-input:focus, .text-input:focus, .num-input:focus {
      outline: none;
@@@ -290,7 +290,7 @@ body {
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
--    transition: all .15s;
++    transition: all var(--ov-dur-2, .15s);
      text-decoration: none;
  }
  .btn-primary {
@@@ -339,7 +339,7 @@ body {
      height: 48px;
      border: 4px solid var(--accent); --spin-c: var(--accent);
      border-radius: 50%;
--    animation: spin 1.4s ease-out infinite;
++    animation: spin 1.4s var(--ov-ease-out, ease-out) infinite;
      margin: 0 auto 16px;
  }
  @keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
@@@ -397,7 +397,7 @@ body {
      border-radius: var(--radius-md);
      text-decoration: none;
      color: var(--text-primary);
--    transition: all .15s;
++    transition: all var(--ov-dur-2, .15s);
  }
  .subdomain-card:hover {
      background: var(--bg-hover);
ddiff --git a/apps/food/public/css/style.css b/apps/food/public/css/style.css
iindex bec9ddf..8957abd 100644
---- a/apps/food/public/css/style.css
++++ b/apps/food/public/css/style.css
@@@ -47,7 +47,7 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
  .header-btn {
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:none; border:1px solid transparent; border-radius:8px;
--  color:var(--text-muted); font-size:14px; cursor:pointer; transition:0.2s; text-decoration:none;
++  color:var(--text-muted); font-size:14px; cursor:pointer; transition:var(--ov-dur-2, 0.2s); text-decoration:none;
  }
  .header-btn:hover { color:var(--green); background:var(--green-dim); border-color:var(--green-glow); }
  
@@@ -58,7 +58,7 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
  .loc-search {
    display:flex; align-items:center; gap:8px; max-width:700px; margin:0 auto;
    background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); padding:6px 12px;
--  transition:border-color 0.2s;
++  transition:border-color var(--ov-dur-2, 0.2s);
  }
  .loc-search:focus-within { border-color:var(--green); }
  .loc-search i { color:var(--text-muted); font-size:14px; }
@@@ -69,7 +69,7 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
  .btn-primary {
    display:flex; align-items:center; gap:6px; background:var(--green); color:#000;
    border:none; padding:6px 14px; border-radius:8px; font-family:var(--font);
--  font-weight:600; font-size:12px; cursor:pointer; white-space:nowrap; transition:0.2s;
++  font-weight:600; font-size:12px; cursor:pointer; white-space:nowrap; transition:var(--ov-dur-2, 0.2s);
  }
  .btn-primary:hover { filter:brightness(1.1); }
  .btn-primary.loading { opacity:0.6; pointer-events:none; }
@@@ -82,7 +82,7 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
  .tab {
    padding:8px 16px; border-radius:8px 8px 0 0; font-size:12px; font-weight:500;
    background:var(--bg-card); border:1px solid var(--border); border-bottom:none;
--  color:var(--text-muted); cursor:pointer; font-family:var(--font); transition:0.2s;
++  color:var(--text-muted); cursor:pointer; font-family:var(--font); transition:var(--ov-dur-2, 0.2s);
    white-space:nowrap; display:flex; align-items:center; gap:6px;
  }
  .tab:hover { color:var(--text); border-color:var(--border-light); }
@@@ -100,7 +100,7 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
  .card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap:12px; }
  .card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
--  padding:16px; transition:0.15s;
++  padding:16px; transition:var(--ov-dur-2, 0.15s);
  }
  .card:hover { border-color:var(--green-glow); transform:translateY(-1px); box-shadow:var(--shadow); }
  .card-title { font-size:14px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
@@@ -112,7 +112,7 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
  .card-btn {
    font-size:11px; padding:4px 10px; border-radius:6px; background:var(--bg-input);
    border:1px solid var(--border); color:var(--text); cursor:pointer;
--  font-family:var(--font); text-decoration:none; display:inline-flex; align-items:center; gap:4px; transition:0.2s;
++  font-family:var(--font); text-decoration:none; display:inline-flex; align-items:center; gap:4px; transition:var(--ov-dur-2, 0.2s);
  }
  .card-btn:hover { border-color:var(--green); color:var(--green); }
  
@@@ -171,7 +171,7 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
  .chip {
    padding:4px 10px; border-radius:20px; font-size:11px; background:var(--bg-card);
    border:1px solid var(--border); color:var(--text-muted); cursor:pointer;
--  font-family:var(--font); transition:0.2s; display:flex; align-items:center; gap:4px;
++  font-family:var(--font); transition:var(--ov-dur-2, 0.2s); display:flex; align-items:center; gap:4px;
  }
  .chip:hover { border-color:var(--green); color:var(--text); }
  .chip.active { background:var(--green-dim); border-color:var(--green); color:var(--green); font-weight:600; }
@@@ -209,7 +209,7 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
  .leaflet-popup-content { font-family:var(--font) !important; font-size:12px !important; }
  
  /* Spinner */
--.spinner { width:24px; height:24px; border: 3px solid var(--green); --spin-c: var(--green); border-radius:50%; animation: spin 1.4s ease-out infinite; margin:0 auto; }
++.spinner { width:24px; height:24px; border: 3px solid var(--green); --spin-c: var(--green); border-radius:50%; animation: spin 1.4s var(--ov-ease-out, ease-out) infinite; margin:0 auto; }
  .loading-state { text-align:center; padding:32px; }
  .loading-state p { font-size:12px; color:var(--text-muted); margin-top:8px; }
  @keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
ddiff --git a/apps/gateway/public/audio.html b/apps/gateway/public/audio.html
iindex 57b6349..1c20ed6 100644
---- a/apps/gateway/public/audio.html
++++ b/apps/gateway/public/audio.html
@@@ -64,7 +64,7 @@
          #showcase-section.visible { display: block; }
          
          .showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin: 40px 0; max-width: 800px; margin-left: auto; margin-right: auto; }
--        .showcase-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-light); cursor: pointer; transition: all 0.3s ease; gap: 10px; animation: float ease-in-out infinite; }
++        .showcase-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-light); cursor: pointer; transition: all var(--ov-dur-3, 0.3s) var(--ov-ease-out, ease); gap: 10px; animation: float var(--ov-ease-in-out, ease-in-out) infinite; }
          .showcase-tool:nth-child(1) { animation-delay: 0s; animation-duration: 3s; }
          .showcase-tool:nth-child(2) { animation-delay: 0.15s; animation-duration: 3.3s; }
          .showcase-tool:nth-child(3) { animation-delay: 0.3s; animation-duration: 3.6s; }
@@@ -78,7 +78,7 @@
          .showcase-tool-label { font-size: 0.8rem; font-weight: 700; text-align: center; color: var(--text-secondary); }
          
          .quick-examples { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 32px 0; max-width: 800px; margin-left: auto; margin-right: auto; }
--        .example-btn { padding: 12px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); text-align: center; text-decoration: none; color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; transition: all 0.25s ease; animation: fadeInScale 0.5s ease both; cursor: pointer; }
++        .example-btn { padding: 12px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); text-align: center; text-decoration: none; color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; transition: all var(--ov-dur-2, 0.25s) var(--ov-ease-out, ease); animation: fadeInScale var(--ov-dur-4, 0.5s) var(--ov-ease-out, ease) both; cursor: pointer; }
          .example-btn:nth-child(1) { animation-delay: 0.1s; }
          .example-btn:nth-child(2) { animation-delay: 0.2s; }
          .example-btn:nth-child(3) { animation-delay: 0.3s; }
@@@ -86,7 +86,7 @@
          .example-btn:hover { border-color: rgba(139,92,246,0.4); color: var(--accent-light); background: rgba(139,92,246,0.08); }
          
          .stats-section { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
--        .stat-card { padding: 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); text-align: center; animation: fadeInScale 0.6s ease both; }
++        .stat-card { padding: 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); text-align: center; animation: fadeInScale var(--ov-dur-4, 0.6s) var(--ov-ease-out, ease) both; }
          .stat-card:nth-child(1) { animation-delay: 0.2s; }
          .stat-card:nth-child(2) { animation-delay: 0.3s; }
          .stat-card:nth-child(3) { animation-delay: 0.4s; }
@@@ -95,7 +95,7 @@
          .stat-card-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
          
          .search-wrapper { max-width: 600px; margin: 0 auto 32px; }
--        .search-wrapper input { width: 100%; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 0.95rem; outline: none; transition: all 0.25s ease; }
++        .search-wrapper input { width: 100%; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 0.95rem; outline: none; transition: all var(--ov-dur-2, 0.25s) var(--ov-ease-out, ease); }
          .search-wrapper input:focus { border-color: rgba(139,92,246,0.4); background: var(--bg-hover); }
          
          .note { text-align: center; padding: 40px 20px 0; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border); margin-top: 60px; }
ddiff --git a/apps/gateway/public/codes.html b/apps/gateway/public/codes.html
iindex e607036..27b305b 100644
---- a/apps/gateway/public/codes.html
++++ b/apps/gateway/public/codes.html
@@@ -53,7 +53,7 @@ button,input,select,textarea{font:inherit;color:inherit}
  .cx-fam .mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--c-acs);color:var(--c-onac);font-size:16px}
  .cx-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:3px;border-radius:12px;background:var(--c-panel);border:1px solid var(--c-brd);min-width:0;margin-left:auto}
  .cx-tabs::-webkit-scrollbar{display:none}
--.cx-tabs a{display:inline-flex;align-items:center;gap:6px;flex:none;padding:7px 12px;border-radius:9px;color:var(--c-tx2);text-decoration:none;font-size:.86rem;font-weight:620;white-space:nowrap;transition:background .15s,color .15s}
++.cx-tabs a{display:inline-flex;align-items:center;gap:6px;flex:none;padding:7px 12px;border-radius:9px;color:var(--c-tx2);text-decoration:none;font-size:.86rem;font-weight:620;white-space:nowrap;transition:background var(--ov-dur-2, .15s),color var(--ov-dur-2, .15s)}
  .cx-tabs a:hover{color:var(--c-tx);background:var(--c-hover)}
  .cx-tabs a[aria-current="page"]{background:var(--c-acs);color:var(--c-onac)}
  .cx-tabs a:focus-visible,.seg button:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--c-ac);outline-offset:2px}
@@@ -68,7 +68,7 @@ button,input,select,textarea{font:inherit;color:inherit}
  .panel>h2,.panel>summary{margin:0 0 12px;font-size:.78rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--c-tx3)}
  details.panel>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;margin:0}
  details.panel>summary::-webkit-details-marker{display:none}
--details.panel>summary::after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s;margin-right:4px}
++details.panel>summary::after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--ov-dur-2, .15s);margin-right:4px}
  details.panel[open]>summary{margin-bottom:12px}
  details.panel[open]>summary::after{transform:rotate(-135deg)}
  .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
@@@ -77,7 +77,7 @@ details.panel[open]>summary::after{transform:rotate(-135deg)}
  .field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;min-width:0}
  .field>span,.lbl{font-size:.8rem;font-weight:650;color:var(--c-tx2)}
  .field small{color:var(--c-tx3);font-size:.76rem}
--input[type=text],input[type=url],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=datetime-local],input[type=search],select,textarea{width:100%;min-width:0;padding:9px 11px;border-radius:var(--r-s);border:1px solid var(--c-brd2);background:var(--c-input);color:var(--c-tx);outline:none;transition:border-color .15s,box-shadow .15s}
++input[type=text],input[type=url],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=datetime-local],input[type=search],select,textarea{width:100%;min-width:0;padding:9px 11px;border-radius:var(--r-s);border:1px solid var(--c-brd2);background:var(--c-input);color:var(--c-tx);outline:none;transition:border-color var(--ov-dur-2, .15s),box-shadow var(--ov-dur-2, .15s)}
  textarea{resize:vertical;min-height:84px;line-height:1.45}
  .mono{font-family:var(--mono);font-size:.88em}
  input:focus,select:focus,textarea:focus{border-color:var(--c-ac);box-shadow:0 0 0 3px var(--c-glow)}
@@@ -101,7 +101,7 @@ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,va
  .color input[type=text]{border:0;padding:4px 0;background:none;box-shadow:none;font-family:var(--mono);font-size:.84rem;width:6.5em}
  .check{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--c-tx2);cursor:pointer;user-select:none}
  .check input{accent-color:var(--c-ac);width:16px;height:16px}
--.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border-radius:var(--r-s);border:1px solid var(--c-brd2);background:var(--c-raised);color:var(--c-tx);font-weight:650;font-size:.88rem;cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter .15s,border-color .15s,background .15s}
++.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border-radius:var(--r-s);border:1px solid var(--c-brd2);background:var(--c-raised);color:var(--c-tx);font-weight:650;font-size:.88rem;cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter var(--ov-dur-2, .15s),border-color var(--ov-dur-2, .15s),background var(--ov-dur-2, .15s)}
  .btn:hover{border-color:var(--c-ac)}
  .btn:disabled{opacity:.5;cursor:not-allowed}
  .btn.primary{background:var(--c-acs);border-color:var(--c-acs);color:var(--c-onac)}
@@@ -123,7 +123,7 @@ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,va
  .preview{position:sticky;top:64px;display:flex;flex-direction:column;gap:12px}
  .stage{position:relative;display:grid;place-items:center;min-height:300px;padding:22px;border-radius:var(--r);border:1px solid var(--c-brd);overflow:hidden;
    background-color:var(--c-panel);background-image:linear-gradient(45deg,rgba(127,127,127,.07) 25%,transparent 25%,transparent 75%,rgba(127,127,127,.07) 75%),linear-gradient(45deg,rgba(127,127,127,.07) 25%,transparent 25%,transparent 75%,rgba(127,127,127,.07) 75%);background-size:18px 18px;background-position:0 0,9px 9px}
--.stage .art{max-width:100%;max-height:340px;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.25));transition:opacity .15s}
++.stage .art{max-width:100%;max-height:340px;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.25));transition:opacity var(--ov-dur-2, .15s)}
  .stage .art.svg{width:100%;height:auto}
  .stage .art svg{display:block;width:100%;height:auto;max-height:340px}
  .stage canvas.art{image-rendering:pixelated}
@@@ -133,7 +133,7 @@ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,va
  .verdict .dot{width:9px;height:9px;border-radius:50%;background:var(--c-tx3);flex:none}
  .verdict.ok .dot{background:var(--c-ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-ok) 18%,transparent)}
  .verdict.bad .dot{background:var(--c-bad)}
--.verdict.wait .dot{animation:pulse 1s ease-in-out infinite}
++.verdict.wait .dot{animation:pulse 1s var(--ov-ease-in-out, ease-in-out) infinite}
  @keyframes pulse{50%{opacity:.35}}
  .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .facts div{padding:8px 10px;border-radius:var(--r-s);background:var(--c-raised);border:1px solid var(--c-brd);min-width:0}
@@@ -154,7 +154,7 @@ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,va
  @media (max-width:700px){.smart{grid-template-columns:minmax(0,1fr)}}
  .group-h{display:flex;align-items:center;gap:8px;margin:22px 0 10px;font-size:.8rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--c-tx3)}
  .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
--.tile{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r);background:var(--c-card);border:1px solid var(--c-brd);color:var(--c-tx);text-decoration:none;transition:border-color .15s,transform .15s,background .15s;min-width:0}
++.tile{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r);background:var(--c-card);border:1px solid var(--c-brd);color:var(--c-tx);text-decoration:none;transition:border-color var(--ov-dur-2, .15s),transform var(--ov-dur-2, .15s),background var(--ov-dur-2, .15s);min-width:0}
  .tile:hover{border-color:var(--c-ac);transform:translateY(-1px);background:var(--c-hover)}
  .tile .ti{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--c-ac) 16%,transparent);color:var(--c-acl);font-size:19px;flex:none}
  .tile b{display:block;font-size:.92rem}
@@@ -167,7 +167,7 @@ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,va
  .viewport video,.viewport img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .viewport canvas.overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .viewport .aim{position:absolute;inset:18% 22%;border-radius:18px;pointer-events:none;box-shadow:0 0 0 999px rgba(0,0,0,.28);outline:2px solid rgba(255,255,255,.7);outline-offset:-2px}
--.viewport .aim::after{content:'';position:absolute;left:8%;right:8%;height:2px;top:50%;background:linear-gradient(90deg,transparent,var(--c-ac),transparent);animation:sweep 2.4s ease-in-out infinite}
++.viewport .aim::after{content:'';position:absolute;left:8%;right:8%;height:2px;top:50%;background:linear-gradient(90deg,transparent,var(--c-ac),transparent);animation:sweep 2.4s var(--ov-ease-in-out, ease-in-out) infinite}
  @keyframes sweep{0%,100%{transform:translateY(-60px)}50%{transform:translateY(60px)}}
  .drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;color:#d6deea;background:radial-gradient(circle at 50% 40%,#1b2536,#06090f)}
  .drop.over{outline:3px dashed var(--c-ac);outline-offset:-10px}
@@@ -176,7 +176,7 @@ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,va
  .scanbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
  .scanbar select{width:auto;max-width:220px}
  .results{display:flex;flex-direction:column;gap:10px}
--.result{padding:14px;border-radius:var(--r);background:var(--c-card);border:1px solid var(--c-brd);min-width:0;animation:pop .25s ease-out}
++.result{padding:14px;border-radius:var(--r);background:var(--c-card);border:1px solid var(--c-brd);min-width:0;animation:pop var(--ov-dur-2, .25s) var(--ov-ease-out, ease-out)}
  @keyframes pop{from{transform:translateY(4px);opacity:0}}
  .result .rh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
  .result .fmt{font-size:.72rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--c-raised);border:1px solid var(--c-brd2);color:var(--c-tx2)}
@@@ -206,7 +206,7 @@ table.ais td.v{font-family:var(--mono);word-break:break-all}
  .sheet figcaption{font-size:.72rem;color:#333;text-align:center;word-break:break-all;font-family:var(--mono)}
  .fails{font-size:.84rem;color:var(--c-bad);margin:8px 0 0;padding-left:18px}
  
--.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,90px);padding:10px 18px;border-radius:12px;background:var(--c-raised);border:1px solid var(--c-brd2);color:var(--c-tx);font-weight:650;font-size:.88rem;box-shadow:var(--c-shadow-lg);opacity:0;transition:transform .25s,opacity .25s;z-index:9999;pointer-events:none;max-width:calc(100vw - 32px)}
++.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,90px);padding:10px 18px;border-radius:12px;background:var(--c-raised);border:1px solid var(--c-brd2);color:var(--c-tx);font-weight:650;font-size:.88rem;box-shadow:var(--c-shadow-lg);opacity:0;transition:transform var(--ov-dur-2, .25s),opacity var(--ov-dur-2, .25s);z-index:9999;pointer-events:none;max-width:calc(100vw - 32px)}
  .toast.show{transform:translate(-50%,0);opacity:1}
  
  /* ── Printing labels: only the label sheet ── */
ddiff --git a/apps/gateway/public/dev.html b/apps/gateway/public/dev.html
iindex 92b37c6..f308fe0 100644
---- a/apps/gateway/public/dev.html
++++ b/apps/gateway/public/dev.html
@@@ -32,7 +32,7 @@ html{background:var(--bg)}
  body{min-height:100vh;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
--.bg-glow::before,.bg-glow::after{content:'';position:absolute;border-radius:50%;filter:blur(120px);opacity:.35;animation:gd 20s ease-in-out infinite alternate}
++.bg-glow::before,.bg-glow::after{content:'';position:absolute;border-radius:50%;filter:blur(120px);opacity:.35;animation:gd 20s var(--ov-ease-in-out, ease-in-out) infinite alternate}
  .bg-glow::before{width:500px;height:500px;top:-10%;left:20%;background:radial-gradient(circle,rgba(167,139,250,.3),transparent 70%)}
  .bg-glow::after{width:400px;height:400px;bottom:10%;right:10%;background:radial-gradient(circle,rgba(99,102,241,.2),transparent 70%);animation-delay:-10s}
  @keyframes gd{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,-30px) scale(1.15)}}
@@@ -42,13 +42,13 @@ a{color:inherit;text-decoration:none}
  .hero h1{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
  .hero p{color:var(--tx2);font-size:.95rem}
  .modes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
--.mb{padding:7px 15px;border-radius:8px;background:var(--bg3);color:var(--tx2);font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid var(--brd);transition:.15s}
++.mb{padding:7px 15px;border-radius:8px;background:var(--bg3);color:var(--tx2);font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid var(--brd);transition:var(--ov-dur-2, .15s)}
  .mb:hover{background:#252738;color:var(--tx)}.mb.on{background:var(--ac);color:#fff;border-color:var(--ac)}
  .io{display:flex;gap:12px;margin-bottom:12px}
--.io textarea{flex:1;min-height:200px;padding:14px;background:var(--bg2);color:var(--tx);border:1px solid var(--brd);border-radius:var(--r);font-family:'JetBrains Mono',monospace;font-size:.85rem;resize:vertical;outline:none;transition:border .2s}
++.io textarea{flex:1;min-height:200px;padding:14px;background:var(--bg2);color:var(--tx);border:1px solid var(--brd);border-radius:var(--r);font-family:'JetBrains Mono',monospace;font-size:.85rem;resize:vertical;outline:none;transition:border var(--ov-dur-2, .2s)}
  .io textarea:focus{border-color:var(--ac)}.io textarea::placeholder{color:var(--tx3)}
  .acts{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
--.ab{padding:8px 18px;border-radius:10px;font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s;border:none}
++.ab{padding:8px 18px;border-radius:10px;font-size:.82rem;font-weight:600;cursor:pointer;transition:var(--ov-dur-2, .15s);border:none}
  .ab-go{background:var(--ac);color:#fff}.ab-go:hover{filter:brightness(1.15)}
  .ab-s{background:var(--bg3);color:var(--tx2);border:1px solid var(--brd)}.ab-s:hover{background:#252738;color:var(--tx)}
  #out{min-height:100px;padding:16px;background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);font-family:'JetBrains Mono',monospace;font-size:.85rem;white-space:pre-wrap;word-break:break-all;overflow-x:auto;line-height:1.6}
@@@ -64,15 +64,15 @@ a{color:inherit;text-decoration:none}
  .og-card img{width:100%;max-height:260px;object-fit:cover}.og-body{padding:14px}
  .og-dm{font-size:.75rem;color:var(--tx3);text-transform:uppercase}.og-tt{font-weight:700;margin:4px 0}.og-ds{color:var(--tx2);font-size:.85rem}
  .hg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:20px}
--.tc{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:.2s}
++.tc{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:var(--ov-dur-2, .2s)}
  .tc:hover{background:var(--bg3);border-color:rgba(167,139,250,.3);transform:translateY(-2px)}
  .tc-i{width:42px;height:42px;border-radius:10px;background:rgba(167,139,250,.12);display:flex;align-items:center;justify-content:center;color:var(--ac);font-size:1.1rem;flex-shrink:0}
  .tc-n{font-weight:700;font-size:.9rem}.tc-d{color:var(--tx2);font-size:.78rem;margin-top:2px}
  .ch{display:flex;align-items:center;gap:10px;margin:28px 0 14px;color:var(--ac);font-weight:700;font-size:1rem}
  .rel{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--brd)}
--.rel a{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;background:var(--bg3);color:var(--tx2);font-size:.78rem;font-weight:600;border:1px solid var(--brd);transition:.15s}
++.rel a{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;background:var(--bg3);color:var(--tx2);font-size:.78rem;font-weight:600;border:1px solid var(--brd);transition:var(--ov-dur-2, .15s)}
  .rel a:hover{color:var(--ac);border-color:rgba(167,139,250,.3)}
--.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--bg3);color:var(--tx);padding:10px 24px;border-radius:10px;font-size:.85rem;font-weight:600;border:1px solid var(--brd);opacity:0;transition:.3s;z-index:9999;pointer-events:none}
++.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--bg3);color:var(--tx);padding:10px 24px;border-radius:10px;font-size:.85rem;font-weight:600;border:1px solid var(--brd);opacity:0;transition:var(--ov-dur-3, .3s);z-index:9999;pointer-events:none}
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
  @media(max-width:640px){.io{flex-direction:column}.hg{grid-template-columns:1fr}}
  /* The tool frame: the brand is the site ("Tools"), not the subdomain's name. A framed page's box comes from the server. */
ddiff --git a/apps/gateway/public/img.html b/apps/gateway/public/img.html
iindex 736b508..29832bf 100644
---- a/apps/gateway/public/img.html
++++ b/apps/gateway/public/img.html
@@@ -64,7 +64,7 @@
          #showcase-section.visible { display: block; }
          
          .showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin: 40px 0; max-width: 800px; margin-left: auto; margin-right: auto; }
--        .showcase-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-light); cursor: pointer; transition: all 0.3s ease; gap: 10px; animation: float ease-in-out infinite; }
++        .showcase-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-light); cursor: pointer; transition: all var(--ov-dur-3, 0.3s) var(--ov-ease-out, ease); gap: 10px; animation: float var(--ov-ease-in-out, ease-in-out) infinite; }
          .showcase-tool:nth-child(1) { animation-delay: 0s; animation-duration: 3s; }
          .showcase-tool:nth-child(2) { animation-delay: 0.15s; animation-duration: 3.3s; }
          .showcase-tool:nth-child(3) { animation-delay: 0.3s; animation-duration: 3.6s; }
@@@ -78,7 +78,7 @@
          .showcase-tool-label { font-size: 0.8rem; font-weight: 700; text-align: center; color: var(--text-secondary); }
          
          .quick-examples { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 32px 0; max-width: 800px; margin-left: auto; margin-right: auto; }
--        .example-btn { padding: 12px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); text-align: center; text-decoration: none; color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; transition: all 0.25s ease; animation: fadeInScale 0.5s ease both; cursor: pointer; }
++        .example-btn { padding: 12px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); text-align: center; text-decoration: none; color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; transition: all var(--ov-dur-2, 0.25s) var(--ov-ease-out, ease); animation: fadeInScale var(--ov-dur-4, 0.5s) var(--ov-ease-out, ease) both; cursor: pointer; }
          .example-btn:nth-child(1) { animation-delay: 0.1s; }
          .example-btn:nth-child(2) { animation-delay: 0.2s; }
          .example-btn:nth-child(3) { animation-delay: 0.3s; }
@@@ -86,7 +86,7 @@
          .example-btn:hover { border-color: rgba(139,92,246,0.4); color: var(--accent-light); background: rgba(139,92,246,0.08); }
          
          .stats-section { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
--        .stat-card { padding: 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); text-align: center; animation: fadeInScale 0.6s ease both; }
++        .stat-card { padding: 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); text-align: center; animation: fadeInScale var(--ov-dur-4, 0.6s) var(--ov-ease-out, ease) both; }
          .stat-card:nth-child(1) { animation-delay: 0.2s; }
          .stat-card:nth-child(2) { animation-delay: 0.3s; }
          .stat-card:nth-child(3) { animation-delay: 0.4s; }
@@@ -95,7 +95,7 @@
          .stat-card-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
          
          .search-wrapper { max-width: 600px; margin: 0 auto 32px; }
--        .search-wrapper input { width: 100%; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 0.95rem; outline: none; transition: all 0.25s ease; }
++        .search-wrapper input { width: 100%; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 0.95rem; outline: none; transition: all var(--ov-dur-2, 0.25s) var(--ov-ease-out, ease); }
          .search-wrapper input:focus { border-color: rgba(139,92,246,0.4); background: var(--bg-hover); }
          
          .note { text-align: center; padding: 40px 20px 0; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border); margin-top: 60px; }
ddiff --git a/apps/gateway/public/net.html b/apps/gateway/public/net.html
iindex 199f751..c0c9936 100644
---- a/apps/gateway/public/net.html
++++ b/apps/gateway/public/net.html
@@@ -71,7 +71,7 @@
          .bg-glow::before, .bg-glow::after {
              content: ''; position: absolute; border-radius: 50%;
              filter: blur(120px); opacity: 0.35;
--            animation: glow-drift 20s ease-in-out infinite alternate;
++            animation: glow-drift 20s var(--ov-ease-in-out, ease-in-out) infinite alternate;
          }
          .bg-glow::before { width: 500px; height: 500px; top: -5%; left: 25%; background: radial-gradient(circle, rgba(6,182,212,0.3), transparent 70%); }
          .bg-glow::after { width: 400px; height: 400px; bottom: 10%; right: 15%; background: radial-gradient(circle, rgba(139,92,246,0.25), transparent 70%); animation-delay: -10s; }
@@@ -95,7 +95,7 @@
              display: flex; gap: 8px; max-width: 640px; margin: 24px auto 0;
              background: var(--bg-input); border: 1px solid var(--border-light);
              border-radius: 14px; padding: 6px 6px 6px 16px; align-items: center;
--            transition: border-color .2s;
++            transition: border-color var(--ov-dur-2, .2s);
          }
          .search-bar:focus-within { border-color: var(--cyan); }
          .search-bar input {
@@@ -107,7 +107,7 @@
          .search-bar .btn-go {
              padding: 10px 24px; border-radius: 10px; font-weight: 600; font-size: 14px;
              background: var(--cyan); color: #fff; white-space: nowrap;
--            transition: background .15s, transform .1s;
++            transition: background var(--ov-dur-2, .15s), transform var(--ov-dur-1, .1s);
          }
          .search-bar .btn-go:hover { background: #0891b2; }
          .search-bar .btn-go:active { transform: scale(0.97); }
@@@ -119,7 +119,7 @@
              padding: 5px 12px; border-radius: 8px;
              background: var(--bg-tertiary); border: 1px solid var(--border);
              font-size: 12px; color: var(--text-secondary); font-weight: 500;
--            transition: all .15s; cursor: pointer;
++            transition: all var(--ov-dur-2, .15s); cursor: pointer;
          }
          .tool-chip:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
          .tool-chip.active { background: rgba(6,182,212,0.12); border-color: var(--cyan); color: var(--cyan); }
@@@ -130,7 +130,7 @@
          .tool-selector .ts-btn {
              padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 500;
              background: var(--bg-tertiary); border: 1px solid var(--border);
--            color: var(--text-secondary); transition: all .15s;
++            color: var(--text-secondary); transition: all var(--ov-dur-2, .15s);
          }
          .tool-selector .ts-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
          .tool-selector .ts-btn.active { background: rgba(6,182,212,0.15); border-color: var(--cyan); color: var(--cyan); }
@@@ -253,7 +253,7 @@
              background: var(--bg-card); border: 1px solid var(--border);
              border-radius: var(--radius-sm); padding: 16px 18px;
              display: flex; align-items: flex-start; gap: 12px;
--            transition: all .2s; cursor: pointer; text-decoration: none; color: inherit;
++            transition: all var(--ov-dur-2, .2s); cursor: pointer; text-decoration: none; color: inherit;
          }
          .tool-card:hover { background: var(--bg-hover); border-color: var(--border-light); transform: translateY(-2px); text-decoration: none; }
          .tool-card .tc-icon {
@@@ -290,7 +290,7 @@
              margin-top: 10px; padding: 6px 16px; border-radius: 8px;
              background: var(--bg-tertiary); border: 1px solid var(--border);
              color: var(--text-secondary); font-size: 12px; font-weight: 500;
--            transition: all .15s;
++            transition: all var(--ov-dur-2, .15s);
          }
          .myip-card .copy-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
  
@@@ -298,7 +298,7 @@
          .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
          .tab-btn {
              padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--text-muted);
--            border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap;
++            border-bottom: 2px solid transparent; transition: all var(--ov-dur-2, .15s); white-space: nowrap;
          }
          .tab-btn:hover { color: var(--text-secondary); }
          .tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }
@@@ -323,7 +323,7 @@
          .toast {
              padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
              background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
--            animation: toast-in .2s ease; min-width: 200px; backdrop-filter: blur(12px);
++            animation: toast-in var(--ov-dur-2, .2s) var(--ov-ease-out, ease); min-width: 200px; backdrop-filter: blur(12px);
          }
          .toast.info { border-color: rgba(6,182,212,0.3); }
          .toast.error { border-color: rgba(239,68,68,0.3); color: var(--red); }
@@@ -375,8 +375,8 @@
              border: 1px solid rgba(6, 182, 212, 0.15);
              border-radius: 12px;
              cursor: pointer;
--            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
--            animation: float 3s ease-in-out infinite;
++            transition: all var(--ov-dur-3, 0.3s) var(--ov-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
++            animation: float 3s var(--ov-ease-in-out, ease-in-out) infinite;
          }
  
          .showcase-tool:nth-child(1) { animation-delay: 0s; }
@@@ -398,7 +398,7 @@
          .showcase-tool-icon {
              font-size: 24px;
              color: var(--cyan);
--            transition: transform 0.3s ease;
++            transition: transform var(--ov-dur-3, 0.3s) var(--ov-ease-out, ease);
          }
  
          .showcase-tool:hover .showcase-tool-icon {
@@@ -446,7 +446,7 @@
              font-size: 12px;
              font-weight: 500;
              cursor: pointer;
--            transition: all 0.2s;
++            transition: all var(--ov-dur-2, 0.2s);
          }
  
          .example-btn:hover {
@@@ -476,7 +476,7 @@
              border-radius: 10px;
              padding: 16px 12px;
              text-align: center;
--            animation: fadeInScale 0.6s ease-out backwards;
++            animation: fadeInScale var(--ov-dur-4, 0.6s) var(--ov-ease-out, ease-out) backwards;
          }
  
          .stat-card:nth-child(1) { animation-delay: 0s; }
ddiff --git a/apps/img/public/css/style.css b/apps/img/public/css/style.css
iindex 334e5b7..d047209 100644
---- a/apps/img/public/css/style.css
++++ b/apps/img/public/css/style.css
@@@ -86,7 +86,7 @@ body {
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
--    transition: all .15s;
++    transition: all var(--ov-dur-2, .15s);
      display: flex;
      align-items: center;
      gap: 6px;
@@@ -112,7 +112,7 @@ body {
      padding: 48px 24px;
      text-align: center;
      cursor: pointer;
--    transition: all .2s;
++    transition: all var(--ov-dur-2, .2s);
      background: var(--bg-secondary);
  }
  .upload-area:hover, .upload-area.dragover {
@@@ -209,7 +209,7 @@ body {
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
--    transition: all .12s;
++    transition: all var(--ov-dur-1, .12s);
  }
  .format-btn:hover, .aspect-btn:hover {
      border-color: var(--accent-dark);
@@@ -260,7 +260,7 @@ body {
      font-size: 14px;
      width: 120px;
      outline: none;
--    transition: border-color .15s;
++    transition: border-color var(--ov-dur-2, .15s);
  }
  .num-input:focus, .select-input:focus {
      border-color: var(--accent);
@@@ -299,7 +299,7 @@ body {
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
--    transition: all .15s;
++    transition: all var(--ov-dur-2, .15s);
      text-decoration: none;
  }
  .btn-primary {
@@@ -334,7 +334,7 @@ body {
      border-top: 4px solid var(--accent);
      border-radius: 50%;
      margin: 0 auto 16px;
--    animation: spin 1.4s ease-out infinite;
++    animation: spin 1.4s var(--ov-ease-out, ease-out) infinite;
  }
  @keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
  
@@@ -403,7 +403,7 @@ body {
      border-radius: var(--radius-md);
      text-decoration: none;
      color: var(--text-primary);
--    transition: all .15s;
++    transition: all var(--ov-dur-2, .15s);
  }
  .subdomain-card:hover {
      border-color: var(--accent-dark);
ddiff --git a/apps/maps/public/css/style.css b/apps/maps/public/css/style.css
iindex cd55aa8..1d08bc3 100644
---- a/apps/maps/public/css/style.css
++++ b/apps/maps/public/css/style.css
@@@ -45,17 +45,17 @@ body {
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, #0f172a 0%, #0a0a1a 70%);
  }
--.splash-content { text-align: center; animation: fadeIn 0.5s ease; }
--.splash-icon { font-size: 64px; color: var(--green); margin-bottom: 16px; animation: float 3s ease-in-out infinite; }
++.splash-content { text-align: center; animation: fadeIn var(--ov-dur-4, 0.5s) var(--ov-ease-out, ease); }
++.splash-icon { font-size: 64px; color: var(--green); margin-bottom: 16px; animation: float 3s var(--ov-ease-in-out, ease-in-out) infinite; }
  .splash-title { font-size: 42px; font-weight: 800; letter-spacing: 2px; color: #fff; }
  .splash-subtitle { color: var(--text-muted); margin: 8px 0 24px; font-size: 14px; }
  .splash-loader { max-width: 300px; margin: 0 auto 24px; }
  .loader-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
--.loader-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 2px; transition: width 0.3s; }
++.loader-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 2px; transition: width var(--ov-dur-3, 0.3s); }
  .splash-status { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
  .splash-sources { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 400px; margin: 0 auto; }
  .splash-sources span { font-size: 10px; color: var(--text-muted); background: var(--bg-card); padding: 3px 8px; border-radius: 4px; }
--#splash-screen.fade-out { animation: fadeOut 0.5s ease forwards; }
++#splash-screen.fade-out { animation: fadeOut var(--ov-dur-4, 0.5s) var(--ov-ease-out, ease) forwards; }
  
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes fadeOut { to { opacity: 0; } }
@@@ -88,7 +88,7 @@ body {
  .disclaimer-agree-btn {
    background: var(--green); color: #000; border: none;
    padding: 10px 24px; border-radius: var(--radius); font-family: var(--font);
--  font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.2s;
++  font-weight: 600; font-size: 14px; cursor: pointer; transition: var(--ov-dur-2, 0.2s);
  }
  .disclaimer-agree-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .disclaimer-agree-btn:not(:disabled):hover { filter: brightness(1.1); transform: translateY(-1px); }
@@@ -111,7 +111,7 @@ body {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 4px 8px;
--  max-width: 600px; width: 100%; transition: border-color 0.2s;
++  max-width: 600px; width: 100%; transition: border-color var(--ov-dur-2, 0.2s);
  }
  .search-box:focus-within { border-color: var(--green); }
  .search-icon { color: var(--text-muted); font-size: 13px; }
@@@ -131,7 +131,7 @@ body {
    background: var(--green); color: #000; border: none;
    padding: 6px 14px; border-radius: 8px; font-family: var(--font);
    font-weight: 600; font-size: 12px; cursor: pointer; white-space: nowrap;
--  transition: 0.2s;
++  transition: var(--ov-dur-2, 0.2s);
  }
  .btn-primary:hover { filter: brightness(1.1); }
  .btn-primary.loading { background: var(--border-light); }
@@@ -139,7 +139,7 @@ body {
  .header-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid transparent; border-radius: 8px;
--  color: var(--text-muted); font-size: 14px; cursor: pointer; transition: 0.2s;
++  color: var(--text-muted); font-size: 14px; cursor: pointer; transition: var(--ov-dur-2, 0.2s);
  }
  .header-btn:hover { color: var(--green); background: var(--green-dim); border-color: var(--green-glow); }
  
@@@ -158,7 +158,7 @@ body {
    padding: 4px 10px; border-radius: 20px; font-size: 11px;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer; white-space: nowrap;
--  font-family: var(--font); transition: 0.2s;
++  font-family: var(--font); transition: var(--ov-dur-2, 0.2s);
  }
  .filter-chip:hover { border-color: var(--green); color: var(--text); }
  .filter-chip.active { background: var(--green-dim); border-color: var(--green); color: var(--green); font-weight: 600; }
@@@ -172,7 +172,7 @@ body {
  .filter-tool-btn {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border); border-radius: 6px;
--  color: var(--text-muted); font-size: 12px; cursor: pointer; transition: 0.2s;
++  color: var(--text-muted); font-size: 12px; cursor: pointer; transition: var(--ov-dur-2, 0.2s);
  }
  .filter-tool-btn:hover { border-color: var(--green); color: var(--green); }
  .filter-tool-btn.active { background: var(--green-dim); border-color: var(--green); color: var(--green); }
@@@ -194,7 +194,7 @@ body {
  .welcome-card {
    padding: 20px; text-align: center;
  }
--.welcome-icon { color: var(--green); margin-bottom: 12px; animation: float 3s ease-in-out infinite; }
++.welcome-icon { color: var(--green); margin-bottom: 12px; animation: float 3s var(--ov-ease-in-out, ease-in-out) infinite; }
  .welcome-card h2 { font-size: 16px; margin-bottom: 8px; }
  .welcome-card p { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
  .quick-searches { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 16px; }
@@@ -202,7 +202,7 @@ body {
  .quick-btn {
    font-size: 11px; padding: 4px 10px; border-radius: 6px;
    background: var(--bg-card); border: 1px solid var(--border);
--  color: var(--text-muted); cursor: pointer; font-family: var(--font); transition: 0.2s;
++  color: var(--text-muted); cursor: pointer; font-family: var(--font); transition: var(--ov-dur-2, 0.2s);
  }
  .quick-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
  .welcome-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@@@ -216,7 +216,7 @@ body {
  /* ── Result Cards ── */
  .result-card {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
--  cursor: pointer; position: relative; transition: background 0.15s;
++  cursor: pointer; position: relative; transition: background var(--ov-dur-2, 0.15s);
  }
  .result-card:hover { background: var(--bg-card-hover); }
  .result-card.active { background: var(--green-dim); border-left: 3px solid var(--green); }
@@@ -253,7 +253,7 @@ body {
  .result-fav-btn {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; color: var(--text-muted);
--  font-size: 14px; cursor: pointer; transition: 0.2s;
++  font-size: 14px; cursor: pointer; transition: var(--ov-dur-2, 0.2s);
  }
  .result-fav-btn.favorited, .result-fav-btn:hover { color: var(--red); }
  .stealth-rating { display: flex; gap: 1px; }
@@@ -270,7 +270,7 @@ body {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-muted); font-size: 14px;
--  cursor: pointer; transition: 0.2s; box-shadow: var(--shadow);
++  cursor: pointer; transition: var(--ov-dur-2, 0.2s); box-shadow: var(--shadow);
  }
  .map-ctrl-btn:hover { color: var(--green); border-color: var(--green); }
  .map-ctrl-btn.active { background: var(--green-dim); color: var(--green); border-color: var(--green); }
@@@ -279,7 +279,7 @@ body {
    background: var(--bg-card); border: 1px solid var(--green);
    color: var(--green); padding: 8px 16px; border-radius: var(--radius);
    font-family: var(--font); font-size: 12px; font-weight: 600;
--  cursor: pointer; box-shadow: var(--shadow); transition: 0.2s;
++  cursor: pointer; box-shadow: var(--shadow); transition: var(--ov-dur-2, 0.2s);
  }
  .search-area-btn:hover { background: var(--green); color: #000; }
  
@@@ -288,7 +288,7 @@ body {
    width: 28px; height: 28px; border-radius: 50% 50% 50% 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #fff; transform: rotate(-45deg);
--  box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.15s;
++  box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform var(--ov-dur-2, 0.15s);
  }
  .custom-marker i { transform: rotate(45deg); }
  .custom-marker.dispersed { background: #22c55e; }
@@@ -317,7 +317,7 @@ body {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--green); border: 3px solid #fff;
    box-shadow: 0 0 12px var(--green-glow);
--  animation: pulse-ring 2s ease infinite;
++  animation: pulse-ring 2s var(--ov-ease-out, ease) infinite;
  }
  .locate-pulse-icon {
    width: 18px; height: 18px; border-radius: 50%;
@@@ -357,7 +357,7 @@ body {
    width: 380px; z-index: 200;
    background: var(--bg-card); border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(0,0,0,0.3);
--  overflow-y: auto; animation: slideIn 0.2s ease;
++  overflow-y: auto; animation: slideIn var(--ov-dur-2, 0.2s) var(--ov-ease-out, ease);
  }
  @keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }
  .detail-header { padding: 16px; position: sticky; top: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); z-index: 1; }
@@@ -396,7 +396,7 @@ body {
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text); cursor: pointer; font-family: var(--font);
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
--  transition: 0.2s;
++  transition: var(--ov-dur-2, 0.2s);
  }
  .detail-btn:hover { border-color: var(--green); color: var(--green); }
  .detail-btn.primary { background: var(--green-dim); border-color: var(--green); color: var(--green); }
@@@ -419,7 +419,7 @@ body {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    max-height: 85vh; overflow: hidden; display: flex; flex-direction: column;
--  animation: fadeIn 0.2s ease;
++  animation: fadeIn var(--ov-dur-2, 0.2s) var(--ov-ease-out, ease);
  }
  .modal-sm { width: 420px; }
  .modal-md { width: 560px; }
@@@ -462,7 +462,7 @@ body {
    padding: 6px 14px; border-radius: 6px; font-size: 12px;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer; font-family: var(--font);
--  transition: 0.2s;
++  transition: var(--ov-dur-2, 0.2s);
  }
  .food-tab:hover, .guide-tab:hover { border-color: var(--green); color: var(--text); }
  .food-tab.active, .guide-tab.active { background: var(--green-dim); border-color: var(--green); color: var(--green); font-weight: 600; }
@@@ -472,7 +472,7 @@ body {
  .food-card {
    padding: 12px; margin-bottom: 8px;
    background: var(--bg-input); border: 1px solid var(--border);
--  border-radius: var(--radius); transition: 0.15s;
++  border-radius: var(--radius); transition: var(--ov-dur-2, 0.15s);
  }
  .food-card:hover { border-color: var(--green-glow); }
  .food-card-title { font-size: 13px; font-weight: 600; }
@@@ -504,17 +504,17 @@ body {
  
  /* Search progress */
  .search-progress { padding: 16px; text-align: center; }
--.search-progress .spinner { width: 24px; height: 24px; border: 3px solid var(--green); --spin-c: var(--green); border-radius: 50%; animation: spin 1.4s ease-out infinite; margin: 0 auto 8px; }
++.search-progress .spinner { width: 24px; height: 24px; border: 3px solid var(--green); --spin-c: var(--green); border-radius: 50%; animation: spin 1.4s var(--ov-ease-out, ease-out) infinite; margin: 0 auto 8px; }
  .search-progress p { font-size: 12px; color: var(--text-muted); }
  
  /* ── Source progress panel (streaming search) ── */
  .source-progress { padding: 10px 12px; }
  .sp-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .sp-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
--.sp-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 3px; transition: width 0.3s ease; }
++.sp-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 3px; transition: width var(--ov-dur-3, 0.3s) var(--ov-ease-out, ease); }
  .sp-count { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; min-width: 42px; text-align: right; }
  .sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
--.sp-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: var(--bg-input); font-size: 11px; transition: background 0.25s, opacity 0.3s; }
++.sp-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: var(--bg-input); font-size: 11px; transition: background var(--ov-dur-2, 0.25s), opacity var(--ov-dur-3, 0.3s); }
  .sp-item .sp-icon { width: 14px; text-align: center; font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
  .sp-item .sp-name { flex: 1; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-item .sp-result { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); min-width: 16px; text-align: right; }
@@@ -527,7 +527,7 @@ body {
  .sp-item.error .sp-name { color: var(--text-muted); text-decoration: line-through; }
  .sp-item.error .sp-result { color: var(--red); }
  @keyframes sp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
--.sp-item:not(.done):not(.error) { animation: sp-pulse 1.5s ease-in-out infinite; }
++.sp-item:not(.done):not(.error) { animation: sp-pulse 1.5s var(--ov-ease-in-out, ease-in-out) infinite; }
  
  /* ── Mobile ── */
  @media (max-width: 768px) {
ddiff --git a/apps/text/public/badge.html b/apps/text/public/badge.html
iindex 348ae26..d64fa46 100644
---- a/apps/text/public/badge.html
++++ b/apps/text/public/badge.html
@@@ -35,10 +35,10 @@
          .canvas-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 250px; background-image: linear-gradient(45deg, #111 25%, transparent 25%), linear-gradient(-45deg, #111 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #111 75%), linear-gradient(-45deg, transparent 75%, #111 75%); background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
          .canvas-wrap canvas { max-width: 100%; height: auto; }
          .shape-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
--        .shape-pill { padding: .4rem .9rem; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary); font-size: .8rem; cursor: pointer; transition: all .2s; }
++        .shape-pill { padding: .4rem .9rem; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary); font-size: .8rem; cursor: pointer; transition: all var(--ov-dur-2, .2s); }
          .shape-pill:hover, .shape-pill.active { border-color: var(--accent); color: var(--accent); background: rgba(192,150,92,0.1); }
          .quick-colors { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
--        .quick-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; transition: all .15s; }
++        .quick-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; transition: all var(--ov-dur-2, .15s); }
          .quick-color:hover { transform: scale(1.15); border-color: #fff; }
          @media (max-width: 768px) { .badge-layout { grid-template-columns: 1fr; } }
      </style>
ddiff --git a/apps/text/public/css/shared.css b/apps/text/public/css/shared.css
iindex d021fdc..9334ad4 100644
---- a/apps/text/public/css/shared.css
++++ b/apps/text/public/css/shared.css
@@@ -302,7 +302,7 @@ textarea.large {
      border-radius: 50%;
      background: var(--success, #4ade80);
      box-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
--    animation: livePulse 2s ease-in-out infinite;
++    animation: livePulse 2s var(--ov-ease-in-out, ease-in-out) infinite;
      flex-shrink: 0;
  }
  
@@@ -330,7 +330,7 @@ textarea.large {
  
  /* Brief highlight flash on the output area when Generate is clicked */
  .output-flash {
--    animation: outputFlash 0.6s ease;
++    animation: outputFlash var(--ov-dur-4, 0.6s) var(--ov-ease-out, ease);
  }
  
  @keyframes outputFlash {
@@@ -694,7 +694,7 @@ textarea.large {
      font-size: 0.9rem;
      box-shadow: var(--shadow-lg);
      z-index: 10000;
--    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.5s forwards;
++    animation: toastIn var(--ov-dur-3, 0.3s) var(--ov-ease-out, ease), toastOut var(--ov-dur-3, 0.3s) var(--ov-ease-out, ease) 2.5s forwards;
      backdrop-filter: blur(12px);
  }
  
ddiff --git a/apps/text/public/ice.html b/apps/text/public/ice.html
iindex a6983f7..4728d16 100644
---- a/apps/text/public/ice.html
++++ b/apps/text/public/ice.html
@@@ -41,7 +41,7 @@
              border: 1px solid var(--border);
              border-radius: 12px;
              padding: 20px;
--            transition: border-color 0.2s, transform 0.2s;
++            transition: border-color var(--ov-dur-2, 0.2s), transform var(--ov-dur-2, 0.2s);
          }
          .rights-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }
          .rights-card h3 { color: var(--text-primary); margin: 0 0 8px; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
@@@ -126,7 +126,7 @@
              background-color: currentColor;
              -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
              mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
--            transition: transform 0.2s;
++            transition: transform var(--ov-dur-2, 0.2s);
          }
          .scenario[open] summary::after { transform: rotate(90deg); }
          .scenario .scenario-body {
@@@ -150,7 +150,7 @@
              text-decoration: none;
              font-size: 0.88rem;
              font-weight: 500;
--            transition: border-color 0.2s, background 0.2s;
++            transition: border-color var(--ov-dur-2, 0.2s), background var(--ov-dur-2, 0.2s);
          }
          .resource-link:hover { border-color: var(--accent); background: var(--accent-glow); }
          .resource-link i { color: var(--accent); }
ddiff --git a/apps/text/public/peso.html b/apps/text/public/peso.html
iindex cdb7efa..a37b726 100644
---- a/apps/text/public/peso.html
++++ b/apps/text/public/peso.html
@@@ -65,7 +65,7 @@
              background: var(--accent); border: 3px solid var(--bg-primary);
              color: #0b0c12; font-size: 1rem; cursor: pointer;
              display: flex; align-items: center; justify-content: center;
--            transition: transform 0.3s, background 0.2s;
++            transition: transform var(--ov-dur-3, 0.3s), background var(--ov-dur-2, 0.2s);
              margin: -8px 0;
              z-index: 2;
          }
@@@ -93,7 +93,7 @@
              padding: 8px 16px; border-radius: 8px;
              background: var(--bg-secondary); border: 1px solid var(--border);
              color: var(--text-secondary); cursor: pointer; font-size: 0.85rem;
--            font-weight: 500; transition: all 0.2s; font-family: 'Inter', sans-serif;
++            font-weight: 500; transition: all var(--ov-dur-2, 0.2s); font-family: 'Inter', sans-serif;
          }
          .quick-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
  
ddiff --git a/apps/text/public/slang.html b/apps/text/public/slang.html
iindex 4398f1f..a7d3d86 100644
---- a/apps/text/public/slang.html
++++ b/apps/text/public/slang.html
@@@ -43,7 +43,7 @@
              padding: 7px 16px; border-radius: 20px;
              background: var(--bg-secondary); border: 1px solid var(--border);
              color: var(--text-secondary); cursor: pointer; font-size: 0.82rem;
--            font-weight: 600; transition: all 0.2s; font-family: 'Inter', sans-serif;
++            font-weight: 600; transition: all var(--ov-dur-2, 0.2s); font-family: 'Inter', sans-serif;
          }
          .vibe-pill:hover { border-color: var(--accent); color: var(--text-primary); }
          .vibe-pill.active { background: var(--accent); color: #0b0c12; border-color: var(--accent); }
@@@ -55,7 +55,7 @@
          .slang-card {
              background: var(--bg-secondary); border: 1px solid var(--border);
              border-radius: 12px; padding: 18px 20px;
--            transition: border-color 0.2s;
++            transition: border-color var(--ov-dur-2, 0.2s);
          }
          .slang-card:hover { border-color: var(--border-accent); }
  
@@@ -104,7 +104,7 @@
              background: var(--bg-secondary); border: 1px solid var(--border);
              color: var(--text-secondary); cursor: pointer; font-size: 0.82rem;
              font-weight: 700; display: flex; align-items: center; justify-content: center;
--            transition: all 0.15s; font-family: 'Inter', sans-serif;
++            transition: all var(--ov-dur-2, 0.15s); font-family: 'Inter', sans-serif;
          }
          .alpha-btn:hover { border-color: var(--accent); color: var(--accent); }
          .alpha-btn.active { background: var(--accent); color: #0b0c12; border-color: var(--accent); }
ddiff --git a/apps/text/public/spanish.html b/apps/text/public/spanish.html
iindex b841f2d..1d3c0b7 100644
---- a/apps/text/public/spanish.html
++++ b/apps/text/public/spanish.html
@@@ -31,7 +31,7 @@
              font-size: 1rem;
              font-family: 'Inter', sans-serif;
              outline: none;
--            transition: border-color 0.2s;
++            transition: border-color var(--ov-dur-2, 0.2s);
          }
          .phrase-search:focus { border-color: var(--accent); }
          .search-wrap {
@@@ -51,7 +51,7 @@
              padding: 7px 16px; border-radius: 20px;
              background: var(--bg-secondary); border: 1px solid var(--border);
              color: var(--text-secondary); cursor: pointer; font-size: 0.82rem;
--            font-weight: 600; transition: all 0.2s; font-family: 'Inter', sans-serif;
++            font-weight: 600; transition: all var(--ov-dur-2, 0.2s); font-family: 'Inter', sans-serif;
          }
          .cat-pill:hover { border-color: var(--accent); color: var(--text-primary); }
          .cat-pill.active { background: var(--accent); color: #0b0c12; border-color: var(--accent); }
@@@ -64,7 +64,7 @@
              background: var(--bg-secondary);
              border: 1px solid var(--border);
              border-radius: 10px;
--            transition: border-color 0.2s;
++            transition: border-color var(--ov-dur-2, 0.2s);
              cursor: pointer;
          }
          .phrase-item:hover { border-color: var(--border-accent); }
@@@ -75,7 +75,7 @@
          .phrase-copy {
              background: none; border: 1px solid var(--border); border-radius: 6px;
              color: var(--text-muted); cursor: pointer; padding: 6px 10px; font-size: 0.78rem;
--            transition: all 0.2s; font-family: 'Inter', sans-serif;
++            transition: all var(--ov-dur-2, 0.2s); font-family: 'Inter', sans-serif;
          }
          .phrase-copy:hover { color: var(--accent); border-color: var(--accent); }
  
ddiff --git a/apps/text/public/thumbnail.html b/apps/text/public/thumbnail.html
iindex 8ef624a..74ec79c 100644
---- a/apps/text/public/thumbnail.html
++++ b/apps/text/public/thumbnail.html
@@@ -37,11 +37,11 @@
          .ctrl-row input[type="color"] { width: 36px; height: 30px; border: 1px solid var(--border); background: var(--bg-secondary); border-radius: 8px; cursor: pointer; padding: 2px; }
          .ctrl-row input[type="range"] { flex: 1; }
          .ctrl-row .val { min-width: 32px; text-align: right; font-size: .78rem; color: var(--text-muted); font-family: monospace; }
--        .upload-btn { width: 100%; padding: .75rem; border-radius: 12px; border: 2px dashed var(--border); background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; text-align: center; transition: all .2s; font-size: .9rem; }
++        .upload-btn { width: 100%; padding: .75rem; border-radius: 12px; border: 2px dashed var(--border); background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; text-align: center; transition: all var(--ov-dur-2, .2s); font-size: .9rem; }
          .upload-btn:hover { border-color: var(--accent); color: var(--accent); }
          .upload-btn input { display: none; }
          .size-pills { display: flex; gap: .4rem; flex-wrap: wrap; }
--        .size-pill { padding: .35rem .7rem; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary); font-size: .75rem; cursor: pointer; transition: all .15s; }
++        .size-pill { padding: .35rem .7rem; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary); font-size: .75rem; cursor: pointer; transition: all var(--ov-dur-2, .15s); }
          .size-pill:hover, .size-pill.active { border-color: var(--accent); color: var(--accent); background: rgba(192,150,92,0.1); }
          @media (max-width: 768px) { .thumb-layout { grid-template-columns: 1fr; } }
      </style>
ddiff --git a/apps/text/public/title.html b/apps/text/public/title.html
iindex 041e89d..749ccc3 100644
---- a/apps/text/public/title.html
++++ b/apps/text/public/title.html
@@@ -33,7 +33,7 @@
          .control-row select { flex: 1; }
          .control-row .val { min-width: 36px; text-align: right; font-size: .8rem; color: var(--text-muted); font-family: monospace; }
          .preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
--        .preset-btn { padding: .5rem .25rem; font-size: .7rem; border-radius: 10px; cursor: pointer; border: 2px solid var(--border); background: var(--bg-tertiary); color: var(--text-primary); text-align: center; transition: all .2s; }
++        .preset-btn { padding: .5rem .25rem; font-size: .7rem; border-radius: 10px; cursor: pointer; border: 2px solid var(--border); background: var(--bg-tertiary); color: var(--text-primary); text-align: center; transition: all var(--ov-dur-2, .2s); }
          .preset-btn:hover, .preset-btn.active { border-color: var(--accent); background: rgba(192,150,92,0.1); }
          .canvas-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
          .canvas-wrap canvas { max-width: 100%; height: auto; border-radius: 8px; background-image: linear-gradient(45deg, #1a1a1a 25%, transparent 25%), linear-gradient(-45deg, #1a1a1a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a1a1a 75%), linear-gradient(-45deg, transparent 75%, #1a1a1a 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
ddiff --git a/apps/text/public/watermark.html b/apps/text/public/watermark.html
iindex 2a5e6a0..96b8bd5 100644
---- a/apps/text/public/watermark.html
++++ b/apps/text/public/watermark.html
@@@ -26,7 +26,7 @@
          .wm-preview canvas { max-width: 100%; height: auto; border-radius: 8px; }
          .wm-preview .placeholder { color: var(--text-muted); font-size: 1.1rem; }
          .wm-preview .placeholder i { font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--border); }
--        .drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; cursor: pointer; transition: all .2s; }
++        .drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; cursor: pointer; transition: all var(--ov-dur-2, .2s); }
          .drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: rgba(192,150,92,0.05); }
          .drop-zone input { display: none; }
          .wm-controls { display: flex; flex-direction: column; gap: 1rem; }
@@@ -39,7 +39,7 @@
          .ctrl-row input[type="range"] { flex: 1; }
          .ctrl-row .val { min-width: 32px; text-align: right; font-size: .78rem; color: var(--text-muted); font-family: monospace; }
          .pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
--        .pos-btn { padding: .45rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary); font-size: .7rem; text-align: center; cursor: pointer; transition: all .15s; }
++        .pos-btn { padding: .45rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary); font-size: .7rem; text-align: center; cursor: pointer; transition: all var(--ov-dur-2, .15s); }
          .pos-btn:hover, .pos-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(192,150,92,0.1); }
          @media (max-width: 768px) { .wm-layout { grid-template-columns: 1fr; } }
      </style>
ddiff --git a/apps/text/public/wordmark.html b/apps/text/public/wordmark.html
iindex 2976487..e5c671f 100644
---- a/apps/text/public/wordmark.html
++++ b/apps/text/public/wordmark.html
@@@ -22,7 +22,7 @@
      <script src="/shared/theme-loader.js" defer></script>
      <style>
          .wordmark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1.5rem; margin-top: 2rem; }
--        .wm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all .2s; }
++        .wm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all var(--ov-dur-2, .2s); }
          .wm-card:hover { border-color: var(--accent); transform: translateY(-2px); }
          .wm-preview { padding: 2rem 1.5rem; display: flex; align-items: center; justify-content: center; min-height: 100px; background-image: linear-gradient(45deg, #111 25%, transparent 25%), linear-gradient(-45deg, #111 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #111 75%), linear-gradient(-45deg, transparent 75%, #111 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
          .wm-preview canvas { max-width: 100%; height: auto; }
ddiff --git a/apps/yt/public/css/style.css b/apps/yt/public/css/style.css
iindex 97f7533..342f293 100644
---- a/apps/yt/public/css/style.css
++++ b/apps/yt/public/css/style.css
@@@ -82,7 +82,7 @@ a:hover { text-decoration: underline; }
      border: 2px solid var(--border);
      border-radius: var(--radius);
      padding: 4px 6px 4px 16px;
--    transition: border-color .2s, box-shadow .2s;
++    transition: border-color var(--ov-dur-2, .2s), box-shadow var(--ov-dur-2, .2s);
      gap: 8px;
  }
  .url-input-wrap:focus-within {
@@@ -125,7 +125,7 @@ a:hover { text-decoration: underline; }
      gap: 8px;
      padding: 10px 20px;
      font-size: 0.95rem;
--    transition: background .2s, transform .15s, box-shadow .2s;
++    transition: background var(--ov-dur-2, .2s), transform var(--ov-dur-2, .15s), box-shadow var(--ov-dur-2, .2s);
      white-space: nowrap;
      text-decoration: none;
  }
@@@ -169,7 +169,7 @@ a:hover { text-decoration: underline; }
      height: 48px;
      border: 4px solid var(--accent); --spin-c: var(--accent);
      border-radius: 50%;
--    animation: spin 1.4s ease-out infinite;
++    animation: spin 1.4s var(--ov-ease-out, ease-out) infinite;
      margin: 0 auto 16px;
  }
  @keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
@@@ -264,7 +264,7 @@ a:hover { text-decoration: underline; }
      background: var(--bg-input);
      color: var(--text);
      cursor: pointer;
--    transition: border-color .2s, background .2s, box-shadow .2s;
++    transition: border-color var(--ov-dur-2, .2s), background var(--ov-dur-2, .2s), box-shadow var(--ov-dur-2, .2s);
  }
  .format-btn:hover {
      border-color: var(--text-dim);
@@@ -314,7 +314,7 @@ a:hover { text-decoration: underline; }
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--accent-light, #60a5fa));
      border-radius: 6px;
--    transition: width 0.3s;
++    transition: width var(--ov-dur-3, 0.3s);
  }
  .progress-bar.indeterminate {
      width: 100%;