.ios-clock-widget {
  background: black;
}

.ac-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.ac-clock {
  position: absolute;
  opacity: 1;
  left: 50%;
  top: 50%;
}

.ac-centre {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.ac-expand {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.ac-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.ac-element {
  position: absolute;
  top: 0;
  left: 0;
}

.ac-round {
  border-radius: 296px;
}

.ac-circle-1 {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 3px solid white;
  background: var(--clock-face, #242528);
}

.ac-circle-2 {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 3px solid #FA9F22;
  background: var(--clock-face, #242528);
}

.ac-second {
  transform: rotate(180deg);
}

.ac-minute {
  transform: rotate(54deg);
}

.ac-second-hand {
  width: 2px;
  background: #FA9F22;
}

.ac-second-hand-front {
  width: 2px;
  height: 137px;
  background: #FA9F22;
  transform: translate(-50%, -100%) translateY(-3px);
}

.ac-second-hand-back {
  width: 2px;
  height: 21px;
  background: #FA9F22;
  opacity: 1;
  transform: translate(-50%, -100%) translateY(24px);
}

.ac-hour {
  transform: rotate(304.5deg);
}

.ac-thin-hand {
  width: 4px;
  height: 50px;
  background: white;
  transform: translate(-50%, -100%) translateY(-5px);
}

.ac-fat-hand {
  box-sizing: border-box;
  width: 10px;
  height: 57px;
  border-radius: 10px;
  background: white;
  transform: translate(-50%, -100%) translateY(-18px);
}

.ac-minute-hand {
  height: 112px;
}

.ac-minute-line {
  background: white;
  width: 1px;
  height: 9px;
  transform: translate(-50%, -100%) translateY(-131px);
  opacity: 0.34;
}

.ac-major.ac-minute-line {
  opacity: 0.5;
}

.ac-minute-text {
  font: 12px Avenir Next, Helvetica;
  color: white;
  top: -135px;
}

.ac-hour-pill {
  background: white;
  width: 6px;
  height: 35px;
  border-radius: 10px;
  transform: translate(-50%, -100%) translateY(-85px);
  opacity: 0.75;
}

.ac-hour-text {
  font: 40px Hei, Helvetica;
  color: white;
  top: -105px;
}

.ac-hour-10 .ac-content {
  padding-left: 0.4ex;
}

.ac-hour-11 .ac-content {
  padding-left: 0.25ex;
}

.ac-hour-style-text .ac-hour-pill {
  opacity: 0;
}

.ac-hour-style-pill .ac-hour-text {
  opacity: 0;
}

.ac-hour-style-text-quarters .ac-hour-1.ac-hour-text,
.ac-hour-style-text-quarters .ac-hour-2.ac-hour-text,
.ac-hour-style-text-quarters .ac-hour-3.ac-hour-pill,
.ac-hour-style-text-quarters .ac-hour-4.ac-hour-text,
.ac-hour-style-text-quarters .ac-hour-5.ac-hour-text,
.ac-hour-style-text-quarters .ac-hour-6.ac-hour-pill,
.ac-hour-style-text-quarters .ac-hour-7.ac-hour-text,
.ac-hour-style-text-quarters .ac-hour-8.ac-hour-text,
.ac-hour-style-text-quarters .ac-hour-9.ac-hour-pill,
.ac-hour-style-text-quarters .ac-hour-10.ac-hour-text,
.ac-hour-style-text-quarters .ac-hour-11.ac-hour-text,
.ac-hour-style-text-quarters .ac-hour-12.ac-hour-pill {
  opacity: 0;
}

.ac-hour-text-style-small .ac-hour-text {
  font-size: 24px;
  top: -113px;
}

.ac-hour-display-style-quarters .ac-hour-1,
.ac-hour-display-style-quarters .ac-hour-2,
.ac-hour-display-style-quarters .ac-hour-4,
.ac-hour-display-style-quarters .ac-hour-5,
.ac-hour-display-style-quarters .ac-hour-7,
.ac-hour-display-style-quarters .ac-hour-8,
.ac-hour-display-style-quarters .ac-hour-10,
.ac-hour-display-style-quarters .ac-hour-11 {
  opacity: 0;
}

.ac-hour-display-style-none .ac-hour-item {
  opacity: 0;
}

.ac-minute-style-dot .ac-minute-line {
  width: 6px;
  height: 6px;
  transform: translate(-50%, -100%) translateY(-134px);
  border-radius: 6px;
  opacity: 0.75;
}

.ac-minute-style-dot .ac-part.ac-minute-line,
.ac-minute-style-dot.ac-hour-style-pill .ac-major.ac-minute-line {
  opacity: 0;
}

.ac-minute-style-dot .ac-hour-pill {
  transform: translate(-50%, -100%) translateY(-100px);
  height: 40px;
}

.ac-minute-text-style-inside .ac-major.ac-minute-line {
  opacity: 0;
}

.ac-minute-text-style-outside .ac-minute-text {
  top: -152px;
  font-size: 14px;
}

.ac-minute-text-style-none .ac-minute-text {
  opacity: 0;
}

.ac-minute-style-line.ac-minute-display-style-fine-2 .ac-whole.ac-minute-line,
.ac-minute-style-line.ac-minute-display-style-fine-2 .ac-major.ac-minute-line {
  height: 13px;
  transform: translate(-50%, -100%) translateY(-127px);
}

.ac-minute-style-line.ac-minute-display-style-fine-2 .ac-part.ac-minute-line {
  height: 8px;
  transform: translate(-50%, -100%) translateY(-132px);
}

.ac-minute-display-style-coarse .ac-part.ac-minute-line {
  opacity: 0;
}

.ac-minute-display-style-major .ac-part.ac-minute-line,
.ac-minute-display-style-major .ac-whole.ac-minute-line {
  opacity: 0;
}

.ac-minute-display-style-none .ac-part.ac-minute-line,
.ac-minute-display-style-none .ac-major.ac-major.ac-minute-line,
.ac-minute-display-style-none .ac-whole.ac-minute-line {
  opacity: 0;
}

.ac-hand-style-hollow .ac-fat-hand {
  background: white;
  border: 0;
}

#chooser {
  font: 10px Verdana, sans-serif;
  position: absolute;
  top: 4px;
  left: 4px;
  color: white;
  z-index: 1;
  opacity: 0.5;
}

#chooser div {
  cursor: pointer;
}

#chooser div:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* The CodePen customizer stays available in code, but hidden in the portfolio widget. */
#chooser { display: none; }

.ios-clock-widget {
  width: 100%;
  max-width: 270px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(0 22px 35px rgba(0, 0, 0, .32));
}

.light .ios-clock-widget {
  filter: drop-shadow(0 22px 30px rgba(61, 47, 39, .24));
}

@media (max-width: 900px) {
  .ios-clock-widget { max-width: 230px; }
}

@media (max-width: 650px) {
  .ios-clock-widget { max-width: 270px; margin: 0 auto; }
}
:root{color-scheme:dark;--bg:#171819;--card:#202122;--surface:#292a2b;--border:#343536;--text:#eeece9;--muted:#a5a4a3;--orange:#f08a57;--shadow:0 3px 12px #0000000d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-size:16px}body.light{color-scheme:light;--bg:#eeeef0;--card:#fafafa;--surface:#e9e9e9;--border:#d9d9dc;--text:#232426;--muted:#626466;--orange:#a4431a}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button{border:0}button:hover,a:hover{filter:brightness(1.12)}.shell{max-width:1168px;margin:auto;padding:0 32px}header{height:112px;display:flex;align-items:center;gap:28px}.brand{font-size:29px;font-weight:750;letter-spacing:-2px}.brand span{color:var(--orange)}nav{display:flex;gap:30px;margin-left:auto;font-size:14px}nav a:last-child span{color:var(--orange)}.theme{width:34px;height:34px;background:var(--surface);border:1px solid var(--border);border-radius:50%;font-size:22px}.card{border:1px solid var(--border);background:var(--card);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.hero{position:relative;display:grid;grid-template-columns:1fr 285px;padding:42px 40px 0}.eyebrow{font-size:11px;font-weight:600;letter-spacing:1.5px;color:var(--muted);line-height:1.6}.hero .eyebrow{margin:0 0 25px}.eyebrow span{margin:0 8px;color:#666}h1{font-size:clamp(36px,4.5vw,54px);font-weight:590;line-height:1.1;letter-spacing:-2.2px;margin:0 0 22px}h1 span{color:var(--orange)}.intro{font-size:16px;color:var(--muted);line-height:1.7;margin-bottom:28px}.primary{display:inline-flex;gap:24px;background:var(--orange);color:#1c1b1a;padding:13px 17px;border-radius:11px;font-weight:600;font-size:14px}.light .primary{color:white}.text-link{font-size:14px;margin-left:23px}.portrait{position:relative;align-self:center;height:275px;display:flex;align-items:center;justify-content:center}.portrait img{z-index:1;object-fit:contain;width:260px;height:260px;transform:rotate(-5deg);filter:drop-shadow(0 15px 15px #0002);transition:transform .3s}.portrait:hover img{transform:rotate(0) translateY(-5px)}.orbit{position:absolute;width:242px;height:242px;border:1px solid var(--border);border-radius:50%;background:radial-gradient(ellipse,#e6813b15,transparent 70%)}.portrait-note{position:absolute;bottom:-2px;right:-10px;z-index:2;border:1px solid #45403c;background:var(--surface);padding:12px 15px;border-radius:12px;transform:rotate(-5deg);font-size:12px;box-shadow:0 8px 25px #0002}.portrait-note span{color:var(--orange);margin-left:10px}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--border);margin-top:36px;padding:19px 0;font-size:12px;color:var(--muted)}.hero-bottom i{font-style:normal;margin:0 10px;color:#626262}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:34px 3px 18px}.section-heading h2{font-size:17px;font-weight:500;margin:0}.section-heading>span{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.bento>.card{padding:28px}.featured{grid-column:span 4}.now{grid-column:span 2}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.tag{border:1px solid var(--border);border-radius:20px;font-size:11px;padding:6px 10px;color:var(--muted)}h3{font-size:29px;line-height:1.2;letter-spacing:-.9px;font-weight:550;margin:22px 0 12px}.card p{font-size:15px;color:var(--muted);line-height:1.65;margin:0}.featured>p{max-width:410px}.architecture{margin:28px 0 24px;padding:0 22px}.foundation{max-width:350px;margin:auto;border:1px solid #755340;background:linear-gradient(110deg,#c0713020,#b3682010);border-radius:12px;padding:15px;text-align:center;font-size:14px}.foundation>span{color:var(--orange);margin-right:7px}.foundation small{display:block;color:var(--muted);font-size:11px;margin-top:7px}.connectors{height:23px;width:70%;margin:auto;border-bottom:1px solid #635448;background:linear-gradient(#635448,#635448) center/1px 100% no-repeat}.teams{display:flex;justify-content:space-between;gap:10px}.teams>span{position:relative;border:1px solid var(--border);border-radius:8px;font-size:11px;padding:10px 12px;margin-top:12px;background:var(--surface)}.teams>span:before{content:"";position:absolute;height:12px;width:1px;background:#635448;top:-13px;left:50%}.card-link{display:flex;width:100%;align-items:center;justify-content:space-between;padding:18px 0 0;border-top:1px solid var(--border);font-size:14px;background:transparent}.card-link span{color:var(--orange);font-size:20px}.tiny-mark{color:var(--muted)}.bubble-label{display:inline-block;background:var(--surface);font-size:12px;border-radius:13px 13px 13px 3px;padding:13px;margin:29px 0 11px}.message{background:var(--orange);color:#211b17;border-radius:16px 16px 3px 16px;padding:17px;font-size:22px;line-height:1.25;letter-spacing:-.4px;margin-left:16px;margin-bottom:21px}.light .message{color:white}.now p{font-size:14px}.now-bottom{display:flex;gap:12px;align-items:center;margin-top:24px;font-size:12px;line-height:1.5;color:var(--muted)}.mini-icon{font-size:24px;color:var(--text);background:var(--surface);border-radius:12px;padding:8px 13px}.project{grid-column:span 3}.about{grid-column:span 3}.project-art{height:171px;position:relative;background:radial-gradient(ellipse at center,#ae6a2520,transparent 70%);display:flex;align-items:center;justify-content:center;margin-top:12px}.money{font-size:130px;font-weight:700;color:var(--orange);transform:rotate(-12deg);margin-right:6px;line-height:1;opacity:.9}.receipt{background:#e5e1d9;color:#333;transform:rotate(8deg);width:190px;padding:16px;box-shadow:0 7px 20px #0003}.receipt>span{font-size:8px;letter-spacing:1px;display:block}.receipt>b{font-size:16px;display:block;margin:8px 0 13px;letter-spacing:-.6px}.receipt>div{display:flex;justify-content:space-between;font-size:9px;line-height:1.7}.receipt hr{border:0;border-top:1px dashed #999}.receipt>strong{font-size:10px}.project h3{margin-top:8px}.project .card-link{margin-top:23px}.about h3{margin-top:29px;font-size:33px}.about>p{max-width:410px}.career{display:flex;gap:15px;align-items:center;margin:28px 0;font-size:13px}.career>span:nth-child(even){color:var(--muted)}.career strong{font-weight:500;color:var(--orange)}.personal{border-top:1px solid var(--border);padding-top:19px}.personal>span{font-size:12px;color:var(--text)}.personal p{margin-top:8px;font-size:14px}.location,.approach,.contact{grid-column:span 2;min-height:255px}.location{display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(at 0 100%,#dd82301b,transparent 70%),var(--card)}.location .eyebrow{font-size:10px}.location-name{display:block;font-size:20px;letter-spacing:-.5px;margin-top:24px}.location-name>span{color:var(--muted)}time{font-size:52px;letter-spacing:-2px;font-weight:450;display:block;font-variant-numeric:tabular-nums;line-height:1.3}.location-footer{display:flex;gap:12px;align-items:center;margin-top:20px;font-size:12px;line-height:1.6;color:var(--muted)}.location-footer small{font-size:10px}.sun{font-size:29px;color:var(--orange)}.approach{position:relative}.approach h3{font-size:25px;margin-top:34px}.approach p{font-size:14px}.asterisk{position:absolute;right:24px;top:51px;color:var(--orange);font-size:36px}.contact{background:linear-gradient(130deg,#62392333,transparent),var(--card)}.contact h3{font-size:30px;margin-top:33px}.contact h3 span{color:var(--orange)}.contact-actions{display:flex;gap:10px;align-items:center;margin-top:28px}.contact-actions a{font-size:14px}.contact-actions button{border-radius:7px;background:var(--surface);font-size:18px;padding:4px 9px;margin-left:auto}.contact #copy-status{font-size:12px;min-height:20px;margin-top:7px;color:var(--orange)}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;padding:32px 0 38px}footer div{display:flex;gap:20px}.footer-note{color:#787878}dialog{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:24px;max-width:680px;width:calc(100% - 32px);padding:40px;box-shadow:0 30px 90px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}dialog p,dialog li{color:var(--muted);font-size:16px;line-height:1.7}dialog h2{font-size:32px;letter-spacing:-1px}dialog h3{font-size:19px;margin-top:24px}dialog li{margin-bottom:8px}dialog .close{position:absolute;right:16px;top:12px;font-size:28px;background:transparent}.skip{position:fixed;top:-100px;background:var(--orange);color:#222;padding:15px;z-index:10}.skip:focus{top:10px}@media(min-width:1400px){.shell{max-width:1220px}header{height:120px}.hero{padding-top:48px;padding-bottom:0}.hero-bottom{margin-top:44px}}@media(max-width:900px){.hero{grid-template-columns:1fr 200px;padding:30px 28px 0}h1{font-size:40px}.portrait img{width:205px;height:205px}.orbit{width:190px;height:190px}.portrait-note{font-size:10px}.bento>.card{padding:24px}.featured{grid-column:span 6}.now{grid-column:span 3}.project{grid-column:span 3}.about{grid-column:span 6}.location,.approach,.contact{grid-column:span 2}.location-name{font-size:17px}time{font-size:38px}.approach h3,.contact h3{font-size:24px}.asterisk{display:none}.footer-note{display:none}.career{margin:22px 0}.section-heading>span{font-size:9px}}@media(max-width:650px){.shell{padding:0 18px}header{height:84px;gap:16px}nav{gap:18px;font-size:13px}.brand{font-size:26px}.hero{display:flex;flex-direction:column;padding:28px 24px 0}.hero .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:21px}h1{font-size:38px;letter-spacing:-1.6px}.intro{font-size:15px}.desktop{display:none}.portrait{height:215px;margin-top:20px;width:220px}.portrait img{height:210px;width:210px}.portrait-note{right:-25px;bottom:6px}.hero-bottom{width:100%;margin-top:23px;font-size:10px;gap:14px;line-height:1.6}.hero-bottom>span:last-child{max-width:150px;text-align:right}.hero-bottom i{margin:0 3px}.section-heading{margin-top:29px}.section-heading>span{display:none}.bento{grid-template-columns:1fr}.bento>.card{grid-column:1;border-radius:21px;padding:25px}.featured h3{font-size:29px}.architecture{padding:0;margin:26px 0}.teams{gap:5px}.teams>span{padding:9px 6px;font-size:9px}.now-bottom{margin-top:20px}.now .message{max-width:270px;margin-left:auto}.about h3{font-size:30px}.location{min-height:230px}.location-name{margin-top:20px;font-size:22px}time{font-size:57px}.location .card-top .eyebrow{font-size:11px}.location-footer{font-size:13px}.approach,.contact{min-height:240px}.approach h3,.contact h3{font-size:29px}.asterisk{display:block}.career{gap:12px;font-size:12px}.receipt{width:200px}footer{flex-wrap:wrap;justify-content:center;padding:28px 0;font-size:11px}dialog{padding:30px 24px}dialog h2{font-size:27px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.hero .intro{font-size:16px;margin:0 0 28px;line-height:1.7}.eyebrow,.section-heading>span,.tag,.hero-bottom,.portrait-note,footer,.location .eyebrow,.location-footer small{font-size:12px}.foundation small,.teams>span{font-size:12px}.hero-bottom{line-height:1.6}.now p,.about .personal p,.approach p,.card p{font-size:16px}.now-bottom,.bubble-label,.personal>span{font-size:14px}@media(max-width:650px){.hero .eyebrow{font-size:12px}.hero-bottom{font-size:12px}.hero-bottom>span:last-child{max-width:155px}.teams>span{font-size:12px;padding:9px 5px}.career{gap:10px}.hero .intro{font-size:16px}}

/* Career-led revision */
.header-actions{display:flex;align-items:center;gap:8px}.language{height:34px;min-width:42px;padding:0 10px;border-radius:17px;background:transparent;border:1px solid var(--border);font-size:12px;font-weight:700;letter-spacing:.7px}.accent{color:var(--orange)}.hero h1{max-width:680px}.hero-copy{align-self:center}.proof-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:18px;background:var(--card);margin-top:16px;overflow:hidden}.proof-strip>div{padding:21px 23px;display:flex;align-items:baseline;gap:11px;border-right:1px solid var(--border)}.proof-strip>div:last-child{border-right:0}.proof-strip strong{font-size:23px;color:var(--orange);font-weight:600;letter-spacing:-.7px}.proof-strip span{font-size:12px;line-height:1.4;color:var(--muted)}.featured h3{max-width:520px}.featured h3 .accent{display:inline}.timeline-card{display:grid;grid-template-columns:310px 1fr;padding:38px 40px 28px;gap:55px}.timeline-intro{position:sticky;top:30px;align-self:start}.timeline-intro h3{font-size:31px;margin-top:28px}.timeline-intro p{margin-top:18px}.timeline{list-style:none;margin:0;padding:0}.timeline-item{position:relative;display:grid;grid-template-columns:96px 18px 1fr;gap:18px;padding:0 0 56px}.timeline-item:last-child{padding-bottom:6px}.timeline-item:before{content:"";position:absolute;left:123px;top:14px;bottom:-3px;width:1px;background:var(--border)}.timeline-item:last-child:before{display:none}.timeline-date{padding-top:2px;text-align:right}.timeline-date span,.timeline-date small{display:block}.timeline-date span{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--text)}.timeline-date small{font-size:11px;line-height:1.4;color:var(--muted);margin-top:6px}.timeline-dot{position:relative;z-index:1;width:11px;height:11px;margin:4px auto 0;border-radius:50%;border:2px solid var(--orange);background:var(--card);box-shadow:0 0 0 5px var(--card)}.timeline-item.current .timeline-dot{background:var(--orange);box-shadow:0 0 0 5px var(--card),0 0 18px #f08a5766}.timeline-company{display:flex;justify-content:space-between;gap:15px;align-items:baseline}.timeline-company h3{font-size:23px;margin:0}.timeline-company span{font-size:11px;color:var(--muted);white-space:nowrap}.timeline-content h4{font-size:14px;font-weight:600;color:var(--orange);margin:7px 0 14px}.timeline-content>p{font-size:15px}.timeline-content ul{margin:18px 0;padding:0;list-style:none}.timeline-content li{position:relative;color:var(--muted);font-size:14px;line-height:1.6;padding:0 0 7px 17px}.timeline-content li:before{content:"↳";position:absolute;left:0;color:var(--orange)}.tech-list{display:flex;flex-wrap:wrap;gap:7px}.tech-list span{font-size:10px;letter-spacing:.3px;color:var(--muted);border:1px solid var(--border);background:var(--surface);border-radius:20px;padding:6px 9px}.education-item .timeline-dot{border-radius:3px;transform:rotate(45deg)}.education-note{margin-top:18px;display:flex;gap:12px;align-items:flex-start;padding:15px;border-radius:12px;background:linear-gradient(110deg,#c0713018,transparent);border:1px solid #75534080;color:var(--muted);font-size:13px;line-height:1.55}.education-note>span:first-child{color:var(--orange);font-size:17px}.utility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}.utility-grid>.card{padding:28px;min-height:255px}.utility-grid .location,.utility-grid .approach,.utility-grid .contact{grid-column:auto}.portrait-note b{color:var(--orange);margin-left:8px}
@media(max-width:900px){.timeline-card{grid-template-columns:1fr;padding:30px;gap:34px}.timeline-intro{position:static;display:grid;grid-template-columns:1fr 1.4fr;column-gap:30px}.timeline-intro .eyebrow{grid-column:1/-1}.timeline-intro h3{margin-bottom:0}.timeline-intro p{align-self:end}.proof-strip{grid-template-columns:repeat(2,1fr)}.proof-strip>div:nth-child(2){border-right:0}.proof-strip>div:nth-child(-n+2){border-bottom:1px solid var(--border)}}
@media(max-width:650px){header{gap:12px}nav{gap:14px;margin-left:auto}nav a:last-child{display:none}.header-actions{gap:6px}.language{min-width:38px;padding:0 8px}.proof-strip{grid-template-columns:1fr 1fr}.proof-strip>div{padding:17px 14px;display:block}.proof-strip strong{display:block;font-size:22px;margin-bottom:4px}.timeline-card{padding:26px 20px}.timeline-intro{display:block}.timeline-intro h3{font-size:27px}.timeline-item{grid-template-columns:70px 13px 1fr;gap:10px}.timeline-item:before{left:86px}.timeline-date span,.timeline-date small{font-size:9px}.timeline-company{display:block}.timeline-company h3{font-size:21px}.timeline-company span{display:block;margin-top:5px}.timeline-content h4{font-size:13px;line-height:1.5}.timeline-content>p,.timeline-content li{font-size:14px}.utility-grid{grid-template-columns:1fr}.utility-grid>.card{min-height:230px}.hero h1{font-size:35px}.portrait-note{right:-4px}.section-heading#journey{margin-top:42px}}

.about{grid-column:span 6;display:grid;grid-template-columns:1fr 1.1fr;column-gap:58px}.about>.eyebrow{grid-column:1/-1}.about h3{grid-row:2 / span 2}.about>p{grid-column:2}.about .personal{grid-column:2;margin-top:22px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.side-project{min-height:260px;padding:25px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,border-color .2s}.side-project:hover{transform:translateY(-3px);border-color:#675044;filter:none}.side-project-featured{grid-column:span 2;background:radial-gradient(circle at 85% 10%,#f08a571a,transparent 32%),var(--card)}.side-project-top{display:flex;align-items:center;gap:12px}.project-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);background:var(--surface);border-radius:11px;color:var(--orange);font-size:18px;font-weight:600}.project-icon.lottery{font-size:13px;letter-spacing:-.4px}.side-project-top .eyebrow{margin-left:auto}.project-arrow{color:var(--orange);font-size:18px;margin-left:auto}.side-project-top .eyebrow+.project-arrow{margin-left:2px}.side-project h3{font-size:24px;margin-bottom:9px}.side-project p{font-size:14px}.project-detail{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--border);padding-top:17px;margin-top:25px;font-size:11px;color:var(--muted)}.project-detail span:first-child{color:var(--text)}.prettygit-card{position:relative;background:linear-gradient(150deg,#27303a,var(--card) 60%)}.prettygit-preview{margin-top:20px;border:1px solid #46505b;background:#191d22;border-radius:10px;padding:13px;color:#aeb6bf;font-size:10px}.prettygit-preview span,.prettygit-preview code,.prettygit-preview b{display:block}.prettygit-preview code{border:1px solid #39414a;border-radius:5px;margin:8px 0;padding:8px}.prettygit-preview b{color:var(--orange);font-weight:500}.section-heading#side-projects{margin-top:40px}.archived-project{cursor:default}.archived-project:hover{transform:none;border-color:var(--border)}.project-status{margin-left:auto;font-size:9px;line-height:1.3;letter-spacing:.7px;color:var(--muted);text-align:right}
@media(max-width:900px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.side-project-featured{grid-column:span 2}.about{grid-template-columns:1fr 1fr;column-gap:35px}}
@media(max-width:650px){.about{display:block}.about .personal{margin-top:22px}.project-grid{grid-template-columns:1fr}.side-project,.side-project-featured{grid-column:1;min-height:230px}.project-detail{display:block}.project-detail span{display:block}.project-detail span+span{margin-top:7px}.section-heading#side-projects{margin-top:36px}}
.featured{display:flex;flex-direction:column}.featured .card-link{margin-top:auto}

/* Current role and AI practice */
.work-scope{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0 24px}.work-scope>div{border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:15px}.work-scope>div>span{display:block;color:var(--orange);font-size:12px;font-weight:650;margin-bottom:7px}.work-scope>div>p{font-size:13px;line-height:1.45}.proof-strip strong{white-space:nowrap}.proof-strip>div:nth-child(3) strong,.proof-strip>div:nth-child(4) strong{font-size:14px;letter-spacing:.2px}.ai-practice{border-top:1px solid var(--border);margin-top:20px;padding-top:17px}.ai-practice>span{display:block;color:var(--orange);font-size:10px;font-weight:700;letter-spacing:1.1px;margin-bottom:7px}.ai-practice>p{font-size:13px;line-height:1.55}.utility-grid>.approach{min-height:330px}.about>p{max-width:540px}
@media(max-width:900px){.work-scope{grid-template-columns:1fr}.utility-grid>.approach{min-height:300px}}
@media(max-width:650px){.work-scope{grid-template-columns:1fr}.proof-strip>div:nth-child(3) strong,.proof-strip>div:nth-child(4) strong{font-size:12px}.utility-grid>.approach{min-height:0}.ai-practice>p{font-size:14px}}

/* Liquid glass bento */
:root{--card:rgba(31,32,35,.68);--surface:rgba(255,255,255,.075);--border:rgba(255,255,255,.13);--glass-highlight:rgba(255,255,255,.1);--shadow:0 20px 55px rgba(0,0,0,.22)}body.light{--card:rgba(250,250,252,.68);--surface:rgba(255,255,255,.54);--border:rgba(40,42,48,.13);--glass-highlight:rgba(255,255,255,.85);--shadow:0 20px 55px rgba(61,47,39,.11)}body{position:relative;min-height:100vh;background:radial-gradient(circle at 8% 4%,rgba(240,138,87,.16),transparent 27%),radial-gradient(circle at 92% 18%,rgba(112,90,255,.11),transparent 25%),radial-gradient(circle at 50% 96%,rgba(230,58,106,.08),transparent 28%),var(--bg);background-attachment:fixed}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.025) 45%,transparent 70%);z-index:0}.shell{position:relative;z-index:1}header{height:72px;margin:18px 0 20px;padding:0 18px;border:1px solid var(--border);border-radius:23px;background:rgba(32,33,36,.46);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);box-shadow:inset 0 1px 0 var(--glass-highlight),0 12px 35px rgba(0,0,0,.12)}.light header{background:rgba(255,255,255,.5)}.card{position:relative;background:linear-gradient(145deg,var(--glass-highlight),transparent 32%),var(--card);border-color:var(--border);backdrop-filter:blur(25px) saturate(155%);-webkit-backdrop-filter:blur(25px) saturate(155%);box-shadow:inset 0 1px 0 var(--glass-highlight),var(--shadow)}.card:after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.055);mask-image:linear-gradient(135deg,#000,transparent 54%);-webkit-mask-image:linear-gradient(135deg,#000,transparent 54%)}.top-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(255px,1fr);gap:16px;align-items:stretch}.top-grid .hero{height:100%;grid-template-columns:minmax(0,1fr) 205px;padding:38px 34px 0}.top-grid .hero h1{font-size:clamp(38px,4vw,50px)}.top-grid .portrait{height:260px}.top-grid .portrait img{width:225px;height:225px}.top-grid .orbit{width:212px;height:212px}.top-widgets{display:grid;grid-template-rows:auto 1fr;gap:16px}.control-center{padding:20px}.control-status{color:var(--orange);font-size:10px;text-shadow:0 0 12px var(--orange)}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:17px}.control-tile{min-width:0;min-height:91px;padding:12px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(15px) saturate(155%);-webkit-backdrop-filter:blur(15px) saturate(155%);transition:transform .2s,border-color .2s,background .2s}.control-tile:hover{transform:translateY(-2px);filter:none;border-color:rgba(240,138,87,.55)}.control-tile.language{width:auto;height:auto;background:linear-gradient(145deg,#f49a6b,#d96838);color:#211713;border-color:#ffb18b}.control-tile.theme{width:auto;height:auto;font-size:inherit}.control-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(15,15,17,.25);font-size:13px;font-weight:750;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 14px rgba(0,0,0,.14)}.theme .control-icon{font-size:22px}.linkedin-icon{font-family:Arial,sans-serif;font-size:16px}.control-label{font-size:11px;color:var(--muted);margin-top:9px}.language .control-label{color:rgba(33,23,19,.7)}.control-tile strong{font-size:9px;letter-spacing:.8px;font-weight:700}.compact-location{min-height:0;padding:20px 22px;background:radial-gradient(circle at 5% 100%,rgba(240,138,87,.25),transparent 68%),linear-gradient(145deg,var(--glass-highlight),transparent 35%),var(--card)}.compact-location .location-name{font-size:16px;margin-top:17px}.compact-location time{font-size:47px;line-height:1.05}.compact-location .location-footer{margin-top:12px}.compact-location .sun{font-size:24px}.proof-strip{grid-template-columns:repeat(3,1fr);background:var(--card);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:inset 0 1px 0 var(--glass-highlight),0 12px 35px rgba(0,0,0,.1)}.proof-strip>div:nth-child(3){border-right:0}.proof-strip>div:nth-child(3) strong{font-size:17px}.utility-grid{grid-template-columns:1.35fr 1fr}.utility-grid>.approach,.utility-grid>.contact{grid-column:auto}.utility-grid>.approach{min-height:330px}.primary,.message{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 9px 24px rgba(240,138,87,.16)}.tag,.tech-list span,.project-icon,.education-note,.work-scope>div{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(max-width:900px){header{margin-top:12px}.top-grid{grid-template-columns:1fr}.top-widgets{grid-template-columns:1.15fr .85fr;grid-template-rows:1fr}.top-grid .hero{grid-template-columns:1fr 210px}.proof-strip{grid-template-columns:repeat(3,1fr)}.proof-strip>div:nth-child(2){border-right:1px solid var(--border)}.proof-strip>div:nth-child(-n+2){border-bottom:0}.utility-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){header{height:64px;margin:10px 0 14px;padding:0 14px;border-radius:19px}.top-grid .hero{display:flex;padding:28px 24px 0}.top-widgets{grid-template-columns:1fr;margin-top:16px}.control-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.control-tile{min-height:84px;border-radius:18px;padding:10px}.control-icon{width:29px;height:29px}.control-label{font-size:9px}.compact-location{min-height:205px}.proof-strip{grid-template-columns:1fr}.proof-strip>div{display:flex;padding:16px 18px;border-right:0!important;border-bottom:1px solid var(--border)!important}.proof-strip>div:last-child{border-bottom:0!important}.proof-strip strong{margin:0 10px 0 0!important}.utility-grid{grid-template-columns:1fr}}

/* Viewport-angle-reactive glass edge */
html{--glass-angle:135deg}body:after{display:none}.card,.proof-strip,header,.control-tile{isolation:isolate}.proof-strip,header,.control-tile{position:relative;overflow:hidden}.card{background:var(--card)}.compact-location{background:radial-gradient(circle at 5% 100%,rgba(240,138,87,.25),transparent 68%),var(--card)}.card:before,.proof-strip:before,header:before,.control-tile:before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(var(--glass-angle),transparent 8%,rgba(255,255,255,.07) 24%,rgba(255,255,255,.38) 42%,rgba(240,138,87,.13) 56%,rgba(255,255,255,.055) 72%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.48}.control-tile:before{padding:1.25px;background:linear-gradient(var(--glass-angle),transparent 10%,rgba(255,255,255,.46) 43%,rgba(240,138,87,.16) 58%,transparent 88%);opacity:.58}.light .card:before,.light .proof-strip:before,.light header:before,.light .control-tile:before{background:linear-gradient(var(--glass-angle),transparent 8%,rgba(255,255,255,.16) 22%,rgba(255,255,255,.62) 43%,rgba(240,138,87,.12) 58%,rgba(60,48,42,.07) 76%,transparent 92%);opacity:.58}.card:after{display:none}@media(prefers-reduced-motion:reduce){.card:before,.proof-strip:before,header:before,.control-tile:before{transition:none}}

/* Open navigation and floating controls */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}header{height:112px;margin:0;padding:0;border:0;border-radius:0;background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;overflow:visible}header:before{display:none}.card,.proof-strip,.control-tile{border:0}.proof-strip>div{border:0!important}.top-widgets{grid-template-rows:auto auto 1fr;gap:18px}.control-grid{display:grid;grid-template-columns:repeat(4,54px);justify-content:center;gap:11px;margin:4px 0 0}.control-tile,.control-tile.language,.control-tile.theme{width:54px;height:54px;min-width:54px;min-height:54px;padding:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.055));color:var(--text);box-shadow:inset 0 1px 1px rgba(255,255,255,.24),0 10px 26px rgba(0,0,0,.16)}.control-tile.language{background:linear-gradient(145deg,#f49a6b,#d96838);color:#211713}.control-icon{display:block;width:auto;height:auto;border-radius:0;background:transparent;font-size:14px}.theme .control-icon{font-size:27px}.control-tile svg{width:25px;height:25px}.linkedin-control span{font:700 22px/1 Arial,sans-serif;letter-spacing:-1px}.control-label,.control-tile strong{display:none}.compact-location{min-height:190px;padding:24px;justify-content:space-between}.compact-location .location-name{font-size:16px;margin-top:0}.compact-location time{font-size:56px;margin-top:2px}.compact-location .location-footer{margin-top:18px}.top-widgets .proof-strip{grid-template-columns:1fr;margin:0;border-radius:22px}.top-widgets .proof-strip>div{padding:14px 18px;display:flex;align-items:baseline;gap:10px}.top-widgets .proof-strip strong{font-size:15px;margin:0}.top-widgets .proof-strip span{font-size:11px}.work-scope>div,.project-icon,.tech-list span,.tag,.education-note{border-color:transparent}
@media(max-width:900px){header{height:96px;margin:0}.top-widgets{grid-template-columns:auto minmax(210px,.8fr) minmax(220px,1fr);grid-template-rows:1fr;align-items:stretch}.control-grid{align-self:center;margin:0}.compact-location{min-height:190px}}
@media(max-width:650px){header{height:84px;margin:0;padding:0;border-radius:0}.top-widgets{grid-template-columns:1fr;margin-top:16px}.control-grid{grid-template-columns:repeat(4,54px);margin:2px 0 4px}.control-tile,.control-tile.language,.control-tile.theme{width:54px;height:54px;min-width:54px;min-height:54px}.compact-location{min-height:190px}.compact-location time{font-size:52px}}
@media(max-width:650px){nav{gap:12px;font-size:12px}nav a:last-child{display:block}}

/* Optical alignment for the Control Center icons */
.control-grid{grid-template-columns:repeat(4,58px);gap:12px}.control-tile,.control-tile.language,.control-tile.theme{position:relative;width:58px;height:58px;min-width:58px;min-height:58px;display:flex;align-items:center;justify-content:center;line-height:1}.control-tile>.control-icon,.linkedin-control>span{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;line-height:1}.control-tile.language .control-icon{font-size:20px;font-weight:720;letter-spacing:-1.5px}.control-tile.theme .control-icon{font-size:32px;font-weight:500}.control-tile>svg{display:block;width:30px;height:30px}.linkedin-control>span{font:750 27px/1 Arial,sans-serif;letter-spacing:-1.5px;padding-top:1px}@media(max-width:650px){.control-grid{grid-template-columns:repeat(4,58px);gap:12px}.control-tile,.control-tile.language,.control-tile.theme{width:58px;height:58px;min-width:58px;min-height:58px}}

/* iOS clock experiment — the previous digital clock stays in the DOM */
.clock-experiment-hidden{display:none!important}@media(max-width:900px){.top-widgets{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto}.top-widgets .proof-strip{grid-column:1/-1}}@media(max-width:650px){.top-widgets{grid-template-columns:1fr}.top-widgets .proof-strip{grid-column:1}}

/* Reminders-style career highlights */
.top-widgets .reminders-widget{display:block;padding:20px 20px 12px;border-radius:24px}.reminders-header{height:auto;margin:0 0 8px;padding:0 0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.19);background:transparent!important;box-shadow:none;overflow:visible}.reminders-header:before{display:none}.reminders-header>div{display:flex;flex-direction:column;gap:1px}.reminders-header strong{font-size:29px;line-height:1;font-weight:520;color:var(--text)}.reminders-header span[data-i18n]{font-size:13px;font-weight:620;color:var(--orange)}.reminders-app-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(240,138,87,.26);color:var(--orange);font-size:18px;font-weight:750}.reminders-list{list-style:none;margin:0;padding:0}.reminders-list li{display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:10px;min-height:48px}.reminders-list li+li>div{border-top:1px dashed rgba(255,255,255,.18)}.reminders-list li>div{min-width:0;height:100%;display:flex;align-items:center;gap:7px}.reminders-list strong{flex:0 0 auto;font-size:13px!important;line-height:1.2;color:var(--text);letter-spacing:-.15px}.reminders-list li>div>span{min-width:0;color:var(--muted);font-size:10px;line-height:1.25}.reminder-check{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--orange);color:#241812;font-size:12px;font-weight:850;box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 4px 12px rgba(240,138,87,.2)}.light .reminders-header{border-bottom-color:rgba(35,36,40,.14)}.light .reminders-list li+li>div{border-top-color:rgba(35,36,40,.13)}@media(max-width:900px){.top-widgets .reminders-widget{padding:20px}.reminders-list li{min-height:50px}}@media(max-width:650px){.top-widgets .reminders-widget{width:100%;max-width:330px;justify-self:center}.reminders-list li>div>span{font-size:11px}}

