/* The Office · custom cursor (three variations, one core). Loaded by cursor.js; nothing here applies until
   html.oc-on is set, which only happens after a real mouse move on a hover + fine pointer device. */

/* ==================== PORT BLOCK START · cursor.css (core) ==================== */
html.oc-on, html.oc-on * { cursor: none !important; }
/* text inputs keep the system I-beam; selects and native controls keep theirs */
html.oc-on :is(input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=image]), textarea, [contenteditable]:not([contenteditable=false])) { cursor: text !important; }
html.oc-on :is(select, input[type=file], input[type=color]) { cursor: default !important; }

.oc { --oc-room: #f3c63f; --oc-on: #161616; --oc-shade: #be9a31; --oc-ink: #161616; --oc-paper: #fbfaf6;
  --oc-spring: cubic-bezier(.3, 1.45, .45, 1); --oc-out: cubic-bezier(.2, .8, .2, 1);
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; contain: strict; overflow: visible; }
.oc, .oc * { pointer-events: none !important; box-sizing: border-box; }
.oc i, .oc b, .oc span, .oc div, .oc svg { position: absolute; left: 0; top: 0; display: block; }
.oc svg { overflow: visible; }
/* before the first mouse move (and on touch) nothing shows */
html:not(.oc-on) .oc { visibility: hidden; }
.oc .js { will-change: transform; }
/* room colour hand-off is a gentle cross-fade, never a snap */
.oc :is(.fill-room) { transition: fill .45s ease, background-color .45s ease; }
/* ==================== PORT BLOCK END · cursor.css (core) ==================== */


/* ==================== PORT BLOCK START · cursor.css (A · The Nib) ==================== */
.oc-a .oca-vis { transform-origin: 0 0; transition: transform .32s var(--oc-spring), opacity .18s linear; }
.oc-a .oca-press { transform-origin: 0 0; transition: transform .16s var(--oc-spring); }
.oc-a .oca-nib { left: -12px; top: -2px; width: 24px; height: 44px; filter: drop-shadow(1.5px 2px 0 rgba(22,22,22,.18)); }
.oc-a .oca-nib .body { fill: var(--oc-room); stroke: var(--oc-ink); stroke-width: 1.6; stroke-linejoin: round; transition: fill .45s ease; }
.oc-a .oca-nib .band { fill: var(--oc-room); transition: fill .45s ease; }
/* hover: the pen lifts a touch, poised to sign */
.oc-a[data-mode=hover] .oca-vis { transform: scale(1.14); }
/* press: the tines splay and the nib squashes onto the paper */
.oc-a[data-pressed] .oca-press { transform: scale(1.16, .8); transition-duration: .07s; }
.oc-a[data-mode=drag] .oca-vis { transform: scale(1.06); }
/* text: the pen steps aside for a caret with a highlighter swipe behind it */
.oc-a[data-mode=text] .oca-vis { transform: translate(8px, 10px) scale(.4); opacity: 0; transition-duration: .2s, .12s; }
.oc-a[data-mode=hidden] .oca-vis, .oc-a[data-mode=native] .oca-vis { transform: translate(9px, 16px) scale(.55); opacity: 0; transition-duration: .28s, .2s; }
.oc-a .oca-caret { opacity: 0; transform: scale(.6, .2); transition: transform .26s var(--oc-spring), opacity .12s linear; }
.oc-a[data-mode=text] .oca-caret { opacity: 1; transform: none; }
.oc-a .oca-caret svg { left: -6px; top: -13px; width: 12px; height: 26px; }
.oc-a .oca-caret .hl { left: -3px; top: -11px; width: 9px; height: 22px; background: var(--oc-room); opacity: .55; transform: rotate(9deg); border-radius: 1px 3px 1px 3px; transition: background-color .45s ease; }
.oc-a[data-pressed][data-mode=text] .oca-caret { transform: scaleY(.86); }

/* the word, handwritten on a paper slip */
.oc-a .oca-slip { left: 16px; top: 22px; padding: 1px 9px 3px 8px; background: var(--oc-paper); border: 1.5px solid var(--oc-ink); color: var(--oc-ink);
  font: 700 21px/1 'Caveat', 'Comic Sans MS', cursive; white-space: nowrap; transform-origin: 0 0; transform: rotate(-5deg) scale(.4); opacity: 0;
  box-shadow: 2px 2px 0 rgba(22,22,22,.16); transition: transform .34s var(--oc-spring), opacity .14s linear; }
