/* "MY ______?" section after the ME exit (my-picker.js). */
.my-picker{--my-paper:#f5f5f7;--my-ink:#180400;--my-mono:"DM Mono",ui-monospace,SFMono-Regular,Consolas,monospace;--my-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--my-text:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;position:relative;height:760svh;background:var(--my-paper);color:var(--my-ink)}
.my-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.my-room{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.my-sweep{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--my-ink);z-index:3;opacity:0;will-change:transform}

/* The question. */
.my-title-wrap{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none}
.my-title{margin:0;display:flex;align-items:baseline;gap:.22em;font:650 clamp(52px,10vw,190px)/1 var(--my-display);letter-spacing:-.055em;white-space:nowrap;transform-origin:0 50%;will-change:transform;opacity:0}
.my-title>span{display:block}
.my-slot{position:relative;display:block;height:1em;min-width:3em;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;pointer-events:auto}
.my-slot{touch-action:pan-x;-webkit-user-select:none;user-select:none}
.my-slot.is-dragging{cursor:grabbing}
.my-slot:focus-visible{outline:2px solid var(--my-ink);outline-offset:.12em}
/* The reel window: a little taller than a line, fading out above and below. */
.my-window{position:absolute;left:-.05em;right:-.05em;top:-.55em;bottom:-.55em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent);perspective:6em}
.my-drum{position:absolute;left:0;right:0;top:.55em;height:1em;transform-style:preserve-3d;transition:opacity .4s}
.my-picker:not(.is-ready) .my-drum{opacity:0}
.my-face{position:absolute;left:0;right:0;top:0;height:1em;line-height:1em;text-align:center;white-space:nowrap;backface-visibility:hidden;will-change:transform,opacity}
.my-slot.is-blurred .my-drum{filter:blur(.02em)}
/* The blank: a heavy rule under the drum, with short ticks at each end. */
.my-blank{position:absolute;left:0;right:0;bottom:-.12em;height:.06em;background:var(--my-ink)}
.my-blank:before,.my-blank:after{content:"";position:absolute;bottom:0;width:.06em;height:.2em;background:var(--my-ink)}
.my-blank:before{left:0}.my-blank:after{right:0}