/* Apple system typography and Reminders details */
:root{--font-system:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",sans-serif}body,button,input,textarea,select{font-family:var(--font-system);font-synthesis:none}body{text-rendering:optimizeLegibility}.top-widgets .reminders-widget .reminders-header strong{font-size:36px;font-weight:500;line-height:.95;letter-spacing:-1.2px;margin:0}.reminders-header span[data-i18n]{font-size:14px;font-weight:600}.reminders-app-icon{width:40px;height:40px;background:rgba(240,138,87,.28)}.reminders-list li{grid-template-columns:25px minmax(0,1fr);gap:10px}.reminders-list li>div{display:block;font-size:13px;line-height:1.35;color:var(--muted);padding:15px 0}.reminders-list strong{display:inline;font-size:13px!important;font-weight:600;line-height:inherit;letter-spacing:0;margin-right:.32em}.reminders-list li>div>span{display:inline;font-size:13px;line-height:inherit}.reminder-check{position:relative;width:21px;height:21px;background:transparent;border:2px solid var(--orange);box-shadow:none}.reminder-check:after{content:"";width:11px;height:11px;border-radius:50%;background:var(--orange)}

/* Keep the two stacked widgets aligned and the reminder copy as one text style. */
.top-widgets{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto}.top-widgets>.compact-location,.top-widgets>.reminders-widget{grid-column:1!important;min-width:0;width:100%!important;justify-self:stretch}.reminders-list li>div{font-size:14px;line-height:1.4;color:var(--text)}.reminders-list li>div>strong,.reminders-list li>div>span{font-size:inherit!important;line-height:inherit;color:inherit}.reminders-list li>div>strong{font-weight:600}.reminders-list li>div>span{font-weight:400}@media(max-width:650px){.top-widgets .reminders-widget{max-width:none;justify-self:stretch}}

/* Pin the hero metadata to the card's lower edge and preserve a single word gap in reminders. */
.top-grid .hero{grid-template-rows:minmax(0,1fr) auto}.top-grid .hero .hero-bottom{align-self:end;margin-top:0}.reminders-list li>div>strong{margin-right:.32em!important}

/* Ten preloaded frame images drive both final poses and the stop-motion theme change. */
.portrait-sprite{position:relative;z-index:1;display:block;width:225px;height:204px;background-image:url("/assets/cristian-memoji-dark-to-light-transition-1.png");background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 15px 15px #0002);transform:rotate(-5deg);transition:transform .3s}.portrait:hover .portrait-sprite{transform:rotate(0) translateY(-5px)}.light .portrait-sprite{background-image:url("/assets/cristian-memoji-dark-to-light-transition-12.png")}@keyframes memoji-dark-to-light{0%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-1.png")}10%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-2.png")}20%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-3.png")}30%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-4.png")}40%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-5.png")}50%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-7.png")}60%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-8.png")}70%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-9.png")}80%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-10.png")}90%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-11.png")}100%{background-image:url("/assets/cristian-memoji-dark-to-light-transition-12.png")}}.theme-transitioning-to-light .portrait-sprite{animation:memoji-dark-to-light 680ms steps(1,end) both}.theme-transitioning-to-dark .portrait-sprite{animation:memoji-dark-to-light 680ms steps(1,end) reverse both}.theme-transitioning,.theme-transitioning .card,.theme-transitioning .proof-strip,.theme-transitioning .compact-location,.theme-transitioning .control-tile,.theme-transitioning .orbit,.theme-transitioning .portrait-note{transition-property:background,background-color,border-color,color,box-shadow;transition-duration:580ms;transition-delay:100ms;transition-timing-function:ease-out}.theme:disabled{cursor:default;opacity:.7}@media(max-width:900px){.top-grid .portrait-sprite{width:205px;height:186px}}@media(max-width:650px){.top-grid .portrait-sprite{width:210px;height:190px}}@media(prefers-reduced-motion:reduce){.portrait-sprite{animation:none!important}.theme-transitioning,.theme-transitioning *{transition:none!important}}
/* Adaptive appearance: semantic tokens keep both themes consistent and legible. */
:root {
  --app-icon-corner-radius: 26.171875%;
  --separator: rgba(255, 255, 255, 0.17);
  --subtle-text: #aaa9a8;
  --decorative-line: #76665b;
  --code-surface: #191d22;
  --code-border: #46505b;
  --code-text: #bdc3ca;
  --interactive-hover: rgba(255, 255, 255, 0.08);
  --bubble-cutout: #202123;
  --incoming-bubble: #303135;
}

body.light {
  --separator: rgba(35, 36, 40, 0.15);
  --subtle-text: #626466;
  --decorative-line: #9c7c69;
  --code-surface: #eef0f3;
  --code-border: #cdd1d6;
  --code-text: #42474d;
  --interactive-hover: rgba(35, 36, 40, 0.07);
  --bubble-cutout: #fafafc;
  --incoming-bubble: #f0f0f3;
}

/* Content uses a calmer material; controls retain the stronger glass layer. */
.card,
.proof-strip {
  background-color: rgba(31, 32, 35, 0.88);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.light .card,
.light .proof-strip {
  background-color: rgba(250, 250, 252, 0.86);
}
.card::before,
.proof-strip::before {
  opacity: 0.25;
}
.control-tile::before {
  opacity: 0.52;
}
.card:hover,
.proof-strip:hover {
  filter: none;
}
a.card:hover {
  background-color: rgba(39, 40, 43, 0.92);
}
.light a.card:hover {
  background-color: rgba(255, 255, 255, 0.94);
}

.eyebrow span,
.hero-bottom i,
.footer-note {
  color: var(--subtle-text);
}
.foundation {
  border-color: color-mix(in srgb, var(--orange) 44%, transparent);
}
.connectors {
  border-bottom-color: var(--decorative-line);
  background: linear-gradient(var(--decorative-line), var(--decorative-line))
    center / 1px 100% no-repeat;
}
.teams > span::before {
  background: var(--decorative-line);
}
.prettygit-card {
  background-image: linear-gradient(
    150deg,
    color-mix(in srgb, var(--surface) 78%, #58708a 22%),
    transparent 60%
  );
}
.prettygit-preview {
  border-color: var(--code-border);
  background: var(--code-surface);
  color: var(--code-text);
}
.prettygit-preview code {
  border-color: var(--code-border);
}
.reminders-header {
  border-bottom-color: var(--separator);
}
.reminders-list li + li > div {
  border-top-color: var(--separator);
}

button:hover,
a:hover {
  filter: none;
}
nav a,
.text-link,
.card-link,
.contact-actions a {
  transition:
    color 0.18s ease,
    opacity 0.18s ease;
}
nav a:hover,
.text-link:hover,
.card-link:hover,
.contact-actions a:hover {
  color: var(--orange);
}
.theme:hover,
.language:hover,
.contact-actions button:hover {
  background-color: var(--interactive-hover);
}

/* iMessage-inspired conversation, using the portfolio accent color. */
.now {
  display: flex;
  flex-direction: column;
}
.now .card-top,
.now > p,
.now-bottom {
  width: 100%;
}
.now .bubble-label,
.now .message {
  position: relative;
  width: fit-content;
  max-width: 88%;
  border-radius: 1.15rem;
  line-height: 1.32;
  word-wrap: break-word;
}
.now .message-wrap {
  align-self: flex-end;
  width: min(88%, 280px);
  margin: 0 7px 24px auto;
}
.now .bubble-label {
  display: block;
  margin: 29px 0 14px;
  padding: 0.65rem 0.9rem;
  background: var(--incoming-bubble);
  color: var(--text);
}
.now .message {
  align-self: flex-end;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.72rem 1rem;
  background: var(--orange);
  color: #211b17;
  border-radius: 1.15rem;
  font-size: 18px;
  letter-spacing: -0.25px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.light .now .message {
  color: #fff;
}
.now .bubble-label::before,
.now .message::before,
.now .bubble-label::after,
.now .message::after {
  content: "";
  position: absolute;
  bottom: -0.1rem;
  height: 1rem;
}
.now .bubble-label::before {
  left: -0.35rem;
  border-bottom-right-radius: 0.8rem 0.7rem;
  border-left: 1rem solid var(--incoming-bubble);
  transform: translate(0, -0.1rem);
}
.now .bubble-label::after {
  left: 20px;
  width: 10px;
  border-bottom-right-radius: 0.5rem;
  transform: translate(-30px, -2px);
  background: var(--bubble-cutout);
}
.now .message::before {
  z-index: 1;
  right: -8px;
  bottom: -2px;
  height: 19px;
  border-right: 20px solid var(--orange);
  border-bottom-left-radius: 16px 14px;
  transform: translate(0, -2px);
}
.now .message::after {
  display: block;
  z-index: 2;
  right: -42px;
  bottom: -2px;
  width: 12px;
  height: 20px;
  border-bottom-left-radius: 10px;
  transform: translate(-30px, -2px);
  background: var(--bubble-cutout);
}

.contact-actions #copy {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 11px;
}
.contact-actions #copy span {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
}

@media (prefers-contrast: more) {
  :root {
    --muted: #d0cecb;
    --border: rgba(255, 255, 255, 0.36);
    --separator: rgba(255, 255, 255, 0.42);
    --glass-highlight: rgba(255, 255, 255, 0.2);
  }
  body.light {
    --muted: #3e4144;
    --border: rgba(25, 27, 30, 0.34);
    --separator: rgba(25, 27, 30, 0.38);
    --glass-highlight: #fff;
  }
  .card,
  .proof-strip {
    background-color: #202123;
  }
  .light .card,
  .light .proof-strip {
    background-color: #fafafc;
  }
  .control-tile,
  .tag,
  .tech-list span,
  .project-icon {
    outline: 1px solid var(--border);
  }
  a:focus-visible,
  button:focus-visible {
    outline-width: 3px;
  }
}

/* The edge facing away from the pointer catches the reflection. */
.card::before,
.proof-strip::before,
.control-tile::before,
.focus-toggle::before {
  background: linear-gradient(
    calc(var(--glass-angle) + 180deg),
    transparent 8%,
    rgba(255, 255, 255, 0.1) 24%,
    rgba(255, 255, 255, 0.56) 42%,
    rgba(240, 138, 87, 0.17) 57%,
    rgba(255, 255, 255, 0.08) 72%,
    transparent 90%
  );
}

.card::before,
.proof-strip::before {
  opacity: 0.4;
}
.control-tile::before,
.focus-toggle::before {
  opacity: 0.64;
}

.light .card::before,
.light .proof-strip::before,
.light .control-tile::before,
.light .focus-toggle::before {
  background: linear-gradient(
    calc(var(--glass-angle) + 180deg),
    transparent 8%,
    rgba(255, 255, 255, 0.24) 22%,
    rgba(255, 255, 255, 0.82) 43%,
    rgba(240, 138, 87, 0.16) 58%,
    rgba(60, 48, 42, 0.08) 76%,
    transparent 92%
  );
}

/* Focus mode: an iOS-inspired profile that pares the page back to core work. */
:root {
  --control-unit: 58px;
  --control-gap: 12px;
  --control-span-4: 268px;
}
.compact-location {
  display: none;
}
.top-grid {
  grid-template-columns: minmax(0, 1fr) var(--control-span-4);
}
.top-widgets {
  width: var(--control-span-4);
  grid-template-columns: repeat(4, var(--control-unit)) !important;
  grid-template-rows: auto auto 1fr;
  gap: 18px var(--control-gap);
}
.control-grid {
  grid-column: 1 / -1;
  width: var(--control-span-4);
  grid-template-columns: repeat(4, var(--control-unit));
  gap: var(--control-gap);
}
.top-widgets .reminders-widget {
  grid-column: 1 / -1 !important;
}

.focus-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  width: var(--control-span-4);
  height: var(--control-unit);
  min-height: var(--control-unit);
  padding: 7px 15px 7px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  text-align: left;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 22px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition:
    background-color 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease,
    transform 0.28s ease;
}
.focus-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1.25px;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.focus-toggle > * {
  position: relative;
  z-index: 1;
}
.focus-toggle:hover {
  transform: translateY(-1px);
}
.focus-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.focus-id {
  position: relative;
  display: block;
  width: 18px;
  height: 24px;
  border-radius: 3px;
  background: #10c3c9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.focus-id::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 5px;
  width: 8px;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: #10c3c9;
}
.focus-id i {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
.focus-id i::after {
  content: "";
  position: absolute;
  top: 8px;
  left: -2px;
  width: 10px;
  height: 4px;
  border-radius: 5px 5px 2px 2px;
  background: #fff;
}
.focus-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.focus-copy strong {
  font-size: 15px;
  line-height: 1.1;
}
.focus-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.focus-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  display: none;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #303237;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
}
.focus-mode .focus-toggle {
  border-color: rgba(126, 170, 255, 0.56);
  background: #285aa8;
  color: #fff;
}
.focus-mode .focus-icon {
  background: rgba(255, 255, 255, 0.22);
}
.focus-mode .focus-copy small {
  color: rgba(255, 255, 255, 0.78);
}
.focus-mode .focus-badge {
  display: grid;
}
.light .focus-toggle {
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(35, 36, 40, 0.11);
}
.light.focus-mode .focus-toggle {
  background: #3267b8;
  border-color: rgba(40, 88, 164, 0.4);
}

.hero {
  view-transition-name: hero-card;
}
.top-widgets {
  view-transition-name: top-widgets;
}
.featured {
  view-transition-name: featured-work;
}
.now {
  view-transition-name: current-chat;
}
.about {
  view-transition-name: about-card;
}
.projects-section {
  view-transition-name: personal-projects;
}
.timeline-card {
  view-transition-name: career-timeline;
}
.utility-grid {
  view-transition-name: utility-cards;
}

.focus-mode .now,
.focus-mode .projects-section,
.focus-mode .personal,
.focus-mode .footer-note {
  display: none;
}
.focus-mode .top-grid {
  grid-template-columns: minmax(0, 1fr);
}
.focus-mode .top-grid .hero {
  grid-template-columns: minmax(0, 1fr) 260px;
}
.focus-mode .top-widgets {
  position: fixed;
  top: 20px;
  right: max(24px, calc((100vw - 1168px) / 2 + 32px));
  z-index: 30;
  display: grid;
  width: var(--control-span-4);
}
.focus-mode header {
  padding-right: calc(var(--control-span-4) + 24px);
}
.focus-mode .top-widgets .control-grid,
.focus-mode .top-widgets .reminders-widget {
  display: none;
}
.focus-mode .bento .featured,
.focus-mode .bento .about {
  grid-column: span 3;
}

::view-transition-group(hero-card),
::view-transition-group(featured-work),
::view-transition-group(about-card),
::view-transition-group(career-timeline),
::view-transition-group(utility-cards) {
  animation-duration: 0.52s;
  animation-timing-function: cubic-bezier(0.2, 0.72, 0.2, 1);
}
::view-transition-old(top-widgets),
::view-transition-old(current-chat),
::view-transition-old(personal-projects) {
  animation: focus-fade-out 0.24s ease both;
}
::view-transition-new(top-widgets),
::view-transition-new(current-chat),
::view-transition-new(personal-projects) {
  animation: focus-fade-in 0.34s 0.12s ease both;
}
@keyframes focus-fade-out {
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}
@keyframes focus-fade-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

@media (max-width: 900px) {
  .top-grid {
    grid-template-columns: 1fr;
  }
  .top-widgets {
    justify-self: center;
  }
  .focus-mode .top-grid .hero {
    grid-template-columns: minmax(0, 1fr) 210px;
  }
  .focus-mode .top-widgets {
    right: 24px;
    justify-self: auto;
  }
}
@media (max-width: 650px) {
  .top-widgets {
    width: min(100%, var(--control-span-4));
  }
  .focus-mode header {
    padding-right: 0;
  }
  .focus-mode header nav {
    display: none;
  }
  .focus-mode .top-widgets {
    top: auto;
    right: 18px;
    bottom: 18px;
    width: var(--control-unit);
  }
  .focus-mode .focus-toggle {
    width: var(--control-unit);
    grid-template-columns: 1fr;
    padding: 8px;
  }
  .focus-mode .focus-copy {
    display: none;
  }
  .focus-mode .top-grid .hero {
    display: flex;
  }
  .focus-mode .bento .featured,
  .focus-mode .bento .about {
    grid-column: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .focus-toggle {
    transition: none;
  }
}

/* System bar: the single global navigation and home for portfolio controls. */
.shell {
  max-width: 1232px;
  padding-top: 76px;
}
.system-bar-layer {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 80;
  width: min(calc(100% - 40px), 1168px);
  transform: translateX(-50%);
}
header.system-bar {
  position: relative;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 8px 0 15px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 0;
  border-radius: 15px;
  background: rgba(34, 35, 38, 0.66) !important;
  color: var(--text);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  isolation: isolate;
  overflow: hidden;
}
.light header.system-bar {
  background: rgba(249, 249, 252, 0.7) !important;
}
header.system-bar::before,
.control-center-popover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    calc(var(--glass-angle) + 180deg),
    transparent 8%,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.46) 43%,
    rgba(240, 138, 87, 0.13) 58%,
    transparent 90%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.42;
}
.system-brand {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -1.3px;
}
.system-brand span {
  color: var(--orange);
}
.system-nav {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
}
.system-nav a {
  position: relative;
  padding: 7px 11px;
  border-radius: 9px;
  color: var(--muted);
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}
.system-nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}
.system-nav a.active {
  color: var(--text);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.09);
}
.system-nav a[aria-disabled="true"] {
  color: var(--muted);
  opacity: 0.42;
  cursor: default;
}
.light .system-nav a:hover,
.light .system-nav a.active {
  background: rgba(35, 36, 40, 0.07);
}
.system-current-section {
  display: none;
  color: var(--muted);
  font-size: 13px;
}
.system-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.control-center-trigger,
.system-focus-status {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}
.control-center-trigger:hover,
.control-center-trigger[aria-expanded="true"],
.system-focus-status:hover {
  background: rgba(255, 255, 255, 0.1);
}
.light .control-center-trigger:hover,
.light .control-center-trigger[aria-expanded="true"],
.light .system-focus-status:hover {
  background: rgba(35, 36, 40, 0.08);
}
.control-center-trigger svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.system-focus-status {
  gap: 7px;
  padding: 0 10px 0 4px;
  color: #fff;
  background: #285aa8;
  font-size: 12px;
  font-weight: 630;
}
.system-focus-status:hover {
  background: #3269bd;
}
.system-focus-status .focus-icon {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.16);
}
.system-focus-status .focus-id {
  width: 11px;
  height: 15px;
  border-radius: 2px;
}
.system-focus-status .focus-id::before {
  top: -2px;
  left: 3px;
  width: 5px;
  height: 3px;
}
.system-focus-status .focus-id i {
  top: 4px;
  left: 4px;
  width: 4px;
  height: 4px;
}
.system-focus-status .focus-id i::after {
  top: 5px;
  left: -1px;
  width: 6px;
  height: 3px;
}

