/* UniOne setup walkthrough. SHARED SOURCE: the same file lives in the app and on the website (see the
   header of walkthrough.js). Everything is scoped under .wt so neither host's styles leak in or out.
   The stage is a fixed 960 by 600 picture that the script scales to the box; everything inside it is
   sized in stage pixels. */

/* ------------------------------------------------------------------ tokens */
.wt {
  --wt-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wt-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --wt-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wt-ease: cubic-bezier(.2, 0, 0, 1);
  --wt-ease-out: cubic-bezier(.16, 1, .3, 1);

  --wt-ink: #1B1D29;
  --wt-text-2: #5B5E6D;
  --wt-line: rgba(88, 94, 128, .14);
  --wt-line-2: rgba(88, 94, 128, .24);
  --wt-focus: #5B5E6D;
  --wt-ctl: #FFFFFF;
  --wt-ctl-hover: #F1F1F4;
  --wt-dot: rgba(88, 94, 128, .30);
  --wt-dot-on: #1B1D29;
  --wt-ring: #3D63E6;
  --wt-desk: linear-gradient(165deg, #EBD3D8 0%, #E1DCE4 46%, #D9DCE6 100%);
  --wt-grain-o: .07;
  --wt-frame: 0 0 0 1px rgba(88, 94, 128, .12), 0 2px 4px rgba(20, 22, 40, .04), 0 12px 32px rgba(20, 22, 40, .10);
  --wt-chrome: #EEEEF1;
  --wt-chrome-line: rgba(0, 0, 0, .08);
  --wt-chrome-ink: #6E7180;
  --wt-url-bg: #FFFFFF;
  --wt-url-ink: #3C3F4C;
  --wt-win-shadow: 0 0 0 1px rgba(30, 20, 40, .10), 0 22px 56px rgba(40, 20, 40, .22), 0 6px 16px rgba(40, 20, 40, .10);

  /* the console in the claude-key flow follows the theme, as the real one does */
  --cc-bg: #FAF9F5;
  --cc-side: #F1EFE7;
  --cc-card: #FFFFFF;
  --cc-ink: #1F1E1D;
  --cc-mut: #6E6C66;
  --cc-line: rgba(31, 30, 29, .12);
  --cc-btn: #1F1E1D;
  --cc-btn-ink: #FAF9F5;
  --cc-hover: rgba(31, 30, 29, .06);
  --cc-good: #2F7A4F;
  --cc-field: #FFFFFF;

  --wt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  display: grid;
  gap: 14px;
  min-width: 0;
  color: var(--wt-ink);
  font: 400 15px/24px var(--wt-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wt {
    --wt-ink: #F2F3F7;
    --wt-text-2: #A3A6B4;
    --wt-line: rgba(160, 166, 200, .13);
    --wt-line-2: rgba(160, 166, 200, .24);
    --wt-focus: #A3A6B4;
    --wt-ctl: #22232E;
    --wt-ctl-hover: #2A2B37;
    --wt-dot: rgba(160, 166, 200, .32);
    --wt-dot-on: #F2F3F7;
    --wt-ring: #6F8EF5;
    --wt-desk: linear-gradient(165deg, #33161C 0%, #1D1620 44%, #171822 100%);
    --wt-grain-o: .11;
    --wt-frame: 0 0 0 1px rgba(160, 166, 200, .14), 0 8px 24px rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .30);
    --wt-chrome: #2B2C34;
    --wt-chrome-line: rgba(255, 255, 255, .07);
    --wt-chrome-ink: #A3A6B4;
    --wt-url-bg: #1C1D24;
    --wt-url-ink: #D5D7E0;
    --wt-win-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 56px rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .35);
    --cc-bg: #262624;
    --cc-side: #1F1E1D;
    --cc-card: #30302E;
    --cc-ink: #F4F3EE;
    --cc-mut: #A9A69D;
    --cc-line: rgba(244, 243, 238, .12);
    --cc-btn: #F4F3EE;
    --cc-btn-ink: #1F1E1D;
    --cc-hover: rgba(244, 243, 238, .07);
    --cc-good: #6BCB8F;
    --cc-field: #262624;
  }
}
:root[data-theme="dark"] .wt {
  --wt-ink: #F2F3F7;
  --wt-text-2: #A3A6B4;
  --wt-line: rgba(160, 166, 200, .13);
  --wt-line-2: rgba(160, 166, 200, .24);
  --wt-focus: #A3A6B4;
  --wt-ctl: #22232E;
  --wt-ctl-hover: #2A2B37;
  --wt-dot: rgba(160, 166, 200, .32);
  --wt-dot-on: #F2F3F7;
  --wt-ring: #6F8EF5;
  --wt-desk: linear-gradient(165deg, #33161C 0%, #1D1620 44%, #171822 100%);
  --wt-grain-o: .11;
  --wt-frame: 0 0 0 1px rgba(160, 166, 200, .14), 0 8px 24px rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .30);
  --wt-chrome: #2B2C34;
  --wt-chrome-line: rgba(255, 255, 255, .07);
  --wt-chrome-ink: #A3A6B4;
  --wt-url-bg: #1C1D24;
  --wt-url-ink: #D5D7E0;
  --wt-win-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 56px rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .35);
  --cc-bg: #262624;
  --cc-side: #1F1E1D;
  --cc-card: #30302E;
  --cc-ink: #F4F3EE;
  --cc-mut: #A9A69D;
  --cc-line: rgba(244, 243, 238, .12);
  --cc-btn: #F4F3EE;
  --cc-btn-ink: #1F1E1D;
  --cc-hover: rgba(244, 243, 238, .07);
  --cc-good: #6BCB8F;
  --cc-field: #262624;
}