.oc-a .oca-slip span { position: relative; display: inline-block; opacity: 0; transform: translateY(5px) rotate(-6deg); transition: transform .3s var(--oc-spring), opacity .16s linear; }
.oc-a .oca-slip::after { content: ''; position: absolute; left: 7px; right: 9px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--oc-room); transform: scaleX(0); transform-origin: 0 50%; transition: transform .32s var(--oc-out) .14s, background-color .45s ease; }
.oc-a:is([data-mode=hover], [data-mode=drag]) .oca-slip { opacity: 1; transform: rotate(-5deg); }
.oc-a:is([data-mode=hover], [data-mode=drag]) .oca-slip span { opacity: 1; transform: none; }
.oc-a:is([data-mode=hover], [data-mode=drag]) .oca-slip::after { transform: scaleX(1); }
.oc-a[data-pressed] .oca-slip { transform: rotate(-2deg) scale(.94); transition-duration: .1s; }

/* ink: a blot on every press, and a line drawn while you drag */
.oc-a .oca-blot { width: 0; height: 0; }
.oc-a .oca-blot svg { left: -10px; top: -10px; width: 20px; height: 20px; }
.oc-a .oca-blot path { fill: var(--oc-room); stroke: var(--oc-ink); stroke-width: 1.2; }
.oc-a .oca-blot.go svg { animation: oca-blot .9s var(--oc-out) forwards; }
@keyframes oca-blot { 0% { transform: scale(0) rotate(-20deg); opacity: 1; } 22% { transform: scale(1.1) rotate(0); opacity: 1; } 34% { transform: scale(1); } 100% { transform: scale(1.18); opacity: 0; } }
.oc-a .oca-line { width: 3px; height: 1px; left: -1.5px; background: var(--oc-ink); transform-origin: 50% 0; opacity: 0; transition: opacity .2s linear; border-radius: 2px; }
.oc-a .oca-start { width: 9px; height: 9px; left: -4.5px; top: -4.5px; border-radius: 50%; background: var(--oc-room); box-shadow: 0 0 0 1.6px var(--oc-ink); opacity: 0; transition: opacity .2s linear, background-color .45s ease; }
.oc-a.inked .oca-line, .oc-a.inked .oca-start { opacity: 1; }
/* ==================== PORT BLOCK END · cursor.css (A · The Nib) ==================== */


/* ==================== PORT BLOCK START · cursor.css (B · Sticky M) ==================== */
.oc-b .ocb-pin { left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--oc-ink); box-shadow: 0 0 0 1.5px var(--oc-paper); z-index: 3; transition: transform .2s var(--oc-spring), opacity .15s linear; }
.oc-b .ocb-vis { transform-origin: 0 0; transition: transform .34s var(--oc-spring), opacity .2s linear; }
.oc-b .ocb-note { left: 0; top: 0; width: 18px; height: 18px; transform-origin: 2px 2px; transition: transform .3s var(--oc-spring), opacity .14s linear; filter: drop-shadow(1.5px 2px 0 rgba(22,22,22,.2)); }
.oc-b .ocb-note svg { width: 18px; height: 18px; display: block; }
.oc-b .ocb-note .n { fill: var(--oc-room); transition: fill .45s ease; }
.oc-b .ocb-note .f { fill: var(--oc-shade); transition: fill .45s ease, transform .25s var(--oc-spring); transform-origin: 18px 18px; }
.oc-b .ocb-note .m { fill: var(--oc-on); transition: fill .45s ease; }
/* the word, picked Icon Note (27 Oct, Design/cursor/word.html?v=a; he didn't want a label glued over content): no words.
   Over a clickable the note grows a touch and its M turns into a tiny picture of the action (eye, play, arrow, paw …).
   The word itself still drives aria/state; .ocb-tag stays in the DOM, hidden. */