.control-center-popover {
  position: absolute;
  top: 50px;
  right: 0;
  width: 300px;
  padding: 14px;
  border-radius: 24px;
  color: var(--text);
  background: rgba(31, 32, 35, 0.82);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  transform-origin: top right;
  animation: system-popover-in 0.2s cubic-bezier(0.2, 0.75, 0.2, 1) both;
  isolation: isolate;
  overflow: hidden;
}
.light .control-center-popover {
  background: rgba(246, 246, 249, 0.84);
  box-shadow:
    0 24px 70px rgba(47, 39, 35, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.control-center-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 4px 12px;
}
.control-center-heading strong {
  font-size: 14px;
}
.control-center-heading span {
  color: var(--muted);
  font-size: 10px;
}
.control-center-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.system-control {
  min-width: 0;
  min-height: 86px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
}
.light .system-control {
  background: rgba(255, 255, 255, 0.56);
}
.system-control:hover,
.control-center-focus:hover,
.control-center-links a:hover {
  background: rgba(255, 255, 255, 0.13);
}
.light .system-control:hover,
.light .control-center-focus:hover,
.light .control-center-links a:hover {
  background: rgba(255, 255, 255, 0.86);
}
.system-control-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 700;
}
.language-control .system-control-icon {
  background: var(--orange);
  color: #241711;
  font-size: 15px;
  letter-spacing: -1px;
}
.theme-glyph {
  font-size: 24px;
}
.system-control > span:last-child,
.control-center-focus > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.system-control strong,
.control-center-focus strong {
  font-size: 12px;
  font-weight: 650;
}
.system-control small,
.control-center-focus small {
  color: var(--muted);
  font-size: 10px;
}
.control-center-focus {
  width: 100%;
  min-height: 58px;
  margin-top: 9px;
  padding: 8px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
}
.control-center-focus[aria-pressed="true"] {
  color: #fff;
  background: #285aa8;
}
.control-center-focus[aria-pressed="true"] small {
  color: rgba(255, 255, 255, 0.72);
}
.control-switch {
  width: 34px;
  height: 20px;
  padding: 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
}
.control-switch::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.control-center-focus[aria-pressed="true"] .control-switch::after {
  transform: translateX(14px);
}
.control-center-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 9px;
}
.control-center-links a {
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.075);
  font-size: 11px;
  font-weight: 600;
}
.control-center-links svg {
  width: 20px;
  height: 20px;
}
.control-center-links b {
  width: 20px;
  font:
    750 18px/1 Arial,
    sans-serif;
  letter-spacing: -1px;
  text-align: center;
}
@keyframes system-popover-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.96);
  }
}