.wt *, .wt *::before, .wt *::after { box-sizing: border-box; }
.wt svg { display: block; flex: none; max-width: none; }
.wt .wt-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- picture */
.wt .wt-screen { position: relative; min-width: 0; }
.wt .wt-viewport {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; width: 100%;
  border-radius: 16px; background: var(--wt-desk); box-shadow: var(--wt-frame);
  isolation: isolate; contain: paint; user-select: none; -webkit-user-select: none;
}
.wt .wt-stage { position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform-origin: 0 0; font: 400 13px/18px var(--wt-sans); color: #1B1D29; }
.wt .wt-cam { position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform-origin: 0 0; }
.wt .wt-desk { position: absolute; inset: -40px; background: var(--wt-desk); }
.wt .wt-desk::after { content: ""; position: absolute; inset: 0; background-image: var(--wt-grain); opacity: var(--wt-grain-o); mix-blend-mode: overlay; }

/* the pointer, its click ripple, the highlight ring and the keystroke chip */
.wt .wt-cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -2.5px 0 0 -5px; transform-origin: 5px 2.5px; z-index: 30; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); pointer-events: none; }
.wt .wt-ripple { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: radial-gradient(circle, rgba(61, 99, 230, .55) 0%, rgba(61, 99, 230, .18) 60%, rgba(61, 99, 230, 0) 72%); opacity: 0; z-index: 29; pointer-events: none; }
.wt .wt-ring {
  position: absolute; left: 0; top: 0; opacity: 0; z-index: 28; pointer-events: none; transform-origin: center;
  border: 2.5px solid var(--wt-ring);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--wt-ring) 22%, transparent), 0 0 24px color-mix(in srgb, var(--wt-ring) 45%, transparent);
}
.wt .wt-hud { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.wt .wt-key {
  position: absolute; left: 50%; bottom: 26px; opacity: 0; padding: 9px 18px; border-radius: 14px;
  background: rgba(18, 19, 25, .78); color: #FFFFFF; font: 500 26px/1 var(--wt-sans); letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ---------------------------------------------------------------- windows */
.wt .wt-win { position: absolute; border-radius: 12px; overflow: hidden; box-shadow: var(--wt-win-shadow); }
.wt .wt-browser { left: 36px; top: 28px; width: 888px; height: 544px; background: #FFFFFF; transform-origin: 50% 40%; transition: transform .6s var(--wt-ease); }
.wt .wt-browser::after { content: ""; position: absolute; inset: 0; background: rgba(12, 10, 18, .32); opacity: 0; transition: opacity .6s var(--wt-ease); pointer-events: none; z-index: 20; }
.wt .on-uni .wt-browser { transform: scale(.965); }
.wt .on-uni .wt-browser::after { opacity: 1; }
.wt .wt-bar { position: relative; z-index: 2; height: 38px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--wt-chrome); border-bottom: 1px solid var(--wt-chrome-line); color: var(--wt-chrome-ink); }
.wt .wt-lights { display: flex; gap: 7px; flex: none; }
.wt .wt-lights i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.wt .wt-lights i:nth-child(2) { background: #FEBC2E; }
.wt .wt-lights i:nth-child(3) { background: #28C840; }
.wt .wt-navs { display: flex; gap: 6px; opacity: .7; }
.wt .wt-navs .wt-ico { width: 16px; height: 16px; }
.wt .wt-url { margin: 0 auto; width: 400px; height: 24px; border-radius: 7px; background: var(--wt-url-bg); color: var(--wt-url-ink); display: flex; align-items: center; justify-content: center; gap: 6px; font: 400 12px/1 var(--wt-sans); box-shadow: 0 0 0 1px var(--wt-chrome-line); }
.wt .wt-url .wt-ico { width: 12px; height: 12px; opacity: .6; }
.wt .wt-bar-end { width: 80px; flex: none; }
.wt .wt-page { position: absolute; left: 0; right: 0; top: 38px; bottom: 0; overflow: hidden; }

/* fields, shared by every scene */
.wt .wt-field { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid #C7CDD1; background: #FFFFFF; color: #1B1D29; font: 400 13px/1 var(--wt-sans); white-space: nowrap; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.wt .wt-field .wt-ico { width: 16px; height: 16px; margin-left: auto; color: #6B7780; }
.wt .wt-typed { display: inline-block; min-width: 1px; }
.wt .wt-typed:empty::before { content: attr(data-ph); color: #8A9096; }
.wt .wt-field.is-focus { border-color: #2B7ABC; box-shadow: 0 0 0 2px rgba(43, 122, 188, .28); }
.wt .wt-field.is-focus .wt-typed::after { content: ""; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -3px; background: currentColor; animation: wt-caret 1s steps(1) infinite; }
@keyframes wt-caret { 50% { opacity: 0; } }

/* ------------------------------------------------- the Canvas page (generic) */
.wt .cv { display: flex; background: #FFFFFF; color: #2D3B45; }
.wt .cv-rail { width: 66px; flex: none; background: #2B3A44; display: flex; flex-direction: column; align-items: stretch; padding-top: 8px; }
.wt .cv-mark { height: 46px; margin: 2px 12px 8px; border-radius: 8px; background: rgba(255, 255, 255, .10); }
.wt .cv-item { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 56px; justify-content: center; color: rgba(255, 255, 255, .86); font: 400 10px/12px var(--wt-sans); }
.wt .cv-item .wt-ico { width: 22px; height: 22px; stroke-width: 1.6; }
.wt .cv-item.is-on, .wt .on-settings [data-k="avatar"] { background: #FFFFFF; color: #2B3A44; }
.wt .on-settings .cv-item.is-on { background: none; color: rgba(255, 255, 255, .86); }
.wt .cv-ava { width: 28px; height: 28px; border-radius: 50%; background: #E6E9EC; color: #2B3A44; display: grid; place-items: center; font: 600 13px/1 var(--wt-sans); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.wt .cv-ava.lg { width: 52px; height: 52px; font-size: 22px; box-shadow: none; }
.wt .cv-main { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.wt .cv-head { position: relative; z-index: 2; height: 54px; display: flex; align-items: center; gap: 16px; padding: 0 24px; border-bottom: 1px solid #E3E6E8; background: #FFFFFF; }
.wt .cv-burger { display: grid; gap: 3px; width: 18px; }
.wt .cv-burger i { height: 2px; border-radius: 1px; background: #2B7ABC; }
.wt .cv-h { font: 400 20px/1 var(--wt-sans); color: #2D3B45; }
.wt .cv-crumb { display: flex; gap: 8px; font: 400 13px/1 var(--wt-sans); color: #2B7ABC; }
.wt .cv-crumb span { color: #8A9096; }
.wt .cv-dash, .wt .cv-set { position: absolute; inset: 0; transition: opacity .35s var(--wt-ease), visibility 0s linear .35s; }
.wt .cv-set { opacity: 0; visibility: hidden; }
.wt .on-settings .cv-set { opacity: 1; visibility: visible; transition: opacity .35s var(--wt-ease); }
.wt .on-settings .cv-dash { opacity: 0; visibility: hidden; }
.wt .cv-dash-b { display: flex; gap: 24px; padding: 22px 24px; }
.wt .cv-courses { display: grid; grid-template-columns: repeat(3, 172px); gap: 18px; }
.wt .cv-course { display: flex; flex-direction: column; height: 176px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #E3E6E8, 0 1px 3px rgba(0, 0, 0, .06); }
.wt .cv-course-top { height: 92px; flex: none; }
.wt .cv-course-top.c1 { background: linear-gradient(135deg, #6C8F2E, #4D7812); }
.wt .cv-course-top.c2 { background: linear-gradient(135deg, #2F86B0, #166992); }
.wt .cv-course-top.c3 { background: linear-gradient(135deg, #B93BA2, #A91991); }
.wt .cv-course-top.c4 { background: linear-gradient(135deg, #2E9A44, #12781A); }
.wt .cv-course-top.c5 { background: linear-gradient(135deg, #6A6AD8, #3B3BC4); }
.wt .cv-course-top.c6 { background: linear-gradient(135deg, #C84A6A, #B11B40); }
.wt .cv-course-code { padding: 10px 12px 0; font: 600 13px/18px var(--wt-sans); }
.wt .cv-course-code.c1 { color: #4D7812; } .wt .cv-course-code.c2 { color: #166992; } .wt .cv-course-code.c3 { color: #A91991; }
.wt .cv-course-code.c4 { color: #12781A; } .wt .cv-course-code.c5 { color: #3B3BC4; } .wt .cv-course-code.c6 { color: #B11B40; }
.wt .cv-course-sub { padding: 0 12px; font: 400 11.5px/16px var(--wt-sans); color: #6B7780; }
.wt .cv-course-ic { display: flex; gap: 14px; padding: 12px; margin-top: auto; }
.wt .cv-course-ic i { width: 16px; height: 12px; border-radius: 2px; background: #D5DADE; }
.wt .cv-todo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.wt .cv-todo-h { font: 500 14px/20px var(--wt-sans); padding-bottom: 8px; border-bottom: 1px solid #E3E6E8; }
.wt .cv-todo-i { display: flex; gap: 10px; font: 400 12.5px/17px var(--wt-sans); color: #2B7ABC; }
.wt .cv-todo-i i { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid #8A9096; flex: none; margin-top: 2px; }
.wt .cv-todo-i small { display: block; color: #6B7780; font-size: 11px; }

.wt .cv-scroll { position: absolute; left: 0; right: 0; top: 54px; padding: 22px 28px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wt .cv-title { font: 400 22px/28px var(--wt-sans); color: #2D3B45; margin-bottom: 8px; }
.wt .cv-cols { display: flex; gap: 32px; width: 100%; }
.wt .cv-prof { display: grid; grid-template-columns: 130px 1fr; gap: 12px 16px; flex: 1; font: 400 13px/18px var(--wt-sans); }
.wt .cv-dt { text-align: right; color: #2D3B45; font-weight: 500; }
.wt .cv-dd { color: #2D3B45; }
.wt .cv-side { width: 220px; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid #E3E6E8; border-radius: 6px; font: 400 12px/16px var(--wt-sans); }
.wt .cv-side-h { font: 500 14px/20px var(--wt-sans); margin-bottom: 4px; }
.wt .cv-side-r { color: #6B7780; margin-top: 4px; }
.wt .cv-side-v { color: #2B7ABC; }
.wt .cv-sec { font: 600 16px/22px var(--wt-sans); color: #2D3B45; margin-top: 24px; padding: 2px 4px; margin-left: -4px; border-radius: 4px; }
.wt .cv-p { font: 400 13px/18px var(--wt-sans); color: #2D3B45; }
.wt .cv-tbl { display: grid; grid-template-columns: 200px 160px 1fr; width: 100%; font: 400 13px/18px var(--wt-sans); border-top: 1px solid #E3E6E8; }
.wt .cv-tbl span { padding: 9px 10px; border-bottom: 1px solid #E3E6E8; }
.wt .cv-tbl .cv-th { font-weight: 600; background: #F5F6F7; }
.wt .cv-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 5px; font: 500 13px/1 var(--wt-sans); white-space: nowrap; }
.wt .cv-btn .wt-ico { width: 15px; height: 15px; stroke-width: 2.4; }
.wt .cv-red { background: #C8102E; color: #FFFFFF; margin-top: 6px; }
.wt .cv-blue { background: #1D6FB0; color: #FFFFFF; }
.wt .cv-grey { background: #F5F6F7; color: #2D3B45; box-shadow: inset 0 0 0 1px #C7CDD1; }
.wt .cv-sm { height: 28px; padding: 0 12px; font-size: 12px; }
.wt .cv-feat { display: flex; justify-content: space-between; width: 100%; padding: 8px 0; border-bottom: 1px solid #EEF0F2; font: 400 13px/18px var(--wt-sans); }
.wt .cv-sw { width: 30px; height: 16px; border-radius: 8px; background: #C7CDD1; }

/* the Account tray */
.wt .cv-scrim { position: absolute; inset: 0; background: rgba(20, 28, 34, .28); opacity: 0; transition: opacity .35s var(--wt-ease); }
.wt .on-tray .cv-scrim { opacity: 1; }
.wt .cv-tray {
  position: absolute; left: 0; top: 0; bottom: 0; width: 300px; padding: 22px 24px; background: #FFFFFF;
  display: flex; flex-direction: column; gap: 4px; box-shadow: 6px 0 24px rgba(0, 0, 0, .16);
  transform: translateX(-104%); transition: transform .45s var(--wt-ease-out);
}
.wt .on-tray .cv-tray { transform: none; }
.wt .cv-tray-x { position: absolute; right: 16px; top: 16px; color: #6B7780; }
.wt .cv-tray-x .wt-ico { width: 18px; height: 18px; }
.wt .cv-tray-who { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 18px; border-bottom: 1px solid #E3E6E8; margin-bottom: 12px; }
.wt .cv-tray-name { font: 500 16px/20px var(--wt-sans); color: #2D3B45; }
.wt .cv-tray-l { align-self: flex-start; padding: 6px 6px; margin-left: -6px; border-radius: 4px; font: 400 14px/20px var(--wt-sans); color: #1D6FB0; }

/* the New Access Token modal */
.wt .cv-mscrim { position: absolute; inset: 0; background: rgba(20, 28, 34, .45); opacity: 0; transition: opacity .3s var(--wt-ease); }
.wt .on-modal .cv-mscrim { opacity: 1; }
.wt .cv-modal {
  position: absolute; left: 50%; top: 52px; width: 440px; margin-left: -220px; border-radius: 8px; background: #FFFFFF;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97);
  transition: opacity .3s var(--wt-ease), transform .4s var(--wt-ease-out), visibility 0s linear .4s;
}
.wt .on-modal .cv-modal { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--wt-ease), transform .4s var(--wt-ease-out); }
.wt .cv-mh { position: relative; height: 52px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #E3E6E8; font: 500 17px/1 var(--wt-sans); color: #2D3B45; }
.wt .cv-mh .wt-ico { position: absolute; right: 18px; top: 17px; color: #6B7780; }
.wt .cv-mt { position: absolute; left: 20px; transition: opacity .25s; }
.wt .cv-mt-b, .wt .on-details .cv-mt-a { opacity: 0; }
.wt .on-details .cv-mt-b { opacity: 1; }
.wt .cv-mb { display: grid; padding: 18px 20px 20px; }
.wt .cv-form, .wt .cv-det { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; align-items: stretch; transition: opacity .3s var(--wt-ease); }
.wt .cv-det { opacity: 0; visibility: hidden; transition: opacity .3s var(--wt-ease), visibility 0s linear .3s; }
.wt .on-details .cv-det { opacity: 1; visibility: visible; transition: opacity .3s var(--wt-ease) .1s; }
.wt .on-details .cv-form { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
.wt .cv-lbl { font: 500 13px/18px var(--wt-sans); color: #2D3B45; margin: 10px 0 5px; }
.wt .cv-lbl:first-child { margin-top: 0; }
.wt .cv-lbl em { color: #C8102E; font-style: normal; }
.wt .cv-note { align-self: flex-start; margin: 12px 0 0 -4px; padding: 2px 4px; border-radius: 4px; font: 400 12.5px/17px var(--wt-sans); color: #4C5860; }
.wt .cv-cal {
  position: absolute; left: 0; top: 136px; width: 250px; padding: 12px; border-radius: 8px; background: #FFFFFF; z-index: 5;
  box-shadow: 0 0 0 1px #D5DADE, 0 12px 32px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .3s var(--wt-ease-out), visibility 0s linear .3s;
}
.wt .on-picker .cv-cal { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s var(--wt-ease-out); }
.wt .cv-cal-h { display: flex; justify-content: space-between; align-items: center; font: 500 13px/18px var(--wt-sans); margin-bottom: 8px; }
.wt .cv-cal-a { display: flex; gap: 6px; color: #6B7780; }
.wt .cv-cal-a .wt-ico { width: 14px; height: 14px; }
.wt .cv-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font: 400 11.5px/24px var(--wt-sans); color: #2D3B45; }
.wt .cv-cal-g span { height: 24px; border-radius: 12px; }
.wt .cv-cal-g .cv-wd { color: #6B7780; font-weight: 500; }
.wt .cv-cal-g .cv-off { color: #B8BEC3; }
.wt .cv-cal-g .cv-pick { font-weight: 600; transition: background .2s, color .2s; }
.wt .cv-cal-g .cv-pick.is-on { background: #1D6FB0; color: #FFFFFF; }
.wt .cv-warn { font: 400 13px/19px var(--wt-sans); color: #2D3B45; padding: 10px 12px; border-radius: 6px; background: #FDF4E3; box-shadow: inset 3px 0 0 #E59A1A; margin-bottom: 10px; }
.wt .cv-dl { font: 600 12.5px/18px var(--wt-sans); color: #2D3B45; margin-top: 8px; }
.wt .cv-dv { font: 400 13px/18px var(--wt-sans); color: #2D3B45; }
.wt .cv-token { align-self: flex-start; padding: 4px 6px; margin: 2px 0 0 -6px; border-radius: 4px; font: 500 13px/18px var(--wt-mono); color: #2D3B45; transition: background .15s; }
.wt .cv-token.is-sel { background: #B5D3F3; }
.wt .cv-mf { display: grid; padding: 14px 20px; border-top: 1px solid #E3E6E8; background: #F5F6F7; border-radius: 0 0 8px 8px; }
.wt .cv-fa, .wt .cv-fb { grid-area: 1 / 1; justify-self: end; display: flex; gap: 10px; transition: opacity .25s var(--wt-ease); }
.wt .cv-fb, .wt .on-details .cv-fa { opacity: 0; visibility: hidden; }
.wt .on-details .cv-fb { opacity: 1; visibility: visible; }

/* ----------------------------------------------- the Claude Console (generic) */
.wt .cc { background: var(--cc-bg); color: var(--cc-ink); }
.wt .cc .wt-field { border-color: var(--cc-line); background: var(--cc-field); color: var(--cc-ink); border-radius: 8px; height: 38px; }
.wt .cc .wt-typed:empty::before { color: var(--cc-mut); }
.wt .cc .wt-field.is-focus { border-color: var(--cc-ink); box-shadow: 0 0 0 3px var(--cc-hover); }
.wt .cc-login, .wt .cc-app { position: absolute; inset: 0; transition: opacity .4s var(--wt-ease), visibility 0s linear .4s; }
.wt .cc-login { display: grid; place-items: center; }
.wt .cc-app { opacity: 0; visibility: hidden; display: flex; }
.wt .on-app .cc-app { opacity: 1; visibility: visible; transition: opacity .4s var(--wt-ease); }
.wt .on-app .cc-login { opacity: 0; visibility: hidden; }
.wt .cc-card { background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 12px; }
.wt .cc-signin { width: 340px; padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.wt .cc-serif { font: 380 25px/32px var(--wt-serif); letter-spacing: -.01em; text-align: center; margin-bottom: 8px; }
.wt .cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 8px; font: 500 13px/1 var(--wt-sans); white-space: nowrap; }
.wt .cc-btn .wt-ico { width: 15px; height: 15px; stroke-width: 2.2; }
.wt .cc-dark { background: var(--cc-btn); color: var(--cc-btn-ink); }
.wt .cc-ghost { box-shadow: inset 0 0 0 1px var(--cc-line); color: var(--cc-ink); background: var(--cc-card); }
.wt .cc-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.wt .cc-or { display: flex; align-items: center; gap: 10px; color: var(--cc-mut); font: 400 12px/1 var(--wt-sans); }
.wt .cc-or i { flex: 1; height: 1px; background: var(--cc-line); }
.wt .cc-side { width: 196px; flex: none; background: var(--cc-side); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--cc-line); }
.wt .cc-brand { font: 500 14px/20px var(--wt-sans); padding: 2px 10px 14px; }
.wt .cc-navh { font: 500 11px/16px var(--wt-sans); color: var(--cc-mut); text-transform: uppercase; letter-spacing: .05em; padding: 14px 10px 6px; }
.wt .cc-nav { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 7px; font: 400 13px/1 var(--wt-sans); color: var(--cc-ink); transition: background .2s; }
.wt .cc-nav .wt-ico { width: 16px; height: 16px; color: var(--cc-mut); }
.wt .on-billing [data-k="c-nav-billing"], .wt .on-keys [data-k="c-nav-keys"] { background: var(--cc-hover); font-weight: 500; }
.wt .cc-main { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.wt .cc-pane { position: absolute; inset: 0; padding: 28px 36px; opacity: 0; visibility: hidden; transition: opacity .3s var(--wt-ease), visibility 0s linear .3s; }
.wt .on-home .cc-home, .wt .on-billing .cc-bill, .wt .on-keys .cc-keys { opacity: 1; visibility: visible; transition: opacity .3s var(--wt-ease); }
.wt .cc-bill { padding: 0; }
.wt .cc-scroll { position: absolute; left: 0; right: 0; top: 0; padding: 28px 36px 40px; display: flex; flex-direction: column; gap: 14px; }
.wt .cc-h1 { display: flex; align-items: center; justify-content: space-between; font: 380 28px/36px var(--wt-serif); letter-spacing: -.01em; margin-bottom: 6px; }
.wt .cc-h2 { font: 500 15px/22px var(--wt-sans); margin-top: 12px; }
.wt .cc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.wt .cc-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; background: var(--cc-card); border: 1px solid var(--cc-line); font: 400 12.5px/17px var(--wt-sans); color: var(--cc-mut); }
.wt .cc-tile b { font: 500 14px/20px var(--wt-sans); color: var(--cc-ink); }
.wt .cc-tile small { font-size: 12px; }
.wt .cc-bal { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 4px 16px; padding: 18px 20px; }
.wt .cc-k { font: 500 13.5px/20px var(--wt-sans); }
.wt .cc-k small { display: block; font: 400 12px/17px var(--wt-sans); color: var(--cc-mut); }
.wt .cc-bal-a, .wt .cc-bal-b { grid-area: 2 / 1; font: 380 22px/30px var(--wt-serif); transition: opacity .3s var(--wt-ease); }
.wt .cc-bal-a { color: var(--cc-mut); }
.wt .cc-bal-b { display: flex; align-items: center; gap: 8px; color: var(--cc-good); opacity: 0; }
.wt .cc-bal-b .wt-ico { width: 20px; height: 20px; stroke-width: 2.2; }
.wt .on-credit .cc-bal-a { opacity: 0; }
.wt .on-credit .cc-bal-b { opacity: 1; }
.wt .cc-buy { grid-area: 1 / 2 / 3 / 3; }
.wt .cc-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
.wt .cc-row .cc-k { flex: 1; }
.wt .cc-mut { color: var(--cc-mut); font: 400 13px/18px var(--wt-sans); }
.wt .cc-inv { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.wt .cc-inv i { height: 10px; border-radius: 5px; background: var(--cc-line); }
.wt .cc-inv i:nth-child(2) { width: 70%; }
.wt .cc-inv i:nth-child(3) { width: 84%; }
.wt .cc-tbl { display: grid; grid-template-columns: 1.1fr 1.6fr .8fr 1fr; margin-top: 18px; border: 1px solid var(--cc-line); border-radius: 12px; background: var(--cc-card); font: 400 13px/18px var(--wt-sans); overflow: hidden; }
.wt .cc-tbl span { padding: 12px 16px; }
.wt .cc-th { font: 500 12px/16px var(--wt-sans); color: var(--cc-mut); border-bottom: 1px solid var(--cc-line); }
.wt .cc-empty { grid-column: 1 / -1; text-align: center; color: var(--cc-mut); padding: 26px 16px; transition: opacity .3s; }
.wt .cc-new { display: none; }
.wt .on-ckey .cc-empty { display: none; }
.wt .on-ckey .cc-new { display: block; }
.wt .cc-mono { font: 500 12.5px/18px var(--wt-mono); }
.wt .cc-mscrim { position: absolute; inset: 0; background: rgba(15, 14, 12, .38); opacity: 0; transition: opacity .3s var(--wt-ease); }
.wt .on-cmodal .cc-mscrim { opacity: 1; }
.wt .cc-modal {
  position: absolute; left: 50%; top: 64px; width: 420px; margin-left: -210px; padding: 22px 24px; border-radius: 14px; overflow: hidden;
  background: var(--cc-card); border: 1px solid var(--cc-line); box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
  display: grid; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97);
  transition: opacity .3s var(--wt-ease), transform .4s var(--wt-ease-out), visibility 0s linear .4s;
}
.wt .on-cmodal .cc-modal { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--wt-ease), transform .4s var(--wt-ease-out); }
.wt .cc-ma, .wt .cc-mb { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; transition: opacity .3s var(--wt-ease); }
.wt .cc-mb { opacity: 0; visibility: hidden; }
.wt .on-ckey .cc-ma { opacity: 0; visibility: hidden; position: absolute; left: 24px; right: 24px; top: 22px; }
.wt .on-ckey .cc-mb { opacity: 1; visibility: visible; }
.wt .cc-mt { font: 380 22px/30px var(--wt-serif); margin-bottom: 6px; }
.wt .cc-lbl { font: 500 12.5px/18px var(--wt-sans); margin-top: 4px; }
.wt .cc-select .wt-ico { color: var(--cc-mut); }
.wt .cc-mf { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.wt .cc-keybox { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--cc-bg); border: 1px solid var(--cc-line); margin-top: 6px; }
.wt .cc-keybox .cc-mono { flex: 1; }
.wt .cc-copy { display: grid; }
.wt .cc-copy-a, .wt .cc-copy-b { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; transition: opacity .2s; }
.wt .cc-copy-b { opacity: 0; color: var(--cc-good); }
.wt .on-copied .cc-copy-a { opacity: 0; }
.wt .on-copied .cc-copy-b { opacity: 1; }

/* ------------------------------------------------------ the UniOne window */
.wt .wt-uni {
  left: 150px; top: 64px; width: 660px; height: 470px; background: #111219; color: #F2F3F7; z-index: 10;
  opacity: 0; visibility: hidden; transform: translateY(26px) scale(.95);
  transition: opacity .45s var(--wt-ease), transform .6s var(--wt-ease-out), visibility 0s linear .6s;
}
.wt .on-uni .wt-uni { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--wt-ease), transform .6s var(--wt-ease-out); }
.wt .un-atmo { position: absolute; inset: 0 0 auto 0; height: 380px; background:
  radial-gradient(ellipse 62% 64% at 86% -12%, #8E2636 0%, rgba(122, 31, 43, 0) 72%),
  radial-gradient(ellipse 48% 46% at 2% -8%, rgba(116, 29, 41, .78) 0%, rgba(116, 29, 41, 0) 70%),
  linear-gradient(180deg, #3A141B 0%, #24121A 34%, #111219 100%); }
.wt .un-atmo::after { content: ""; position: absolute; inset: 0; background-image: var(--wt-grain); opacity: .11; mix-blend-mode: overlay; }
.wt .un-bar { position: relative; height: 38px; display: flex; align-items: center; gap: 14px; padding: 0 14px; }
.wt .un-name { display: flex; align-items: center; gap: 7px; margin: 0 auto; padding-right: 60px; font: 480 13px/1 var(--wt-sans); color: rgba(242, 243, 247, .82); }
.wt .wt-logo { width: 18px; height: 18px; border-radius: 5px; background: #FFFFFF; padding: 1px; }
.wt .un-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 18px; }
.wt .un-steps { display: flex; align-items: center; gap: 6px; font: 400 12px/16px var(--wt-sans); color: #CBCDD8; }
.wt .un-steps i { width: 20px; height: 4px; border-radius: 2px; background: rgba(242, 243, 247, .18); }
.wt .un-steps i.is-done { background: rgba(242, 243, 247, .55); }
.wt .un-steps i.is-on { background: #F2F3F7; width: 30px; }
.wt .un-steps span { margin-left: 8px; }
.wt .un-card {
  width: 430px; padding: 26px 28px 22px; border-radius: 16px; display: flex; flex-direction: column; gap: 6px;
  background: rgba(26, 27, 36, .86); box-shadow: 0 0 0 1px rgba(160, 166, 200, .16), 0 24px 60px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.wt .un-title { font: 380 28px/36px var(--wt-serif); letter-spacing: -.01em; color: #F2F3F7; }
.wt .un-sub { font: 400 14px/20px var(--wt-sans); color: #A3A6B4; margin-bottom: 10px; }
.wt .un-lbl { font: 480 13px/18px var(--wt-sans); color: #D5D7E0; margin-top: 4px; }
.wt .un-card .wt-field { height: 40px; border-radius: 8px; border-color: #6B6D7B; background: #121319; color: #F2F3F7; font: 500 13px/1 var(--wt-mono); }
.wt .un-card .wt-typed:empty::before { color: #8C8FA0; font-family: var(--wt-sans); font-weight: 400; }
.wt .un-card .wt-field.is-focus { border-color: #8FA6F6; box-shadow: 0 0 0 3px rgba(74, 107, 224, .35); }
.wt .un-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; height: 36px; }
.wt .un-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 110px; padding: 0 18px; border-radius: 18px; background: #4A6BE0; color: #FFFFFF; font: 480 14px/1 var(--wt-sans); }
.wt .un-spin { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #FFFFFF; opacity: 0; }
.wt .on-checking .un-spin { opacity: 1; animation: wt-spin .8s linear infinite; }
.wt .on-checking .un-btn-t { opacity: 0; }
@keyframes wt-spin { to { transform: rotate(360deg); } }
.wt .un-ok { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 10px; font: 480 14.5px/20px var(--wt-sans); color: #5CC992; opacity: 0; transform: translateX(-6px); transition: opacity .35s var(--wt-ease), transform .45s var(--wt-ease-out); }
.wt .on-done .un-ok { opacity: 1; transform: none; }
.wt .wt-tick { width: 24px; height: 24px; fill: none; stroke: #5CC992; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wt .wt-tick-c, .wt .wt-tick-p { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--wt-ease) .05s; }
.wt .wt-tick-p { stroke-width: 2.4; transition-delay: .3s; }
.wt .on-done .wt-tick-c, .wt .on-done .wt-tick-p { stroke-dashoffset: 0; }
.wt .un-foot { font: 400 12.5px/18px var(--wt-sans); color: #9295A5; margin-top: 8px; }
.wt .un-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; border-radius: 10px; background: rgba(160, 166, 200, .10); margin-bottom: 6px; }
.wt .un-seg span { height: 30px; display: grid; place-items: center; border-radius: 8px; font: 480 13px/1 var(--wt-sans); color: #A3A6B4; transition: background .25s, color .25s, box-shadow .25s; }
.wt .on-claude [data-k="u-tab-claude"] { background: #2A2B37; color: #F2F3F7; box-shadow: 0 0 0 1px rgba(160, 166, 200, .2), 0 2px 6px rgba(0, 0, 0, .3); }

/* ------------------------------------------- Sydney Timetable (generic) */
.wt .tt { background: #F4F5F7; color: #1F2A30; }
.wt .tt-login, .wt .tt-app { position: absolute; inset: 0; transition: opacity .4s var(--wt-ease), visibility 0s linear .4s; }
.wt .tt-login { display: grid; place-items: center; background: #F4F5F7; }
.wt .tt-app { opacity: 0; visibility: hidden; display: flex; flex-direction: column; }
.wt .on-app .tt-app { opacity: 1; visibility: visible; transition: opacity .4s var(--wt-ease); }
.wt .on-app .tt-login { opacity: 0; visibility: hidden; }
.wt .tt-logincard { width: 330px; padding: 30px 28px 28px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 1px #DDE1E5, 0 10px 30px rgba(0, 0, 0, .06); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.wt .tt-name { font: 600 20px/26px var(--wt-sans); }
.wt .tt-lsub { font: 400 13px/18px var(--wt-sans); color: #5A6670; margin-bottom: 8px; }
.wt .tt-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; width: 100%; border-radius: 6px; background: #1F2A30; color: #FFFFFF; font: 500 14px/1 var(--wt-sans); }
.wt .tt-bar { height: 52px; flex: none; display: flex; align-items: center; gap: 26px; padding: 0 24px; background: #1F2A30; color: rgba(255, 255, 255, .9); }
.wt .tt-brand { font: 600 15px/1 var(--wt-sans); color: #FFFFFF; }
.wt .tt-nav { display: flex; gap: 4px; font: 400 13px/1 var(--wt-sans); }
.wt .tt-nav span { padding: 8px 12px; border-radius: 6px; }
.wt .tt-nav .is-on { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.wt .tt-bell { margin-left: auto; }
.wt .tt-bell .wt-ico { width: 18px; height: 18px; }
.wt .tt-ava { width: 28px; height: 28px; border-radius: 50%; background: #E6E9EC; color: #1F2A30; display: grid; place-items: center; font: 600 12px/1 var(--wt-sans); }
.wt .tt-body { position: relative; flex: 1; overflow: hidden; }
.wt .tt-scroll { position: absolute; left: 0; right: 0; top: 0; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 16px; }
.wt .tt-cols { display: flex; gap: 16px; align-items: flex-start; }
.wt .tt-card { position: relative; background: #FFFFFF; border-radius: 8px; box-shadow: 0 0 0 1px #DDE1E5; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.wt .tt-h { font: 600 14px/20px var(--wt-sans); margin-bottom: 2px; }
.wt .tt-status { width: 230px; flex: none; }
.wt .tt-st { display: flex; align-items: center; gap: 8px; font: 400 13px/18px var(--wt-sans); color: #33414A; }
.wt .tt-st b { margin-left: auto; font: 600 13px/18px var(--wt-sans); color: #1F2A30; }
.wt .tt-st i { width: 9px; height: 9px; border-radius: 50%; }
.wt .tt-st i.ok { background: #2E8B57; } .wt .tt-st i.pend { background: #D99A1E; } .wt .tt-st i.not { background: #C8102E; }
.wt .tt-enrol { flex: 1; min-width: 0; }
.wt .tt-units { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.wt .tt-unit { display: flex; flex-direction: column; gap: 3px; font: 400 12.5px/17px var(--wt-sans); color: #33414A; }
.wt .tt-code { font: 600 13px/18px var(--wt-sans); color: #1D6FB0; }
.wt .tt-act { display: flex; align-items: center; gap: 6px; }
.wt .tt-act i { width: 7px; height: 7px; border-radius: 50%; background: #2E8B57; }
.wt .tt-act em { font-style: normal; color: #6B7780; }
.wt .tt-p { font: 400 13px/18px var(--wt-sans); color: #5A6670; }
.wt .tt-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; margin-left: -6px; border-radius: 6px; font: 500 14px/20px var(--wt-sans); color: #1D6FB0; text-decoration: underline; text-underline-offset: 3px; }
.wt .tt-link .wt-ico { width: 16px; height: 16px; }
.wt .tt-menu {
  position: absolute; left: 210px; top: 84px; z-index: 5; width: 200px; padding: 5px; border-radius: 9px; display: flex; flex-direction: column;
  background: rgba(246, 246, 248, .96); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 12px 30px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font: 400 13px/1 var(--wt-sans); color: #1B1D29;
  opacity: 0; visibility: hidden; transform: scale(.96); transform-origin: top left; transition: opacity .15s, transform .2s var(--wt-ease-out), visibility 0s linear .2s;
}
.wt .on-menu .tt-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .2s var(--wt-ease-out); }
.wt .tt-menu span { padding: 6px 10px; border-radius: 5px; transition: background .12s, color .12s; }
.wt .tt-menu i { height: 1px; margin: 4px 8px; background: rgba(0, 0, 0, .12); }
.wt .tt-menu .is-hi { background: #2F6FED; color: #FFFFFF; }

/* the UniOne Timetable card */
.wt .un-where { display: flex; align-items: center; gap: 12px; font: 480 12.5px/18px var(--wt-sans); color: #9295A5; margin-bottom: 4px; }
.wt .un-seg.un-two { grid-template-columns: repeat(2, auto); margin: 0; }
.wt .un-seg.un-two span { padding: 0 12px; height: 28px; }
.wt .un-seg .is-sel { background: #2A2B37; color: #F2F3F7; box-shadow: 0 0 0 1px rgba(160, 166, 200, .2), 0 2px 6px rgba(0, 0, 0, .3); }
.wt .un-next { font: 400 13px/18px var(--wt-sans); color: #A3A6B4; margin-top: 2px; opacity: 0; transition: opacity .35s var(--wt-ease) .2s; }
.wt .on-done .un-next { opacity: 1; }
.wt .un-link { align-self: flex-start; margin: 8px 0 0 -4px; padding: 2px 4px; border-radius: 6px; font: 480 13px/18px var(--wt-sans); color: #8FA6F6; }

/* --------------------------------------------------------------- controls */
.wt .wt-poster {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px 0 8px; border: 0; border-radius: 24px; cursor: pointer;
  background: rgba(18, 19, 25, .74); color: #FFFFFF; font: 480 15px/1 var(--wt-sans);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 32px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  transition: transform .15s var(--wt-ease);
}
.wt .wt-poster:hover { background: rgba(18, 19, 25, .84); }
.wt .wt-poster:active { transform: translate(-50%, -50%) scale(.98); }
.wt.is-fresh .wt-poster, .wt.is-ended .wt-poster { display: inline-flex; }
.wt.is-still .wt-poster { display: none; }
.wt .wt-poster-i { width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; color: #121319; display: grid; place-items: center; }
.wt .wt-poster-i .wt-ico { width: 16px; height: 16px; grid-area: 1 / 1; }
.wt .wt-poster .wt-i-play { fill: currentColor; stroke: none; margin-left: 2px; }
.wt .wt-poster .wt-i-replay, .wt.is-ended .wt-poster .wt-i-play { display: none; }
.wt.is-ended .wt-poster .wt-i-replay { display: block; stroke-width: 2.4; }
.wt .wt-poster-d { color: rgba(255, 255, 255, .62); font-weight: 400; font-variant-numeric: tabular-nums; }
/* At the end, Replay waits in the corner so the last frame, the result, stays readable. */
.wt.is-ended .wt-poster { left: auto; top: auto; right: 14px; bottom: 14px; transform: none; height: 40px; padding: 0 16px 0 6px; font-size: 14px; }
.wt.is-ended .wt-poster:active { transform: scale(.98); }
.wt.is-ended .wt-poster-i { width: 28px; height: 28px; }
.wt.is-ended .wt-poster-d { display: none; }

.wt .wt-caption { margin: 0; min-height: 48px; padding: 0 8px; text-align: center; text-wrap: balance; font: 480 16px/24px var(--wt-sans); color: var(--wt-ink); letter-spacing: -.005em; }
.wt .wt-caption.is-in { animation: wt-cap .45s var(--wt-ease) both; }
@keyframes wt-cap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.wt .wt-controls { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; }
.wt .wt-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; flex: none;
  background: var(--wt-ctl); color: var(--wt-ink); box-shadow: 0 0 0 1px var(--wt-line-2); transition: transform .12s var(--wt-ease);
}
.wt .wt-btn:hover { background: var(--wt-ctl-hover); }
.wt .wt-btn:active { transform: scale(.96); }
.wt .wt-btn .wt-ico { grid-area: 1 / 1; width: 16px; height: 16px; }
.wt .wt-play .wt-i-play, .wt .wt-play .wt-i-pause { fill: currentColor; stroke: none; }
.wt .wt-play .wt-i-play { margin-left: 2px; }
.wt .wt-play .wt-i-pause, .wt .wt-play .wt-i-replay { display: none; }
.wt.is-playing .wt-play .wt-i-play { display: none; }
.wt.is-playing .wt-play .wt-i-pause { display: block; }
.wt.is-ended .wt-play .wt-i-play { display: none; }
.wt.is-ended .wt-play .wt-i-replay { display: block; stroke-width: 2.4; }
.wt .wt-prev, .wt .wt-next, .wt .wt-count { display: none; }
.wt.is-still .wt-play { display: none; }
.wt.is-still .wt-prev, .wt.is-still .wt-next { display: inline-grid; }
.wt.is-still.is-first .wt-prev, .wt.is-still.is-last .wt-next { opacity: .4; pointer-events: none; }
.wt.is-still .wt-count { display: block; min-width: 88px; font: 400 13px/20px var(--wt-sans); color: var(--wt-text-2); font-variant-numeric: tabular-nums; }

.wt .wt-dots { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.wt .wt-dots li { display: block; margin: 0; padding: 0; }
.wt .wt-dots li::marker { content: none; }
.wt .wt-dot { position: relative; display: block; width: 20px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .35s var(--wt-ease); }
.wt .wt-dot::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--wt-dot); transition: background .2s; }
.wt .wt-dot:hover::before { background: var(--wt-text-2); }
.wt .wt-dot-fill { position: absolute; left: 6px; right: 6px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--wt-dot-on); transform-origin: left center; transform: scaleX(0); }
.wt .wt-dot[aria-current] { width: 40px; }
.wt .wt-dot:not([aria-current]) .wt-dot-fill { opacity: 0; }

.wt :focus-visible { outline: 2px solid var(--wt-focus); outline-offset: 2px; }
.wt .wt-dot:focus-visible { outline-offset: -2px; border-radius: 8px; }
.wt .wt-poster:focus-visible { outline-color: #FFFFFF; outline-offset: 3px; }

@media (max-width: 480px) {
  .wt { gap: 10px; }
  .wt .wt-viewport { border-radius: 12px; }
  .wt .wt-caption { font-size: 15px; line-height: 22px; min-height: 44px; }
  .wt .wt-poster { height: 40px; padding: 0 16px 0 6px; font-size: 14px; }
  .wt .wt-poster-i { width: 28px; height: 28px; }
  .wt.is-ended .wt-poster { right: 8px; bottom: 8px; height: 34px; }
  .wt.is-ended .wt-poster-i { width: 24px; height: 24px; }
  .wt .wt-dot { width: 17px; }
  .wt .wt-dot::before, .wt .wt-dot-fill { left: 4.5px; right: 4.5px; }
  .wt .wt-dot[aria-current] { width: 34px; }
  .wt.is-still .wt-count { display: none; }
}

/* Still frames: no transitions, no animation, every state lands at once. */
.wt.is-still *, .wt.is-still *::before, .wt.is-still *::after { transition: none !important; animation: none !important; }
/* ---------------------------------------------------------------- notes folder (notes-folder) */
.wt[data-flow="notes-folder"] .wt-uni { top: 30px; height: 540px; }
.wt .nf-card { width: 470px; }
.wt .nf-opts { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; }
.wt .nf-opt { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(160, 166, 200, .16); transition: background .25s, box-shadow .25s; }
.wt .nf-opt b { display: flex; align-items: center; gap: 8px; font: 480 13.5px/18px var(--wt-sans); color: #F2F3F7; }
.wt .nf-opt b em { font: 480 11px/1 var(--wt-sans); font-style: normal; color: #5CC992; }
.wt .nf-ot > span { display: block; font: 400 12px/16px var(--wt-sans); color: #A3A6B4; }
.wt .nf-radio { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #6B6D7B; flex: none; transition: box-shadow .2s; }
.wt .nf-opt.is-sel { background: rgba(160, 166, 200, .10); box-shadow: 0 0 0 1px rgba(143, 166, 246, .6); }
.wt .nf-opt.is-sel .nf-radio { box-shadow: inset 0 0 0 5px #8FA6F6; }
.wt .nf-opt.is-hi { background: rgba(160, 166, 200, .08); box-shadow: 0 0 0 1px rgba(160, 166, 200, .45); }
.wt .nf-how { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(160, 166, 200, .16); font: 400 12.5px/18px var(--wt-sans); color: #CBCDD8; opacity: 0; transform: translateY(4px); transition: opacity .4s var(--wt-ease) .25s, transform .5s var(--wt-ease-out) .25s; }
.wt .nf-how span { display: flex; align-items: center; gap: 9px; }
.wt .nf-how .wt-ico { width: 16px; height: 16px; flex: none; color: #A3A6B4; }
.wt .on-done .nf-how { opacity: 1; transform: none; }
/* The Mac's own folder picker, as a sheet over UniOne. Theme-aware through the browser chrome's tokens. */
.wt .nf-panel { left: 200px; top: 70px; width: 560px; height: 400px; z-index: 12; background: var(--wt-url-bg); color: var(--wt-url-ink); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .3s var(--wt-ease), transform .45s var(--wt-ease-out), visibility 0s linear .45s; }
.wt .on-picker .nf-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--wt-ease), transform .45s var(--wt-ease-out); }
.wt .nf-ptool { height: 40px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--wt-chrome); border-bottom: 1px solid var(--wt-chrome-line); color: var(--wt-chrome-ink); font: 600 13px/1 var(--wt-sans); }
.wt .nf-pnav { display: flex; gap: 4px; }
.wt .nf-ploc { color: var(--wt-url-ink); }
.wt .nf-psearch { margin-left: auto; }
.wt .nf-ploc .nf-l2 { display: none; }
.wt .on-icl .nf-ploc .nf-l1 { display: none; }
.wt .on-icl .nf-ploc .nf-l2 { display: inline; }
.wt .nf-pbody { flex: 1; display: grid; grid-template-columns: 176px 1fr; min-height: 0; }
.wt .nf-side { background: var(--wt-chrome); border-right: 1px solid var(--wt-chrome-line); padding: 8px; display: flex; flex-direction: column; gap: 1px; font: 400 12.5px/1 var(--wt-sans); color: var(--wt-url-ink); }
.wt .nf-side > span { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 6px; white-space: nowrap; }
.wt .nf-side .wt-ico { width: 15px; height: 15px; flex: none; color: #3D63E6; }
.wt .nf-side .nf-sh { height: 24px; padding-top: 10px; font: 600 10.5px/1 var(--wt-sans); color: var(--wt-chrome-ink); }
.wt .nf-side .nf-docs { background: rgba(88, 94, 128, .14); }
.wt .on-icl .nf-side .nf-docs { background: none; }
.wt .nf-side .is-sel { background: rgba(88, 94, 128, .18); }
.wt .nf-list { position: relative; }
.wt .nf-files { position: absolute; inset: 8px 10px; display: flex; flex-direction: column; gap: 1px; transition: opacity .25s var(--wt-ease); }
.wt .nf-icl { opacity: 0; }
.wt .on-icl .nf-icl { opacity: 1; }
.wt .on-icl .nf-docsl { opacity: 0; }
.wt .nf-row { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-radius: 6px; font: 400 13px/1 var(--wt-sans); color: var(--wt-url-ink); }
.wt .nf-row .wt-ico { width: 17px; height: 17px; flex: none; color: #5B8DEF; }
.wt .nf-new { opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--wt-ease), transform .3s var(--wt-ease-out); }
.wt .on-newfolder .nf-new { opacity: 1; transform: none; }
.wt .nf-new.is-sel { background: #3D63E6; color: #FFFFFF; }
.wt .nf-new.is-sel .wt-ico { color: #FFFFFF; }
.wt .nf-pfoot { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-top: 1px solid var(--wt-chrome-line); background: var(--wt-chrome); }
.wt .nf-sp { flex: 1; }
.wt .nf-pbtn { height: 26px; padding: 0 12px; border-radius: 6px; display: inline-flex; align-items: center; font: 400 12.5px/1 var(--wt-sans); color: var(--wt-url-ink); background: var(--wt-url-bg); box-shadow: 0 0 0 1px var(--wt-chrome-line), 0 1px 2px rgba(0, 0, 0, .06); }
.wt .nf-prim { background: #3D63E6; color: #FFFFFF; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .wt *, .wt *::before, .wt *::after { transition: none !important; animation: none !important; }
}
@media print {
  .wt .wt-controls, .wt .wt-poster { display: none; }
}