.oc-b .ocb-tag { display: none; }
.oc-b .ocb-note .m { transition: fill .45s ease, opacity .12s linear; }
.oc-b .ocb-ic { position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; opacity: 0; transform: scale(.4) rotate(-20deg); transition: transform .3s var(--oc-spring), opacity .12s linear; }
.oc-b .ocb-ic svg { width: 100%; height: 100%; display: block; fill: none; stroke: var(--oc-on); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s ease; }
.oc-b .ocb-ic svg .fill { fill: var(--oc-on); stroke: none; }
.oc-b:is([data-mode=hover], [data-mode=drag]) .ocb-note { transform: scale(1.5) rotate(-4deg); }
.oc-b:is([data-mode=hover], [data-mode=drag]) .ocb-note .m { opacity: 0; }
.oc-b:is([data-mode=hover], [data-mode=drag]) .ocb-ic { opacity: 1; transform: none; }
.oc-b:is([data-mode=hover], [data-mode=drag]) .ocb-swing { transform: none !important; }
/* press: the note slaps flat */
.oc-b[data-pressed] .ocb-vis { transform: scale(.88); transition-duration: .08s; }
.oc-b[data-pressed] .ocb-pin { transform: scale(1.5); }
.oc-b .ocb-ticks { width: 0; height: 0; }
.oc-b .ocb-ticks b { width: 2px; height: 6px; left: -1px; top: -16px; border-radius: 1px; background: var(--oc-ink); opacity: 0; transform-origin: 1px 16px; }
.oc-b .ocb-ticks b:nth-child(1) { transform: rotate(-80deg); } .oc-b .ocb-ticks b:nth-child(2) { transform: rotate(-35deg); } .oc-b .ocb-ticks b:nth-child(3) { transform: rotate(10deg); }
.oc-b .ocb-ticks.go b { animation: ocb-tick .34s var(--oc-out) both; }
@keyframes ocb-tick { 0% { opacity: 0; translate: 0 5px; scale: 1 .3; } 35% { opacity: 1; translate: 0 0; scale: 1 1; } 100% { opacity: 0; translate: 0 -5px; scale: 1 .6; } }
/* text: the note folds down to a page flag beside a caret */
.oc-b .ocb-flag { left: -1px; top: -12px; width: 2px; height: 24px; background: var(--oc-ink); border-radius: 1px; opacity: 0; transform: scaleY(.2); transition: transform .26s var(--oc-spring), opacity .12s linear; }
.oc-b .ocb-flag::before { content: ''; position: absolute; left: -10px; top: 1px; width: 8px; height: 13px; background: var(--oc-room); box-shadow: inset 0 0 0 1.5px var(--oc-ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); transition: background-color .45s ease; }
.oc-b[data-mode=text] .ocb-flag { opacity: 1; transform: none; }
.oc-b[data-mode=text] .ocb-vis, .oc-b[data-mode=text] .ocb-pin { opacity: 0; transform: scale(.3) rotate(-30deg); transition-duration: .18s, .1s; }
/* leaving: the note peels off and drops away */
.oc-b:is([data-mode=hidden], [data-mode=native]) .ocb-vis { transform: translate(4px, 30px) rotate(34deg) scale(.86); opacity: 0; transition: transform .5s cubic-bezier(.5, 0, .75, .3), opacity .4s linear .1s; }
.oc-b:is([data-mode=hidden], [data-mode=native]) .ocb-pin { opacity: 0; transform: scale(0); }
.oc-b.enter .ocb-vis { animation: ocb-in .36s linear both; }
@keyframes ocb-in { 0% { transform: scale(.55); opacity: 0; } 30% { opacity: 1; } 45% { transform: scale(1.12); } 72% { transform: scale(.96); } 100% { transform: scale(1); } }
/* ==================== PORT BLOCK END · cursor.css (B · Sticky M) ==================== */