/* The first viewport follows the 16-column system: 12 columns plus a 4-column widget rail. */
.top-grid {
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 16px;
}
.top-grid > .hero {
  grid-column: span 12;
}
.top-grid > .top-widgets {
  grid-column: span 4;
  width: auto;
  display: block;
}
.top-widgets .reminders-widget {
  height: 100%;
}
.focus-mode .top-grid {
  grid-template-columns: repeat(16, minmax(0, 1fr));
}
.focus-mode .top-grid > .hero {
  grid-column: 1 / -1;
}
.focus-mode .top-widgets {
  display: none;
  position: static;
}
.focus-mode .top-grid .hero {
  grid-template-columns: minmax(0, 1fr) 260px;
}

@media (max-width: 900px) {
  .shell {
    padding-top: 72px;
  }
  .top-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .top-grid > .hero,
  .top-grid > .top-widgets {
    grid-column: 1 / -1;
  }
  .top-grid > .top-widgets {
    width: min(100%, 420px);
    justify-self: center;
  }
  .focus-mode .top-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  html {
    scroll-padding-top: 66px;
  }
  .shell {
    padding-top: 67px;
  }
  .system-bar-layer {
    top: 8px;
    width: calc(100% - 24px);
  }
  header.system-bar {
    height: 42px;
    padding-left: 12px;
    border-radius: 14px;
  }
  .system-nav {
    display: none;
  }
  .system-current-section {
    display: block;
  }
  .system-focus-status {
    width: 32px;
    padding: 0;
  }
  .system-focus-status > span:last-child {
    display: none;
  }
  .control-center-popover {
    position: fixed;
    top: 58px;
    right: 12px;
    left: 12px;
    width: auto;
  }
  .top-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .top-grid > .hero,
  .top-grid > .top-widgets {
    grid-column: 1 / -1;
  }
  .focus-mode .top-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .control-center-popover {
    animation: none;
  }
  .control-switch::after {
    transition: none;
  }
}