.my-hint{position:absolute;z-index:4;left:0;right:0;top:calc(50% + clamp(52px,10vw,190px) * 1.15);margin:0;text-align:center;font:600 10px/1.4 var(--my-mono);letter-spacing:.12em;opacity:0;pointer-events:none}
.my-hint b{display:none;font-weight:inherit}
.my-picker.is-spinning .my-hint .is-spin,.my-picker.is-chosen .my-hint .is-chosen{display:inline}
.my-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* The records strip, riding the centre of the room. */
.my-column{position:absolute;z-index:2;top:0;bottom:0;left:0;width:44%;visibility:hidden;overflow:hidden;background:var(--my-paper);border-inline:1px solid var(--my-ink);will-change:transform}
.my-track{position:absolute;left:0;right:0;top:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;will-change:transform}
.my-track.is-current{opacity:1;visibility:visible;transition:opacity .45s ease}
.my-track.is-leaving,.my-track.is-entering{transition:none}
.my-record{padding:28px 9% 38px;border-bottom:1px solid var(--my-ink)}
.my-record header{display:flex;justify-content:space-between;gap:12px;font:600 10px/1.4 var(--my-mono);letter-spacing:.08em;text-transform:uppercase}
.my-record h3{margin:0 0 12px;font:650 clamp(26px,2.5vw,42px)/1 var(--my-display);letter-spacing:-.045em}
.my-record p{margin:0;font:450 clamp(15px,1.15vw,18px)/1.5 var(--my-text);letter-spacing:-.01em}
.my-record footer{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.my-record footer i{padding:3px 7px;border:1px solid var(--my-ink);font:600 9px/1.3 var(--my-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase}

/* Square previews, each a tiny page in that style. */
.my-preview{position:relative;width:100%;aspect-ratio:1;margin:18px 0 22px;overflow:hidden;border:1px solid var(--my-ink);container-type:inline-size;background:#fff}
.my-preview-1{background:#efece4}
.my-preview-1 em{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25cqw - 1px),rgba(0,0,0,.14) calc(25cqw - 1px) 25cqw)}
.my-preview-1 b{position:absolute;left:5cqw;bottom:-15cqw;font:700 78cqw/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.06em;color:#111}
.my-preview-1 i{position:absolute;right:9cqw;top:9cqw;width:27cqw;height:27cqw;border-radius:50%;background:#e2261c}
.my-preview-1 span{position:absolute;right:7cqw;bottom:7cqw;font:700 3.6cqw/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;text-align:right;color:#111}
.my-preview-2{background:#fff;box-shadow:inset 0 0 0 2.5cqw #000;padding:9cqw;font-family:"Times New Roman",Times,serif;color:#000}
.my-preview-2 h6{margin:0 0 4cqw;font:700 9cqw/1 "Times New Roman",Times,serif;background:#ff0;display:inline-block}
.my-preview-2 p{margin:0 0 6cqw;font:5.2cqw/1.4 "Times New Roman",Times,serif}
.my-preview-2 u{color:#00e;margin-right:2cqw}
.my-preview-2 button{font:600 4.4cqw/1 Arial,sans-serif;padding:2.4cqw 4cqw;border:1cqw outset #ddd;background:#ddd;color:#000}
.my-preview-2 code{position:absolute;left:9cqw;bottom:9cqw;font:4.4cqw/1 "Courier New",monospace}
.my-preview-3{background:linear-gradient(135deg,#ff9a8b 0%,#a18cd1 55%,#8fd3f4 100%)}
.my-preview-3 i{position:absolute;border-radius:50%;filter:blur(1px)}
.my-preview-3 i:nth-child(1){left:8cqw;top:10cqw;width:38cqw;height:38cqw;background:#ffd36e}
.my-preview-3 i:nth-child(2){right:4cqw;bottom:6cqw;width:48cqw;height:48cqw;background:#6a5cff}
.my-preview-3 div{position:absolute;inset:22cqw 14cqw;border-radius:6cqw;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4cqw 10cqw rgba(40,20,90,.25)}
.my-preview-3 span{position:absolute;left:8cqw;top:8cqw;width:14cqw;height:14cqw;border-radius:50%;background:rgba(255,255,255,.7)}
.my-preview-3 b{position:absolute;left:8cqw;right:8cqw;height:3.4cqw;border-radius:2cqw;background:rgba(255,255,255,.6)}
.my-preview-3 b:nth-of-type(1){top:28cqw}.my-preview-3 b:nth-of-type(2){top:36cqw;right:22cqw}
.my-preview-4{background:#e0e5ec}
.my-preview-4 span{position:absolute;left:14cqw;top:14cqw;width:34cqw;height:34cqw;border-radius:50%;background:#e0e5ec;box-shadow:3cqw 3cqw 6cqw #a3b1c6,-3cqw -3cqw 6cqw #fff}
.my-preview-4 i{position:absolute;left:14cqw;right:14cqw;bottom:22cqw;height:8cqw;border-radius:4cqw;box-shadow:inset 1.4cqw 1.4cqw 2.6cqw #a3b1c6,inset -1.4cqw -1.4cqw 2.6cqw #fff}
.my-preview-4 i b{position:absolute;left:40%;top:-1cqw;width:10cqw;height:10cqw;border-radius:50%;background:#e0e5ec;box-shadow:1.4cqw 1.4cqw 3cqw #a3b1c6,-1.4cqw -1.4cqw 3cqw #fff}
.my-preview-4 em{position:absolute;right:14cqw;top:22cqw;width:20cqw;height:20cqw;border-radius:5cqw;box-shadow:inset 1.4cqw 1.4cqw 3cqw #a3b1c6,inset -1.4cqw -1.4cqw 3cqw #fff}
.my-preview-5{display:grid;grid-template:"a a b" 1fr "a a c" 1fr "d e e" 1fr/1fr 1fr 1fr;gap:3cqw;padding:5cqw;background:#f4f1ea}
.my-preview-5 i{border-radius:4cqw}
.my-preview-5 i:nth-child(1){grid-area:a;background:#1f1f1f}
.my-preview-5 i:nth-child(2){grid-area:b;background:#ffcf5c}
.my-preview-5 i:nth-child(3){grid-area:c;background:#d9e6f5}
.my-preview-5 i:nth-child(4){grid-area:d;background:#e8dcff}
.my-preview-5 i:nth-child(5){grid-area:e;background:#c7ebd6}
.my-preview-6{background:radial-gradient(circle at 30% 25%,#8b5a34,#5a3319 70%);}
.my-preview-6:before{content:"";position:absolute;inset:5cqw;border:.8cqw dashed rgba(255,230,190,.55);border-radius:3cqw}
.my-preview-6 div{position:absolute;left:16cqw;top:18cqw;width:40cqw;height:18cqw;border-radius:9cqw;background:linear-gradient(#bfc5cc,#eef1f4 45%,#9aa1a9);box-shadow:inset 0 .8cqw 1.4cqw rgba(0,0,0,.35),0 .6cqw 0 rgba(255,255,255,.25)}
.my-preview-6 span{position:absolute;right:1.4cqw;top:1.4cqw;width:15cqw;height:15cqw;border-radius:50%;background:linear-gradient(#fff,#c8cdd3);box-shadow:0 .8cqw 1.6cqw rgba(0,0,0,.45)}
.my-preview-6 b{position:absolute;left:16cqw;right:16cqw;bottom:16cqw;padding:5cqw 0;border-radius:4cqw;text-align:center;font:700 8cqw/1 "Helvetica Neue",Arial,sans-serif;color:#fff;text-shadow:0 -.4cqw 0 rgba(0,0,0,.4);background:linear-gradient(#8fe07a,#3f9e2f 50%,#2f8a22 51%,#55b845);box-shadow:inset 0 .6cqw 0 rgba(255,255,255,.55),0 1cqw 2cqw rgba(0,0,0,.45)}
.my-preview-7{background:radial-gradient(circle at 70% 20%,#5b2c8f,#0b0b2a 70%)}
.my-preview-7 b{position:absolute;left:0;right:0;top:28cqw;text-align:center;font:900 34cqw/1 "Arial Black","Helvetica Neue",Arial,sans-serif;font-style:italic;letter-spacing:-.04em;background:linear-gradient(180deg,#fff 0%,#aab 40%,#fff 48%,#4a4a66 52%,#dfe0ff 80%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 3cqw rgba(160,120,255,.6))}
.my-preview-7 i{position:absolute;font-style:normal;color:#fff;font-size:10cqw;text-shadow:0 0 3cqw #ff8bf0}
.my-preview-7 i:nth-of-type(1){left:12cqw;top:12cqw}.my-preview-7 i:nth-of-type(2){right:14cqw;bottom:16cqw;font-size:7cqw}
.my-preview-8{background-color:var(--my-paper);background-image:radial-gradient(circle at 70% 30%,transparent 0 18cqw,rgba(245,245,247,.85) 46cqw),linear-gradient(90deg,var(--my-paper) 42%,transparent 42%),linear-gradient(var(--my-paper) 42%,var(--my-ink) 42%);background-size:100% 100%,2.6cqw 2.6cqw,2.6cqw 2.6cqw}
.my-preview-8 span{position:absolute;inset:0;display:grid;place-items:center;font:700 24cqw/1 var(--my-display);letter-spacing:-.05em;color:var(--my-paper)}

/* Process diagrams, drawn in ink. */
.my-diagram{background:var(--my-paper)}
.my-diagram svg{position:absolute;inset:12%;width:76%;height:76%;overflow:visible}
.my-diagram svg *{fill:var(--my-ink);stroke:none}
.my-diagram svg .o{fill:none;stroke:var(--my-ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}

/* The tool wheel. */
.my-track-skills{bottom:0;height:100svh}
.my-wheel{position:absolute;left:0;right:0;top:50%;height:0;perspective:1400px;transform-style:preserve-3d}
.my-skill{position:absolute;left:7%;right:7%;top:0;height:min(30svh,260px);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;column-gap:18px;align-content:center;padding:0 22px;background:var(--my-paper);border:1px solid var(--my-ink);backface-visibility:hidden;will-change:transform,opacity;transition:background-color .3s,color .3s}
.my-skill-no{grid-column:1/3;align-self:start;margin-top:14px;font:600 9px/1 var(--my-mono);letter-spacing:.1em}
.my-skill img{grid-row:2/4;width:clamp(44px,5vw,72px);height:clamp(44px,5vw,72px);object-fit:contain;align-self:center}
.my-skill h3{margin:0;align-self:end;font:650 clamp(24px,2.3vw,38px)/1.05 var(--my-display);letter-spacing:-.04em}
.my-skill p{margin:6px 0 0;align-self:start;font:450 13px/1.4 var(--my-text)}
.my-skill p b{display:block;font:600 9px/1.4 var(--my-mono);letter-spacing:.1em;text-transform:uppercase}
.my-skill.is-front{background:var(--my-ink);color:var(--my-paper)}
.my-skill.is-front img{filter:invert(1)}
.my-wheel-window{position:absolute;left:3%;right:3%;top:50%;height:min(30svh,260px);transform:translateY(-50%);border-block:1px solid var(--my-ink);pointer-events:none}
.my-wheel-window:before,.my-wheel-window:after{content:"";position:absolute;top:50%;width:10px;height:10px;border:1px solid var(--my-ink);transform:translateY(-50%) rotate(45deg);background:var(--my-paper)}
.my-wheel-window:before{left:-5px}.my-wheel-window:after{right:-5px}

@media(max-width:760px){
  .my-picker{height:700svh}
  .my-record{padding:22px 8% 30px}
  .my-skill{grid-template-columns:auto 1fr;padding:0 14px;column-gap:12px}
  .my-skill p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .my-face,.my-track,.my-skill{transition:none}
}

/* The site cursor says DRAG over the wheel (its words are otherwise hidden). */
.fx-cursor.is-label span{display:block!important;opacity:1!important;transform:none!important;color:#000!important;font:750 10px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;letter-spacing:.1em}