/* Final stationery-style detail pages and the cover wireframe sticker. */
.cover-wireframe{left:57.4%;top:12.6%;width:10.7%;height:25.6%;padding:0;border-color:rgba(165,144,180,.2);background:linear-gradient(rgba(151,134,177,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(151,134,177,.1) 1px,transparent 1px),rgba(255,253,248,.62);background-size:9px 9px;box-shadow:0 16px 28px rgba(135,103,134,.13);transform:rotate(-1.8deg)}
.cover-wireframe::before,.cover-wireframe::after{content:none}.cover-wireframe .wire-tape{position:absolute;left:14%;top:-9%;z-index:4;width:49%;height:13%;margin:0;border:0;background:rgba(247,157,194,.48);transform:rotate(-8deg)}
.wire-browser{position:absolute;inset:12% 9% 7%;border:2px solid rgba(131,133,205,.6)}.wire-browser>i{position:relative;display:inline-block;width:7px;height:7px;margin:7px 0 0 6px;border:1px solid rgba(131,133,205,.72);border-radius:50%}
.wire-browser .wire-hero{position:absolute;left:6%;right:6%;top:15%;height:34%;border:2px solid rgba(131,133,205,.62)}.wire-circle{position:absolute;left:7%;top:54%;width:17px;height:17px;border:2px solid rgba(131,133,205,.62);border-radius:50%}.wire-line{position:absolute;top:56%;height:12px;border:2px solid rgba(131,133,205,.6)}.wire-line-one{left:28%;width:24%}.wire-line-two{left:55%;width:18%}.wire-line-three{right:5%;width:18%}
.wire-browser>span{position:absolute;display:block;width:20%;height:27px;margin:0;border:2px solid rgba(131,133,205,.55)}.wire-browser>span:nth-of-type(1){left:5%;top:67%}.wire-browser>span:nth-of-type(2){left:28%;top:67%}.wire-browser>span:nth-of-type(3){left:51%;top:67%}.wire-browser>span:nth-of-type(4){left:74%;top:67%}.wire-browser>span:nth-of-type(5){left:5%;top:82%}.wire-browser>span:nth-of-type(6){left:28%;top:82%}.wire-browser>span:nth-of-type(7){left:51%;top:82%}.wire-browser>span:nth-of-type(8){left:74%;top:82%}.cover-wireframe{z-index:6}.cover-wireframe .wire-sticker{position:absolute;left:-28%;bottom:-21%;z-index:8;display:grid;width:44px;height:44px;margin:0;place-items:center;border:0;color:#a778db;background:#cba6ed;clip-path:polygon(50% 0,62% 23%,85% 15%,77% 38%,100% 50%,77% 62%,85% 85%,62% 77%,50% 100%,38% 77%,15% 85%,23% 62%,0 50%,23% 38%,15% 15%,38% 23%);filter:drop-shadow(0 8px 7px rgba(81,55,109,.24));font-size:17px;transform:rotate(8deg)}

.detail-section{position:relative;display:block;width:100%;height:100svh;min-height:720px;padding:0;overflow:clip;background:radial-gradient(circle at 72% 17%,rgba(250,178,209,.26),transparent 25%),radial-gradient(circle at 26% 76%,rgba(180,202,255,.2),transparent 27%),linear-gradient(132deg,#fffaf3 0%,#fffdf8 44%,#fff4f6 100%);isolation:isolate}
.detail-section::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(rgba(227,145,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(227,145,184,.07) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,#000 28%,#000 90%,transparent)}
.detail-section .home-link{top:4.1%;right:4.3%;z-index:20;min-height:44px;border-color:rgba(231,124,172,.44);color:#b94e7d;background:rgba(255,255,255,.65);box-shadow:none}.detail-section .section-head{position:absolute;left:4.3%;top:13.5%;width:23%;padding:0;text-align:left}.detail-section .section-head .eyebrow{margin:0 0 12px;color:#ea6fa7;font-size:13px;font-weight:900}.detail-section .section-head h2{margin:0;color:#181724;font-size:clamp(48px,4.2vw,76px);line-height:1;letter-spacing:0}.detail-section .section-head h2::after{content:none}.detail-section .section-head>p:last-child{max-width:330px;margin:24px 0 0;color:#5a5460;font-size:14px;font-weight:650;line-height:1.8}.detail-side-copy{position:absolute;right:1.6%;top:36%;color:#ea6fa7;font-size:10px;font-weight:900;writing-mode:vertical-rl}.detail-content{position:absolute}
.detail-flip-card{cursor:pointer;perspective:1400px;transform-style:preserve-3d}.detail-card-front,.detail-card-back{position:absolute;inset:0;padding:30px 32px;overflow:hidden;backface-visibility:hidden;transition:transform 560ms cubic-bezier(.2,.72,.24,1)}.detail-card-back{transform:rotateY(180deg)}.detail-flip-card.is-flipped .detail-card-front{transform:rotateY(180deg)}.detail-flip-card.is-flipped .detail-card-back{transform:rotateY(360deg)}.ticket-hint{position:absolute;right:28px;bottom:22px;color:#b45b84;font-size:10px;font-weight:850}.detail-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.detail-chips span{padding:6px 9px;border-radius:4px;color:#695361;background:#f6e5ee;font-size:10px;font-weight:800}

.detail-education-cards{left:33.5%;top:14.5%;display:flex;gap:6%;width:58%;height:69%}.education-ticket{position:relative;width:47%;height:100%;background:rgba(255,252,250,.94);box-shadow:0 25px 48px rgba(98,73,91,.17);clip-path:polygon(0 0,100% 0,100% 3%,98.6% 4%,100% 5%,100% 95%,98.6% 96%,100% 97%,100% 100%,0 100%,0 97%,1.4% 96%,0 95%,0 5%,1.4% 4%,0 3%)}.education-ticket:first-child{transform:rotate(-1.5deg)}.education-ticket:last-child{top:2%;background:rgba(250,247,255,.95);transform:rotate(1.3deg)}.education-ticket .detail-card-front,.education-ticket .detail-card-back{border:1px solid rgba(255,255,255,.95);background:inherit}.education-ticket .detail-card-front::after,.education-ticket .detail-card-back::after{content:"";position:absolute;inset:12px;z-index:-1;border:1px dashed rgba(204,126,164,.25)}.ticket-date{color:#80618f;font-size:12px;font-weight:900}.ticket-index{position:absolute;right:30px;top:27px;display:grid;width:34px;height:34px;place-items:center;border:1px solid #e4b2c9;border-radius:50%;color:#c65d8d;font-size:11px;font-weight:900}.ticket-rule{height:1px;margin:24px 0;background:rgba(196,139,169,.25)}.ticket-stage{color:#c05b89;font-size:11px;font-weight:900}.education-ticket h3{margin:17px 0 5px;font-size:clamp(28px,2vw,38px)}.ticket-en{margin:0;color:#836b92;font-size:12px}.ticket-body{color:#5d5660;font-size:13px;line-height:1.75}.education-ticket ul{margin:28px 0;padding-left:20px;color:#55505a;font-size:14px;line-height:2}.detail-summary{position:absolute;left:32.8%;bottom:4.1%;display:grid;grid-template-columns:repeat(4,1fr);width:59%;padding:15px 18px;border-radius:5px;background:rgba(255,255,255,.72);box-shadow:0 12px 26px rgba(99,76,91,.1)}.detail-summary span{padding:0 18px;border-right:1px solid #ead9e2;color:#786d76;font-size:10px}.detail-summary span:last-child{border:0}.detail-summary b{display:block;margin-top:5px;color:#201d24;font-size:13px}

.experience-files{left:27.5%;top:17%;display:flex;align-items:flex-end;gap:1.3%;width:67%;height:67%}.experience-file{position:relative;width:19%;height:82%;background:rgba(255,253,249,.96);box-shadow:0 22px 42px rgba(93,72,86,.16)}.experience-file:nth-child(2){height:96%;transform:rotate(-1deg)}.experience-file:nth-child(3){height:89%;transform:rotate(1deg)}.experience-file:nth-child(4){height:82%;transform:rotate(-.7deg)}.experience-file:nth-child(5){height:74%;transform:rotate(1.8deg)}.experience-file .detail-card-front,.experience-file .detail-card-back{padding:24px 22px;background:rgba(255,253,249,.97)}.file-tape{position:absolute;left:22px;top:-9px;width:72px;height:22px;background:rgba(240,149,189,.65);transform:rotate(-4deg)}.experience-file:nth-child(2) .file-tape{background:rgba(248,205,89,.64)}.experience-file:nth-child(3) .file-tape{background:rgba(195,140,240,.55)}.experience-file:nth-child(4) .file-tape{background:rgba(144,177,239,.58)}.experience-file:nth-child(5) .file-tape{background:rgba(168,204,139,.58)}.file-index{display:grid;width:38px;height:38px;place-items:center;border-radius:5px;color:#fff;background:#211f28;font-size:13px;font-weight:900}.file-year{position:absolute;right:20px;top:27px;color:#b25a84;font-size:11px;font-weight:900}.experience-file h3{margin:20px 0 6px;font-size:clamp(17px,1.35vw,25px);line-height:1.1}.file-role{margin:0;color:#c35388;font-size:11px;font-weight:750}.file-image{display:grid;height:31%;margin:20px 0 15px;place-items:center;border-radius:3px;color:rgba(73,59,79,.72);background:linear-gradient(145deg,#efbfd4,#bfc9ee 62%,#f3dbb4);font-size:11px;font-weight:800;text-align:center}.file-body{margin:0;color:#5f5862;font-size:11px;line-height:1.65}.experience-file ul{margin:24px 0 0;padding-left:17px;color:#504a52;font-size:11px;line-height:1.85}.experience-file .detail-card-back h3{margin-top:32px}.experience-rail{position:absolute;left:27.5%;right:5.5%;bottom:5%;display:flex;justify-content:space-around;height:2px;background:#e992ba}.experience-rail span{width:16px;height:16px;margin-top:-7px;border:4px solid #fff;border-radius:50%;background:#ed74ac;box-shadow:0 0 0 1px #e992ba}

.project-tickets{left:29%;top:14%;display:grid;grid-template-columns:repeat(3,1fr);gap:2%;width:65%;height:75%}.project-ticket{position:relative;height:100%;background:rgba(255,253,251,.95);box-shadow:0 24px 45px rgba(95,72,88,.17);clip-path:polygon(0 0,100% 0,100% 3%,98.5% 4%,100% 5%,100% 95%,98.5% 96%,100% 97%,100% 100%,0 100%,0 97%,1.5% 96%,0 95%,0 5%,1.5% 4%,0 3%)}.project-ticket.visible-1{top:3.5%;background:rgba(255,248,252,.97)}.project-ticket.visible-2{top:1%;background:rgba(248,249,255,.97)}.project-ticket .detail-card-front,.project-ticket .detail-card-back{padding:28px 26px;background:inherit}.project-topline{display:flex;justify-content:space-between;color:#c05d8b;font-size:10px;font-weight:900}.project-ticket h3{margin:22px 0 5px;font-size:clamp(19px,1.5vw,28px)}.project-ticket h3+p{margin:0;min-height:36px;color:#745f6d;font-size:11px;line-height:1.5}.project-demo{display:grid;height:35%;margin:20px 0 17px;place-items:center;border:8px solid #fff;border-radius:4px;color:#8a6178;background:linear-gradient(145deg,#f0dce8,#c1caed 60%,#d9b4df);box-shadow:inset 0 0 0 1px rgba(166,122,148,.19),0 10px 18px rgba(102,73,93,.1);font-size:12px;font-weight:900}.project-demo+p{margin:0;color:#5a535d;font-size:11px;line-height:1.65}.project-ticket .detail-card-back p{color:#5a535d;font-size:12px;line-height:1.7}.project-ticket ul{padding-left:18px;color:#504951;font-size:12px;line-height:1.9}.project-label{display:block;margin-top:22px;color:#b65380;font-size:10px}.detail-arrow{position:absolute;top:48%;z-index:20;display:grid;width:48px;height:48px;place-items:center;border:1px solid rgba(229,112,164,.34);border-radius:50%;color:#be5785;background:rgba(255,255,255,.78);font-size:21px;cursor:pointer}.project-prev{left:26.2%}.project-next{right:3.3%}.project-pagination{position:absolute;left:61%;bottom:4.1%;display:flex;gap:10px;transform:translateX(-50%)}.project-pagination button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#ddb8ca;cursor:pointer}.project-pagination button.active{width:26px;border-radius:8px;background:#e96ea5}

.detail-tool-grid{position:absolute;left:31%;top:15%;display:grid;grid-template-columns:1fr 1fr;gap:18px;width:61%;height:71%}.tool-drawer{position:relative;padding:26px 30px;border-radius:5px;background:rgba(255,252,249,.94);box-shadow:0 21px 42px rgba(92,70,84,.15)}.tool-drawer:nth-child(2){background:rgba(250,247,255,.96)}.tool-drawer:nth-child(3){background:rgba(255,250,237,.96)}.tool-drawer:nth-child(4){background:rgba(245,250,255,.96)}.tool-drawer::before{content:"";position:absolute;left:50%;top:12px;width:40px;height:5px;border-radius:5px;background:#dac6d2;transform:translateX(-50%)}.drawer-code{display:grid;width:40px;height:40px;place-items:center;border-radius:5px;color:#fff;background:#eb70a8;font-size:14px;font-weight:900}.tool-drawer h3{margin:18px 0 8px;font-size:21px}.tool-drawer p{max-width:95%;margin:0;color:#5c5660;font-size:13px;line-height:1.8}.method-strip{position:absolute;left:31%;right:8%;bottom:4%;display:flex;justify-content:space-between;padding:12px 22px;border-top:2px solid #e992ba;border-bottom:2px solid #e992ba;color:#a14d75;font-size:10px;font-weight:900}

.scrapbook-grid{position:absolute;left:29%;top:13%;display:block;width:64%;height:76%}.scrap-note{position:absolute;width:31%;height:76%;padding:18px;color:#1e1b22;background:#fffdf9;box-shadow:0 25px 46px rgba(91,68,83,.17)}.scrap-note:nth-child(1){left:2%;top:8%;transform:rotate(-4deg)}.scrap-note:nth-child(2){left:35%;top:0;height:87%;transform:rotate(2deg)}.scrap-note:nth-child(3){right:0;top:12%;transform:rotate(5deg)}.scrap-note::before{content:"";position:absolute;left:50%;top:-10px;width:74px;height:22px;background:rgba(239,144,186,.64);transform:translateX(-50%) rotate(-3deg)}.scrap-note:nth-child(2)::before{background:rgba(161,190,246,.67);transform:translateX(-50%) rotate(2deg)}.scrap-note:nth-child(3)::before{background:rgba(208,169,241,.67)}.scrap-photo{height:61%;border:9px solid #fff;box-shadow:inset 0 0 0 1px rgba(111,90,103,.12)}.photo-content{background:linear-gradient(145deg,#edb5cf,#bdc9ed 60%,#f4d8ad)}.photo-motion{background:linear-gradient(145deg,#a8c4ed,#f0c0d4 58%,#dcc7ef)}.photo-tools{background:linear-gradient(145deg,#d7c3ef,#f3c3d4 58%,#b8d6cf)}.scrap-note h3{margin:18px 0 7px;font-size:21px}.scrap-note p{margin:0;color:#625a63;font-size:12px;line-height:1.65}.scrap-scribble{position:absolute;color:#ea70a8;font-size:26px;font-weight:900;font-style:italic}.scribble-top{right:7%;top:12%;transform:rotate(8deg)}.scribble-bottom{left:29%;bottom:5.5%;transform:rotate(-10deg)}

@media(max-width:1050px){.detail-section{height:auto;min-height:100svh;padding:100px 24px 80px;overflow:visible}.detail-section .section-head{position:relative;left:auto;top:auto;width:min(620px,100%)}.detail-content,.detail-tool-grid,.scrapbook-grid{position:relative;left:auto;top:auto;width:100%;height:auto;margin-top:42px}.detail-education-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.education-ticket{width:100%;height:580px}.detail-summary{position:relative;left:auto;bottom:auto;width:100%;margin-top:24px}.experience-files{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.experience-file{width:100%;height:520px!important;transform:none!important}.experience-rail,.detail-side-copy,.method-strip,.detail-arrow,.project-pagination{display:none}.project-tickets{grid-template-columns:1fr}.project-ticket{height:620px}.detail-tool-grid{grid-template-columns:1fr 1fr}.tool-drawer{min-height:260px}.scrapbook-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.scrap-note{position:relative;inset:auto!important;width:100%;height:520px!important;transform:none!important}.scrap-scribble{display:none}}
@media(max-width:700px){.detail-section{padding:90px 18px 70px}.detail-section .section-head h2{font-size:52px}.detail-education-cards,.experience-files,.detail-tool-grid,.scrapbook-grid{grid-template-columns:1fr}.detail-summary{grid-template-columns:1fr 1fr;gap:16px}.detail-summary span{border:0}.edit-dock{display:none}}

/* Latest cover and education refinements. */
.cover-note {
  gap: 10px;
}

.note-icon {
  display: grid;
  place-items: center;
  width: clamp(38px, 2.8vw, 50px);
  height: clamp(38px, 2.8vw, 50px);
  color: #20242b;
}

.note-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note-rays {
  position: absolute;
  z-index: -1;
  width: 5px;
  height: 16px;
  border-radius: 999px;
  opacity: 0.72;
  pointer-events: none;
}

.note-rays::before,
.note-rays::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 16px;
  border-radius: inherit;
  background: inherit;
}

.note-rays::before {
  transform: translate(-17px, 9px) rotate(78deg);
}

.note-rays::after {
  transform: translate(18px, 8px) rotate(-78deg);
}

.note-education .note-rays {
  left: -9%;
  top: -11%;
  background: #f48caf;
  transform: rotate(-12deg);
}

.note-toolkit .note-rays {
  right: -9%;
  top: -13%;
  background: #91a9ef;
  transform: rotate(14deg);
}

.cover-wireframe .wire-sticker {
  display: none;
}

.cover-pixel-star {
  position: absolute;
  left: 80.2%;
  top: 17.6%;
  z-index: 8;
  width: clamp(38px, 3.3vw, 58px);
  height: clamp(38px, 3.3vw, 58px);
  background: #caa8f2;
  clip-path: polygon(38% 0, 62% 0, 62% 25%, 88% 12%, 100% 38%, 75% 50%, 100% 62%, 88% 88%, 62% 75%, 62% 100%, 38% 100%, 38% 75%, 12% 88%, 0 62%, 25% 50%, 0 38%, 12% 12%, 38% 25%);
  filter: drop-shadow(0 9px 8px rgba(93, 62, 128, 0.24));
  transform: rotate(-7deg);
  pointer-events: none;
}

.cover-pixel-star::after {
  content: "";
  position: absolute;
  inset: 31%;
  background: #a776dd;
  clip-path: inherit;
}

.cover-phone-sticker {
  position: absolute;
  right: 5.2%;
  bottom: 23%;
  z-index: 9;
  display: grid;
  gap: 8px;
  width: min(20vw, 278px);
  min-width: 214px;
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  color: #3f4653;
  background: linear-gradient(146deg, #fff5c9, #ffe8ef 78%);
  box-shadow: 0 18px 28px rgba(96, 69, 83, 0.14), inset 0 1px rgba(255, 255, 255, 0.82);
  font-size: clamp(11px, 0.76vw, 14px);
  font-weight: 820;
  line-height: 1.35;
  transform: rotate(5.2deg);
}

.cover-phone-sticker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  width: 78px;
  height: 22px;
  background: rgba(246, 156, 196, 0.58);
  transform: translateX(-50%) rotate(-4deg);
}

.cover-phone-sticker span {
  display: block;
}

.education-ticket .detail-card-back {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 58px;
}

.education-back-photo {
  position: relative;
  display: grid;
  place-items: end start;
  flex: 0 0 50%;
  min-height: 0;
  margin: 0 0 24px;
  padding: 16px;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 3px;
  color: rgba(57, 50, 64, 0.76);
  background:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(145deg, #d9e7ff, #fff4e1 54%, #eeb7cf);
  background-size: 18px 18px, 18px 18px, cover;
  box-shadow: inset 0 0 0 1px rgba(124, 104, 124, 0.13), 0 12px 18px rgba(91, 68, 83, 0.1);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.education-back-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.education-back-photo::before {
  content: none;
}

.education-back-photo::after {
  content: none;
}

.education-back-photo.art-1 {
  background:
    radial-gradient(circle at 76% 24%, rgba(251, 204, 104, 0.76) 0 13%, transparent 14%),
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(145deg, #b8d7ef, #fff9eb 58%, #e3c3ef);
  background-size: auto, 18px 18px, 18px 18px, cover;
}

.education-ticket .detail-card-back ul {
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
  color: #56515a;
  font-size: clamp(13px, 0.92vw, 16px);
  line-height: 1.7;
}

.detail-education .detail-summary {
  left: 33.5%;
  bottom: 5%;
  display: block;
  width: 58%;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.education-detail-rail {
  position: relative;
  height: 72px;
}

.education-rail-line {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 29px;
  height: 2px;
  background: #e992ba;
}

.education-rail-tick {
  position: absolute;
  top: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 74px;
  color: #a14d75;
  font-size: 11px;
  font-weight: 900;
  transform: translateX(-50%);
}

.education-rail-tick:nth-child(2) {
  left: 6%;
}

.education-rail-tick:nth-child(3) {
  left: 94%;
}

.education-rail-tick::before {
  content: "";
  order: 2;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #ed74ac;
  box-shadow: 0 0 0 1px #e992ba;
}

.education-rail-tick span {
  order: 1;
}

.education-rail-tick b {
  order: 3;
  color: #201d24;
  font-size: 13px;
}

@media (max-width: 1120px) {
  .cover-pixel-star {
    display: none;
  }

  .cover-phone-sticker {
    right: 28px;
    bottom: 150px;
    width: min(70vw, 310px);
  }
}

@media(max-width:1050px) {
  .detail-education .detail-summary {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: 26px;
  }
}

@media(max-width:700px) {
  .cover-phone-sticker {
    position: absolute;
    right: 24px;
    bottom: 72px;
    min-width: 0;
    width: calc(100% - 48px);
  }

  .education-detail-rail {
    height: 84px;
  }

  .education-rail-line {
    left: 12%;
    right: 12%;
  }

  .education-rail-tick:nth-child(2) {
    left: 12%;
  }

.education-rail-tick:nth-child(3) {
    left: 88%;
  }
}

/* Normalize pasted copy across every project detail view. */
.project-ticket,
.project-readme-dialog,
.experience-modal-card,
.experience-rich-text {
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.project-ticket [data-editable],
.project-readme-dialog [data-editable],
.experience-modal-card [data-editable],
.experience-rich-text,
.experience-rich-text p,
.experience-rich-text div:not(.inline-media),
.experience-rich-text span,
.experience-rich-text li {
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.project-ticket [data-editable] *,
.project-readme-dialog [data-editable] *,
.experience-modal-card [data-editable] *,
.experience-rich-text p *,
.experience-rich-text div:not(.inline-media) *,
.experience-rich-text li * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

.experience-rich-text > .inline-media {
  display: block;
}

/* Cover clarification: contact text belongs beside the CTA; the wireframe is the bottom-right sticker. */
.portfolio-cover .cover-contact {
  display: grid;
  gap: 8px;
  color: #485064;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 760;
  line-height: 1.3;
}

.portfolio-cover .cover-contact span {
  display: block;
}

.cover-wireframe {
  left: auto;
  right: 10.8%;
  top: auto;
  bottom: 4.6%;
  width: 10.4%;
  height: 24.8%;
  z-index: 5;
  transform: rotate(2.4deg);
}

.note-education { left: 64.8%; top: 12.4%; }
.note-experience { left: 64.5%; top: 35.1%; }
.note-projects { left: 64.8%; top: 56.4%; }
.note-toolkit { left: 79.4%; top: 23%; }
.note-beyond { left: 79.7%; top: 45.2%; }

.cover-pixel-star {
  left: 76.4%;
  top: 17.2%;
}

.education-detail-rail {
  height: 96px;
}

.education-rail-line {
  top: 40px;
  z-index: 0;
}

.education-rail-tick {
  top: 0;
  min-width: 174px;
  height: 92px;
  gap: 0;
}

.education-rail-tick span {
  position: absolute;
  left: 50%;
  top: 0;
  order: initial;
  width: 174px;
  min-height: 24px;
  padding: 1px 10px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.education-rail-tick::before {
  position: absolute;
  left: 50%;
  top: 28px;
  z-index: 1;
  order: initial;
  transform: translateX(-50%);
}

.education-rail-tick b {
  position: absolute;
  left: 50%;
  top: 64px;
  order: initial;
  white-space: nowrap;
  transform: translateX(-50%);
}

@media (max-width: 1120px) {
  .cover-wireframe {
    display: block;
    right: 28px;
    bottom: 38px;
    width: 190px;
    height: 255px;
  }

  .cover-notes {
    top: 1090px;
    padding-right: 250px;
  }
}

@media(max-width:700px) {
  .cover-wireframe {
    display: none;
  }

  .cover-notes {
    top: 1180px;
    padding-right: 28px;
  }

  .education-rail-tick {
    min-width: 132px;
  }

  .education-rail-tick span {
    width: 132px;
    font-size: 10px;
  }
}

/* Experience preview: four cards, raised timeline, and a large detail modal. */
.experience-files {
  left: 28.6%;
  top: 16%;
  gap: 2%;
  width: 65%;
  height: 60%;
}

.experience-file {
  width: 23.5%;
  height: 88%;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.experience-file:hover {
  box-shadow: 0 28px 52px rgba(93, 72, 86, 0.22);
  transform: translateY(-8px) rotate(-0.4deg);
}

.experience-file:nth-child(2) {
  height: 98%;
}

.experience-file:nth-child(3) {
  height: 92%;
}

.experience-file:nth-child(4) {
  height: 84%;
}

@media (min-width: 1051px) {
  .experience-file {
    width: 22%;
    height: 87%;
    opacity: 0.76;
    filter: saturate(0.84);
  }

  .experience-file[data-experience-card="3"]:not(.is-active) {
    width: 24.5%;
    height: 92%;
    opacity: 0.86;
    filter: saturate(0.92);
  }

  .experience-files:has(.experience-file[data-experience-card="3"]:not(.is-active))
    .experience-file:not(.is-active):not([data-experience-card="3"]) {
    width: 20.75%;
  }

  .experience-file[data-experience-card="3"]:not(.is-active) .detail-card-front {
    padding: 24px 22px 42px;
  }

  .experience-file[data-experience-card="3"]:not(.is-active) .file-image {
    height: 27%;
    margin: 16px 0 12px;
  }

  .experience-file[data-experience-card="3"]:not(.is-active) .file-body {
    font-size: 10.8px;
    line-height: 1.58;
  }

  .experience-file.is-active {
    width: 28%;
    height: 98%;
    opacity: 1;
    filter: saturate(1);
    z-index: 5;
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 252, 0.98)),
      #fffdfa;
    box-shadow: 0 34px 74px rgba(92, 64, 83, 0.28), 0 0 0 2px rgba(233, 112, 166, 0.18);
    transform: translateY(-12px) rotate(0.35deg);
  }

  .experience-file.is-active .detail-card-front {
    padding: 28px 26px 48px;
  }

  .experience-file.is-active .file-index {
    background: #e96fa6;
  }

  .experience-file.is-active .file-image {
    height: 34%;
    border: 8px solid #fff;
    box-shadow: inset 0 0 0 1px rgba(166, 122, 148, 0.16), 0 18px 30px rgba(102, 73, 93, 0.13);
  }

  .experience-file.is-active:hover {
    box-shadow: 0 40px 82px rgba(92, 64, 83, 0.32), 0 0 0 2px rgba(233, 112, 166, 0.28);
    transform: translateY(-18px) rotate(0.25deg);
  }

  .experience-file:not(.is-active):hover {
    opacity: 0.9;
    filter: saturate(0.95);
  }

  .experience-rail-tick.is-active i {
    width: 20px;
    height: 20px;
    margin-top: -2px;
    background: #e96fa6;
    box-shadow: 0 0 0 6px rgba(233, 112, 166, 0.18), 0 0 0 1px #e992ba;
  }

  .experience-rail-tick.is-active b {
    color: #b94e7d;
    font-size: 12px;
  }
}

@media (max-width: 1050px) {
  .experience-file,
  .experience-file:nth-child(1),
  .experience-file:nth-child(2),
  .experience-file:nth-child(3),
  .experience-file:nth-child(4) {
    width: 100%;
    height: 520px !important;
    transform: none !important;
  }
}

.experience-file .detail-card-front {
  position: absolute;
  inset: 0;
}

.file-duration {
  position: absolute;
  right: 20px;
  top: 45px;
  max-width: 86px;
  color: rgba(121, 89, 108, 0.72);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-align: right;
}

.experience-file.is-active .file-duration {
  color: #b94e7d;
}

.experience-rail {
  left: 28.6%;
  right: 6.4%;
  bottom: 12.2%;
  z-index: 3;
  justify-content: space-between;
}

.experience-rail > span,
.experience-rail-tick {
  position: relative;
  display: grid;
  justify-items: center;
  width: 124px;
  height: 62px;
  margin-top: -7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.experience-rail-tick i {
  display: block;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #ed74ac;
  box-shadow: 0 0 0 1px #e992ba;
}

.experience-rail-tick b {
  margin-top: 12px;
  color: #201d24;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.experience-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  background:
    linear-gradient(90deg, rgba(12, 12, 16, 0.78), rgba(22, 24, 29, 0.82)),
    radial-gradient(circle at 22% 28%, rgba(238, 112, 168, 0.18), transparent 30%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.experience-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.modal-open {
  overflow: hidden;
}

.experience-modal-card {
  position: relative;
  width: min(1050px, 88vw);
  height: min(630px, 78vh);
  padding: clamp(26px, 3vw, 44px);
  overflow: hidden;
  color: #fff9ef;
  background:
    linear-gradient(90deg, rgba(46, 37, 32, 0.92), rgba(24, 28, 34, 0.94)),
    rgba(27, 27, 29, 0.95);
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.34);
}

.experience-modal-card::before,
.experience-modal-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  opacity: 0.26;
  background:
    radial-gradient(circle at 50% 22px, transparent 0 6px, #111 7px 8px, transparent 9px) 0 0 / 44px 52px,
    linear-gradient(#f7e8d6, #f7e8d6);
}

.experience-modal-card::before {
  left: 0;
}

.experience-modal-card::after {
  right: 0;
}

.experience-modal-close {
  position: absolute;
  right: 28px;
  top: 26px;
  z-index: 3;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 23px;
  cursor: pointer;
}

.experience-modal-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(240px, 31%) 1fr;
  gap: clamp(34px, 5vw, 72px);
  height: 100%;
  align-items: center;
}

.experience-modal-photo {
  position: relative;
  display: grid;
  height: min(450px, 67vh);
  place-items: center;
  padding: 26px;
  color: #cf6b35;
  background:
    radial-gradient(circle at 54% 42%, rgba(255, 255, 255, 0.78), transparent 22%),
    linear-gradient(145deg, #fff2d5, #ffe1c1 56%, #f8efe7);
  clip-path: polygon(0 0, 100% 0, 100% 5%, 96% 6%, 100% 9%, 100% 91%, 96% 94%, 100% 95%, 100% 100%, 0 100%, 0 95%, 4% 94%, 0 91%, 0 9%, 4% 6%, 0 5%);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 42, 0.08), 0 22px 48px rgba(0, 0, 0, 0.22);
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 900;
  text-align: center;
}

.experience-modal-photo.art-1 {
  color: #202b4a;
  background: linear-gradient(145deg, #d8e6ff, #fff5d6 58%, #f4bed7);
}

.experience-modal-photo.art-2 {
  color: #c35388;
  background: linear-gradient(145deg, #f7cedd, #fff0cf 58%, #d8dfff);
}

.experience-modal-photo.art-3 {
  color: #4c6abd;
  background: linear-gradient(145deg, #d6eaff, #fff8e4 58%, #d9c2ef);
}

.experience-modal-copy {
  min-width: 0;
}

.experience-modal-kicker {
  margin: 0 0 12px;
  color: rgba(255, 233, 205, 0.56);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.experience-modal-copy h3 {
  margin: 0 0 14px;
  color: #fff4d9;
  font-size: clamp(32px, 3.4vw, 58px);
  line-height: 1;
}

.experience-modal-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.experience-modal-role span {
  padding: 9px 13px;
  color: #fff;
  background: #f08a2a;
  font-size: 13px;
  font-weight: 900;
}

.experience-modal-role b {
  color: rgba(255, 246, 232, 0.72);
  font-size: 12px;
}

.experience-modal-desc {
  max-width: 720px;
  margin: 0 0 26px;
  color: rgba(255, 246, 232, 0.72);
  font-size: 14px;
  line-height: 1.9;
}

.experience-modal-label {
  display: block;
  margin: 20px 0 10px;
  color: #ffc879;
  font-size: 12px;
}

.experience-modal-copy ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 249, 240, 0.76);
  font-size: 13px;
  line-height: 1.65;
}

@media(max-width:1050px) {
  .experience-modal {
    position: fixed;
  }

  .experience-modal-card {
    height: auto;
    min-height: 72vh;
  }

  .experience-modal-body {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .experience-modal-photo {
    height: 260px;
  }
}

/* Final live cover cleanup. */
.portfolio-cover .cover-copy h1 {
  color: #111722;
}

.portfolio-cover .cover-copy h1::after {
  content: none;
}

.portfolio-cover .cover-pixel-star {
  display: none;
}

/* Light film modal with a rich editable story area. */
.experience-modal {
  background:
    linear-gradient(90deg, rgba(31, 28, 31, 0.38), rgba(41, 42, 45, 0.34)),
    radial-gradient(circle at 24% 22%, rgba(255, 239, 204, 0.42), transparent 32%);
  overscroll-behavior: contain;
}

.experience-modal-card {
  width: min(1120px, 90vw);
  height: min(650px, 80vh);
  padding: clamp(26px, 3vw, 42px) clamp(46px, 5vw, 76px);
  color: #1b1a20;
  background:
    linear-gradient(100deg, rgba(255, 246, 232, 0.96), rgba(250, 253, 255, 0.97)),
    #fffaf2;
  box-shadow: 0 34px 86px rgba(92, 72, 83, 0.28);
}

.experience-modal-card::before,
.experience-modal-card::after {
  width: 38px;
  opacity: 0.68;
  background:
    radial-gradient(circle at 50% 21px, transparent 0 7px, rgba(76, 62, 64, 0.72) 8px 10px, transparent 11px) 0 0 / 38px 54px,
    linear-gradient(#eadfcf, #d8e7f2);
}

.experience-modal-close {
  color: #fff;
  background: rgba(32, 34, 39, 0.62);
}

.experience-modal-body {
  grid-template-columns: minmax(160px, 22%) 1fr;
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}

.experience-modal-photo {
  align-self: start;
  height: min(300px, 42vh);
  margin-top: 52px;
  padding: 18px;
  color: #c96d35;
  background:
    radial-gradient(circle at 54% 42%, rgba(255, 255, 255, 0.78), transparent 22%),
    linear-gradient(145deg, #fff0ce, #ffe2c8 56%, #fff8ed);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 42, 0.08), 0 18px 36px rgba(104, 79, 81, 0.16);
  font-size: clamp(18px, 1.55vw, 26px);
}

.experience-modal-copy {
  max-height: calc(min(650px, 80vh) - 84px);
  overflow-y: auto;
  padding-right: 14px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 153, 85, 0.46) transparent;
}

.experience-modal-kicker {
  color: rgba(136, 103, 84, 0.7);
}

.experience-modal-copy h3 {
  color: #171722;
  font-size: clamp(32px, 3vw, 52px);
}

.experience-modal-role span {
  color: #fff;
  background: #f08a2a;
}

.experience-modal-role b,
.experience-modal-desc {
  color: #635c62;
}

.experience-modal-duration {
  padding-left: 10px;
  border-left: 1px solid rgba(166, 122, 92, 0.22);
}

.experience-modal-label {
  color: #c77a22;
}

.experience-rich-text {
  min-height: 260px;
  padding: 18px 20px;
  border: 1px dashed rgba(206, 146, 90, 0.46);
  border-radius: 6px;
  color: #3d3940;
  background:
    linear-gradient(rgba(213, 165, 110, 0.08) 1px, transparent 1px),
    rgba(255, 255, 255, 0.62);
  background-size: 100% 32px;
  font-size: 14px;
  line-height: 1.9;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.experience-rich-text:focus,
.experience-rich-text.is-dragging {
  border-color: rgba(214, 141, 58, 0.7);
  box-shadow: 0 0 0 4px rgba(230, 164, 88, 0.13);
}

.experience-rich-text.is-dragging {
  background:
    linear-gradient(rgba(213, 165, 110, 0.08) 1px, transparent 1px),
    rgba(255, 251, 242, 0.86);
}

.experience-rich-text.is-inserting {
  cursor: progress;
}

.experience-rich-text p {
  margin: 0 0 14px;
}

.inline-media {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 16px 0 20px;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(111, 133, 177, 0.2);
  border-radius: 6px;
  color: #756e78;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 24px rgba(89, 73, 74, 0.08);
}

.inline-media img,
.inline-media video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0;
  border-radius: 4px;
  object-fit: contain;
  background: #fff;
}

.inline-media figcaption {
  display: none;
}

.experience-modal .experience-rich-text {
  padding: 0;
  border: 0;
  background: transparent;
  background-size: auto;
}

.experience-modal .experience-rich-text:focus,
.experience-modal .experience-rich-text.is-dragging {
  border-color: transparent;
  box-shadow: none;
}

.experience-modal .experience-rich-text.is-dragging {
  background: transparent;
}

.experience-rich-text[data-key="experience-3-rich-text"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.experience-rich-text[data-key="experience-3-rich-text"] > p,
.experience-rich-text[data-key="experience-3-rich-text"] > div:not(.inline-media),
.experience-rich-text[data-key="experience-3-rich-text"] > ul,
.experience-rich-text[data-key="experience-3-rich-text"] > ol {
  grid-column: 1 / -1;
}

.experience-rich-text[data-key="experience-3-rich-text"] > p:has(> br:only-child) {
  display: none;
}

.experience-rich-text[data-key="experience-3-rich-text"] > .inline-media {
  width: 100% !important;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.experience-rich-text[data-key="experience-3-rich-text"] > .image-embed {
  grid-column: 1 / -1;
  height: auto;
  margin: 4px 0 12px;
  overflow: visible;
}

.experience-rich-text[data-key="experience-3-rich-text"] > .image-embed img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

.experience-rich-text[data-key="experience-3-rich-text"] > .video-embed {
  align-self: start;
  overflow: hidden;
  border-radius: 8px;
}

.experience-rich-text[data-key="experience-3-rich-text"] > .video-embed video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.section-toc-shell {
  position: absolute;
  left: 4.3%;
  top: clamp(250px, 32.5vh, 306px);
  z-index: 18;
  width: clamp(190px, 13.8vw, 220px);
  pointer-events: none;
}

.site-shell {
  overflow-x: clip;
  overflow-y: visible;
}

.contact-section {
  overflow: clip;
}

.site-toc {
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
  gap: 4px;
  margin: 0;
  padding: 43px 14px 15px;
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.54) 1px, transparent 1px),
    linear-gradient(rgba(238, 215, 196, 0.18) 1px, transparent 1px),
    rgba(255, 253, 247, 0.72);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  box-shadow: 0 18px 36px rgba(111, 91, 84, 0.09);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.site-toc::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 49px;
  bottom: 23px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(#f5d7c7, #dcebff, #f6d1e2);
}

.site-toc::after {
  content: "INDEX  目录";
  position: absolute;
  left: 17px;
  top: 16px;
  color: #ed74ac;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.site-toc a {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  min-height: 36px;
  padding: 4px 10px 4px 27px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #8a7280;
  background: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.site-toc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4c9b8;
  transform: translateY(-50%);
}

.site-toc a:hover {
  color: #1d1b20;
  background: rgba(255, 247, 232, 0.8);
  transform: translateX(4px);
}

.site-toc a.is-active {
  border-color: rgba(231, 116, 166, 0.28);
  color: #171722;
  background: linear-gradient(145deg, #fff5c8, #dff0ff);
  box-shadow: 0 9px 16px rgba(112, 87, 88, 0.12);
}

.site-toc a.is-active::before {
  width: 10px;
  height: 10px;
  background: #ed74ac;
  box-shadow: 0 0 0 4px rgba(237, 116, 172, 0.16);
}

.site-toc span {
  display: block;
}

.site-toc small {
  color: #d5a084;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.site-toc a.is-active small {
  color: #ed74ac;
}

@media(max-width:1050px) {
  .section-toc-shell {
    left: 24px;
    top: 232px;
    width: 190px;
  }

  .site-toc {
    gap: 4px;
    padding: 43px 14px 15px;
  }

  .site-toc a {
    grid-template-columns: 30px 1fr;
    min-height: 36px;
    padding: 4px 10px 4px 27px;
    font-size: 13px;
    text-align: left;
  }

  .detail-section {
    padding-left: clamp(260px, 31vw, 306px);
  }

  .detail-section .section-head {
    margin-left: calc(clamp(260px, 31vw, 306px) * -1 + 24px);
  }
}

.detail-contact .section-head {
  width: 23%;
}

.contact-sheet {
  position: absolute;
  left: 31%;
  top: 18%;
  width: 61%;
  min-height: 51%;
  padding: 46px 56px 38px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 6px;
  color: #24212a;
  background:
    linear-gradient(rgba(228, 198, 181, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228, 198, 181, 0.12) 1px, transparent 1px),
    rgba(255, 253, 249, 0.91);
  background-size: 32px 32px;
  box-shadow: 0 24px 50px rgba(100, 77, 91, 0.13);
}

.contact-tape {
  position: absolute;
  left: 19%;
  top: -13px;
  width: 126px;
  height: 23px;
  background: rgba(251, 208, 105, 0.7);
  transform: rotate(-3deg);
}

.contact-sheet-kicker {
  margin: 0 0 10px;
  color: #e868a1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.contact-sheet h3 {
  margin: 0;
  color: #181724;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0;
}

.contact-sheet-desc {
  margin: 12px 0 22px;
  color: #6a626c;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.7;
}

.contact-list {
  border-top: 1px solid #eadbd2;
}

.contact-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 72px;
  border-bottom: 1px solid #eadbd2;
}

.contact-item:last-child {
  border-bottom: 0;
}

.contact-item small {
  color: #c96391;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.contact-item:nth-child(2) small {
  color: #5f9fbe;
}

.contact-item:nth-child(3) small {
  color: #bd8437;
}

.contact-item span {
  min-width: 0;
  color: #1b1921;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media(max-width:1050px) {
  .contact-sheet {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 0;
    margin-top: 42px;
    padding: 42px 34px 30px;
  }
}

@media(max-width:700px) {
  .contact-sheet {
    padding: 38px 22px 24px;
  }

  .contact-sheet h3 {
    font-size: 28px;
  }

  .contact-item {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 15px 0;
  }

  .contact-item span {
    font-size: 15px;
  }
}

@media(max-width:700px) {
  .section-toc-shell {
    display: none;
  }

  .detail-section {
    padding-left: 18px;
  }

  .detail-section .section-head {
    margin-left: 0;
  }
}

@media(max-width:1050px) {
  .experience-modal-card {
    height: auto;
    max-height: 88vh;
    overflow-y: auto;
  }

  .experience-modal-photo {
    width: min(260px, 100%);
    height: 220px;
    margin-top: 0;
  }

  .experience-modal-copy {
    max-height: none;
    overflow: visible;
  }
}

/* Keep pasted project copy on every card's default typography. */
.project-ticket h3 {
  color: #201d24;
}

.project-ticket .detail-card-front > h3 + p {
  color: #745f6d;
}

.project-ticket .detail-card-front > .project-demo + p,
.project-ticket .detail-card-back > p {
  color: #5a535d;
}

.project-ticket .detail-card-back li {
  color: #504951;
}

.project-ticket h3 *,
.project-ticket .detail-card-front > h3 + p *,
.project-ticket .detail-card-front > .project-demo + p *,
.project-ticket .detail-card-back > p *,
.project-ticket .detail-card-back li * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  background: transparent !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Four-project focus rail. */
.detail-projects .project-tickets {
  left: 29%;
  top: 17%;
  display: flex;
  align-items: flex-end;
  gap: 1.6%;
  width: 65%;
  height: 66%;
  outline: none;
  touch-action: pan-y;
}

.detail-projects .project-tickets.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.detail-projects .project-ticket {
  flex: 1 1 0;
  min-width: 0;
  z-index: 1;
  height: 72%;
  opacity: 0.78;
  cursor: pointer;
  transform-origin: bottom center;
  transition: flex-grow 300ms ease, transform 260ms ease, opacity 220ms ease, box-shadow 260ms ease, height 300ms ease;
}

.detail-projects .project-ticket.importance-low:not(.is-active) {
  flex-grow: 0.62;
  height: 56%;
  opacity: 0.55;
  transform: rotate(-1deg);
}

.detail-projects .project-ticket.importance-secondary:not(.is-active) {
  flex-grow: 1.05;
  height: 78%;
  opacity: 0.88;
  transform: rotate(-0.35deg);
}

.detail-projects .project-ticket.importance-flagship:not(.is-active) {
  flex-grow: 1.1;
  height: 80%;
  opacity: 0.9;
}

.detail-projects .project-ticket.importance-incubating:not(.is-active) {
  flex-grow: 0.95;
  height: 68%;
  opacity: 0.82;
  transform: rotate(0.7deg);
  background: rgba(248, 251, 255, 0.97);
}

.detail-projects .project-ticket.is-active {
  flex-grow: 2.1;
  z-index: 4;
  height: 100%;
  opacity: 1;
  box-shadow: 0 32px 58px rgba(95, 72, 88, 0.24);
  transform: translateY(-8px);
}

.detail-projects .project-ticket:not(.is-active):hover {
  opacity: 1;
  transform: translateY(-5px);
}

.detail-projects .project-ticket.is-active:hover {
  transform: translateY(-12px);
}

.detail-projects .project-ticket .detail-card-front {
  display: flex;
  flex-direction: column;
  padding: 23px 19px 18px;
}

.detail-projects .project-ticket h3 {
  margin: 17px 0 5px;
  font-size: clamp(17px, 1.25vw, 23px);
  line-height: 1.12;
}

.detail-projects .project-ticket.importance-low:not(.is-active) .detail-card-front {
  padding: 18px 14px 14px;
}

.detail-projects .project-ticket.importance-low:not(.is-active) .project-topline b,
.detail-projects .project-ticket.importance-low:not(.is-active) .detail-chips {
  display: none;
}

.detail-projects .project-ticket.importance-low:not(.is-active) h3 {
  margin-top: 22px;
  font-size: clamp(14px, 1vw, 18px);
}

.detail-projects .project-ticket.importance-low:not(.is-active) h3 + p {
  min-height: 28px;
  font-size: 9px;
}

.detail-projects .project-ticket.importance-low:not(.is-active) .project-demo {
  flex-basis: 28%;
  min-height: 70px;
  margin: 11px 0;
  border-width: 4px;
  font-size: 9px;
}

.detail-projects .project-ticket.importance-secondary:not(.is-active) h3,
.detail-projects .project-ticket.importance-flagship:not(.is-active) h3,
.detail-projects .project-ticket.importance-incubating:not(.is-active) h3 {
  font-size: clamp(16px, 1.16vw, 21px);
}

.detail-projects .project-ticket.importance-secondary:not(.is-active) .project-demo,
.detail-projects .project-ticket.importance-flagship:not(.is-active) .project-demo,
.detail-projects .project-ticket.importance-incubating:not(.is-active) .project-demo {
  min-height: 90px;
}

.detail-projects .project-ticket h3 + p {
  min-height: 34px;
  font-size: 10px;
}

.detail-projects .project-demo {
  flex: 0 0 29%;
  height: auto;
  min-height: 105px;
  margin: 15px 0 13px;
  border-width: 6px;
}

.project-demo.has-preview-image,
.project-readme-demo.has-preview-image {
  overflow: hidden;
  padding: 0;
  background: #f4f6f1;
}

.project-demo.has-preview-image img,
.project-readme-demo.has-preview-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-projects .project-ticket[data-project-card="2"] .project-demo.has-preview-image,
.project-readme-demo.art-2.has-preview-image {
  background: #07101d;
}

.detail-projects .project-ticket[data-project-card="0"] .project-demo {
  color: #55536c;
  background: linear-gradient(145deg, #f5e6ee, #cbd4ef 62%, #f4e7c9);
  font-size: clamp(14px, 1.2vw, 20px);
}

.detail-projects .project-ticket[data-project-card="0"]:not(.is-active) .project-demo {
  font-size: 11px;
}

.detail-projects .project-demo + p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.detail-projects .project-ticket:not(.is-active) .project-demo + p {
  display: none;
}

.detail-projects .detail-chips {
  gap: 5px;
  margin-top: 11px;
}

.detail-projects .detail-chips span {
  padding: 4px 6px;
  font-size: 9px;
}

.project-open {
  align-self: flex-end;
  margin-top: auto;
  padding: 8px 0 0;
  border: 0;
  color: #bd557f;
  background: transparent;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.project-open:hover {
  color: #e7669f;
}

.detail-projects .project-pagination {
  left: 61.5%;
  bottom: 5.2%;
  gap: 15px;
}

.detail-projects .detail-arrow {
  display: none;
}

.detail-projects .project-pagination button,
.detail-projects .project-pagination button.active {
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d7b9c8;
  box-shadow: 0 0 0 1px rgba(213, 112, 157, 0.4);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.detail-projects .project-pagination button.active {
  background: #ed74ac;
  box-shadow: 0 0 0 5px rgba(237, 116, 172, 0.14);
  transform: scale(1.18);
}

/* README project dialog. */
.project-modal {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(45, 39, 45, 0.46);
  backdrop-filter: blur(8px);
  transition: opacity 220ms ease, visibility 220ms ease;
}

.project-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.project-readme-dialog {
  position: relative;
  width: min(1080px, 89vw);
  height: min(670px, 82vh);
  overflow: hidden;
  border: 1px solid rgba(95, 78, 91, 0.14);
  border-radius: 6px;
  color: #28242b;
  background: #fffdf9;
  box-shadow: 0 36px 90px rgba(55, 45, 53, 0.32);
  transform: translateY(18px) scale(0.98);
  transition: transform 240ms ease;
}

.project-modal.is-open .project-readme-dialog {
  transform: translateY(0) scale(1);
}

.project-modal-close {
  position: absolute;
  right: 18px;
  top: 13px;
  z-index: 4;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #5e5660;
  background: rgba(255, 255, 255, 0.78);
  font-size: 20px;
  cursor: pointer;
}

.project-readme-content {
  height: 100%;
}

.readme-window-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 58px;
  padding: 0 64px 0 22px;
  border-bottom: 1px solid rgba(129, 107, 121, 0.13);
  background: linear-gradient(90deg, #fff4dc, #f1f6ff);
}

.readme-window-bar > div {
  display: flex;
  gap: 7px;
}

.readme-window-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef8eb8;
}

.readme-window-bar i:nth-child(2) {
  background: #efcc75;
}

.readme-window-bar i:nth-child(3) {
  background: #98bedc;
}

.readme-window-bar strong {
  font-size: 13px;
}

.readme-window-bar > span {
  justify-self: end;
  color: #a56582;
  font-size: 10px;
  font-weight: 900;
}

.project-readme-body {
  display: grid;
  grid-template-columns: minmax(235px, 29%) 1fr;
  height: calc(100% - 58px);
}

.project-readme-aside {
  padding: 38px 28px;
  border-right: 1px solid rgba(129, 107, 121, 0.12);
  background:
    linear-gradient(rgba(161, 183, 218, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(161, 183, 218, 0.1) 1px, transparent 1px),
    #fffaf1;
  background-size: 22px 22px;
}

.project-readme-demo {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  border: 8px solid #fff;
  border-radius: 4px;
  color: #745f6d;
  background: linear-gradient(145deg, #f0dce8, #c1caed 60%, #f3deb8);
  box-shadow: 0 16px 28px rgba(94, 71, 85, 0.13);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.project-readme-aside > span {
  display: block;
  margin-top: 20px;
  color: #b45b84;
  font-size: 11px;
  font-weight: 900;
}

.project-readme-copy {
  min-width: 0;
  overflow-y: auto;
  padding: 42px 52px 50px;
  scrollbar-width: thin;
  scrollbar-color: rgba(213, 112, 157, 0.35) transparent;
}

.project-readme-kicker {
  margin: 0 0 11px;
  color: #df6b9e;
  font-size: 10px;
  font-weight: 950;
}

.project-readme-copy h3 {
  margin: 0;
  color: #1c1a21;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
}

.project-readme-subtitle {
  margin: 10px 0 30px;
  color: #756975;
  font-size: 14px;
  font-weight: 700;
}

.project-readme-copy section {
  padding: 22px 0;
  border-top: 1px solid rgba(128, 105, 119, 0.14);
}

.project-readme-copy h4 {
  margin: 0 0 10px;
  color: #b65380;
  font-size: 12px;
}

.project-readme-copy section p,
.project-readme-copy li {
  color: #504951;
  font-size: 14px;
  line-height: 1.85;
}

.project-readme-copy h3 *,
.project-readme-subtitle *,
.project-readme-copy section p *,
.project-readme-copy li * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  background: transparent !important;
  text-shadow: none !important;
}

.project-readme-copy ul {
  margin: 0;
  padding-left: 20px;
}

.project-readme-steps {
  padding-bottom: 0 !important;
}

.project-readme-step {
  padding: 18px 0 28px;
  border-top: 1px solid rgba(128, 105, 119, 0.12);
}

.project-readme-step:first-of-type {
  border-top: 0;
}

.project-readme-step header {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.project-readme-step header span {
  color: #d76597;
  font-size: 10px;
  font-weight: 900;
}

.project-readme-step h5 {
  margin: 0;
  color: #28242b;
  font-size: 17px;
}

.project-readme-step > p {
  margin: 8px 0 14px;
}

.project-readme-step > a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(111, 126, 113, 0.2);
  border-radius: 4px;
  background: #f5f7f2;
  cursor: zoom-in;
}

.project-readme-step img {
  display: block;
  width: 100%;
  height: auto;
}

.project-architecture-image {
  margin: 18px 0 4px;
  overflow: hidden;
  border: 1px solid rgba(91, 111, 154, 0.2);
  border-radius: 6px;
  background: #f8fbff;
  box-shadow: 0 14px 28px rgba(70, 82, 108, 0.11);
}

.project-architecture-image a {
  display: block;
  cursor: zoom-in;
}

.project-architecture-image img {
  display: block;
  width: 100%;
  height: auto;
}

.project-architecture-image figcaption {
  margin: 0;
  padding: 9px 12px;
  color: #6d6872;
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.scrap-note {
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.scrap-note:hover {
  box-shadow: 0 30px 56px rgba(91, 68, 83, 0.22);
}

.scrap-photo {
  display: grid;
  place-items: center;
}

.scrap-photo span {
  max-width: 94%;
  color: rgba(50, 43, 57, 0.63);
  font-size: clamp(15px, 1.45vw, 24px);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
}

.scrap-open {
  position: absolute;
  right: 18px;
  bottom: 16px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(216, 122, 164, 0.34);
  border-radius: 4px;
  color: #b95782;
  background: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.beyond-modal {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  background:
    linear-gradient(90deg, rgba(42, 37, 45, 0.48), rgba(37, 40, 48, 0.42)),
    radial-gradient(circle at 21% 22%, rgba(234, 112, 168, 0.2), transparent 32%),
    radial-gradient(circle at 78% 74%, rgba(151, 183, 230, 0.18), transparent 28%);
  opacity: 0;
  pointer-events: none;
  overscroll-behavior: contain;
  transition: opacity 220ms ease;
}

.beyond-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.beyond-modal-card {
  position: relative;
  width: min(980px, 90vw);
  height: min(660px, 82vh);
  padding: clamp(34px, 4vw, 58px) clamp(42px, 5vw, 74px);
  overflow: hidden;
  color: #1a1820;
  background:
    linear-gradient(rgba(228, 167, 197, 0.08) 1px, transparent 1px) 0 118px / 100% 34px,
    linear-gradient(102deg, rgba(255, 252, 246, 0.98), rgba(248, 252, 255, 0.98)),
    #fffdf8;
  box-shadow: 0 34px 86px rgba(88, 66, 82, 0.3);
}

.beyond-modal-card::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(#e99abb, #a9c5ed);
  opacity: 0.62;
}

.beyond-modal-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 142px;
  height: 30px;
  background: rgba(239, 144, 186, 0.58);
  transform: translate(76px, 8px) rotate(-3deg);
}

.beyond-modal-close {
  position: absolute;
  right: 28px;
  top: 24px;
  z-index: 4;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(42, 43, 49, 0.64);
  font-size: 24px;
  cursor: pointer;
}

.beyond-modal-body {
  position: relative;
  z-index: 2;
  height: 100%;
}

.beyond-modal-copy {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  padding-left: clamp(8px, 1.2vw, 18px);
}

.beyond-modal-kicker {
  margin: 0 0 12px;
  color: rgba(160, 90, 126, 0.7);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.beyond-modal-copy h3 {
  margin: 0 0 28px;
  color: #171722;
  font-size: clamp(44px, 5.2vw, 88px);
  line-height: 0.92;
}

.beyond-modal-label {
  display: block;
  color: #b95782;
  font-size: 12px;
  font-weight: 950;
}

.beyond-rich-text {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  border-color: rgba(222, 136, 175, 0.42);
  background:
    linear-gradient(rgba(226, 147, 185, 0.09) 1px, transparent 1px),
    rgba(255, 255, 255, 0.66);
  background-size: 100% 34px;
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 99, 144, 0.46) transparent;
}

.beyond-rich-text:focus,
.beyond-rich-text.is-dragging {
  border-color: rgba(222, 111, 162, 0.72);
  box-shadow: 0 0 0 4px rgba(224, 119, 167, 0.14);
}

.is-readonly-live .experience-rich-text,
.is-readonly-live .beyond-rich-text {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-size: auto;
  box-shadow: none;
}

.is-readonly-live .experience-rich-text:focus,
.is-readonly-live .experience-rich-text.is-dragging,
.is-readonly-live .beyond-rich-text:focus,
.is-readonly-live .beyond-rich-text.is-dragging {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.experience-rich-text a {
  color: #b84f7e;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(184, 79, 126, 0.42);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media(max-width:1050px) {
  .detail-projects .project-tickets {
    display: flex;
    justify-content: center;
    height: 530px;
    gap: 0;
  }

  .detail-projects .project-ticket:not(.is-active) {
    display: none;
  }

  .detail-projects .project-ticket.is-active {
    display: block;
    flex: 0 1 620px;
    width: min(100%, 620px);
    height: 500px;
    transform: none;
  }

  .detail-projects .project-pagination {
    position: relative;
    left: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
    transform: none;
  }

  .project-modal {
    position: fixed;
  }

  .project-readme-dialog {
    height: min(760px, 88vh);
  }
}

@media(max-width:700px) {
  .detail-projects .project-tickets {
    display: flex;
    height: 510px;
  }

  .detail-projects .project-ticket.is-active,
  .detail-projects .project-ticket.is-active:hover {
    width: 100%;
    height: 480px;
    transform: none;
  }

  .detail-projects .project-ticket.is-active {
    box-shadow: 0 0 0 3px rgba(237, 116, 172, 0.24), 0 24px 45px rgba(95, 72, 88, 0.18);
  }

  .project-readme-dialog {
    width: 94vw;
    height: 90vh;
  }

  .readme-window-bar {
    padding-left: 16px;
  }

  .project-readme-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .project-readme-aside {
    padding: 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(129, 107, 121, 0.12);
  }

  .project-readme-demo {
    max-width: 320px;
  }

  .project-readme-copy {
    overflow: visible;
    padding: 30px 24px 42px;
  }

}