/* macOS-style integration: the bar belongs to the viewport; each control owns its glass. */
.shell {
  padding-top: 64px;
}
.system-bar-layer {
  top: 0;
  left: 0;
  width: 100%;
  transform: none;
}
header.system-bar {
  height: 40px;
  padding-inline: max(20px, calc((100vw - 1168px) / 2));
  border-radius: 0;
  background: color-mix(in srgb, var(--bg) 76%, transparent) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.055);
  overflow: visible;
}
.light header.system-bar {
  background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
  box-shadow: inset 0 -1px 0 rgba(35, 36, 40, 0.08);
}
header.system-bar::before {
  display: none;
}
.system-nav a,
.control-center-trigger,
.system-focus-status {
  border-radius: 999px;
}
.system-nav a {
  padding: 6px 13px;
}
.system-clock {
  display: block;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: -0.1px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.control-center-trigger {
  color: var(--text);
}
.control-center-trigger svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.control-center-trigger svg rect {
  fill: none;
}
.control-center-trigger svg circle {
  fill: currentColor;
  stroke: none;
}

.control-center-popover {
  top: 50px;
  right: max(20px, calc((100vw - 1168px) / 2));
  width: 268px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.light .control-center-popover {
  background: transparent;
  box-shadow: none;
}
.control-center-popover::before {
  display: none;
}
.control-center-heading,
.control-center-links {
  display: none;
}
.control-center-actions {
  display: grid;
  grid-template-columns: repeat(4, 58px);
  gap: 12px;
}
.system-control,
.control-center-focus {
  position: relative;
  isolation: isolate;
  color: var(--text);
  background: rgba(44, 45, 49, 0.72);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.light .system-control,
.light .control-center-focus {
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    0 12px 30px rgba(55, 44, 37, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.system-control::before,
.control-center-focus::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.25px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    calc(var(--glass-angle) + 180deg),
    transparent 8%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.52) 43%,
    rgba(240, 138, 87, 0.15) 58%,
    transparent 90%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.58;
}
.system-control {
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-align: center;
}
.system-control:hover,
.control-center-focus:hover {
  background: rgba(57, 58, 63, 0.82);
  transform: translateY(-1px);
}
.light .system-control:hover,
.light .control-center-focus:hover {
  background: rgba(255, 255, 255, 0.84);
}
.system-control-icon {
  width: auto;
  height: auto;
  background: transparent;
  font-size: 17px;
}
.language-control .system-control-icon {
  width: auto;
  height: auto;
  background: transparent;
  color: currentColor;
  font-size: 18px;
}
.theme-glyph {
  font-size: 30px;
}
.system-control > svg {
  width: 27px;
  height: 27px;
}
.linkedin-system-control b {
  font:
    750 25px/1 Arial,
    sans-serif;
  letter-spacing: -1.5px;
}
.control-center-focus {
  width: 268px;
  height: 58px;
  min-height: 58px;
  margin-top: 12px;
  padding: 8px;
  grid-template-columns: 42px 1fr;
  border-radius: 999px;
}
.control-center-focus[aria-pressed="true"] {
  background: #285aa8;
}
.control-center-focus[aria-pressed="true"]:hover {
  background: #3269bd;
}

@media (max-width: 900px) {
  .shell {
    padding-top: 62px;
  }
}
@media (max-width: 650px) {
  .shell {
    padding-top: 62px;
  }
  .system-bar-layer {
    top: 0;
    width: 100%;
  }
  header.system-bar {
    height: 40px;
    padding: 0 12px;
    border-radius: 0;
  }
  .control-center-popover {
    top: 50px;
    right: 12px;
    left: auto;
    width: 268px;
  }
}
@media (max-width: 500px) {
  .system-current-section {
    display: none;
  }
  .system-status {
    gap: 3px;
  }
  .system-clock {
    margin-left: 2px;
    font-size: 12px;
  }
}

/* Final system-bar geometry and official SF Symbols exported by AppKit. */
.sf-symbol {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-image: var(--sf-symbol-image);
  mask-image: var(--sf-symbol-image);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.system-bar-layer,
.system-bar-layer.control-center-open {
  z-index: 1000;
}
header.system-bar,
.light header.system-bar {
  padding-inline: 16px;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.system-status {
  margin-left: auto;
}
.system-clock {
  margin: 0 0 0 3px;
}
.control-center-trigger {
  order: 2;
}
.system-clock {
  order: 3;
}
.system-focus-status {
  order: 1;
}
.control-center-trigger .sf-symbol {
  width: 23px;
  height: 23px;
}
.control-center-popover {
  right: 16px;
  z-index: 2147483647;
}
.system-control,
.control-center-focus {
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.38),
    0 16px 32px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}
.light .system-control,
.light .control-center-focus {
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.72),
    0 16px 32px rgba(35, 28, 24, 0.13);
}
.system-control > .sf-symbol {
  position: absolute;
  inset: 0;
  width: 28px;
  height: 28px;
  margin: auto;
}
.control-center-focus .focus-icon {
  display: grid;
  place-items: center;
}
.control-center-focus .focus-icon .sf-symbol {
  width: 22px;
  height: 22px;
}
.system-focus-status .focus-icon .sf-symbol {
  width: 14px;
  height: 14px;
}
@media (max-width: 650px) {
  header.system-bar {
    padding-inline: 12px;
  }
  .control-center-popover {
    right: 12px;
  }
}

/* Shared sizing for every exported SF Symbol used by the interface. */
.primary .sf-symbol {
  width: 13px;
  height: 13px;
  align-self: center;
}
.portrait-note {
  display: flex;
  align-items: center;
  gap: 8px;
}
.portrait-note .sf-symbol {
  width: 12px;
  height: 12px;
  color: var(--orange);
}
.card-link > .sf-symbol,
.tiny-mark,
.project-arrow {
  width: 17px;
  height: 17px;
  color: var(--orange);
}
.mini-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
}
.mini-icon .sf-symbol {
  width: 22px;
  height: 22px;
}
.project-icon .sf-symbol {
  width: 20px;
  height: 20px;
}
.education-note > .sf-symbol {
  width: 17px;
  height: 17px;
  color: var(--orange);
}
.asterisk {
  width: 34px;
  height: 34px;
}
.contact-actions button .sf-symbol {
  width: 17px;
  height: 17px;
}
dialog .close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
}
dialog .close .sf-symbol {
  width: 18px;
  height: 18px;
}

/* Final spacing and material adjustments for the system controls and hero widgets. */
.system-clock {
  font-size: 14px;
}
.system-control::before,
.control-center-focus::before {
  display: none;
}
.system-control,
.control-center-focus {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.brand-icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 27px;
  height: 27px;
  margin: auto;
  background: currentColor;
  -webkit-mask: var(--brand-icon-image) center / contain no-repeat;
  mask: var(--brand-icon-image) center / contain no-repeat;
}
.brand-icon-linkedin {
  width: 25px;
  height: 25px;
}
.light .system-control,
.light .control-center-focus {
  box-shadow:
    0 12px 30px rgba(55, 44, 37, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.top-grid .hero .hero-bottom {
  border-top: 0;
}

.top-widgets {
  container-type: inline-size;
}
.top-widgets .reminders-widget {
  height: fit-content;
  min-height: 100cqi;
  max-height: 100%;
  padding: 16px 20px 12px;
  display: flex;
  flex-direction: column;
}
.top-widgets .reminders-widget .reminders-header {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
}
.light .top-widgets .reminders-widget .reminders-header {
  border-bottom-color: rgba(35, 36, 40, 0.24);
}
.top-widgets .reminders-widget .reminders-header strong {
  font-size: 40px;
  line-height: 1;
}
.top-widgets .reminders-widget .reminders-header span:not(.reminders-app-icon) {
  margin-top: 3px;
  color: var(--orange);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.25px;
}
.top-widgets .reminders-widget .reminders-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.top-widgets .reminders-widget .reminders-list li + li > div {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.light .top-widgets .reminders-widget .reminders-list li + li > div {
  border-top-color: rgba(35, 36, 40, 0.13);
}
@media (max-width: 900px) {
  .top-widgets .reminders-widget {
    max-height: calc(100vh - 88px);
  }
}

/* The desktop flow uses the reminders widget as one square grid unit. */
.shell {
  max-width: 1504px;
  container-type: inline-size;
  --flow-gap: 16px;
  --flow-unit: calc((100cqi - 4 * var(--flow-gap)) / 5);
}
.page-section {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--flow-gap);
}
.page-section > .section-heading {
  grid-column: 1 / -1;
}
.work-section {
  view-transition-name: selected-work;
}
.focus-mode .work-section {
  display: none;
}

::view-transition-old(selected-work) {
  animation: focus-fade-out 0.24s ease both;
}
::view-transition-new(selected-work) {
  animation: focus-fade-in 0.34s 0.12s ease both;
}

@media (min-width: 901px) {
  .top-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, var(--flow-unit));
    gap: var(--flow-gap);
    align-items: stretch;
  }
  .top-grid > .hero {
    grid-column: span 4;
    grid-row: span 2;
    min-height: 0;
    height: 100%;
  }
  .top-grid > .top-widgets {
    grid-column: span 1;
    grid-row: span 1;
    width: 100%;
    height: var(--flow-unit);
    min-height: 0;
  }
  .top-widgets .reminders-widget {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1;
    padding: 12px 16px 8px;
  }
  .top-widgets .reminders-widget .reminders-header {
    padding-bottom: 8px;
  }
  .top-widgets .reminders-widget .reminders-header strong {
    font-size: 32px;
  }
  .top-widgets
    .reminders-widget
    .reminders-header
    span:not(.reminders-app-icon) {
    margin-top: 1px;
    font-size: 15px;
  }
  .top-widgets .reminders-widget .reminders-app-icon {
    width: 31px;
    height: 31px;
  }
  .top-widgets .reminders-widget .reminders-list li {
    min-height: 0;
  }
  .top-widgets .reminders-widget .reminders-list li > div {
    padding: 7px 0;
    font-size: 12px;
    line-height: 1.25;
  }
  .focus-mode .top-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, var(--flow-unit));
  }
  .focus-mode .top-grid > .hero {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }

  .work-section > .bento,
  .projects-section > .project-grid {
    display: contents;
  }
  .work-section .featured {
    grid-column: span 3;
  }
  .work-section .now {
    grid-column: span 2;
  }
  .work-section .about {
    grid-column: 1 / -1;
  }

  .projects-section .side-project {
    grid-column: span 1;
    min-height: 0;
    aspect-ratio: 1;
  }
  .projects-section .side-project-featured {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }
  .journey-section .timeline-card {
    grid-column: 1 / -1;
  }
  .utility-grid .approach {
    grid-column: span 3;
  }
  .utility-grid .contact {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .page-section {
    display: block;
  }
  .utility-grid.page-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 650px) {
  .utility-grid.page-section {
    grid-template-columns: 1fr;
  }
}