/* ==================== PORT BLOCK START · cursor.css (C · Circled) ==================== */
.oc-c .occ-dot { left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--oc-ink); box-shadow: 0 0 0 1.5px var(--oc-paper); transition: transform .22s var(--oc-spring), opacity .14s linear; }
.oc-c .occ-ringvis { transition: transform .4s var(--oc-spring), opacity .2s linear; }
.oc-c .occ-ring { left: -22px; top: -22px; width: 44px; height: 44px; animation: occ-spin 14s linear infinite; }
@keyframes occ-spin { to { transform: rotate(360deg); } }
.oc-c path.u { fill: none; stroke: var(--oc-ink); stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.oc-c path.o { fill: none; stroke: var(--oc-room); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s ease; }
.oc-c[data-mode=hover] .occ-ringvis { transform: scale(1.5); }
.oc-c[data-mode=drag] .occ-ringvis { transform: scale(1.3); }
.oc-c[data-pressed] .occ-ringvis { transform: scale(.72); transition-duration: .12s; }
.oc-c[data-pressed] .occ-dot { transform: scale(1.7); }
.oc-c[data-pressed][data-mode=hover] .occ-ringvis { transform: scale(1.2); }
.oc-c.hugging .occ-ringvis { transform: scale(2.2); opacity: 0; transition-duration: .3s, .16s; }
.oc-c.hugging .occ-dot { transform: scale(.75); }
/* the hand-drawn loop that circles a small clickable thing */
.oc-c .occ-hug { width: 0; height: 0; }
.oc-c .occ-hug .hugvis { transition: transform .3s var(--oc-spring), opacity .18s linear; }
.oc-c .occ-hug svg path { transition: stroke-dashoffset .46s cubic-bezier(.55, .1, .25, 1), stroke .45s ease; }
.oc-c .occ-hug:not(.on) .hugvis { opacity: 0; transform: scale(1.06); transition-duration: .2s, .16s; }
.oc-c[data-pressed] .occ-hug .hugvis { transform: scale(.95); transition-duration: .1s; }
/* the word, on a strip of washi tape that unrolls */
.oc-c .occ-tape { left: 24px; top: 16px; height: 22px; padding: 0 12px; display: flex; align-items: center; white-space: nowrap;
  font: 700 10.5px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--oc-on);
  background: repeating-linear-gradient(-55deg, rgba(255,255,255,.22) 0 4px, transparent 4px 9px), var(--oc-room);
  clip-path: polygon(0 0, 100% 0, 97% 20%, 100% 40%, 97% 60%, 100% 80%, 97% 100%, 0 100%, 3% 80%, 0 60%, 3% 40%, 0 20%);
  transform-origin: 0 50%; transform: rotate(-6deg) scaleX(0); opacity: 0; transition: transform .34s cubic-bezier(.3, .9, .3, 1), opacity .1s linear, background-color .45s ease, color .45s ease;
  filter: drop-shadow(0 1px 0 rgba(22,22,22,.35)); }
.oc-c .occ-tape span { position: static; opacity: 0; transition: opacity .16s linear .16s; }
.oc-c .occ-tape.on { opacity: .96; transform: rotate(-6deg); }
.oc-c .occ-tape.on span { opacity: 1; }
/* text: the dot becomes a caret, the ring flattens to an underline */
.oc-c .occ-caret { left: -1px; top: -11px; width: 2px; height: 22px; border-radius: 1px; background: var(--oc-ink); box-shadow: 0 0 0 1px var(--oc-paper); opacity: 0; transform: scaleY(.2); transition: transform .26s var(--oc-spring), opacity .1s linear; }
.oc-c .occ-under { left: -13px; top: 12px; width: 26px; height: 7px; transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s var(--oc-out); }
.oc-c .occ-under svg { width: 26px; height: 7px; }
.oc-c .occ-under path { stroke: var(--oc-room); stroke-width: 2.4; fill: none; stroke-linecap: round; transition: stroke .45s ease; }
.oc-c[data-mode=text] .occ-caret { opacity: 1; transform: none; }
.oc-c[data-mode=text] .occ-under { transform: scaleX(1); transition-delay: .06s; }
.oc-c[data-mode=text] .occ-dot { opacity: 0; transform: scale(.2); }
.oc-c[data-mode=text] .occ-ringvis { opacity: 0; transform: scale(.35, .1); }
.oc-c:is([data-mode=hidden], [data-mode=native]) :is(.occ-dot, .occ-ringvis) { opacity: 0; transform: scale(0); transition-duration: .3s, .2s; }
/* ==================== PORT BLOCK END · cursor.css (C · Circled) ==================== */

/* ==================== PORT BLOCK START · cursor.css (reduced motion) ==================== */
/* no lag (handled in JS), no springs, no spin: states swap with a short fade */
.oc.rm *, .oc.rm *::before, .oc.rm *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
.oc.rm :is(.oca-vis, .oca-slip, .oca-caret, .ocb-vis, .ocb-note, .ocb-tag, .ocb-flag, .occ-ringvis, .occ-tape, .occ-dot, .occ-caret, .hugvis) { transition: opacity .12s linear !important; }
/* ==================== PORT BLOCK END · cursor.css (reduced motion) ==================== */

/* ==================== PORT BLOCK START · cursor.css (edge flips) ==================== */
.oc-a.fx .oca-slip { left: auto; right: 14px; transform-origin: 100% 0; }
.oc-a.fy .oca-slip { top: auto; bottom: 16px; }
.oc-a.fx.fy .oca-slip { transform-origin: 100% 100%; }
.oc-b.fx .ocb-tag { left: auto; right: 0; transform-origin: calc(100% - 2px) 2px; }
.oc-b.fy .ocb-tag { top: auto; bottom: 0; }
.oc-c.fx .occ-tape { left: auto; right: 24px; transform-origin: 100% 50%; }
.oc-c.fy .occ-tape { top: -38px; }
/* ==================== PORT BLOCK END · cursor.css (edge flips) ==================== */