
.intro-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:36px 0 64px;border-top:1px solid #91abb1;border-left:1px solid #91abb1}
.intro-tile{grid-column:span 2;position:relative;border-right:1px solid #91abb1;border-bottom:1px solid #91abb1;display:flex;flex-direction:column;min-width:0;background:#ffffffd9}
.tile-places,.tile-diva,.tile-bevy,.tile-color{grid-column:span 3}
.intro-tile-art{height:180px;display:flex;align-items:center;justify-content:center;padding:18px 24px 0;overflow:hidden}
.intro-tile-art img{display:block;width:100%;height:100%;object-fit:contain}
.tile-places .intro-tile-art,.tile-diva .intro-tile-art{height:260px;padding:24px 24px 0}
.tile-places .intro-tile-art img,.tile-diva .intro-tile-art img{width:158px;object-fit:cover;object-position:center 30%;border:1px solid #91abb1}
.intro-tile-copy{padding:24px;flex:1}.intro-tile-copy h2{font:400 clamp(20px,2vw,27px)/1.25 'DM Sans',sans-serif;color:#002fa7;letter-spacing:-.035em;margin:0 0 12px}.intro-tile-copy p{font:400 15px/1.65 'DM Sans',sans-serif;color:#071e33;margin:0}
.intro-tile::before,.intro-tile::after,.bento-corners::before,.bento-corners::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#002fa7;z-index:2}.intro-tile::before{top:-3px;left:-3px}.intro-tile::after{top:-3px;right:-3px}.bento-corners::before{bottom:-3px;left:-3px}.bento-corners::after{bottom:-3px;right:-3px}
.tile-light{grid-column:span 3}.tile-intj{grid-column:span 3}
@media(max-width:850px){.intro-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-tile{grid-column:span 1}.intro-tile-copy{padding:20px}.intro-tile-art{height:160px}}
@media(max-width:550px){.intro-bento{grid-template-columns:1fr;margin-top:28px;margin-bottom:40px}.intro-tile{grid-column:1}.intro-tile-art{height:180px}.intro-tile-copy{padding:20px 24px 26px}.intro-tile-copy h2{font-size:24px}}
@media(min-width:851px){.tile-questions,.tile-intj{grid-column:span 3}.tile-bevy,.tile-color,.tile-light{grid-column:span 2}}

.tile-graduation .intro-tile-art{height:260px;padding:24px 24px 0}.tile-graduation .intro-tile-art img{width:158px;object-fit:cover;object-position:center 30%;border:1px solid #91abb1}
@media(min-width:851px){.tile-places,.tile-graduation,.tile-diva{grid-column:span 2}}
@media(min-width:551px) and (max-width:850px){.tile-light{grid-column:span 2}}
/* Complete rows at each breakpoint; keep the content in reading order. */
.intro-bento{width:100%;max-width:none;box-sizing:border-box;grid-template-columns:repeat(6,minmax(0,1fr))}
.intro-bento>.intro-tile{grid-column:span 2}
.intro-bento>.tile-questions,.intro-bento>.tile-intj{grid-column:span 3}
@media(min-width:551px) and (max-width:850px){.intro-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-bento>.intro-tile{grid-column:span 1}.intro-bento>.intro-tile:last-child{grid-column:1/-1}}
@media(max-width:550px){.intro-bento{grid-template-columns:minmax(0,1fr)}.intro-bento>.intro-tile{grid-column:1/-1}}

.intro-bento.intro-bento-lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}
.bento-story-column{display:flex;flex-direction:column;min-width:0}.bento-story-column>.intro-tile{flex:1}
.intro-bento.intro-bento-rest{margin-top:0;border-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}.intro-bento-rest>.intro-tile{grid-column:span 1}
@media(max-width:850px){.intro-bento.intro-bento-rest{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-bento-rest>.intro-tile:last-child{grid-column:span 1}}
@media(max-width:550px){.intro-bento.intro-bento-lead,.intro-bento.intro-bento-rest{grid-template-columns:1fr}.intro-bento-rest>.intro-tile{grid-column:1}}

.intro-tile summary{display:block;cursor:pointer;list-style:none}.intro-tile summary::-webkit-details-marker{display:none}.intro-tile summary:focus-visible{outline:2px solid #002fa7;outline-offset:-5px}
.intro-tile summary .intro-tile-copy{padding-bottom:20px}.intro-tile summary h2{margin:0}.intro-tile .bento-details{padding:0 24px 24px;font:400 15px/1.65 'DM Sans',sans-serif}.bento-details>p{margin:0}.intro-tile[open] .bento-details{animation:bento-details-in .22s ease}
@keyframes bento-details-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.bento-story-column>.intro-tile{flex:0 0 auto}.tile-experience .career-section-label{display:none}.tile-experience .career-role{padding:12px 0 16px 20px}.tile-experience .career-meta h2{font-size:20px}.tile-experience .career-detail p{font-size:14px}.tile-experience .career-meta{margin-bottom:8px}
@media(prefers-reduced-motion:reduce){.intro-tile[open] .bento-details{animation:none}}

/* Animate the actual card dimensions, carrying their borders and nodes along. */
.intro-tile.soft-disclosure .bento-details{height:0;overflow:hidden;padding-top:0;padding-bottom:0;opacity:0;animation:none;transition:height .85s cubic-bezier(.22,.61,.36,1),opacity .65s ease,padding-bottom .85s ease}
.intro-tile.soft-disclosure.is-expanded .bento-details{opacity:1;padding-bottom:24px}
.intro-tile .intro-tile-art{transition:height .85s cubic-bezier(.22,.61,.36,1),padding .85s ease}
.intro-tile .intro-tile-copy{transition:padding .85s ease}
@media(hover:hover) and (pointer:fine){.has-expanded>.intro-tile:not(.is-expanded) .intro-tile-art{height:110px;padding-top:12px}.has-expanded>.intro-tile:not(.is-expanded) .intro-tile-copy{padding-top:14px;padding-bottom:14px}.has-expanded>.intro-tile.is-expanded .intro-tile-art{height:220px}}
@media(prefers-reduced-motion:reduce){.intro-tile.soft-disclosure .bento-details,.intro-tile .intro-tile-art,.intro-tile .intro-tile-copy{transition:none}}

@media(min-width:851px){.intro-bento.intro-bento-lead{grid-template-columns:repeat(3,minmax(0,1fr))}.bento-experience-column>.tile-experience{flex:1;min-height:100%}}
@media(min-width:551px) and (max-width:850px){.bento-experience-column{grid-column:1/-1}}
/* Professional experience spans the complete row beneath the intro columns. */
.intro-bento.intro-bento-lead{grid-template-columns:repeat(2,minmax(0,1fr))}
.bento-experience-column{grid-column:1/-1}
.bento-experience-column>.tile-experience{flex:0 0 auto;min-height:0}
@media(max-width:550px){.intro-bento.intro-bento-lead{grid-template-columns:1fr}}
/* Both stacks share the row height; cards divide each column without holes. */
.intro-bento-lead{align-items:stretch}
.intro-bento-lead>.bento-story-column:not(.bento-experience-column){align-self:stretch;display:flex;flex-direction:column}
.intro-bento-lead>.bento-story-column:not(.bento-experience-column)>.intro-tile{flex:1 1 0;transition:flex-grow .85s cubic-bezier(.22,.61,.36,1)}
.intro-bento-lead>.bento-story-column:not(.bento-experience-column)>.intro-tile.is-expanded{flex-grow:1.35}
.intro-bento-lead .bento-experience-column{align-self:stretch}
@media(max-width:550px){.intro-bento-lead>.bento-story-column:not(.bento-experience-column)>.intro-tile{flex:0 0 auto}}

/* Five remaining cards form complete rows below the experience block. */
@media(min-width:851px){.intro-bento.intro-bento-rest{grid-template-columns:repeat(6,minmax(0,1fr))}.intro-bento-rest>.intro-tile{grid-column:span 2}.intro-bento-rest>.tile-questions,.intro-bento-rest>.tile-intj{grid-column:span 3}}
@media(min-width:551px) and (max-width:850px){.intro-bento-rest>.intro-tile:last-child{grid-column:1/-1}}

.bento-image-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;width:100%;height:100%;color:#91abb1}.bento-image-placeholder svg{width:42px;height:42px}.bento-image-placeholder>span{font:10px "DM Sans",sans-serif;letter-spacing:.14em}

/* Frame each photograph; corners follow the image as its card expands. */
.bento-photo-frame{position:relative;display:block;flex:none;height:100%;aspect-ratio:var(--photo-ratio);max-width:100%;border:1px solid #91abb1;box-sizing:border-box}
.intro-tile-art .bento-photo-frame img{width:100%;height:100%;object-fit:cover;border:0}
.tile-places .bento-photo-frame,.tile-graduation .bento-photo-frame,.tile-diva .bento-photo-frame{width:158px;aspect-ratio:auto}
.bento-photo-frame::before,.bento-photo-frame::after,.photo-corners::before,.photo-corners::after{content:"";position:absolute;width:6px;height:6px;background:#002fa7;border-radius:50%;z-index:2;pointer-events:none}
.bento-photo-frame::before{top:-3px;left:-3px}.bento-photo-frame::after{top:-3px;right:-3px}.photo-corners::before{bottom:-3px;left:-3px}.photo-corners::after{bottom:-3px;right:-3px}

/* One consistent portrait size across every About photograph. */
.intro-tile .intro-tile-art:has(.bento-photo-frame){height:260px;padding:24px 24px 6px;box-sizing:border-box;flex-shrink:0}
.intro-tile .intro-tile-art .bento-photo-frame{width:168px;height:224px;aspect-ratio:3 / 4;max-width:100%;flex-shrink:0}
.intro-tile .intro-tile-art .bento-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* Align each card’s text with its centered image. */
.intro-tile .intro-tile-copy,.intro-tile .bento-details{text-align:center}
.tile-experience .career-meta,.tile-experience .career-detail{text-align:center}

/* Center the complete image-and-text group inside each bento cell. */
.intro-tile{justify-content:center}
.intro-tile>summary{width:100%;box-sizing:border-box}
.intro-tile .intro-tile-art{justify-content:center;align-items:center}
.intro-tile .intro-tile-copy,.intro-tile .bento-details{width:100%;box-sizing:border-box;text-align:center}

/* A playful translation of a shared birthday. */
.birthday-translate{padding:28px 24px;color:#071e33;gap:24px}
.birthday-translate-head{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:12px}
.birthday-translate-head>span{display:flex;align-items:center;justify-content:space-between;border:1px solid #91abb1;padding:12px 14px;color:#002fa7;font:500 20px/1.2 'DM Sans',sans-serif}
.birthday-translate-head svg{width:12px;height:8px;fill:none;stroke:currentColor;stroke-width:1.5}
.birthday-translate-head .birthday-swap{width:24px;height:24px;color:#002fa7}
.birthday-translate-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;min-height:150px}
.birthday-translate-body p{margin:0;padding:8px 14px;font:400 clamp(18px,1.6vw,22px)/1.5 'DM Sans',sans-serif;letter-spacing:-.02em}
.birthday-translate-body p+p{background:#002fa708}
.birthday-translate-foot{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #91abb1;padding-top:12px;font:400 12px/1.5 'DM Sans',sans-serif;color:#526a7d}
@media(max-width:550px){.birthday-translate{padding:24px 18px;gap:18px}.birthday-translate-head{gap:8px;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}.birthday-translate-head>span{font-size:18px;padding:10px}.birthday-translate-head .birthday-swap{width:20px}.birthday-translate-body{gap:20px;min-height:160px}.birthday-translate-body p{font-size:17px;padding:8px 10px}.birthday-translate-foot{font-size:11px}}

.translate-brand{display:flex;align-items:center;gap:10px;font:400 20px/1.3 'DM Sans',sans-serif;color:#526a7d}.translate-symbol{font-size:17px;color:#002fa7;border:1px solid #91abb1;padding:4px;letter-spacing:-2px}.birthday-translate-button{border:0;background:#002fa7;color:white;padding:9px 18px;font:500 13px/1.3 'DM Sans',sans-serif;cursor:pointer;border-radius:3px}.birthday-translate-button:hover{background:#002781}.birthday-translate-button:focus-visible{outline:2px solid #002fa7;outline-offset:4px}.birthday-translate-foot{align-items:center}.translation-placeholder{color:#71818e}.birthday-translation.is-translated{animation:translation-reveal .25s ease}@keyframes translation-reveal{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.birthday-translation.is-translated{animation:none}}

/* Translation layout follows the stacked Google Translate panel. */
.birthday-translate{padding:28px 24px;gap:24px}
.birthday-translate-head>span{border-radius:12px;font-size:18px;padding:15px 16px}
.birthday-translate-body{display:flex;flex-direction:column;gap:18px;min-height:0}
.birthday-source{min-height:160px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:0 16px 10px}
.birthday-translate-body .birthday-source p{padding:8px 0;font-size:24px;line-height:1.45;max-width:340px}
.birthday-translate-button{display:flex;align-items:center;gap:10px;background:transparent;color:#526a7d;padding:8px 0;border-radius:4px;font-size:12px}
.birthday-translate-button svg{width:22px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.birthday-translate-button svg rect{fill:currentColor;stroke:none}
.birthday-translate-button:hover{background:transparent;color:#002fa7}
.birthday-translate-body .birthday-translation{min-height:145px;padding:22px 20px;background:#002fa708;border-radius:12px;font-size:24px;line-height:1.45}
.birthday-translate-foot{border:0;padding-top:0;justify-content:flex-end;gap:14px}
.translate-footer-rule{height:1px;background:#91abb1;flex:1}
@media(max-width:550px){.birthday-translate{padding:24px 18px}.birthday-translate-head>span{font-size:16px;padding:13px 12px}.birthday-translate-body .birthday-source p,.birthday-translate-body .birthday-translation{font-size:22px}.birthday-source{min-height:150px;padding-left:12px}.birthday-translate-body .birthday-translation{min-height:150px}}

.birthday-translation.is-typing::after{content:'';display:inline-block;width:1px;height:1em;background:#002fa7;margin-left:3px;vertical-align:-.1em;animation:translation-caret .7s steps(1) infinite}@keyframes translation-caret{50%{opacity:0}}

/* Give the graduation portrait more presence without cropping it. */
.intro-tile.tile-graduation .intro-tile-art{height:auto;padding:28px 24px 8px;overflow:visible}
.intro-tile.tile-graduation .intro-tile-art .bento-photo-frame{width:min(280px,100%);height:auto;aspect-ratio:1080 / 1600}
.intro-tile.tile-graduation .intro-tile-art .bento-photo-frame img{position:absolute;inset:0;object-fit:contain}
@media(max-width:550px){.intro-tile.tile-graduation .intro-tile-art .bento-photo-frame{width:min(240px,100%)}}

.michelangelo-name{color:#002fa7}

.intro-tile.tile-graduation .intro-tile-art .bento-photo-frame{max-height:none;aspect-ratio:auto;height:auto;flex-shrink:1}
.intro-tile.tile-graduation .intro-tile-art .bento-photo-frame img{position:static;display:block;width:100%;height:auto;max-height:none;object-fit:initial}

/* Keep the enlarged portrait in normal flow during sibling disclosure. */
.intro-bento .bento-story-column .intro-tile.tile-graduation .intro-tile-art{height:auto;min-height:0;padding:28px 24px 8px;transition:none;overflow:hidden}
.intro-bento .bento-story-column .intro-tile.tile-graduation{min-height:min-content;flex-basis:auto}
/* Remove the space formerly reserved for the microphone. */
.birthday-source{min-height:0;padding:0 16px}
.birthday-translate-body{gap:20px}
.birthday-translate-body .birthday-translation{min-height:0;padding:22px 20px}
.birthday-translate{justify-content:flex-start;gap:22px}
@media(max-width:550px){.birthday-source{min-height:0;padding:0 12px}.birthday-translate-body .birthday-translation{min-height:0}.birthday-translate-body{gap:18px}}

.translate-mode-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.translate-mode{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid #cdd6e0;border-radius:24px;color:#002fa7;font:500 14px/1.2 'DM Sans',sans-serif;white-space:nowrap}
.translate-mode.is-active{background:#002fa712;border-color:transparent}
.translate-mode svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:550px){.translate-mode-tabs{gap:6px}.translate-mode{font-size:12px;padding:8px 10px;gap:5px}.translate-mode svg{width:17px;height:17px}}

/* A tilted selection frame for the painting slideshow. */
.intro-tile.tile-paint .intro-tile-art{overflow:visible;padding:30px 30px 18px}
.intro-tile.tile-paint .intro-tile-art .bento-photo-frame{transform:rotate(-3deg);border:2px solid #002fa7;isolation:isolate;max-width:90%}
.tile-paint .bento-photo-frame::before,.tile-paint .bento-photo-frame::after,.tile-paint .photo-corners::before,.tile-paint .photo-corners::after{width:11px;height:11px;background:#fff;border:2px solid #002fa7;box-sizing:border-box;border-radius:50%}
.tile-paint .bento-photo-frame::before{top:-6px;left:-6px}.tile-paint .bento-photo-frame::after{top:-6px;right:-6px}.tile-paint .photo-corners::before{bottom:-6px;left:-6px}.tile-paint .photo-corners::after{bottom:-6px;right:-6px}
.painting-resize-handles{position:absolute;inset:-2px;pointer-events:none;z-index:3}
.painting-resize-handles::before,.painting-resize-handles::after{content:'';position:absolute;left:50%;width:32px;height:10px;border:2px solid #002fa7;border-radius:7px;background:#fff;transform:translateX(-50%);box-sizing:border-box}
.painting-resize-handles::before{top:-5px}.painting-resize-handles::after{bottom:-5px}
.painting-side-handles{position:absolute;inset:-2px;pointer-events:none;z-index:3}
.painting-side-handles::before,.painting-side-handles::after{content:'';position:absolute;top:50%;width:10px;height:32px;border:2px solid #002fa7;border-radius:7px;background:#fff;transform:translateY(-50%);box-sizing:border-box}
.painting-side-handles::before{left:-5px}.painting-side-handles::after{right:-5px}

/* Shared selection frame for all About card photographs. */
.intro-tile .intro-tile-art:has(.bento-photo-frame){overflow:visible;padding-left:30px;padding-right:30px}
.intro-tile .intro-tile-art .bento-photo-frame{transform:rotate(-3deg);border:2px solid #002fa7;isolation:isolate;max-width:90%}
.intro-tile .bento-photo-frame::before,.intro-tile .bento-photo-frame::after,.intro-tile .photo-corners::before,.intro-tile .photo-corners::after{width:11px;height:11px;background:#fff;border:2px solid #002fa7;box-sizing:border-box;border-radius:50%}
.intro-tile .bento-photo-frame::before{top:-6px;left:-6px}.intro-tile .bento-photo-frame::after{top:-6px;right:-6px}.intro-tile .photo-corners::before{bottom:-6px;left:-6px}.intro-tile .photo-corners::after{bottom:-6px;right:-6px}
.intro-bento .bento-story-column .intro-tile.tile-graduation .intro-tile-art{overflow:visible;padding-top:36px;padding-bottom:18px}

.intro-tile.intj-dictionary{background:#fff;min-height:360px;padding:56px 40px;box-sizing:border-box;justify-content:center}
.intj-entry{width:100%;max-width:370px;margin:auto;text-align:left;color:#071e33}
.intj-entry h2{font:700 clamp(44px,5vw,64px)/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:0 0 14px;color:#071e33}
.intj-entry p{font:400 clamp(23px,2.5vw,30px)/1.4 Georgia,'Times New Roman',serif;letter-spacing:-.025em;margin:0}
.intj-part{white-space:nowrap}
@media(max-width:550px){.intro-tile.intj-dictionary{min-height:330px;padding:44px 30px}.intj-entry h2{font-size:52px}.intj-entry p{font-size:26px}}

.intj-dictionary .intj-entry{max-width:440px}.intj-dictionary .intj-entry h2{margin-bottom:26px}.intj-dictionary .intj-entry p{font:400 18px/1.6 'DM Sans',sans-serif;letter-spacing:-.02em;margin:0 0 24px}.intj-dictionary .intj-entry p:last-child{margin-bottom:0}.intj-blue{color:#002fa7;text-decoration:underline;text-underline-offset:3px}

.intro-tile.intj-dictionary{padding:28px 22px;min-height:420px}
.intj-browser{border:1px solid #91abb1;border-radius:10px;overflow:hidden;background:#fff;width:100%;max-width:480px;margin:auto;box-shadow:0 4px 14px #071e3308}
.intj-browser-top{display:flex;align-items:center;gap:14px;background:#edf0f4;padding:10px 12px 0}
.intj-browser-lights{display:flex;gap:5px;padding-bottom:10px}.intj-browser-lights i{width:7px;height:7px;border-radius:50%;background:#ff6058}.intj-browser-lights i:nth-child(2){background:#ffbd2e}.intj-browser-lights i:nth-child(3){background:#28c840}
.intj-browser-tab{padding:8px 15px;background:#fff;border-radius:7px 7px 0 0;font:400 11px/1.3 'DM Sans',sans-serif;color:#526a7d;display:flex;align-items:center;gap:18px}.intj-browser-tab b{font-weight:400;color:#71818e}
.intj-address{margin:8px 12px;padding:7px 12px;background:#f4f5f7;border-radius:5px;color:#526a7d;font:400 10px/1.4 'DM Sans',sans-serif;overflow-wrap:anywhere}
.intj-ud-header{background:#071e33;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:13px 20px;font:700 15px/1.1 Georgia,serif}.intj-ud-header span{font:400 18px/1 sans-serif;color:#fff}
.intj-dictionary .intj-entry{padding:24px 22px;box-sizing:border-box;max-width:none}
.intj-dictionary .intj-entry h2{font:700 42px/1.1 Georgia,serif;color:#002fa7;margin:0 0 20px}
.intj-dictionary .intj-entry p{font-size:15px;line-height:1.6;margin-bottom:18px}
.intj-entry-footer{border-top:1px solid #dbe1e8;padding-top:15px;display:flex;justify-content:space-between;align-items:center;color:#526a7d;font:400 11px/1.4 'DM Sans',sans-serif}
.intj-entry-votes{display:flex;border:1px solid #dbe1e8;border-radius:20px;overflow:hidden}.intj-entry-votes span{padding:6px 10px}.intj-entry-votes span+span{border-left:1px solid #dbe1e8}
@media(max-width:550px){.intro-tile.intj-dictionary{padding:24px 15px}.intj-browser-tab{font-size:10px;padding:8px 10px}.intj-dictionary .intj-entry{padding:22px 18px}}

/* Four remaining cards fill two complete rows. */
.intro-bento.intro-bento-rest{grid-template-columns:repeat(2,minmax(0,1fr))}
.intro-bento.intro-bento-rest>.intro-tile{grid-column:auto}
@media(max-width:550px){.intro-bento.intro-bento-rest{grid-template-columns:minmax(0,1fr)}.intro-bento.intro-bento-rest>.intro-tile{grid-column:1}}

.ud-wordmark{font:700 38px/1 Georgia,serif;letter-spacing:-2px;color:#eef0f3;transform:rotate(-2deg);margin:12px 20px 16px}.ud-wordmark small{display:block;background:#06080c;color:#e6ef31;font:700 8px/1.5 monospace;letter-spacing:4px;padding:0 7px;margin-left:30px;transform:rotate(2deg)}
.intj-ud-header{padding:0;background:#222833;min-height:62px}.intj-ud-header img{display:block;width:155px;height:auto}.intj-ud-header{justify-content:flex-start}
.intj-browser{background:#eae8e2}
.intj-dictionary .intj-entry{width:calc(100% - 24px);margin:16px 12px 20px;background:#fff;border-radius:18px;padding:24px 22px;box-shadow:0 3px 5px #071e3310}
.intj-entry-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.intj-entry-title>span{color:#6b7381;font-size:20px}
.intj-dictionary .intj-entry h2{color:#000;font-size:46px;margin-bottom:22px}
.intj-dictionary .intj-entry p{color:#071e33;font-size:15px;line-height:1.65}
.intj-entry blockquote{margin:22px 0;padding:0 0 0 16px;border-left:3px solid #002fa7;font:italic 15px/1.65 'DM Sans',sans-serif;color:#071e33}
.intj-dictionary .intj-entry-footer{font-size:10px;gap:10px}

/* The reference is a definition block, without browser chrome. */
.intro-tile.intj-dictionary{background:#fff;padding:30px 24px;justify-content:center}
.intj-dictionary .intj-entry{width:100%;max-width:460px;margin:auto;border:1px solid #dce3ed;border-radius:20px;padding:28px 24px;background:#fff;box-shadow:0 3px 8px #002fa708}
.intj-dictionary .intj-entry h2{color:#002fa7;font-size:48px}
.intj-dictionary .intj-entry-footer{border-color:#dce3ed}
@media(max-width:550px){.intro-tile.intj-dictionary{padding:24px 16px}.intj-dictionary .intj-entry{padding:24px 20px}}

.intj-ud-mark{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#002fa7;color:#fff;font:700 28px/1 Georgia,serif;letter-spacing:-3px;padding-right:3px;box-sizing:border-box;margin-bottom:22px}

/* Let content determine each cell’s minimum height, including the definition. */
.intro-bento-lead>.bento-story-column:not(.bento-experience-column)>.intro-tile{flex:1 0 auto;min-height:min-content}
.intro-bento-lead>.bento-story-column:not(.bento-experience-column)>.intro-tile.intj-dictionary{flex:1 0 auto;min-height:min-content;padding:28px 24px}
.intj-dictionary .intj-entry{flex-shrink:0;margin:auto;width:100%;box-sizing:border-box}
@media(max-width:550px){.intro-bento-lead>.bento-story-column:not(.bento-experience-column)>.intro-tile{flex:0 0 auto}}

.intj-dictionary .intj-entry{border:0;border-radius:0;box-shadow:none;border-top:1px solid #dce3ed;padding:20px 0 0;max-width:440px}
.intj-dictionary .intj-entry h2{font:400 54px/1.1 'DM Sans',sans-serif;letter-spacing:-.04em;margin-bottom:14px;color:#002fa7}
.intj-grammar{font:700 italic 19px/1.4 'DM Sans',sans-serif;color:#071e33;margin-bottom:12px}
.intj-pronunciation{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 13px/1.5 'DM Sans',sans-serif;color:#002fa7;padding-bottom:20px;margin-bottom:20px;border-bottom:3px solid #002fa7}
.intj-pronunciation span:nth-child(odd){font-weight:700}.intj-dictionary .intj-entry p{font-size:18px;line-height:1.6;margin-bottom:0}

.intj-dictionary .intj-entry .intj-definition{margin-bottom:18px}

/* Keep the dictionary details inside the Urban Dictionary style definition block. */
.intj-dictionary .intj-entry{background:#fff;border:1px solid #dce3ed;border-radius:20px;box-shadow:0 3px 8px #002fa708;padding:28px 24px;width:100%;max-width:460px;margin:auto;box-sizing:border-box}
@media(max-width:550px){.intj-dictionary .intj-entry{padding:24px 20px}}

.intj-dictionary .intj-entry h2{font-family:Arial,Helvetica,sans-serif}
.intj-dictionary .intj-entry h2{font-weight:400;letter-spacing:-.025em}

.intj-dictionary .intj-entry p,.intj-dictionary .intj-grammar,.intj-dictionary .intj-pronunciation{font-family:'DM Sans',sans-serif}

.intj-dictionary .intj-entry .intj-example{border-left:4px solid #002fa7;padding:0 0 0 18px;margin:24px 0 0;font:italic 400 18px/1.6 'DM Sans',sans-serif}.intj-example .intj-blue{text-decoration-thickness:1px;text-underline-offset:3px}

.intro-bento .tile-paint .intro-tile-art{height:auto!important;min-height:0;padding:28px 24px 10px;overflow:visible}
.paint-window{width:100%;max-width:430px;background:#c0c0c0;border:2px solid;border-color:#fff #444 #444 #fff;padding:3px;box-shadow:1px 1px 0 #071e33;font:11px/1.2 Arial,sans-serif;color:#111;box-sizing:border-box}
.paint-title{background:#002fa7;color:#fff;display:flex;justify-content:space-between;padding:3px 4px;font-weight:bold;align-items:center}.paint-title-controls{color:#111;background:#c0c0c0;letter-spacing:2px;padding:0 2px;font-size:10px}
.paint-menu{display:flex;gap:12px;padding:5px 3px;font-size:10px}
.paint-workspace{display:flex;gap:5px;align-items:stretch}.paint-tools{display:grid;grid-template-columns:repeat(2,19px);grid-auto-rows:23px;align-content:start;gap:1px;padding-top:2px}.paint-tools span{display:flex;align-items:center;justify-content:center;border:1px solid;border-color:#fff #777 #777 #fff;font-size:13px;background:#c0c0c0}
.paint-canvas{flex:1;min-width:0;background:#fff;border:2px solid;border-color:#777 #fff #fff #777;display:flex;align-items:center;justify-content:center;padding:5px 7px 14px;position:relative}
.intro-tile.tile-paint .paint-canvas .bento-photo-frame{width:100%;height:auto;max-width:100%;max-height:none;aspect-ratio:4/3;transform:none;border:0;background:#fff}
.intro-tile.tile-paint .paint-canvas .bento-photo-frame img{width:100%;height:100%;object-fit:contain}
.tile-paint .paint-canvas .bento-photo-frame::before,.tile-paint .paint-canvas .bento-photo-frame::after,.tile-paint .paint-canvas .photo-corners,.tile-paint .paint-canvas .painting-resize-handles,.tile-paint .paint-canvas .painting-side-handles{display:none}
.paint-canvas::after{content:'';position:absolute;bottom:2px;left:2px;right:2px;height:8px;background:linear-gradient(90deg,#777 0 3%,#c0c0c0 3% 80%,#eee 80%);border:1px solid #999}
.paint-palette{display:flex;gap:2px;padding:8px 3px;flex-wrap:wrap;max-width:220px}.paint-palette i{width:12px;height:12px;background:var(--swatch);border:1px solid;border-color:#777 #fff #fff #777;box-sizing:border-box}
.paint-status{font-size:9px;padding:4px;border:1px solid;border-color:#777 #fff #fff #777}
@media(max-width:550px){.intro-bento .tile-paint .intro-tile-art{padding:24px 16px 10px}.paint-menu{gap:9px}.paint-tools{grid-template-columns:repeat(2,16px);grid-auto-rows:21px}}

.intro-tile.tile-paint .paint-canvas{padding:0 0 12px;align-items:flex-start}
.intro-tile.tile-paint .paint-canvas .bento-photo-frame{aspect-ratio:auto;height:auto;width:100%;max-height:none}
.intro-tile.tile-paint .paint-canvas .bento-photo-frame img{display:block;width:100%;height:auto;object-fit:initial}

/* Fill the Paint canvas, cropping the photographed paper margins. */
.intro-tile.tile-paint .paint-canvas .bento-photo-frame{aspect-ratio:4/3;overflow:hidden;background:#c0c0c0}
.intro-tile.tile-paint .paint-canvas .bento-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.24);transform-origin:center}
.tile-paint .paint-canvas .places-pixels{transform:scale(1.24);transform-origin:center}

.intro-bento .intro-tile.tile-paint .intro-tile-art .paint-window .paint-canvas{display:block;flex:1 1 0;min-width:0;padding:0 0 12px;overflow:hidden}
.intro-bento .intro-tile.tile-paint .intro-tile-art .paint-window .bento-photo-frame{display:block;position:relative;width:100%;height:auto;max-height:none;max-width:none;aspect-ratio:4/3;flex:none;transform:none;border:0;overflow:hidden;margin:0}
.intro-bento .intro-tile.tile-paint .intro-tile-art .paint-window .bento-photo-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.15);object-position:center}
.intro-bento .intro-tile.tile-paint .intro-tile-art .paint-window .places-pixels{inset:0;width:100%;height:100%;transform:scale(1.15)}

.intro-bento .tile-color .intro-tile-art{height:auto!important;min-height:0;padding:30px 24px 10px}
.boston-color-surround{background:#8b393e;padding:22px;width:224px;max-width:100%;box-sizing:border-box}
.boston-color-card{background:#fff;padding:5px;box-shadow:0 2px 5px #0002;color:#000}
.boston-color-swatch{height:170px;background:#8b393e}
.boston-color-label{padding:10px 2px 4px;font:700 12px/1.35 Arial,Helvetica,sans-serif;text-align:left}
.boston-color-label strong{display:block;font-size:23px;line-height:1.1;letter-spacing:-.6px;margin-bottom:5px}
.boston-color-label sup{font-size:10px;vertical-align:super}
.boston-color-label span{display:block}

.boston-color-swatch{height:auto;aspect-ratio:1086 / 1024;overflow:hidden;position:relative}
.boston-color-swatch img{display:block;width:100%;height:auto;max-width:none}
.boston-color-surround{width:290px;max-width:100%;padding:18px}

.boston-color-surround{background:transparent;padding:0}.boston-color-card{box-shadow:none}

.boston-color-card{padding:6px 6px 0;background:#fff;border:1px solid #e1e1df;box-shadow:0 3px 9px #071e3318}
.boston-color-label{padding:12px 5px 15px;min-height:63px;box-sizing:border-box}
.boston-color-label strong{font-size:25px;margin-bottom:6px}

.boston-color-swatch{position:relative;aspect-ratio:1086/1024;background:#8b393e}
.boston-color-swatch .color-photo{position:absolute;top:0;left:0;width:100%;height:auto;opacity:0;transition:opacity 1.1s ease}
.boston-color-swatch .color-photo.is-active{opacity:1}
.boston-color-swatch .color-photo-la{height:100%;object-fit:cover;object-position:center 38%}
@media(prefers-reduced-motion:reduce){.boston-color-swatch .color-photo{transition:none}}

.boston-color-swatch .color-photo-chicago{height:100%;object-fit:cover;object-position:center 35%}

.boston-color-card{cursor:pointer}.boston-color-card:focus-visible{outline:2px solid #002fa7;outline-offset:5px}

.intro-bento .tile-light .intro-tile-art{height:auto!important;min-height:0;overflow:visible;padding:48px 24px 12px}
.streak-pack{position:relative;width:260px;max-width:100%;box-sizing:border-box;padding:22px 20px 14px;border-radius:13px;background:linear-gradient(120deg,#164cba,#002fa7 65%,#002680);border:1px solid #003599;box-shadow:inset 1px 1px 1px #ffffff65,inset -2px -2px 2px #001c65,3px 6px 9px #071e3322;color:#fff}
.streak-hanger{position:absolute;left:50%;top:-29px;transform:translateX(-50%);width:76px;height:32px;border:1px solid #8f9ba9;border-radius:12px 12px 0 0;background:linear-gradient(110deg,#ffffffbb,#cad1d666);box-shadow:inset 0 0 0 2px #ffffff88;z-index:-1}
.streak-hanger::after{content:'';position:absolute;left:22px;right:22px;top:10px;height:9px;border:1px solid #8994a2;border-radius:6px;box-shadow:inset 0 1px 2px #071e3322}
.streak-pack-title{text-align:center;font:700 29px/1.1 Georgia,serif;letter-spacing:-1px;margin-bottom:18px}.streak-pack-title span{display:block;font:italic 15px/1.5 Georgia,serif;letter-spacing:0;margin-top:5px}
.streak-blister{position:relative;padding:12px;border-radius:20px;border:1px solid #ffffffa0;background:linear-gradient(125deg,#ffffff38,#ffffff05 40%,#00194c33);box-shadow:inset 2px 2px 2px #ffffffa0,inset -3px -3px 4px #001a66,0 0 0 3px #002b8d,0 0 0 4px #ffffff40,3px 5px 5px #00184a77}
.intro-tile .intro-tile-art .streak-blister img{display:block;width:100%;height:auto;object-fit:contain;border-radius:10px}
.streak-blister::after{content:'';position:absolute;inset:3px;border-radius:18px;pointer-events:none;background:linear-gradient(120deg,#ffffff35,transparent 25%,transparent 75%,#ffffff18);border:1px solid #ffffff45}
.streak-pack-foot{display:block;text-align:center;font:500 8px/1.4 'DM Sans',sans-serif;letter-spacing:1px;margin-top:16px}

.streak-pack-title{font:500 24px/1.2 'DM Sans',sans-serif;letter-spacing:-.035em}.streak-pack-title span{font:400 12px/1.5 'DM Sans',sans-serif;letter-spacing:0}

.intro-bento.intro-bento-rest>.tile-trades{grid-column:1/-1;padding:38px 30px;box-sizing:border-box;align-items:center}
.trades-sheet{width:100%;max-width:560px;margin:auto;color:#071e33}
.trades-sheet h2{font:500 clamp(27px,3vw,36px)/1.2 'DM Sans',sans-serif;letter-spacing:-.04em;color:#002fa7;margin:0 0 12px;padding-bottom:16px;border-bottom:1px solid #91abb1}
.trades-intro{font:400 16px/1.6 'DM Sans',sans-serif;margin:0 0 20px}
.trades-list{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px;font:400 14px/1.4 'DM Sans',sans-serif;margin-bottom:22px}
.trades-list span{text-decoration:line-through;text-decoration-color:#002fa7;text-decoration-thickness:2px}
.trades-note{font:400 12px/1.5 'DM Sans',sans-serif;margin:0 0 18px;color:#526a7d}
.trades-puzzle{position:relative;width:100%;aspect-ratio:1}
.trades-letters{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));grid-template-rows:repeat(14,minmax(0,1fr));position:absolute;inset:0;font:600 clamp(12px,2.6vw,24px)/1 'DM Sans',sans-serif}
.trades-letters span{display:flex;align-items:center;justify-content:center}
.trades-puzzle svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.trades-puzzle rect{fill:#002fa706;stroke:#002fa7;stroke-width:1.7}
@media(max-width:550px){.intro-bento.intro-bento-rest>.tile-trades{padding:30px 18px}.trades-letters{font-size:clamp(11px,3.4vw,18px)}.trades-list{font-size:12px;gap:7px 10px}}

.trades-letters{grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));font-size:clamp(16px,3vw,29px)}
.trades-list span{text-decoration:none;animation:none}
.trades-scribble{fill:none;stroke:#002fa7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.is-drawing .trades-scribble{animation:circle-skill .7s ease forwards;animation-delay:var(--scribble-delay)}
@keyframes circle-skill{to{stroke-dashoffset:0}}
@media(max-width:550px){.trades-letters{font-size:clamp(15px,4.8vw,23px)}}
@media(prefers-reduced-motion:reduce){.trades-scribble{stroke-dashoffset:0}.is-drawing .trades-scribble{animation:none}}

.trades-sheet{max-width:420px}
.trades-puzzle{max-width:340px;margin:0 auto}
.trades-letters{font-size:21px}
.trades-list span{position:relative;width:max-content;max-width:100%;text-decoration:none}
.trades-list span::after{content:'';position:absolute;left:-3px;right:-3px;top:52%;height:2px;background:#002fa7;transform:scaleX(0) rotate(-2deg);transform-origin:left}
.trades-sheet.is-drawing .trades-list span::after{animation:strike-skill .7s ease forwards;animation-delay:var(--strike-delay)}
@keyframes strike-skill{to{transform:scaleX(1) rotate(-2deg)}}
@media(max-width:550px){.trades-puzzle{max-width:300px}.trades-letters{font-size:clamp(14px,4.5vw,19px)}}
@media(prefers-reduced-motion:reduce){.trades-list span::after{transform:scaleX(1)}.trades-sheet.is-drawing .trades-list span::after{animation:none}}

.boston-color-swatch .color-photo-nyc{height:100%;object-fit:cover;object-position:center}

.intj-heading-intro{display:block;font:400 18px/1.4 'DM Sans',sans-serif;letter-spacing:0;margin-bottom:8px;color:#071e33}

.paint-tools.paint-tools-reference{display:block;position:relative;flex:0 0 42px;width:42px;height:168px;padding:0;overflow:hidden;margin-top:1px}
.intro-tile .intro-tile-art .paint-tools-reference img{position:absolute;width:400%;max-width:none;height:133.333%;left:-150%;top:-16.667%;object-fit:fill;image-rendering:pixelated}
@media(max-width:550px){.paint-tools.paint-tools-reference{flex-basis:36px;width:36px;height:144px}}

.paint-palette.paint-palette-reference{display:block;width:100%;max-width:310px;padding:5px 0 3px}
.intro-tile .intro-tile-art .paint-palette-reference img{display:block;width:100%;height:auto;object-fit:contain;image-rendering:pixelated}

.career-player{padding:36px 30px;box-sizing:border-box}.career-player>h2{font:400 30px/1.2 'DM Sans',sans-serif;color:#002fa7;text-align:center;margin:0 0 28px;letter-spacing:-.04em}
.career-player-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;background:#002fa7;color:#fff;padding:30px;border-radius:30px;max-width:850px;width:100%;margin:auto;box-sizing:border-box}
.career-album{aspect-ratio:1;border-radius:18px;background:repeating-radial-gradient(circle at 50% 50%,#ffffff09 0 2px,transparent 2px 10px),linear-gradient(135deg,#2a56b6,#001f78);border:1px solid #ffffff55;display:flex;flex-direction:column;justify-content:space-between;padding:24px;box-sizing:border-box}
.career-album-label{font:400 9px/1.4 'DM Sans',sans-serif;letter-spacing:2px}.career-album-company{font:500 clamp(24px,3vw,38px)/1.1 'DM Sans',sans-serif;letter-spacing:-.04em;overflow-wrap:anywhere}.career-album-year{font:400 11px/1.5 'DM Sans',sans-serif}
.career-player-info{display:flex;flex-direction:column;justify-content:center;min-width:0}.career-now-playing{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:1.3px;opacity:.8;margin:0 0 14px}
.career-track{min-height:154px}.career-track h3{font:500 25px/1.2 'DM Sans',sans-serif;color:#fff;margin:0 0 10px;letter-spacing:-.03em}.career-player-role{font:400 14px/1.4 'DM Sans',sans-serif;margin:0 0 12px}.career-player-description{font:400 13px/1.5 'DM Sans',sans-serif;opacity:.85;margin:0}
.career-track-progress{height:3px;background:#ffffff40;margin-top:20px;border-radius:3px}.career-track-progress span{display:block;height:100%;background:#fff;border-radius:3px;transition:width .3s}.career-player-dates{font:400 10px/1.5 'DM Sans',sans-serif;margin:8px 0 0}
.career-playback{display:flex;justify-content:space-around;align-items:center;margin-top:16px}.career-playback button{border:0;background:transparent;color:#fff;cursor:pointer;padding:12px;border-radius:8px}.career-playback button:hover{background:#ffffff20}.career-playback button:focus-visible{outline:2px solid white;outline-offset:2px}.career-playback svg{width:30px;height:24px;fill:currentColor}.career-pause{font:700 34px/1 sans-serif}.career-player-hint{font:400 10px/1.5 'DM Sans',sans-serif;opacity:.7;text-align:center;margin:14px 0 0}
@media(max-width:600px){.career-player{padding:28px 18px}.career-player-shell{grid-template-columns:1fr;gap:24px;padding:24px;border-radius:24px}.career-album{max-width:270px;width:100%;margin:auto}.career-track{min-height:0}}

.career-album{position:relative;overflow:hidden}.career-album-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}.career-album-photo[hidden]{display:none}.career-album.has-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,#00143cbb)}.career-album>*:not(.career-album-photo){position:relative;z-index:1}.career-album.has-photo .career-album-label{visibility:hidden}

/* Career Wrapped: one bold chapter per role. */
.career-player-shell{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;min-height:430px;gap:32px;background:#002fa7;padding:40px}
.career-player-shell::before{content:'';position:absolute;width:420px;height:420px;border:64px solid #87a9ff;border-radius:50%;left:-240px;top:-180px;z-index:-1;opacity:.45}
.career-player-shell::after{content:'';position:absolute;right:-100px;bottom:-180px;width:340px;height:340px;background:repeating-linear-gradient(45deg,#ffffff13 0 12px,transparent 12px 24px);border-radius:50%;z-index:-1}
.career-album{border-radius:50% 50% 12px 12px;transform:rotate(-4deg);background:#d9e5ff;color:#002fa7;box-shadow:8px 8px 0 #001d69;border:0}
.career-album-company{font-size:clamp(28px,3vw,44px);font-weight:700}
.career-album.has-photo{color:#fff}
.career-track h3{font-size:clamp(30px,4vw,48px);font-weight:600;line-height:1.02;letter-spacing:-.055em}
.career-track{min-height:200px}
.career-now-playing{font-size:11px;letter-spacing:2px}
.career-player-role{font-size:17px;margin-top:16px}.career-player-description{font-size:15px}
.career-playback{justify-content:space-between}.career-pause{font:500 12px/1.4 'DM Sans',sans-serif;letter-spacing:1px}
.career-player-hint{font-size:11px}
.career-player-shell.is-switching .career-track,.career-player-shell.is-switching .career-album{animation:wrapped-chapter .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes wrapped-chapter{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@media(max-width:600px){.career-player-shell{padding:28px 24px;gap:28px}.career-album{max-width:230px}.career-track{min-height:0}.career-track h3{font-size:36px}}
@media(prefers-reduced-motion:reduce){.career-player-shell.is-switching .career-track,.career-player-shell.is-switching .career-album{animation:none}}

.intro-bento.duo-final-row{grid-template-columns:1fr;margin-top:0;border-top:0}.intro-bento.duo-final-row>.tile-light{grid-column:1/-1}.intro-bento.intro-bento-rest{grid-template-columns:1fr}.intro-bento.intro-bento-rest>.tile-color{grid-column:1/-1}