/*
 * Glass surfaces use a sibling paint layer for the backdrop. Keeping the
 * filter out of the content container avoids nested Backdrop Roots in Chrome.
 */
.card {
  isolation: auto;
  background: transparent;
  backdrop-filter: blur(25px) saturate(155%);
  -webkit-backdrop-filter: blur(25px) saturate(155%);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(31, 32, 35, 0.62);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}
.card::before {
  z-index: 2;
}
.card > * {
  position: relative;
  z-index: 1;
}
.timeline-card > .timeline-intro {
  position: sticky;
}
.light .card::after {
  background: rgba(250, 250, 252, 0.62);
}

/* These controls already sit inside a filtered card and should not start a
   second backdrop pass. Their translucent fill still reads as nested glass. */
.card .tag,
.card .tech-list span,
.card .project-icon,
.card .education-note,
.card .work-scope > div {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The desktop texture belongs to the page canvas and extends beyond the shell. */
:root {
  --page-grid-line: rgba(255, 255, 255, 0.035);
}
body.light {
  --page-grid-line: rgba(45, 38, 34, 0.045);
}
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--page-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid-line) 1px, transparent 1px),
    radial-gradient(circle at 8% 4%, rgba(240, 138, 87, 0.16), transparent 27%),
    radial-gradient(
      circle at 92% 18%,
      rgba(112, 90, 255, 0.11),
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 96%,
      rgba(230, 58, 106, 0.08),
      transparent 28%
    );
  background-size:
    32px 32px,
    32px 32px,
    auto,
    auto,
    auto;
  background-attachment: fixed;
}

/* Chromium must not receive an opacity/filter Backdrop Root between the page
   and the independently filtered Control Center buttons. */
.control-center-popover {
  isolation: auto;
  animation: control-center-enter 0.2s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.system-control,
.control-center-focus {
  isolation: auto;
}

@keyframes control-center-enter {
  from {
    transform: translateY(-5px) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .control-center-popover {
    animation: none;
  }
}

/* The Control Center has no visual container. `display: contents` also keeps
   Chromium from inserting an intermediate compositing surface around its
   independently filtered controls. */
.control-center-popover {
  display: contents;
  animation: none;
}
.control-center-actions {
  position: fixed;
  top: 50px;
  right: 16px;
  z-index: 2147483647;
  animation: control-center-enter 0.2s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.control-center-popover > .control-center-focus {
  position: fixed;
  top: 120px;
  right: 16px;
  z-index: 2147483647;
  margin: 0;
  animation: control-center-enter 0.22s 0.025s cubic-bezier(0.2, 0.75, 0.2, 1)
    both;
}

@media (max-width: 650px) {
  .control-center-actions,
  .control-center-popover > .control-center-focus {
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .control-center-actions,
  .control-center-popover > .control-center-focus {
    animation: none;
  }
}

/* A shallow frosted veil keeps the full-width system bar legible while the
   page scrolls underneath it. The mask fades out at the bar's lower edge. */
.system-bar-layer::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 0;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 22, 0.24),
    rgba(20, 20, 22, 0.04)
  );
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.62) 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.62) 78%,
    transparent 100%
  );
}
.light .system-bar-layer::before {
  background: linear-gradient(
    to bottom,
    rgba(248, 248, 250, 0.38),
    rgba(248, 248, 250, 0.06)
  );
}
header.system-bar {
  z-index: 1;
}

/* At compact desktop widths a five-column rail makes the 1×1 widget too
   small. Switch only the top composition to four columns and a third row. */
@media (min-width: 901px) and (max-width: 1200px) {
  .top-grid {
    --flow-unit: calc((100cqi - 3 * var(--flow-gap)) / 4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, var(--flow-unit));
  }
  .top-grid > .hero {
    grid-column: 1 / -1;
    grid-row: span 2;
  }
  .top-grid > .top-widgets {
    grid-column: span 1;
    grid-row: span 1;
    height: var(--flow-unit);
  }
  .focus-mode .top-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, var(--flow-unit));
  }
  .focus-mode .top-grid > .hero {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
}

.system-indicator {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--text);
}
.system-indicator .sf-symbol {
  width: 24px;
  height: 24px;
}
.battery-indicator .sf-symbol {
  width: 28px;
  height: 24px;
}
.control-center-trigger .sf-symbol {
  width: 24px;
  height: 24px;
}

@media (max-width: 500px) {
  .system-indicator {
    width: 32px;
  }
}

.top-widgets .reminders-widget .reminders-header {
  border: 0 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.44) !important;
  margin-bottom: 10px;
  padding-bottom: 12px;
}
.light .top-widgets .reminders-widget .reminders-header {
  border-bottom-color: rgba(35, 36, 40, 0.28) !important;
}

.reminder-toggle {
  width: 25px;
  height: 100%;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
}
.reminder-toggle:hover {
  filter: none;
}
.reminder-check {
  border-color: rgba(235, 235, 240, 0.38);
}
.light .reminder-check {
  border-color: rgba(35, 36, 40, 0.28);
}
.reminder-check.is-complete {
  border-color: var(--orange);
}
.reminder-check::after {
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.reminder-check.is-complete::after {
  transform: scale(1);
}

.reminder-copy {
  display: block !important;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  caret-color: var(--orange);
  overflow-wrap: anywhere;
}
.reminder-copy:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  opacity: 0.7;
}

/* A reminder label shares the exact vertical center of its completion control. */
.reminders-list li {
  align-items: start;
}
.reminders-list li > .reminder-toggle {
  height: 34px;
  min-height: 34px;
}
.reminders-list li > .reminder-copy {
  display: block !important;
  min-height: 0;
  align-self: start;
  padding: 7px 0 !important;
  line-height: 20px !important;
}

@media (prefers-reduced-motion: reduce) {
  .reminder-check::after {
    transition: none;
  }
}

/* Personal projects: image-led, horizontally browsable showcase. */
.projects-section > .project-carousel-shell {
  grid-column: 1 / -1;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  --carousel-gutter: max(32px, calc((100vw - 1504px) / 2 + 32px));
  min-width: 0;
}
.project-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: var(--carousel-gutter);
  grid-auto-columns: clamp(250px, 23vw, 310px);
  gap: 26px;
  padding: 2px 0 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline-start: var(--carousel-gutter);
  scrollbar-width: none;
}
.project-carousel-gutter {
  grid-column: 1;
}
.project-carousel::-webkit-scrollbar {
  display: none;
}
.project-showcase-card {
  position: relative;
  width: 100%;
  height: clamp(430px, 40vw, 510px);
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background: #17181a;
  scroll-snap-align: start;
  isolation: isolate;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}
.project-showcase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.12) 34%,
    transparent 58%,
    rgba(0, 0, 0, 0.24) 100%
  );
  pointer-events: none;
}
.project-showcase-card > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.project-showcase-card:hover > img {
  transform: scale(1.025);
}
.project-showcase-copy {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  padding: 22px 20px;
}
.project-showcase-copy > span {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  opacity: 0.82;
}
.project-showcase-copy h3 {
  margin: 0;
  color: inherit;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.6px;
}
.project-showcase-copy p {
  max-width: 25ch;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.45;
}
.project-open {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(24, 24, 26, 0.72);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.project-open .sf-symbol {
  width: 16px;
  height: 16px;
}
.project-carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 5px var(--carousel-gutter) 0 0;
}
.project-carousel-controls button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
}
.project-carousel-controls .sf-symbol {
  width: 15px;
  height: 15px;
}

dialog.project-dialog {
  width: min(880px, calc(100% - 32px));
  max-width: 880px;
  padding: 0;
  display: none;
  grid-template-columns: minmax(260px, 0.82fr) minmax(320px, 1.18fr);
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.5);
}
dialog.project-dialog[open] {
  display: grid;
}
.project-dialog::backdrop {
  background: rgba(8, 8, 10, 0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.project-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.project-dialog-close .sf-symbol {
  width: 14px;
  height: 14px;
}
.project-dialog-art {
  min-height: 520px;
  background: #161719;
}
.project-dialog-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.project-dialog-copy {
  padding: 56px 48px 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.project-dialog-copy h2 {
  margin: 12px 0 16px;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1;
}
.project-dialog-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.project-dialog-copy .project-dialog-detail {
  margin-top: 14px;
  color: var(--text);
  font-size: 13px;
}
.project-dialog-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 28px;
}
.project-dialog-tech span {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 11px;
}
.project-dialog-actions {
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
}
.project-dialog-link {
  width: 100%;
  padding: 9px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-weight: 550;
}
.project-dialog-live-link {
  color: var(--orange);
  font-weight: 650;
}
.project-dialog-link .sf-symbol {
  width: 17px;
  height: 17px;
}

/* The brand owns a compact macOS-style application menu. */
.system-brand {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  line-height: 1;
}
.system-brand:hover,
.system-brand[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.1);
  filter: none;
}
.light .system-brand:hover,
.light .system-brand[aria-expanded="true"] {
  background: rgba(35, 36, 40, 0.08);
}
.brand-menu {
  position: fixed;
  top: 43px;
  left: 12px;
  z-index: 2147483647;
  width: min(310px, calc(100vw - 24px));
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 16px;
  color: #f4f4f6;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.38),
    0 16px 32px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  isolation: auto;
  transform-origin: top left;
  animation: system-popover-in 0.16s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.light .brand-menu {
  color: #232426;
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.72),
    0 16px 32px rgba(35, 28, 24, 0.13);
}
.brand-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    var(--glass-angle),
    transparent 10%,
    rgba(255, 255, 255, 0.42) 42%,
    rgba(240, 138, 87, 0.13) 58%,
    transparent 88%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
}
.brand-menu button {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}
.brand-menu button:hover,
.brand-menu button:focus-visible {
  color: #fff;
  background: #3478f6;
  filter: none;
  outline: 0;
}

dialog.about-portfolio-dialog {
  width: min(500px, calc(100% - 32px));
  max-width: 500px;
  max-height: calc(100dvh - 32px);
  padding: 0 28px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  color: #f1f1f3;
  background: rgba(27, 27, 29, 0.96);
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.64),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
dialog.about-portfolio-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.light dialog.about-portfolio-dialog {
  border-color: rgba(35, 36, 40, 0.18);
  color: #252528;
  background: rgba(246, 246, 248, 0.97);
  box-shadow:
    0 36px 110px rgba(55, 44, 37, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.about-portfolio-dialog::backdrop {
  background: rgba(8, 8, 10, 0.68);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}
.about-window-controls {
  position: absolute;
  top: 14px;
  left: 14px;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.about-window-controls button,
.about-window-controls span {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #4a4a4c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.about-window-controls button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #763433;
  background: #ec6765;
}
.about-window-controls button:hover {
  filter: brightness(1.06);
}
.about-window-controls button .sf-symbol {
  width: 11px;
  height: 11px;
  margin: auto;
  color: #763433;
  filter: drop-shadow(0.35px 0 0 #763433) drop-shadow(-0.35px 0 0 #763433)
    drop-shadow(0 0.35px 0 #763433) drop-shadow(0 -0.35px 0 #763433);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.about-window-controls button:hover .sf-symbol,
.about-window-controls button:focus-visible .sf-symbol {
  opacity: 1;
}
.about-window-controls button:focus-visible {
  outline: 0;
}
.light .about-window-controls span {
  background: #d0d0d3;
}
.about-portfolio-art {
  position: relative;
  width: 260px;
  height: 198px;
  margin-top: 48px;
  display: grid;
  place-items: center;
}
.about-browser {
  position: relative;
  z-index: 1;
  width: 202px;
  height: 128px;
  display: grid;
  place-items: center;
  border: 5px solid #77797d;
  border-bottom-width: 8px;
  border-radius: 9px 9px 4px 4px;
  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(240, 138, 87, 0.48),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 85%,
      rgba(112, 90, 255, 0.34),
      transparent 38%
    ),
    #202124;
  box-shadow:
    inset 0 0 0 2px #101113,
    0 16px 35px rgba(0, 0, 0, 0.35);
}
.about-browser-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 7px;
  background: rgba(12, 12, 14, 0.72);
}
.about-browser-bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #666;
}
.about-browser strong {
  font-size: 44px;
  line-height: 1;
  letter-spacing: -4px;
  color: #f4f4f4;
}
.about-browser strong span {
  color: var(--orange);
}
.about-browser-base {
  position: absolute;
  bottom: 28px;
  width: 248px;
  height: 11px;
  border-radius: 2px 2px 12px 12px;
  background: linear-gradient(#bfc0c3, #686a6e 52%, #343539);
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.28);
}
.about-browser-base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 38px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: #55565a;
  transform: translateX(-50%);
}
.about-portfolio-copy {
  margin-top: 4px;
  text-align: center;
}
.about-portfolio-copy h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.9px;
}
.about-portfolio-copy p {
  margin: 4px 0 0;
  color: #6f6f72;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}
.about-portfolio-specs {
  width: min(100%, 330px);
  margin: 27px 0 0;
}
.about-portfolio-specs div {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 15px;
  font-size: 13px;
  line-height: 1.45;
}
.about-portfolio-specs dt {
  text-align: right;
  font-weight: 650;
}
.about-portfolio-specs dd {
  margin: 0;
  color: #98989c;
}
.about-portfolio-action {
  margin-top: 28px;
  padding: 8px 20px;
  border-radius: 9px;
  color: inherit;
  background: #3a3a3c;
  font-size: 14px;
  font-weight: 560;
}
.about-portfolio-action:hover {
  background: #47474a;
  filter: none;
}
.light .about-portfolio-action {
  background: #dedee1;
}
.light .about-portfolio-action:hover {
  background: #d2d2d6;
}
.about-portfolio-footer {
  margin: 23px 0 0;
  color: #5f5f62;
  text-align: center;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.45;
}

@media (max-width: 650px) {
  dialog.about-portfolio-dialog {
    max-height: calc(100dvh - 20px);
    padding: 0 20px 24px;
    border-radius: 24px;
  }
  .about-window-controls {
    top: 12px;
    left: 12px;
    gap: 9px;
  }
  .about-window-controls button,
  .about-window-controls span {
    width: 15px;
    height: 15px;
  }
  .about-portfolio-art {
    width: 240px;
    height: 184px;
  }
  .about-browser {
    width: 188px;
    height: 120px;
  }
  .about-browser-base {
    bottom: 25px;
    width: 228px;
  }
  .about-portfolio-copy h2 {
    font-size: 26px;
  }
  .about-portfolio-specs {
    margin-top: 24px;
  }
  .about-portfolio-specs div {
    grid-template-columns: 0.9fr 1.2fr;
    gap: 13px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-menu {
    animation: none;
  }
}

/* Spotlight: a movable system search surface with the same glass material. */
.spotlight-trigger {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  color: var(--text);
  background: transparent;
}
.spotlight-trigger:hover,
.spotlight-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.1);
  filter: none;
}
.light .spotlight-trigger:hover,
.light .spotlight-trigger[aria-expanded="true"] {
  background: rgba(35, 36, 40, 0.08);
}
.spotlight-trigger .sf-symbol {
  width: 18px;
  height: 18px;
}
.spotlight {
  position: fixed;
  top: max(78px, 11vh);
  left: 50%;
  z-index: 2147483647;
  width: min(660px, calc(100vw - 32px));
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 31px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.38),
    0 22px 55px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  transform: translateX(-50%);
  transform-origin: center;
  animation: spotlight-enter 0.2s cubic-bezier(0.2, 0.75, 0.2, 1) both;
  transition: border-radius 0.26s cubic-bezier(0.2, 0.75, 0.2, 1);
  cursor: grab;
}
.spotlight:active {
  cursor: grabbing;
}
.spotlight.is-positioned {
  transform: none;
  animation: spotlight-enter-positioned 0.2s cubic-bezier(0.2, 0.75, 0.2, 1)
    both;
}
.terminal-window {
  position: fixed;
  top: max(84px, 16vh);
  left: 50%;
  width: min(720px, calc(100vw - 16px));
  height: min(440px, calc(100dvh - 32px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  color: #f4f4f5;
  background: #242424;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  transform: translateX(-50%);
  animation: terminal-window-enter 0.2s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.terminal-window.is-positioned {
  transform: none;
  animation: none;
}
.terminal-titlebar {
  height: 50px;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 108px;
  align-items: center;
  padding: 0 14px;
  background: linear-gradient(#3a3a3a, #303030);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.terminal-titlebar:active { cursor: grabbing; }
.terminal-window-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
.terminal-window-controls > * {
  width: 13px;
  height: 13px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
}
.terminal-close { background: #ff5f57; }
.terminal-minimize { background: #febc2e; }
.terminal-zoom { background: #28c840; }
.terminal-titlebar p {
  margin: 0;
  overflow: hidden;
  color: #d6d6d8;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.2px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.terminal-titlebar p > span { margin-right: 7px; }
.terminal-content {
  min-height: calc(100% - 50px);
  padding: 18px 16px;
  background: #242424;
  font: 500 16px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.terminal-content p { margin: 0; }
.terminal-content span { color: #f5f5f5; }
.terminal-content b { color: #f5f5f5; font-weight: 600; }
.terminal-content i {
  display: inline-block;
  width: 9px;
  height: 19px;
  margin-left: 5px;
  vertical-align: -4px;
  background: #dadadd;
  animation: terminal-caret 1s steps(1, end) infinite;
}
@keyframes terminal-window-enter {
  from { opacity: 0; transform: translateX(-50%) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes terminal-caret {
  50% { opacity: 0; }
}
.spotlight.has-results {
  border-radius: 24px;
}
.light .spotlight {
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.76),
    0 22px 55px rgba(47, 38, 33, 0.18);
}
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    var(--glass-angle),
    transparent 10%,
    rgba(255, 255, 255, 0.44) 42%,
    rgba(240, 138, 87, 0.12) 58%,
    transparent 88%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.58;
}
.spotlight-search {
  height: 58px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
}
.spotlight-drag-handle {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: transparent;
  cursor: inherit;
  touch-action: none;
}
.spotlight-drag-handle .sf-symbol {
  width: 26px;
  height: 26px;
}
.spotlight-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 22px 0 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: 400 28px/1 var(--font-system);
  letter-spacing: -0.6px;
  cursor: text;
}
.spotlight-search input::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  opacity: 1;
}
.spotlight-results {
  position: relative;
  max-height: 0;
  padding: 0 7px;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.28s cubic-bezier(0.2, 0.75, 0.2, 1),
    padding 0.28s cubic-bezier(0.2, 0.75, 0.2, 1),
    opacity 0.18s ease;
}
.spotlight-results::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 11px 7px;
  background: rgba(255, 255, 255, 0.14);
}
.light .spotlight-results::before {
  background: rgba(35, 36, 40, 0.12);
}
.spotlight-results.is-visible {
  max-height: min(var(--spotlight-results-height), calc(100dvh - 190px));
  padding: 0 7px 7px;
  overflow-y: auto;
  opacity: 1;
}
.spotlight-results button {
  width: 100%;
  min-height: 45px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 16px;
  color: inherit;
  background: transparent;
  text-align: left;
}
.spotlight-results button:hover,
.spotlight-results button.active {
  color: #fff;
  background: #3478f6;
  filter: none;
}
.spotlight-results button span {
  font-size: 14px;
  font-weight: 540;
}
.spotlight-results button small {
  color: var(--muted);
  font-size: 11px;
}
.spotlight-results button:hover small,
.spotlight-results button.active small {
  color: rgba(255, 255, 255, 0.72);
}
.spotlight-results > p {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
@keyframes spotlight-enter {
  from {
    opacity: 0;
    transform: translateY(-50%) scaleX(1.2);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
  }
}
@keyframes spotlight-enter-positioned {
  from {
    opacity: 0;
    transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (max-width: 650px) {
  .terminal-window {
    top: 62px;
    width: calc(100vw - 24px);
    height: min(420px, calc(100dvh - 86px));
  }
  .terminal-titlebar {
    grid-template-columns: 80px minmax(0, 1fr) 80px;
  }
  .terminal-titlebar p { font-size: 13px; }
  .spotlight {
    top: 62px;
    width: calc(100vw - 24px);
    border-radius: 27px;
  }
  .spotlight.has-results {
    border-radius: 22px;
  }
  .spotlight-search {
    height: 52px;
    grid-template-columns: 50px minmax(0, 1fr);
  }
  .spotlight-drag-handle {
    width: 50px;
    height: 52px;
  }
  .spotlight-drag-handle .sf-symbol {
    width: 23px;
    height: 23px;
  }
  .spotlight-search input {
    padding-right: 16px;
    font-size: 22px;
    letter-spacing: -0.4px;
  }
  .spotlight-results.is-visible {
    max-height: min(var(--spotlight-results-height), calc(100dvh - 138px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight,
  .terminal-window,
  .terminal-content i {
    animation: none;
  }
}

@media (max-width: 650px) {
  .project-carousel {
    grid-auto-columns: min(78vw, 290px);
    gap: 18px;
  }
  .projects-section > .project-carousel-shell {
    --carousel-gutter: 18px;
  }
  .project-showcase-card {
    height: 400px;
    border-radius: 22px;
  }
  .project-carousel-controls {
    display: none;
  }
  dialog.project-dialog[open] {
    display: block;
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }
  .project-dialog-art {
    min-height: 0;
    height: 260px;
  }
  .project-dialog-copy {
    min-height: 370px;
    padding: 34px 25px 26px;
  }
  .project-dialog-copy h2 {
    font-size: 34px;
  }
  .project-dialog-link {
    margin-top: 32px;
  }
}

/* Interactive cards share one click target instead of competing nested controls. */
.card-action {
  cursor: pointer;
}
.card-action:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}
.featured .card-top {
  justify-content: space-between;
}
.featured-open {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--orange);
  transition: transform 0.18s ease;
}
.featured-open .sf-symbol {
  width: 20px;
  height: 20px;
}
.card-action:hover .featured-open {
  transform: translate(2px, -2px);
}
.hero-bottom {
  justify-content: flex-start;
}

/* Keep pointer-reactive reflections present but quieter across all glass surfaces. */
.card::before,
.proof-strip::before {
  opacity: 0.24;
}
.control-tile::before,
.focus-toggle::before {
  opacity: 0.42;
}
.brand-menu::before,
.spotlight::before {
  opacity: 0.4;
}

/* App shortcuts use one grid unit each: centered brand mark, quiet layered depth,
   and no redundant text inside the artwork. */
.social-apps {
  display: contents;
}
.social-app {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--app-icon-corner-radius);
  color: #fff;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 12px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.social-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 42%);
}
.social-app:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 16px 28px rgba(0, 0, 0, 0.26);
}
.social-app-github,
.social-app-github:hover {
  color: #171719;
  background: linear-gradient(145deg, #ffffff 0%, #eeeff1 100%);
}
.social-app-linkedin,
.social-app-linkedin:hover {
  color: #fff;
  background: linear-gradient(145deg, #2879d2 0%, #0a5eb8 100%);
}
.social-app:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}
.social-app .brand-icon {
  display: block;
  width: 64%;
  height: 64%;
  background: currentColor;
  -webkit-mask: var(--brand-icon-image) center / contain no-repeat;
  mask: var(--brand-icon-image) center / contain no-repeat;
}
.social-app-linkedin .brand-icon {
  background: #fff;
}
.light .social-app-github,
.light .social-app-github:hover {
  color: #171719;
  background: linear-gradient(145deg, #ffffff 0%, #eaebee 100%);
}

/* The reminder is a standalone widget, just like every app shortcut. */
.top-grid > .reminders-widget,
.layout-drag-preview.reminders-widget {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 12px 16px 8px;
  border-radius: 22px;
}
.top-grid > .reminders-widget .reminders-header,
.layout-drag-preview.reminders-widget .reminders-header {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 8px;
  border-bottom-color: rgba(255, 255, 255, 0.38);
}
.top-grid > .reminders-widget .reminders-header strong,
.layout-drag-preview.reminders-widget .reminders-header strong {
  font-size: 32px;
}
.top-grid > .reminders-widget .reminders-header span:not(.reminders-app-icon),
.layout-drag-preview.reminders-widget .reminders-header span:not(.reminders-app-icon) {
  margin-top: 1px;
  font-size: 15px;
}
.top-grid > .reminders-widget .reminders-app-icon,
.layout-drag-preview.reminders-widget .reminders-app-icon {
  width: 31px;
  height: 31px;
}
.top-grid > .reminders-widget .reminders-list,
.layout-drag-preview.reminders-widget .reminders-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.top-grid > .reminders-widget .reminders-list li,
.layout-drag-preview.reminders-widget .reminders-list li {
  min-height: 0;
}
.top-grid > .reminders-widget .reminders-list li > div,
.layout-drag-preview.reminders-widget .reminders-list li > div {
  padding: 7px 0;
  font-size: 12px;
  line-height: 1.25;
}
.light .top-grid > .reminders-widget .reminders-header {
  border-bottom-color: rgba(35, 36, 40, 0.24);
}

/* The restored Apple-clock experiment occupies four regular cells. */
.top-grid > .clock-widget,
.layout-drag-preview.clock-widget {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  --clock-face: #242528;
  background: var(--clock-face);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.top-grid > .memoji-widget,
.layout-drag-preview.memoji-widget {
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(215, 111, 61, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 14px 30px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.light .top-grid > .memoji-widget,
.light .layout-drag-preview.memoji-widget {
  background: rgba(239, 157, 111, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 14px 30px rgba(35, 28, 24, 0.1);
}
.memoji-widget .portrait-sprite {
  align-self: end;
  width: 110%;
  height: 110%;
  background-position: center bottom;
  transform-origin: center bottom;
  transform: none;
}
.memoji-widget:hover .portrait-sprite {
  transform: none;
}
.top-grid > .terminal-app,
.layout-drag-preview.terminal-app {
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--app-icon-corner-radius);
  background: #1c1c1e;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}
.terminal-app img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-grid > .hero {
  grid-template-columns: minmax(0, 1fr);
}

/* Holding a widget enables this temporary arrangement mode. The grid remains
   the source of truth, so every drop still obeys the widget's 1×1 or 2×2 size. */
.top-grid[data-layout-editing] > [data-widget-id] {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-user-drag: none;
  outline: 1px solid rgba(244, 137, 82, 0.58);
  outline-offset: 3px;
  transition: transform 160ms ease, opacity 160ms ease, outline-color 160ms ease;
  transform-origin: center;
  animation: widget-jiggle 156ms ease-in-out infinite alternate;
}
.top-grid[data-layout-editing] > [data-widget-id="github"] {
  animation-duration: 138ms;
  animation-delay: -86ms;
}
.top-grid[data-layout-editing] > [data-widget-id="linkedin"] {
  animation-duration: 172ms;
  animation-delay: -121ms;
}
.top-grid[data-layout-editing] > [data-widget-id="clock"] {
  animation-duration: 149ms;
  animation-delay: -38ms;
}
.top-grid[data-layout-editing] > [data-widget-id="memoji"] {
  animation-duration: 164ms;
  animation-delay: -104ms;
}
.top-grid[data-layout-editing] > [data-widget-id="terminal"] {
  animation-duration: 143ms;
  animation-delay: -71ms;
}
.top-grid > [data-widget-id].is-layout-pressing {
  filter: brightness(0.88) saturate(0.96);
  transform: scale(0.985) !important;
  transition: transform 120ms ease-out, filter 120ms ease-out;
}
.top-grid[data-layout-editing] > [data-widget-id] :is(a, button, [contenteditable="true"]) {
  pointer-events: none;
}
.top-grid[data-layout-editing] > [data-widget-id].is-layout-dragging {
  cursor: grabbing;
  opacity: 0.22;
  animation: none;
  rotate: 0deg;
}
@keyframes widget-jiggle {
  from { rotate: -0.55deg; }
  to { rotate: 0.55deg; }
}
@media (prefers-reduced-motion: reduce) {
  .top-grid[data-layout-editing] > [data-widget-id] {
    animation: none;
    rotate: 0deg;
  }
}
.layout-drag-preview {
  position: fixed !important;
  z-index: 100;
  margin: 0 !important;
  pointer-events: none !important;
  will-change: transform;
  --drag-scale: 0.985;
  translate: var(--drag-x, 0) var(--drag-y, 0);
  scale: var(--drag-scale);
  transform-origin: top left;
  transition: scale 180ms cubic-bezier(0.2, 0.85, 0.25, 1) !important;
  filter: brightness(1) drop-shadow(0 24px 30px rgba(0, 0, 0, 0.34));
}
.layout-drag-preview.is-layout-lifted {
  --drag-scale: 1.055;
}
.layout-done {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #19191b;
  background: #f5f5f7;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  font: inherit;
  font-weight: 700;
}
.light .layout-done {
  color: #fff;
  background: #292a2e;
}
.clock-widget .ios-clock-widget {
  width: 100%;
  height: 100%;
  max-width: none;
  align-self: stretch;
  justify-self: stretch;
  aspect-ratio: auto;
  border-radius: inherit;
  background: transparent;
  filter: none;
}
.light .top-grid > .clock-widget {
  --clock-face: #e6e7e9;
}

/* Widgets are direct sibling grid items. Their span is the only placement
   rule, so any item can move into a free cell without structural changes. */
@media (min-width: 1201px) {
  .top-grid {
    --top-unit: calc((100cqi - 9 * var(--flow-gap)) / 10);
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-rows: repeat(6, var(--top-unit));
    grid-auto-rows: var(--top-unit);
    grid-auto-flow: row dense;
  }
  .top-grid > .hero {
    grid-column: span 8;
    grid-row: span 3;
  }
  .top-grid > .reminders-widget,
  .layout-drag-preview.reminders-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }
  .top-grid > .social-app,
  .top-grid > .terminal-app {
    grid-column: span 1;
    grid-row: span 1;
    width: auto;
    height: auto;
  }
  .top-grid > .clock-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: auto;
  }
  .top-grid > .memoji-widget,
  .layout-drag-preview.memoji-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: auto;
  }
}

@media (min-width: 651px) and (max-width: 1200px) {
  .top-grid {
    --top-unit: calc((100cqi - 3 * var(--flow-gap)) / 4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, var(--top-unit));
    grid-auto-rows: var(--top-unit);
    grid-auto-flow: row dense;
  }
  .top-grid > .hero {
    grid-column: 1 / -1;
    grid-row: span 2;
    height: auto;
  }
  .top-grid > .reminders-widget,
  .layout-drag-preview.reminders-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }
  .top-grid > .social-app,
  .top-grid > .terminal-app {
    grid-column: span 1;
    grid-row: span 1;
    width: auto;
    height: auto;
  }
  .top-grid > .clock-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: auto;
  }
  .top-grid > .memoji-widget,
  .layout-drag-preview.memoji-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: auto;
  }
}

@media (max-width: 650px) {
  .top-grid {
    --top-unit: calc((100cqi - 3 * var(--flow-gap)) / 4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto repeat(2, var(--top-unit));
    grid-auto-rows: var(--top-unit);
    grid-auto-flow: row dense;
  }
  .top-grid > .hero {
    grid-column: 1 / -1;
    grid-row: auto;
    height: auto;
  }
  .top-grid > .reminders-widget,
  .layout-drag-preview.reminders-widget {
    grid-column: span 2;
    grid-row: span 2;
    width: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    padding: 10px 12px 7px;
  }
  .top-grid > .reminders-widget .reminders-header,
  .layout-drag-preview.reminders-widget .reminders-header {
    padding-bottom: 6px;
  }
  .top-grid > .reminders-widget .reminders-header strong,
  .layout-drag-preview.reminders-widget .reminders-header strong {
    font-size: 27px;
  }
  .top-grid > .reminders-widget .reminders-header span:not(.reminders-app-icon),
  .layout-drag-preview.reminders-widget .reminders-header span:not(.reminders-app-icon) {
    font-size: 13px;
  }
  .top-grid > .reminders-widget .reminders-app-icon,
  .layout-drag-preview.reminders-widget .reminders-app-icon {
    width: 26px;
    height: 26px;
  }
  .top-grid > .reminders-widget .reminders-list li > div,
  .layout-drag-preview.reminders-widget .reminders-list li > div {
    padding: 5px 0;
    font-size: 10px;
    line-height: 1.2;
  }
  .top-grid > .reminders-widget .reminder-check,
  .layout-drag-preview.reminders-widget .reminder-check {
    width: 17px;
    height: 17px;
  }
  .top-grid > .reminders-widget .reminder-check::after,
  .layout-drag-preview.reminders-widget .reminder-check::after {
    width: 8px;
    height: 8px;
  }
  .top-grid > .social-app,
  .top-grid > .terminal-app {
    grid-column: span 1;
    grid-row: span 1;
    width: auto;
    height: auto;
  }
  .top-grid > .clock-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: auto;
    padding: 0;
  }
  .top-grid > .memoji-widget,
  .layout-drag-preview.memoji-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: auto;
  }
}