.mp-intro-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:9100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.mp-intro-overlay.open{opacity:1;pointer-events:auto;}
.mp-intro-panel{
  background:var(--surface);
  border-radius:18px;
  padding:24px 22px 20px;
  width:100%;max-width:340px;
  box-shadow:0 8px 32px rgba(45,55,72,.22);
  transform:scale(.92);
  transition:transform .25s ease;
}
.mp-intro-overlay.open .mp-intro-panel{transform:scale(1);}
.mp-intro-title{
  font-size:15px;font-weight:900;color:var(--t1);
  text-align:center;margin:0 0 4px;letter-spacing:-.01em;
}
.mp-intro-sub{
  font-size:12px;color:var(--t4);
  text-align:center;line-height:1.6;margin:0 0 18px;
}
.mp-intro-btn-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:14px;
}
.mp-intro-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:18px 10px;
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:14px;
  cursor:pointer;font-family:var(--font);
  transition:all .15s ease;
}
.mp-intro-btn:active{transform:scale(.96);}
.mp-intro-btn:hover{
  border-color:var(--accent3);
  background:var(--surface);
  box-shadow:0 2px 8px rgba(74,85,104,.10);
}
.mp-intro-btn-icon{font-size:22px;line-height:1;}
.mp-intro-btn-label{
  font-size:12px;font-weight:900;color:var(--t1);letter-spacing:.01em;
}
.mp-intro-checkbox-row{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:14px 0 6px;
  cursor:pointer;user-select:none;
}
.mp-intro-checkbox{
  width:16px;height:16px;cursor:pointer;
  accent-color:var(--accent3);
}
.mp-intro-checkbox-label{
  font-size:12px;color:var(--t3);font-weight:700;
}
.mp-intro-note{
  font-size:10px;color:var(--t5);
  text-align:center;line-height:1.5;margin:0;
}

.mp-intro-close-btn{
  display:none;
  width:100%;
  border:1px solid var(--border2);
  background:var(--bg2);
  color:var(--t2);
  border-radius:999px;
  padding:10px 12px;
  margin:14px 0 0;
  font-family:var(--font);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.mp-intro-close-btn:active{transform:scale(.98);}
.mp-intro-overlay.create-guide-mode .mp-intro-checkbox-row,
.mp-intro-overlay.create-guide-mode .mp-intro-note{
  display:none;
}
.mp-intro-overlay.create-guide-mode .mp-intro-close-btn{
  display:inline-flex;align-items:center;justify-content:center;
}

.mp-intro-overlay.create-guide-mode .mpw-s2-start{ display:none; }

.mp-intro-overlay.create-guide-mode .mpw-x{ margin-left:auto; }



.mp-intro-page{display:none;}
.mp-intro-page.active{display:block;}


.mpw{ --mpw-sage:#aeb7a4; }
.mpw-viewport{ overflow:hidden; touch-action:pan-y; }
.mpw-track{ display:flex; width:200%; transition:transform .46s cubic-bezier(.22,.7,.24,1); }
.mpw-slide{ width:50%; flex:0 0 50%; display:flex; flex-direction:column; }
.mpw-slide[aria-hidden="true"]{}

.mpw-eyebrow{ display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.mpw-brand{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 7px;
  border-radius:999px; background:var(--bg2); color:var(--accent); font-weight:900; font-size:12px; }
.mpw-brand-dot{ width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff, var(--accent)); }
.mpw-step{ margin-left:auto; color:var(--t4); font-size:12px; font-weight:800; letter-spacing:.04em; }
.mpw-step b{ color:var(--accent); }
.mpw-logo{ height:20px; width:auto; display:block; }
.mpw-x{ margin-left:6px; width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--border2); background:var(--surface);
  color:var(--t3); cursor:pointer; display:grid; place-items:center; flex:0 0 auto;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.mpw-x:hover{ background:var(--bg2); color:var(--t1); border-color:var(--accent3); }
.mpw-x svg{ width:15px; height:15px; }

#mpwSlide1 .mpw-a-guide{ margin-top:12px; }
.mpw-a-guide .mpw-ico{ background:var(--mpw-sage); color:#41492f; }

.mpw-title{ font-size:22px; line-height:1.3; font-weight:900; color:var(--t1);
  margin:2px 0 6px; letter-spacing:.01em; text-align:center; }
.mpw-sub{ font-size:13px; line-height:1.65; color:var(--t3); margin:0 0 15px; font-weight:600; text-align:center; }
.mpw-sub em{ font-style:normal; color:var(--accent); font-weight:900; }

.mpw-checks{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.mpw-check{ display:flex; align-items:center; gap:11px; }
.mpw-chip{ flex:0 0 auto; width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:var(--bg2); color:var(--accent); }
.mpw-chip svg{ width:17px; height:17px; }
.mpw-check-t{ font-size:14px; font-weight:800; color:var(--t1); display:flex; flex-direction:column; }
.mpw-check-s{ font-size:11px; color:var(--t4); font-weight:600; margin-top:1px; }
.mpw-tick{ margin-left:auto; width:18px; height:18px; border-radius:50%;
  border:1.6px solid var(--border); display:grid; place-items:center; color:var(--t5); }
.mpw-tick svg{ width:10px; height:10px; }

.mpw-preview{ border-radius:16px; overflow:hidden; background:var(--bg2);
  box-shadow:inset 0 0 0 1px var(--border); }
.mpw-pv-cover{ height:58px; background:linear-gradient(120deg,var(--mpw-sage),#c8cebf 72%,#d9ddd1); position:relative; }
.mpw-pv-cover::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 140% at 85% -20%, rgba(255,255,255,.5), transparent 55%); }
.mpw-pv-body{ padding:0 14px 9px; margin-top:-20px; position:relative; z-index:2; display:flex; align-items:flex-end; gap:12px; }
.mpw-pv-ava{ width:48px; height:48px; border-radius:50%; background:var(--surface);
  box-shadow:0 0 0 3px var(--surface); position:relative; z-index:2; display:grid; place-items:center; color:var(--t5); }
.mpw-pv-ava svg{ width:24px; height:24px; }
.mpw-pv-lines{ flex:1 1 auto; margin:0; display:flex; flex-direction:column; gap:7px; }
.mpw-pv-lines i{ display:block; height:8px; border-radius:5px; background:var(--border); }
.mpw-pv-lines i:nth-child(1){ width:56%; }
.mpw-pv-lines i:nth-child(2){ width:90%; }

.mpw-seclabel{ font-size:12px; font-weight:800; color:var(--t3); margin:2px 2px 8px; text-align:left; }
.mpw-seclabel + .mpw-action + .mpw-seclabel{ margin-top:16px; }
.mpw-s2mid{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:8px 0; }
.mpw-s2mid > .mpw-s2-start{ display:flex; flex-direction:column; }
.mpw-action{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:13px 14px; border-radius:15px; border:1.5px solid var(--border); background:var(--surface);
  color:var(--t1); font-family:var(--font);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
.mpw-action:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -16px rgba(45,55,72,.45); border-color:var(--accent3); }
.mpw-action:active{ transform:scale(.98); }
.mpw-ico{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; }
.mpw-ico svg{ width:22px; height:22px; }
.mpw-a-ex .mpw-ico{ background:var(--bg2); color:var(--accent); }
.mpw-a-demo .mpw-ico{ background:var(--mpw-sage); color:#41492f; }
.mpw-atxt{ display:flex; flex-direction:column; }
.mpw-atitle{ font-weight:900; font-size:15px; color:var(--t1); }
.mpw-asub{ font-size:11px; color:var(--t4); font-weight:600; margin-top:2px; }
.mpw-go{ margin-left:auto; color:var(--t5); display:grid; place-items:center; }
.mpw-go svg{ width:15px; height:15px; }
.mpw-note2{ font-size:11px; color:var(--t4); text-align:center; margin:14px 0 0; line-height:1.5; }
.mpw-note2 b{ color:var(--t3); }

.mpw-foot{ display:flex; align-items:center; gap:10px; padding:14px 0 4px; }
.mpw-dots{ display:flex; gap:6px; }
.mpw-dots button{ width:7px; height:7px; padding:0; border:0; border-radius:99px; background:var(--border2);
  cursor:pointer; transition:width .32s ease, background .32s ease; }
.mpw-dots button.on{ width:20px; background:var(--accent); }
.mpw-navbtns{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.mpw-swipe{ display:flex; align-items:center; gap:4px; color:var(--t5); font-size:11px; font-weight:700; letter-spacing:.03em; }
.mpw-swipe svg{ width:12px; height:12px; }
.mpw-arrow{ width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border);
  background:var(--surface); color:var(--accent); cursor:pointer; display:grid; place-items:center;
  transition:transform .16s ease, box-shadow .2s, background .2s, opacity .2s, color .2s; }
.mpw-arrow svg{ width:17px; height:17px; }
.mpw-arrow.mpw-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.mpw-arrow:hover{ transform:translateY(-1px); }
.mpw-arrow:disabled{ opacity:.34; cursor:default; transform:none; }


.mpw.mpw--single .mpw-slide1-hide,
.mpw.mpw--single .mpw-foot{ display:none; }
.mpw.mpw--single #mpwSlide1{ display:none; }
.mpw.mpw--single .mpw-track{ width:100%; transform:none !important; }
.mpw.mpw--single .mpw-slide{ width:100%; flex-basis:100%; }
.mpw.mpw--single .mpw-step{ display:none; }

@media (prefers-reduced-motion: reduce){
  .mpw-track,.mpw-action,.mpw-arrow,.mpw-dots button{ transition:none; }
}



.mp-genre-back{
  display:inline-flex;align-items:center;gap:4px;
  background:transparent;border:none;
  color:var(--t3);font-size:12px;font-weight:700;
  font-family:var(--font);cursor:pointer;
  padding:4px 8px 4px 0;margin-bottom:8px;
  transition:color .15s ease;
}
.mp-genre-back:hover{color:var(--t1);}
.mp-genre-back svg{width:14px;height:14px;}
.mp-genre-hd{
  display:flex;flex-direction:column;gap:4px;
  margin-bottom:14px;
}
.mp-genre-hd-title{
  font-size:16px;font-weight:900;color:var(--t1);
  letter-spacing:-.01em;line-height:1.4;
}
.mp-genre-hd-sub{
  font-size:11px;color:var(--t4);line-height:1.6;
}
.mp-genre-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
.mp-genre-card{
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:12px 4px;
  text-align:center;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--font);
  transition:all .15s ease;
}
@media (hover:hover){
  .mp-genre-card:hover{
    border-color:var(--accent3);
    background:var(--surface);
    box-shadow:0 2px 6px rgba(74,85,104,.10);
  }
}
.mp-genre-card:active{transform:scale(.96);}
.mp-genre-card-icon{font-size:22px;line-height:1;}
.mp-genre-card-name{
  font-size:11px;font-weight:900;color:var(--t1);
  line-height:1.25;
}
.mp-genre-card-sub{
  font-size:9px;color:var(--t5);font-weight:700;
  line-height:1.3;
}


.mp-sample-hd{
  display:flex;flex-direction:column;gap:4px;
  margin-bottom:12px;
}
.mp-sample-back-row{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.mp-sample-genre-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:900;color:var(--t3);
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:99px;padding:4px 10px;
}
.mp-sample-title{
  font-size:15px;font-weight:900;color:var(--t1);letter-spacing:-.01em;
}
.mp-sample-sub{
  font-size:11px;color:var(--t4);
}
.mp-tpl-rail{
  display:flex;gap:10px;overflow-x:auto;
  margin:0 -22px;padding:0 22px 6px;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.mp-tpl-rail::-webkit-scrollbar{display:none;}
.mp-tpl-card{
  width:280px;min-width:280px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(74,85,104,.08);
  scroll-snap-align:start;
  flex-shrink:0;
}
.mp-tpl-cover{
  height:54px;
  background:linear-gradient(135deg,#E2E8F0,#C8D4E0 42%,#F7F8FA 100%);
  position:relative;overflow:hidden;
}
.mp-tpl-badge{
  position:absolute;top:9px;left:9px;
  font-size:11px;font-weight:900;color:#fff;
  background:rgba(45,55,72,.82);
  border:1px solid rgba(255,255,255,.3);
  border-radius:99px;padding:3px 9px;
}
.mp-tpl-body{padding:0 14px 14px;}
.mp-tpl-prof{
  display:flex;align-items:flex-end;gap:10px;
  margin-top:-20px;position:relative;z-index:2;margin-bottom:10px;
}
.mp-tpl-icon{
  width:44px;height:44px;border-radius:11px;
  background:var(--bg3);
  border:2.5px solid var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:21px;
  box-shadow:0 2px 6px rgba(74,85,104,.10);
  flex-shrink:0;
}
.mp-tpl-meta{padding-bottom:3px;min-width:0;flex:1;}
.mp-tpl-type{
  font-size:14px;font-weight:900;color:var(--t1);line-height:1.2;
}
.mp-tpl-copy{
  font-size:12px;color:var(--t4);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mp-tl-list{
  display:flex;flex-direction:column;gap:5px;margin:8px 0 10px;
}
.mp-tl-row{display:flex;align-items:center;gap:7px;}
.mp-tl-yr{
  font-family:var(--mono);font-size:12px;font-weight:700;
  background:#CBD5E0;color:#4A5568;
  border-radius:4px;padding:2px 6px;flex-shrink:0;
}
.mp-tl-month{
  font-family:var(--mono);font-size:11px;font-weight:400;
  background:#fff;color:#4A5568;
  border-radius:4px;padding:2px 5px;flex-shrink:0;margin-right:3px;
}
.mp-tl-txt{
  font-size:12px;color:var(--t2);line-height:1.4;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:6px;padding:6px 9px;flex:1;
  display:flex;align-items:center;overflow:hidden;
}
.mp-tl-txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-tpl-tags{
  display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;
}
.mp-tpl-tag{
  font-size:11px;color:var(--t3);
  background:var(--bg3);border:1px solid var(--border);
  border-radius:99px;padding:3px 9px;font-weight:700;
}
.mp-rail-dots{
  display:flex;gap:4px;justify-content:center;
  padding:4px 0 12px;
}
.mp-rail-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--bg3);transition:.2s ease;
}
.mp-rail-dot.active{
  width:14px;border-radius:3px;background:var(--accent3);
}
.mp-sample-footer{
  display:flex;gap:8px;margin-top:6px;
  justify-content:center;
}
.mp-sample-footer-btn-secondary{
  padding:11px 28px;
  background:var(--bg3);color:var(--t2);
  border:1.5px solid var(--border);
  border-radius:11px;
  font-size:12px;font-weight:700;
  font-family:var(--font);cursor:pointer;
  white-space:nowrap;
  transition:.12s ease;
}
.mp-sample-footer-btn-secondary:hover{
  background:var(--bg2);
}
.mp-sample-footer-btn-primary{
  flex:1;padding:11px;
  background:var(--accent3);color:#fff;
  border:none;border-radius:11px;
  font-size:13px;font-weight:900;
  font-family:var(--font);cursor:pointer;
  letter-spacing:.02em;transition:.12s ease;
}
.mp-sample-footer-btn-primary:disabled{
  opacity:.4;cursor:not-allowed;
}


.mp-intro-overlay.sample-mode{
  padding:16px;
}
.mp-intro-overlay.sample-mode .mp-intro-panel{
  max-width:560px;
  padding:20px 18px 18px;
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
}


.mp-intro-overlay.demo-mode{
  padding:0;
}
.mp-intro-overlay.demo-mode .mp-intro-panel{
  max-width:none;
  width:100%;height:100dvh;
  padding:0;
  border-radius:0;
  background:var(--bg);
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:none;
}
.mp-intro-overlay.demo-mode .mp-intro-page{
  height:100%;
  display:none;
}
.mp-intro-overlay.demo-mode .mp-intro-page.active{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  height:100%;
}
.mp-intro-overlay.demo-mode #mpIntroPageDemo.active{
  padding:0;
  margin:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mp-intro-overlay.demo-mode #mpIntroPageDemo .tt-app{
  width:calc(100% - 24px);
  max-width:480px;
}


.mp-intro-overlay.demo-mode #mpIntroPageLikeDemo.active,
.mp-intro-overlay.demo-mode #mpIntroPageEmpathyDemo.active,
.mp-intro-overlay.demo-mode #mpIntroPageReactionDemo.active,
.mp-intro-overlay.demo-mode #mpIntroPageMypageGuide.active{
  padding:0;margin:0;width:100%;
  display:flex;align-items:center;justify-content:center;
}


.ld-app{
  width:calc(100% - 24px);max-width:480px;
  height:100%;
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:var(--bg);
  border-left:1px solid rgba(74,85,104,.08);
  border-right:1px solid rgba(74,85,104,.08);
}
.ld-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px 10px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  flex-shrink:0;min-height:48px;
}
.ld-header-title{
  font-size:14px;font-weight:900;color:var(--t1);letter-spacing:-.01em;
}
.ld-end-btn{
  background:var(--bg3);
  border:1.5px solid var(--border);
  border-radius:9px;
  padding:7px 14px;
  font-size:12px;font-weight:700;color:var(--t2);
  font-family:var(--font);cursor:pointer;
  transition:.12s ease;
}
.ld-end-btn:active{transform:scale(.96);}

.ld-stage{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:24px 18px;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg3) 100%);
  overflow:hidden;
}


.ld-mock-resume{
  width:100%;max-width:340px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:16px;
  padding:14px 16px 18px;
  box-shadow:0 4px 14px rgba(74,85,104,.08);
  position:relative;
}
.ld-mock-cover{
  height:60px;border-radius:10px;
  background:linear-gradient(135deg,#FFD6B0 0%,#FFAA80 50%,#FF8FB1 100%);
  margin:-2px -2px 14px;
  opacity:.55;
}
.ld-mock-row{
  display:flex;align-items:center;gap:10px;
  position:relative;
  min-height:48px;
}
.ld-mock-avatar{
  width:42px;height:42px;border-radius:11px;
  background:var(--bg3);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.ld-mock-meta{flex:1;min-width:0;padding-right:54px;}
.ld-mock-name{
  font-size:14px;font-weight:900;color:var(--t1);
  letter-spacing:-.01em;
}
.ld-mock-copy{
  font-size:11px;color:var(--t4);margin-top:3px;
}

.ld-fake-like{
  position:absolute !important;
  right:0;top:50% !important;
  transform:translateY(-50%);
}
.ld-fake-like.liked{color:var(--like-color);}
.ld-fake-like.liked svg{fill:var(--like-color);}
.ld-fake-like.liked .ld-pop{
  animation:ldHeartPop .5s ease;
}
@keyframes ldHeartPop{
  0%{transform:scale(1);}
  40%{transform:scale(1.5);}
  100%{transform:scale(1);}
}


.ld-mock-tlmodal{
  width:100%;max-width:300px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:14px 16px 16px;
  box-shadow:0 4px 14px rgba(74,85,104,.08);
}
.ld-mock-tlmodal-hd{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:12px;
  position:relative;
}
.ld-mock-yr{
  font-family:var(--mono);font-size:12px;font-weight:700;
  background:var(--tl-yr-bg);color:var(--tl-yr-color);
  border-radius:4px;padding:5px 10px;
}
.ld-fake-empathy{position:relative;z-index:2;}
.ld-mock-tlmodal-title{
  font-size:15px;font-weight:900;color:var(--t1);
  margin-bottom:8px;letter-spacing:-.01em;
}
.ld-mock-tlmodal-body{
  font-size:12px;color:var(--t3);line-height:1.6;
}
.ld-mock-tlmodal-counts{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
  min-height:0;
}


.ld-mock-hlmodal{
  width:100%;max-width:300px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:14px 16px 16px;
  box-shadow:0 4px 14px rgba(74,85,104,.08);
}
.ld-mock-hlmodal-hd{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:6px;
  position:relative;
}
.ld-mock-hl-lbl{
  font-size:12px;font-weight:700;color:var(--t4);
  letter-spacing:.04em;
}
.ld-fake-react{
  background:transparent;
  border:2px solid var(--accent2);
  color:var(--accent2);
  border-radius:99px;
  padding:5px 12px;
  font-size:12px;font-weight:700;
  cursor:pointer;font-family:var(--font);
  transition:all .15s;
  display:flex;align-items:center;gap:5px;
  position:relative;z-index:2;
}
.ld-fake-react.active{
  background:var(--accent2);
  color:#fff;
}
.ld-mock-hlmodal-counts{
  display:flex;flex-wrap:wrap;gap:6px;
  min-height:0;margin-bottom:6px;
}
.ld-mock-hlmodal-divider{
  border:none;border-top:1px solid var(--border);
  margin:8px -16px 12px;
}
.ld-mock-hlmodal-label{
  font-size:11px;font-weight:600;color:var(--t4);
  letter-spacing:.04em;text-align:center;margin-bottom:4px;
}
.ld-mock-hlmodal-title{
  font-size:16px;font-weight:900;color:var(--t1);
  text-align:center;margin-bottom:10px;letter-spacing:-.01em;
}
.ld-mock-hlmodal-cover{
  height:90px;border-radius:10px;
  background:linear-gradient(135deg,#A78BFA 0%,#EC4899 100%);
}


.ld-count-badge{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:99px;padding:5px 10px;
  font-size:11px;font-weight:700;color:var(--t3);
  font-family:var(--font);
  animation:ldBadgeIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ldBadgeIn{
  0%{opacity:0;transform:scale(.6);}
  100%{opacity:1;transform:scale(1);}
}


.ld-tap-ring{
  position:absolute;right:18px;top:50%;
  width:0;height:0;
  border-radius:50%;
  border:2px solid var(--like-color);
  transform:translate(50%,-50%);
  opacity:0;pointer-events:none;
  z-index:1;
}
.ld-tap-ring.fire{
  animation:ldRing .55s ease-out;
}
@keyframes ldRing{
  0%{width:8px;height:8px;opacity:.9;}
  100%{width:80px;height:80px;opacity:0;}
}

.ld-tap-ring-tl,.ld-tap-ring-hl{
  border-color:var(--accent2);
  right:32px;top:50%;
}


.ld-fly-heart{
  position:absolute;right:8px;top:50%;
  font-size:28px;
  transform:translate(0,-50%);
  opacity:0;pointer-events:none;
  z-index:3;
}
.ld-fly-heart.fly{
  animation:ldFly 1.1s ease-out forwards;
}
@keyframes ldFly{
  0%{transform:translate(0,-50%) scale(.5);opacity:0;}
  20%{transform:translate(0,-110%) scale(1.4);opacity:1;}
  100%{transform:translate(0,-260%) scale(.7);opacity:0;}
}


.ld-react-palette{
  position:absolute;right:0;top:42px;
  display:flex;gap:6px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:99px;
  padding:6px 10px;
  box-shadow:0 4px 12px rgba(74,85,104,.14);
  opacity:0;pointer-events:none;
  transform:translateY(-8px) scale(.85);
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index:5;
  white-space:nowrap;
}
.ld-react-palette.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.ld-react-emoji{
  font-size:22px;cursor:pointer;
  transition:transform .15s ease;
  display:inline-block;line-height:1;
}
.ld-react-emoji.picked{
  animation:ldEmojiPick .5s ease;
}
@keyframes ldEmojiPick{
  0%{transform:scale(1);}
  40%{transform:scale(1.6) translateY(-4px);}
  100%{transform:scale(1) translateY(0);}
}


.ld-react-pick{
  position:absolute;right:32px;top:50%;
  font-size:32px;
  transform:translate(50%,-50%) scale(0);
  opacity:0;pointer-events:none;
  z-index:4;
}
.ld-react-pick.fly{
  animation:ldReactFly 1.3s ease-out forwards;
}
@keyframes ldReactFly{
  0%{transform:translate(50%,-50%) scale(0);opacity:0;}
  25%{transform:translate(50%,-110%) scale(1.3);opacity:1;}
  100%{transform:translate(50%,-260%) scale(.7);opacity:0;}
}


.ld-caption{
  flex-shrink:0;
  padding:18px 22px 22px;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.ld-caption-title{
  font-size:14px;font-weight:900;color:var(--t1);
  margin-bottom:6px;letter-spacing:-.01em;
}
.ld-caption-text{
  font-size:12px;color:var(--t3);line-height:1.7;
}


.mg-app{
  width:calc(100% - 24px);max-width:480px;
  height:100%;
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:var(--bg);
  border-left:1px solid rgba(74,85,104,.08);
  border-right:1px solid rgba(74,85,104,.08);
}
.mg-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px 10px;gap:10px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  flex-shrink:0;min-height:48px;
}
.mg-header-title{
  font-size:14px;font-weight:900;color:var(--t1);letter-spacing:-.01em;
  flex:1;
}
.mg-header-step{
  font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--t4);
  background:var(--bg3);
  border-radius:99px;padding:3px 9px;
}


.mg-stage{
  flex:1;
  position:relative;
  overflow-y:auto;overflow-x:hidden;
  padding:20px 16px;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg3) 100%);
}


.mg-mock{
  position:relative;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(74,85,104,.08);
}
.mg-mock-cover-bg{
  width:100%;height:100%;
  background:linear-gradient(135deg,#FFD6B0 0%,#FFAA80 50%,#FF8FB1 100%);
  opacity:.55;
}
.mg-mock .my-prof-wrap{padding:0 14px 16px;}
.mg-mock .my-av-row{
  display:flex;align-items:flex-start;gap:12px;
  margin-top:-26px;
}
.mg-mock .my-avatar{
  width:60px;height:60px;border-radius:50%;
  background:var(--accent);padding:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  pointer-events:none;
}
.mg-mock .my-avatar-inner-wrap{
  width:100%;height:100%;border-radius:50%;
  background:var(--bg3);
  display:flex;align-items:center;justify-content:center;
}
.mg-mock .my-av-counts{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  margin-top:6px;
}
.mg-mock .my-av-count{
  display:flex;align-items:center;gap:4px;
  font-size:12px;font-weight:700;color:var(--t2);
}
.mg-mock .my-av-count svg{opacity:.7;}
.mg-mock .my-av-info{
  flex:1;min-width:0;padding-top:28px;position:relative;
}
.mg-mock .mg-name-group{
  margin-top:6px;
}
.mg-mock .my-name{
  font-size:15px;font-weight:900;color:var(--t1);
  letter-spacing:-.02em;
}
.mg-mock .mg-name-group .my-handle{
  font-size:12px;color:var(--t4);margin-top:2px;
}
.mg-mock .my-av-name-row{
  display:flex;justify-content:flex-end;
  gap:8px;margin-top:6px;
}
.mg-mock .my-handle{font-size:12px;color:var(--t4);}
.mg-mock .my-edit-btn{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;padding:4px 10px;
  border-radius:99px;border:1px solid var(--border2);
  background:var(--surface);color:var(--t2);
  font-family:var(--font);
  pointer-events:none;
  position:static;
}
.mg-mock .my-edit-btn svg{flex-shrink:0;opacity:.85;}
.mg-mock .my-bio{
  font-size:12px;color:var(--t2);
  margin-top:6px;line-height:1.5;
}
.mg-mock-link{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--t3);
  background:var(--bg3);border:1px solid var(--border);
  border-radius:99px;padding:3px 11px;
}


.mg-target{
  position:relative;
  transition:box-shadow .35s ease, transform .35s ease;
  border-radius:8px;
}
.mg-target.mg-active{
  box-shadow:0 0 0 3px var(--accent3), 0 0 0 6px rgba(45,55,72,.18);
  z-index:2;
  animation:mgPulse 1.6s ease-in-out infinite;
}
@keyframes mgPulse{
  0%,100%{box-shadow:0 0 0 3px var(--accent3), 0 0 0 6px rgba(45,55,72,.18);}
  50%{box-shadow:0 0 0 3px var(--accent3), 0 0 0 10px rgba(45,55,72,.05);}
}

.mg-mock .my-avatar.mg-target{border-radius:50%;}
.mg-mock .my-avatar.mg-target.mg-active{border-radius:50%;}

.mg-mock .my-cover.mg-target.mg-active{
  box-shadow:inset 0 0 0 3px var(--accent3);
  animation:mgPulseInset 1.6s ease-in-out infinite;
}
@keyframes mgPulseInset{
  0%,100%{box-shadow:inset 0 0 0 3px var(--accent3), inset 0 0 0 6px rgba(45,55,72,.18);}
  50%{box-shadow:inset 0 0 0 3px var(--accent3), inset 0 0 0 10px rgba(45,55,72,.05);}
}


.mg-tip{
  position:absolute;
  background:var(--accent3);
  color:#fff;
  border-radius:10px;
  padding:10px 13px;
  font-size:12px;font-weight:600;line-height:1.55;
  letter-spacing:.01em;
  max-width:240px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;
  transform:translateY(6px) scale(.92);
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index:10;
}
.mg-tip.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.mg-tip-text{}
.mg-tip-arrow{
  position:absolute;
  width:0;height:0;
}

.mg-tip[data-pos="bottom"] .mg-tip-arrow{
  top:-7px;left:24px;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:7px solid var(--accent3);
}
.mg-tip[data-pos="top"] .mg-tip-arrow{
  bottom:-7px;left:24px;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:7px solid var(--accent3);
}
.mg-tip[data-pos="right"] .mg-tip-arrow{
  left:-7px;top:14px;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-right:7px solid var(--accent3);
}
.mg-tip[data-pos="left"] .mg-tip-arrow{
  right:-7px;top:14px;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:7px solid var(--accent3);
}


.mg-footer{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 18px 14px;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.mg-dots{
  display:flex;gap:6px;flex:1;
}
.mg-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--border2);
  transition:.2s ease;
}
.mg-dot.active{
  background:var(--accent3);
  transform:scale(1.3);
}
.mg-dot.done{
  background:var(--accent2);
}
.mg-actions{
  display:flex;gap:8px;flex-shrink:0;
}
.mg-replay-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bg3);
  border:1.5px solid var(--border);
  border-radius:9px;
  padding:7px 12px;
  font-size:12px;font-weight:700;color:var(--t2);
  font-family:var(--font);cursor:pointer;
  transition:.12s ease;
}
.mg-replay-btn:active{transform:scale(.96);}
.mg-next-btn{
  background:var(--accent3);color:#fff;
  border:none;border-radius:9px;
  padding:7px 18px;
  font-size:13px;font-weight:900;
  font-family:var(--font);cursor:pointer;
  letter-spacing:.02em;
  transition:.12s ease;
}
.mg-next-btn:active{transform:scale(.96);}
.mg-next-btn.done{
  background:var(--accent2);
}



.tt-app{
  max-width:480px;margin:0 auto;height:100%;
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:var(--bg);
  border-left:1px solid rgba(74,85,104,.08);
  border-right:1px solid rgba(74,85,104,.08);
}


.tt-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px 10px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  flex-shrink:0;min-height:48px;
}
.tt-header-title{
  font-size:13px;font-weight:700;color:var(--t2);letter-spacing:.02em;
}
.tt-header-left{
  display:flex;align-items:baseline;gap:8px;
}
.tt-demo-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;
  color:#E11D48;
  font-family:var(--mono);letter-spacing:.06em;
}
.tt-demo-badge::before{
  content:'';display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:#E11D48;
  animation:ttDemoPulse 1.4s ease-in-out infinite;
}
.tt-demo-badge .tt-demo-text{
  animation:ttDemoBlink 1.6s ease-in-out infinite;
}
@keyframes ttDemoPulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(225,29,72,.5);}
  50%{opacity:.6;transform:scale(.85);box-shadow:0 0 0 4px rgba(225,29,72,0);}
}
@keyframes ttDemoBlink{
  0%,100%{opacity:1;}
  50%{opacity:.45;}
}
.tt-header-step{
  font-size:10px;font-weight:700;color:var(--t4);
  font-family:var(--mono);letter-spacing:.08em;
}


.tt-skip-btn{
  flex-shrink:0;padding:10px 14px;
  background:transparent;color:var(--t3);
  border:1.5px solid var(--border2);
  border-radius:var(--radius);
  font-size:12px;font-weight:700;font-family:var(--font);
  letter-spacing:.03em;
  display:flex;align-items:center;gap:6px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.tt-skip-btn:hover{
  background:var(--bg3);
  color:var(--t1);
  border-color:var(--t4);
}
.tt-skip-btn:active{transform:scale(.96);}


.tt-stage{
  flex:1;overflow:hidden;position:relative;
  background:var(--bg);
}


.tt-scene-title{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 28px;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  z-index:90;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
  text-align:center;
  min-width:220px;
}
.tt-scene-title.show{opacity:1;}
.tt-scene-title-num{
  font-size:10px;font-weight:700;color:var(--t4);
  font-family:var(--mono);letter-spacing:.15em;
  margin-bottom:6px;
}
.tt-scene-title-main{
  font-size:18px;font-weight:900;color:var(--t1);letter-spacing:-.01em;
}


.tt-mypage-wrap{
  position:absolute;inset:0;
  background:var(--bg);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  overflow-y:auto;
}
.tt-mypage-wrap.show{opacity:1;pointer-events:auto;}


.tt-my-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 8px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.tt-my-topbar-logo{display:flex;flex-direction:column;gap:1px;}
.tt-my-topbar-logo .sub{font-size:9px;color:var(--t4);letter-spacing:.10em;text-transform:uppercase;}
.tt-my-topbar-logo .main{font-size:15px;font-weight:900;color:var(--t1);letter-spacing:-.02em;}
.tt-my-cover{
  position:relative;width:100%;height:80px;
  background:linear-gradient(135deg,#94a3b8,#cbd5e1);
  flex-shrink:0;
}
.tt-my-cover-actions{
  position:absolute;top:10px;left:12px;right:12px;z-index:2;
  display:flex;flex-direction:row;align-items:flex-start;
  justify-content:space-between;gap:8px;
}
.tt-my-cover-edit,
.tt-my-preview-btn{
  position:static;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:30px;
  padding:6px 12px;border-radius:99px;
  background:rgba(18,24,38,.64);border:1px solid rgba(255,255,255,.44);
  color:#fff;font-size:11px;font-weight:800;font-family:var(--font);line-height:1;
  box-shadow:0 6px 14px rgba(0,0,0,.16);backdrop-filter:blur(10px);
  cursor:pointer;
}
.tt-my-preview-btn{background:rgba(74,85,104,.82);}
.tt-my-preview-btn svg{width:11px;height:11px;flex:0 0 auto;}


.tt-my-prof{
  padding:12px 16px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.tt-my-av-row{display:flex;gap:12px;align-items:flex-start;}
.tt-my-av-left{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;}
.tt-my-avatar{
  width:56px;height:56px;border-radius:50%;
  background:#A0ADB8;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  margin-top:-22px;
  border:2px solid var(--surface);
  position:relative;
}
.tt-my-av-counts{display:flex;flex-direction:column;gap:5px;}
.tt-my-av-count{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t4);}
.tt-my-av-count svg{stroke:currentColor;}
.tt-my-av-info{flex:1;display:flex;flex-direction:column;gap:3px;padding-top:2px;}
.tt-my-name{font-size:16px;font-weight:900;color:var(--t1);letter-spacing:-.02em;}
.tt-my-handle{font-size:12px;color:var(--t4);}
.tt-my-bio{font-size:12px;color:var(--t2);margin-top:3px;line-height:1.5;}


.tt-my-subtabs{
  display:flex;background:#EDF0F4;border-radius:10px;padding:3px;margin:10px 14px 0;
  flex-shrink:0;
}
.tt-my-subtab{
  flex:1;padding:7px 0;text-align:center;
  font-size:11px;font-weight:700;color:var(--t4);
  border-radius:8px;cursor:pointer;
  background:transparent;border:none;font-family:var(--font);
  transition:all .15s;
}
.tt-my-subtab.active{background:var(--surface);color:var(--t1);box-shadow:0 1px 3px rgba(0,0,0,.06);}


.tt-my-empty{
  text-align:center;padding:40px 20px 28px;
  color:var(--t4);font-size:12px;line-height:1.8;
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
.tt-my-empty-icon{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.tt-my-empty-icon svg{width:18px;height:18px;stroke:var(--t5);}
.tt-my-empty-sub{font-size:11px;margin-top:4px;color:var(--t5);}
.tt-my-empty-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;padding:11px 22px;border-radius:12px;
  background:var(--accent3);color:#fff;
  font-size:13px;font-weight:700;
  border:none;font-family:var(--font);cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.tt-my-empty-btn.highlight{
  box-shadow:0 0 0 4px rgba(74,85,104,.18);
  transform:scale(1.02);
}
.tt-my-empty-btn.pressed{transform:scale(.97);}
.tt-my-empty-btn svg{width:14px;height:14px;}


.tt-my-bottomnav{
  display:flex;justify-content:space-around;align-items:center;
  padding:8px 0 10px;
  background:var(--surface);
  border-top:1px solid var(--border);
  margin-top:auto;
  flex-shrink:0;
}
.tt-my-nav-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:9px;color:var(--t4);font-weight:700;
  background:none;border:none;font-family:var(--font);cursor:pointer;
  flex:1;
}
.tt-my-nav-btn.active{color:var(--accent3);}
.tt-my-nav-btn svg{width:18px;height:18px;}


.tt-create-wrap{
  position:absolute;inset:0;
  background:var(--bg);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.tt-create-wrap.show{opacity:1;pointer-events:auto;}


.tt-create-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--surface);
  flex-shrink:0;
}
.tt-create-back{
  display:flex;align-items:center;gap:5px;
  font-size:13px;color:var(--t3);
  border:none;background:transparent;font-family:var(--font);
  padding:4px;
}
.tt-create-back svg{width:14px;height:14px;}
.tt-create-title{font-size:14px;font-weight:700;color:var(--t1);}
.tt-create-preview-btn{
  background:rgba(74,85,104,.12);border:1px solid rgba(74,85,104,.25);
  border-radius:99px;padding:4px 10px;
  font-size:10px;font-weight:700;color:var(--t2);
  display:flex;align-items:center;gap:4px;
}
.tt-create-preview-btn svg{width:10px;height:10px;}


.tt-create-body{
  flex:1;overflow-y:auto;
  padding:14px 14px 90px;
  scroll-behavior:smooth;
}

.tt-section{margin-bottom:20px;}
.tt-section-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--t2);text-transform:uppercase;
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.tt-section-label::before{
  content:'';display:block;width:3px;height:10px;border-radius:2px;
  background:var(--accent);
}
.tt-section-note{font-size:10px;font-weight:400;color:var(--t3);text-transform:none;letter-spacing:0;}
.tt-section-desc{margin:-3px 0 10px 9px;font-size:11px;line-height:1.55;color:var(--t3);}


.tt-profile-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.tt-profile-card.focused{
  border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(113,128,150,.12);
}
.tt-profile-icon-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.tt-icon-picker{
  width:54px;height:54px;border-radius:10px;
  background:var(--bg3);border:2px dashed var(--border2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:22px;
}
.tt-icon-hint{font-size:11px;color:var(--t2);line-height:1.5;}
.tt-icon-hint .sub{font-size:9px;color:var(--t4);}

.tt-form-field{margin-bottom:0;}
.tt-form-field-label{
  display:block;font-size:9px;font-weight:700;color:var(--t2);
  letter-spacing:.06em;margin-bottom:5px;text-transform:uppercase;
}
.tt-form-field-label .hint{font-size:8px;opacity:.6;font-weight:400;text-transform:none;letter-spacing:0;}
.tt-form-input{
  width:100%;background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:14px;font-family:var(--font);
  color:var(--t1);min-height:38px;
  display:flex;align-items:center;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.tt-form-input.focused{
  border-color:var(--accent);
  background:var(--surface);
}
.tt-form-input.placeholder{color:var(--t5);}
.tt-char-count{text-align:right;font-size:10px;color:var(--t4);margin-top:3px;font-family:var(--mono);}


.tt-add-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px;border-radius:var(--radius);
  border:1.5px dashed var(--border2);
  background:transparent;color:var(--t3);
  font-size:12px;font-family:var(--font);font-weight:500;
  margin-top:8px;
  transition:all .2s ease;
}
.tt-add-btn.highlight{
  border-color:var(--accent);color:var(--t1);
  background:var(--bg3);
}
.tt-add-btn svg{width:14px;height:14px;}

.tt-history-list{display:flex;flex-direction:column;gap:8px;}
.tt-history-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  opacity:1;transform:translateY(0);
  transition:opacity .35s ease,transform .35s ease,border-color .25s ease,box-shadow .25s ease;
}
.tt-history-item.entering{
  opacity:0;transform:translateY(8px);
}
.tt-history-item.flash{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 2px rgba(74,85,104,.2);
}
.tt-hi-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px 8px;
}
.tt-hi-header-info{
  flex:1;min-width:0;display:flex;align-items:center;gap:6px;
}
.tt-hi-yr-badge{
  font-size:10px;font-weight:700;
  background:var(--accent3);color:#fff;
  padding:2px 6px;border-radius:3px;
  font-family:var(--mono);
  letter-spacing:.04em;
}
.tt-hi-mo-badge{
  font-size:10px;font-weight:700;color:var(--t3);
  background:var(--bg2);
  padding:2px 6px;border-radius:3px;
  font-family:var(--mono);
}
.tt-hi-preview{
  font-size:12px;color:var(--t3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
}
.tt-hi-toggle{
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);flex-shrink:0;
}
.tt-hi-toggle svg{width:10px;height:10px;}


.tt-hl-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tt-hl-card{
  width:100%;
  background:color-mix(in srgb,var(--surface) 88%,var(--bg2));
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border2));
  border-radius:var(--radius);
  padding:11px 12px;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.tt-hl-card.focused{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent), 0 0 0 3px rgba(113,128,150,.10);
}
.tt-hl-card-labelrow{
  display:flex;align-items:center;gap:8px;
  margin-bottom:9px;
}
.tt-hl-label-btn{
  min-width:0;
  min-height:38px;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--bg3) 82%,var(--surface));
  color:var(--t2);
  font-family:var(--font);
  text-align:left;
}
.tt-hl-label-btn.focused,
.tt-hl-label-btn:focus-visible{
  border-color:color-mix(in srgb,var(--accent) 38%,var(--border2));
  background:color-mix(in srgb,var(--surface) 88%,var(--accent) 5%);
  color:var(--t1);
  outline:none;
}
.tt-hl-card-lbl{
  overflow:hidden;
  max-width:100%;
  font-size:12px;
  font-weight:850;
  line-height:1.25;
  letter-spacing:0;
  text-overflow:ellipsis;
  text-transform:none;
  white-space:nowrap;
}
.tt-hl-card-lbl.is-placeholder{color:var(--t3);font-weight:800;}
.tt-hl-delete-btn{
  width:34px;height:34px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  color:color-mix(in srgb,var(--t4) 86%,transparent);
  font-family:var(--font);
  font-size:15px;
  font-weight:700;
}
.tt-hl-card-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.tt-hl-input-wrap{min-width:0;position:relative;}
.tt-hl-input{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  padding:8px 0;
  border:none;
  border-bottom:1px solid color-mix(in srgb,var(--border) 78%,transparent);
  background:transparent;
  font-size:14px;
  line-height:1.45;
  font-family:var(--font);
  color:var(--t1);
}
.tt-hl-input.focused{border-color:var(--accent);}
.tt-hl-input.placeholder{color:var(--t4);font-size:13px;}
.tt-hl-count{
  position:absolute;
  right:0;
  bottom:-13px;
  color:var(--t5);
  font-size:9px;
  font-weight:700;
}
.tt-hl-photo-btn{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 8px;
  border:1px solid color-mix(in srgb,var(--border2) 74%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  color:var(--t4);
  font-family:var(--font);
  font-size:11px;
  white-space:nowrap;
}
.tt-hl-photo-btn.focused,
.tt-hl-photo-btn:focus-visible{
  border-color:color-mix(in srgb,var(--accent) 34%,var(--border2));
  background:color-mix(in srgb,var(--accent) 5%,var(--surface));
  color:var(--t2);
  outline:none;
}
.tt-hl-photo-btn svg{width:11px;height:11px;}
.tt-hl-add-card{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border:1px dashed color-mix(in srgb,var(--border2) 72%,transparent);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  color:var(--t3);
  font-family:var(--font);
}
.tt-hl-add-card.focused,
.tt-hl-add-card:focus-visible{
  border-color:color-mix(in srgb,var(--accent) 30%,var(--border2));
  background:color-mix(in srgb,var(--surface) 88%,var(--accent) 4%);
  color:color-mix(in srgb,var(--accent) 62%,var(--t2));
  outline:none;
}
.tt-hl-add-plus{
  width:22px;height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,currentColor 58%,transparent);
  border-radius:50%;
  font-size:15px;
  font-weight:600;
  line-height:1;
}
.tt-hl-add-text{font-size:12px;font-weight:850;line-height:1;}


.tt-publish-area{
  position:absolute;left:0;right:0;bottom:0;
  display:grid;
  grid-template-columns:92px 1fr;
  gap:10px;
  padding:12px 14px;
  background:linear-gradient(to top,var(--bg) 60%,rgba(247,248,250,0));
  pointer-events:none;
}
.tt-draft-btn{
  min-height:42px;
  border:none;
  border-radius:14px;
  background:color-mix(in srgb,var(--bg3) 92%,var(--surface));
  color:var(--t2);
  font-family:var(--font);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.15;
  opacity:0;
  transform:translateY(12px);
  transition:all .45s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.tt-publish-btn.show ~ .tt-draft-btn,
.tt-publish-area:has(.tt-publish-btn.show) .tt-draft-btn{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.tt-draft-main{font-size:12px;font-weight:850;}
.tt-draft-note{margin-top:2px;font-size:8px;font-weight:700;color:var(--t4);}

.tt-publish-btn{
  width:100%;padding:13px;
  background:linear-gradient(135deg,var(--accent3),var(--accent));
  color:#fff;
  border:none;border-radius:var(--radius);
  font-size:14px;font-weight:700;font-family:var(--font);
  letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease,transform .15s ease;
}
.tt-publish-btn.show{opacity:1;pointer-events:auto;}
.tt-publish-btn.pressed{transform:scale(.96);}
.tt-publish-btn svg{width:14px;height:14px;}


.tt-modal{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
  z-index:100;
}
.tt-modal.open{opacity:1;pointer-events:auto;}
.tt-modal-sheet{
  background:var(--surface);
  width:100%;height:100%;
  display:flex;flex-direction:column;
  transform:translateY(8px);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.tt-modal.open .tt-modal-sheet{transform:translateY(0);}
.tt-modal-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 10px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.tt-modal-nav-back,.tt-modal-nav-save{
  font-size:12px;color:var(--accent);
  background:none;border:none;font-family:var(--font);
  padding:4px 6px;
}
.tt-modal-nav-save{font-weight:700;}
.tt-modal-nav-title{font-size:14px;font-weight:700;color:var(--t1);}
.tt-modal-body{
  flex:1;overflow-y:auto;
  padding:12px 0 12px;
}
.tt-modal-field{
  padding:10px 14px;display:flex;flex-direction:column;gap:5px;
  border-bottom:1px solid var(--border);
}
.tt-modal-field:last-child{border-bottom:none;}
.tt-modal-field-label{
  font-size:9px;font-weight:700;color:var(--t2);
  letter-spacing:.07em;text-transform:uppercase;
}


.tt-spinner-row{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;gap:10px;
}
.tt-spinner-wrap{
  display:flex;align-items:center;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;
  flex:1;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.tt-spinner-wrap.focused{
  border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(113,128,150,.12);
}
.tt-spin-btn{
  width:38px;height:42px;border:none;
  background:var(--bg3);color:var(--t1);
  font-size:18px;font-weight:300;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  transition:transform .12s ease,background .15s ease;
}
.tt-spin-btn.pressed{
  background:var(--accent);color:#fff;
  transform:scale(.92);
}
.tt-spin-num{
  flex:1;text-align:center;
  font-size:18px;font-weight:700;
  font-family:var(--mono);color:var(--t1);
  background:transparent;
  padding:0 6px;
  transition:color .2s ease;
  overflow:hidden;
  position:relative;
}
.tt-spin-num.changing{color:var(--accent);}
.tt-spin-num.slide-next{animation:ttSpinSlideNext .28s ease;}
.tt-spin-num.slide-prev{animation:ttSpinSlidePrev .28s ease;}
@keyframes ttSpinSlideNext{
  0%{transform:translateX(18px);opacity:0;}
  60%{opacity:1;}
  100%{transform:translateX(0);opacity:1;}
}
@keyframes ttSpinSlidePrev{
  0%{transform:translateX(-18px);opacity:0;}
  60%{opacity:1;}
  100%{transform:translateX(0);opacity:1;}
}
.tt-spin-unit{
  font-size:11px;color:var(--t3);
  padding-right:10px;
}
.tt-spin-month-wrap{
  width:84px;flex:none;
  position:relative;
}
.tt-spin-month{
  width:100%;text-align:center;
  font-size:14px;font-weight:700;
  font-family:var(--mono);color:var(--t1);
  padding:10px 12px;
  height:42px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.tt-spin-month.placeholder{color:var(--t5);}
.tt-spin-month-arrow{
  position:absolute;right:10px;top:50%;
  transform:translateY(-50%);
  width:8px;height:8px;
  border-right:1.5px solid var(--t4);
  border-bottom:1.5px solid var(--t4);
  transform-origin:center;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}


.tt-spin-presets{
  display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;
  padding:14px 0 16px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tt-spin-presets::-webkit-scrollbar{display:none;}
.tt-spin-preset{
  font-size:11px;padding:5px 11px;border-radius:99px;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--t2);white-space:nowrap;flex-shrink:0;
  font-family:var(--font);
  transition:all .2s ease,transform .12s ease;
}
.tt-spin-preset.highlight{
  border-color:var(--accent);color:var(--t1);
  background:var(--surface);
  box-shadow:0 0 0 2px rgba(74,85,104,.18);
}
.tt-spin-preset.pressed{
  background:var(--accent3);color:#fff;
  transform:scale(.95);
}


.tt-modal-textarea-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:5px;
}
.tt-modal-textarea-count{
  font-size:9px;color:var(--t4);
  font-family:var(--mono);
}
.tt-modal-textarea{
  width:100%;background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:13px;font-family:var(--font);color:var(--t1);
  min-height:50px;line-height:1.5;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.tt-modal-textarea.focused{
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(74,85,104,.08);
}
.tt-modal-textarea.placeholder{color:var(--t5);font-size:12px;}


.tt-tap-indicator{
  position:absolute;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(45,55,72,.18);
  pointer-events:none;
  z-index:120;
  opacity:0;
  transform:translate(-50%,-50%) scale(.4);
}
.tt-tap-indicator.fire{
  animation:ttTap .55s ease forwards;
}
@keyframes ttTap{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3);}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6);}
}


.tt-cursor{
  display:inline-block;width:1.5px;height:1.05em;
  background:var(--accent);
  vertical-align:text-bottom;
  margin-left:1px;
  animation:ttBlink 1s step-end infinite;
  position:relative;top:.15em;
}
@keyframes ttBlink{50%{opacity:0;}}


.tt-published{
  position:absolute;inset:0;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:18px 16px;
  overflow-y:auto;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
  z-index:60;
}
.tt-published.show{opacity:1;pointer-events:auto;}
.tt-published-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--accent3);color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transform:scale(0);
}
.tt-published.show .tt-published-icon{
  animation:ttPubPop .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes ttPubPop{
  0%{transform:scale(0);}
  60%{transform:scale(1.15);}
  100%{transform:scale(1);}
}
.tt-published-icon svg{width:24px;height:24px;}
.tt-published-title{
  font-size:18px;font-weight:900;color:var(--t1);letter-spacing:-.02em;
  text-align:center;
}
.tt-published-sub{
  font-size:11px;color:var(--t4);text-align:center;line-height:1.6;
  margin-bottom:4px;
}


.tt-resume-card{
  width:100%;max-width:340px;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(26,32,44,.08);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease .25s,transform .5s ease .25s;
  flex-shrink:0;
}
.tt-published.show .tt-resume-card{
  opacity:1;transform:translateY(0);
}
.tt-resume-cover{
  height:78px;
  background:linear-gradient(135deg,#E2E8F0,#C8D4E0 40%,#EDF0F4 70%,#D8DEE8);
  border-radius:20px 20px 0 0;
}
.tt-resume-body{padding:0 12px 12px;}
.tt-resume-prof-row{
  display:flex;align-items:flex-end;gap:10px;
  margin-top:-30px;margin-bottom:12px;
  position:relative;z-index:2;
}
.tt-resume-avatar{
  width:54px;height:54px;border-radius:10px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  border:2px solid var(--surface);
}
.tt-resume-avatar-inner{
  width:100%;height:100%;border-radius:8px;
  background:var(--bg3);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.tt-resume-prof-info{flex:1;min-width:0;padding-bottom:2px;}
.tt-resume-name{
  font-size:11px;font-weight:700;color:var(--t4);
}
.tt-resume-copy{
  font-size:13px;font-weight:700;color:var(--t3);
  margin-top:6px;line-height:1.4;
  word-break:break-word;
}


.tt-resume-tl{
  position:relative;margin-bottom:10px;
}
.tt-resume-tl::before{
  content:'';position:absolute;
  top:6px;bottom:6px;left:22px;
  width:1.5px;
  background:var(--border2);
  pointer-events:none;
}
.tt-resume-tl-item{
  display:flex;align-items:center;gap:6px;
  margin-bottom:5px;
  position:relative;z-index:1;
  opacity:0;transform:translateX(-8px);
}
.tt-resume-tl-item.in{
  opacity:1;transform:translateX(0);
  transition:opacity .35s ease,transform .35s ease;
}
.tt-resume-tl-yr{
  font-size:10px;font-weight:700;
  background:var(--accent3);color:#fff;
  padding:3px 6px;border-radius:4px;
  font-family:var(--mono);
  flex-shrink:0;
  min-width:42px;text-align:center;
}
.tt-resume-tl-txt{
  font-size:11px;color:var(--t2);line-height:1.4;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px 8px;
  flex:1;min-width:0;
  word-break:break-word;
}


.tt-resume-section-lbl{
  font-size:9px;font-weight:700;color:var(--t4);
  letter-spacing:.06em;
  margin:8px 0 5px;
}
.tt-resume-hl-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;
}
.tt-resume-hl-item{
  background:var(--bg2);
  border-radius:7px;
  padding:6px 8px;
}
.tt-resume-hl-lbl{
  font-size:9px;color:var(--t3);
  margin-bottom:2px;
  display:flex;align-items:center;gap:3px;
}
.tt-resume-hl-val{
  font-size:11px;font-weight:600;color:var(--t1);
  word-break:break-word;
  line-height:1.3;
}
.tt-resume-hl-val.empty{
  color:var(--t5);font-weight:400;font-style:italic;
}
.tt-resume-hash{
  font-size:10px;color:var(--t5);
  text-align:right;margin-top:8px;
}


@keyframes ttConfettiFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1;}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0;}
}
.tt-confetti-piece{
  position:fixed;pointer-events:none;z-index:9999;
  animation:ttConfettiFall linear forwards;
}


.tt-footer{
  flex-shrink:0;padding:12px 18px;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  display:flex;flex-direction:column;gap:8px;
}
.tt-progress{
  height:3px;background:var(--bg3);border-radius:99px;overflow:hidden;
}
.tt-progress-bar{
  height:100%;
  background:linear-gradient(90deg,var(--accent2),var(--accent3));
  width:0%;
  transition:width .3s ease;
}
.tt-footer-row{display:flex;gap:8px;align-items:center;}
.tt-replay-btn{
  flex-shrink:0;padding:10px 14px;
  background:transparent;color:var(--t3);
  border:1.5px solid var(--border2);
  border-radius:var(--radius);
  font-size:12px;font-weight:700;font-family:var(--font);
  display:flex;align-items:center;gap:6px;
}
.tt-replay-btn svg{width:12px;height:12px;}
.tt-next-btn{
  flex:1;padding:13px;
  background:var(--accent3);color:#fff;
  border:none;border-radius:var(--radius);
  font-size:14px;font-weight:700;font-family:var(--font);
  letter-spacing:.03em;
  opacity:1;pointer-events:auto;
  transition:opacity .3s ease,transform .15s ease;
}
.tt-next-btn.ready{opacity:1;pointer-events:auto;}



.mp-intro-overlay.settings-resume-image-mode .mp-genre-hd{
  margin-bottom:12px;
}
.mp-intro-overlay.settings-resume-image-mode .mp-genre-hd-sub{
  color:var(--t3);
  font-size:12px;
}
.mp-intro-overlay.settings-resume-image-mode .mp-sample-footer-btn-secondary{
  min-width:140px;
}


.mp-hl-sample-wrap{
  margin:8px 0 10px;
  padding:9px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  border:1px solid var(--border);
  border-radius:10px;
}
.mp-hl-sample-head{
  font-size:10px;
  font-weight:900;
  color:var(--t4);
  letter-spacing:.08em;
  margin:0 0 7px;
}
.mp-hl-sample-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
.mp-hl-sample-card{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:9px;
  padding:7px 8px;
  min-width:0;
}
.mp-hl-sample-lbl{
  font-size:10px;
  font-weight:800;
  color:var(--t4);
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-hl-sample-val{
  font-size:12px;
  font-weight:850;
  color:var(--t1);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}



.mp-genre-sample-sections,
.resume-image-sample-sections{
  display:block;
  min-width:0;
}
.mp-genre-sample-rail{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  margin:0 -22px;
  padding:0 24px 10px 34px;
  scroll-padding-left:34px;
}
.mp-genre-sample-rail::-webkit-scrollbar{display:none;}
.mp-resume-mini-card{
  width:276px;
  min-width:276px;
  overflow:hidden;
  scroll-snap-align:start;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(74,85,104,.08);
  --radius:18px;
}
.mp-resume-mini-card .resume-cover{
  height:82px;
  border-radius:18px 18px 0 0;
}
.mp-resume-mini-genre{
  position:absolute;
  top:12px;
  left:12px;
  max-width:calc(100% - 16px);
  font-size:11px;
  font-weight:900;
  color:#fff;
  background:rgba(45,55,72,.82);
  border:1px solid rgba(255,255,255,.34);
  border-radius:99px;
  padding:5px 10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-resume-mini-card .resume-body{
  padding:0 12px 12px;
}
.mp-resume-mini-card .resume-prof-row{
  gap:10px;
  margin-top:-29px;
  margin-bottom:12px;
  align-items:flex-end;
}
.mp-resume-mini-card .resume-avatar{
  width:48px;
  height:48px;
  border-radius:10px;
  padding:3px;
  font-size:22px;
  cursor:default;
}
.mp-resume-mini-card .resume-avatar-inner{
  border-radius:8px;
}
.mp-resume-mini-prof-meta{
  min-width:0;
  flex:1;
  padding-bottom:2px;
}
.mp-resume-mini-card .resume-name{
  margin-top:0;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-resume-mini-card .resume-copy{
  margin-top:2px;
  font-size:13px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--t2);
}
.mp-resume-mini-type{
  font-size:11px;
  font-weight:900;
  color:var(--t1);
  line-height:1.35;
  margin:0 0 6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-resume-mini-card .resume-section-lbl{
  margin:8px 0 5px;
  font-size:11px;
}
.mp-resume-mini-card .resume-tl{
  margin-bottom:8px;
}
.mp-resume-mini-card .resume-tl-item{
  gap:6px;
  margin-bottom:5px;
}
.mp-resume-mini-card .resume-tl-yr{
  font-size:11px;
  padding:2px 6px;
}
.mp-resume-mini-card .tl-month-badge{
  font-size:10px;
  padding:1px 5px;
  margin-right:3px;
}
.mp-resume-mini-card .resume-tl-txt{
  font-size:12px;
  line-height:1.35;
  padding:6px 7px;
  cursor:default;
  display:flex;
  align-items:center;
  min-width:0;
}
.mp-resume-mini-card .resume-tl-txt span:last-child{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-resume-mini-card .resume-hl-grid{
  gap:5px;
}
.mp-resume-mini-card .resume-hl-item{
  padding:6px 7px;
  cursor:default;
}
.mp-resume-mini-card .resume-hl-lbl{
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-resume-mini-card .resume-hl-val{
  font-size:12px;
  line-height:1.36;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mp-resume-mini-card .resume-hash{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-intro-overlay.sample-mode .mp-intro-panel:has(#mpIntroPageGenre.active){
  max-width:620px;
}
@media (max-width:380px){
  .mp-genre-sample-rail{margin-left:-18px;margin-right:-18px;padding-left:24px;padding-right:18px;scroll-padding-left:24px;}
  .mp-resume-mini-card{width:258px;min-width:258px;}
}


.mp-resume-mini-card.mp-resume-real-card{
  width:316px;
  min-width:316px;
  --radius:20px;
  border-color:var(--border2);
  box-shadow:0 3px 12px rgba(74,85,104,.12);
}
.mp-resume-mini-card.mp-resume-real-card .resume-cover{
  height:92px;
  border-radius:20px 20px 0 0;
  background:
    radial-gradient(circle at 14% 20%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 30%),
    linear-gradient(135deg,var(--cover-default-start),var(--cover-default-end));
}
.mp-resume-mini-card.mp-resume-real-card .resume-body{
  padding:0 12px 12px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-prof-row{
  margin-top:-42px;
  margin-bottom:12px;
  align-items:flex-end;
}
.mp-resume-mini-card.mp-resume-real-card .resume-avatar{
  width:56px;
  height:56px;
  border-radius:12px;
  font-size:24px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-avatar-inner{
  border-radius:10px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-copy{
  font-size:14px;
  line-height:1.38;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal;
  overflow:hidden;
}
.mp-resume-mini-card.mp-resume-real-card .mp-resume-mini-type{
  font-size:11px;
  margin:2px 0 8px;
  color:var(--t4);
}
.mp-resume-mini-card.mp-resume-real-card .resume-tl{
  margin-bottom:10px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-tl-item{
  align-items:center;
  gap:7px;
  margin-bottom:5px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-tl-txt{
  min-height:34px;
  padding:7px 8px;
  font-size:12.8px;
  line-height:1.36;
  cursor:default;
  text-align:left;
}
.mp-resume-mini-card.mp-resume-real-card .resume-tl-txt.has-detail{
  border-color:color-mix(in srgb,var(--accent) 22%,var(--border));
}
.mp-resume-mini-card.mp-resume-real-card .resume-tl-icons{
  margin-right:5px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-tl-icon{
  font-size:13px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-tl-txt > span:last-child{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-resume-mini-card.mp-resume-real-card .resume-section-lbl{
  margin:9px 0 6px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-hl-grid{
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-hl-grid .resume-hl-item:nth-child(3){
  grid-column:1 / -1;
}
.mp-resume-mini-card.mp-resume-real-card .resume-hl-item{
  min-height:52px;
  padding:7px 8px;
  cursor:default;
}
.mp-resume-mini-card.mp-resume-real-card .resume-hl-val{
  font-size:12.5px;
  line-height:1.38;
}
.mp-resume-mini-card.mp-resume-real-card .hl-cam-icon{
  animation:none;
  margin-right:3px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-hash{
  margin-top:9px;
  text-align:left;
}
.resume-image-sample-sections .mp-resume-mini-card.mp-resume-real-card{
  width:318px;
  min-width:318px;
}
.resume-image-sample-sections .mp-genre-sample-rail{
  padding-bottom:14px;
}
@media (max-width:380px){
  .mp-resume-mini-card.mp-resume-real-card,
  .resume-image-sample-sections .mp-resume-mini-card.mp-resume-real-card{
    width:292px;
    min-width:292px;
  }
  .mp-resume-mini-card.mp-resume-real-card .resume-tl-txt{
    font-size:12.5px;
    padding-left:7px;
    padding-right:7px;
  }
}


.mp-genre-sample-rail{
  padding-left:22px;
  scroll-padding-left:22px;
}
.mp-resume-mini-card.mp-resume-real-card .mp-sample-clickable{
  font-family:var(--font);
  text-align:left;
  appearance:none;
  -webkit-appearance:none;
}
.mp-resume-mini-card.mp-resume-real-card button.resume-tl-txt{
  width:100%;
  border:1px solid var(--border);
  color:var(--t2);
  display:flex;
  align-items:center;
}
.mp-resume-mini-card.mp-resume-real-card button.resume-tl-txt.has-detail{
  cursor:pointer;
  transition:border-color .14s, background .14s, transform .14s;
}
.mp-resume-mini-card.mp-resume-real-card button.resume-tl-txt.has-detail:active{
  transform:scale(.99);
}
.mp-resume-mini-card.mp-resume-real-card button.resume-tl-txt.has-detail:focus-visible,
.mp-resume-mini-card.mp-resume-real-card .resume-hl-item.mp-sample-clickable:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  outline-offset:2px;
}
.mp-resume-mini-card.mp-resume-real-card .resume-hl-item.mp-sample-clickable{
  width:100%;
  border:0;
  background:var(--hl-bg);
  color:inherit;
  cursor:pointer;
  transition:filter .14s, transform .14s;
}
.mp-resume-mini-card.mp-resume-real-card .resume-hl-item.mp-sample-clickable:active{
  transform:scale(.99);
}
@media (hover:hover){
  .mp-resume-mini-card.mp-resume-real-card button.resume-tl-txt.has-detail:hover,
  .mp-resume-mini-card.mp-resume-real-card .resume-hl-item.mp-sample-clickable:hover{
    filter:brightness(.985);
  }
}
.mp-sample-detail-overlay{
  position:fixed;
  inset:0;
  z-index:9300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.mp-sample-detail-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.mp-sample-detail-mount{display:contents;}
.mp-sample-detail-overlay .tl-modal-box{
  transform:scale(.94);
  transition:transform .2s ease;
}
.mp-sample-detail-overlay.open .tl-modal-box{
  transform:scale(1);
}

.mp-sample-react-btn{
  background:transparent;
  border:2px solid var(--accent2);
  color:var(--accent2);
  border-radius:99px;
  padding:5px 12px;
  font-size:12px;
  font-weight:700;
  font-family:var(--font);
  cursor:default;
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex-shrink:0;
}
.mp-sample-empathy-btn{cursor:default;}

.mp-sample-img-ph{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:118px;
  padding:10px 14px;
  text-align:center;
  color:var(--t4);
  font-size:12px;
  font-weight:700;
  line-height:1.6;
  background:color-mix(in srgb,var(--bg3) 60%,transparent);
  border-radius:14px;
}
.mp-sample-detail-panel{
  width:100%;
  max-width:480px;
  max-height:min(78vh,680px);
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:22px 22px 0 0;
  box-shadow:0 -16px 42px rgba(0,0,0,.22);
  transform:translateY(18px);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.mp-sample-detail-overlay.open .mp-sample-detail-panel{
  transform:translateY(0);
}
.mp-sample-detail-hd{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px 12px;
  border-bottom:1px solid var(--border);
}
.mp-sample-detail-badge{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
  background:color-mix(in srgb,var(--accent) 10%,var(--bg3));
  color:var(--accent);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}
.mp-sample-detail-title{
  margin-top:6px;
  color:var(--t1);
  font-size:16px;
  font-weight:900;
  line-height:1.35;
}
.mp-sample-detail-close{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--t3);
  font-size:18px;
  cursor:pointer;
  font-family:var(--font);
  flex-shrink:0;
}
.mp-sample-detail-body{
  padding:14px 16px 18px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mp-sample-detail-card{
  border:1px solid var(--border2);
  background:var(--bg2);
  border-radius:18px;
  padding:14px;
}
.mp-sample-detail-kicker{
  color:var(--t4);
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.mp-sample-detail-heading{
  margin-top:7px;
  color:var(--t1);
  font-size:16px;
  font-weight:900;
  line-height:1.45;
}
.mp-sample-detail-text{
  margin-top:8px;
  color:var(--t2);
  font-size:14px;
  line-height:1.75;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:11px 12px;
}
.mp-sample-detail-image{
  margin-top:11px;
  min-height:118px;
  border-radius:16px;
  border:1px solid var(--border2);
  background:
    radial-gradient(circle at 22% 24%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 32%),
    linear-gradient(135deg,var(--cover-default-start),var(--cover-default-end));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--t2);
  text-align:center;
  padding:16px;
  overflow:hidden;
}
.mp-sample-detail-image-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:28px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}
.mp-sample-detail-image-text{
  max-width:250px;
  color:var(--t3);
  font-size:12px;
  line-height:1.55;
  font-weight:700;
}
.mp-sample-detail-reactions{
  margin-top:11px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.mp-sample-detail-reactions span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--t3);
  font-size:12px;
  font-weight:800;
}
@media (max-width:380px){
  .mp-genre-sample-rail{
    padding-left:18px;
    scroll-padding-left:18px;
  }
}


.mp-resume-mini-card .mp-sample-create-point{
  margin-top:9px;
  padding:8px 9px;
  border:1px dashed var(--border2);
  border-radius:12px;
  background:transparent;
}
.mp-resume-mini-card .mp-sample-create-point-title{
  color:var(--t2);
  font-size:11px;
  font-weight:900;
  line-height:1.35;
  margin-bottom:3px;
}
.mp-resume-mini-card .mp-sample-create-point-text{
  color:var(--t3);
  font-size:11px;
  font-weight:700;
  line-height:1.55;
  text-align:left;
}


.mp-sample-create-point--below{
  margin-top:8px;
  padding:12px 14px;
  border:1px dashed var(--border2);
  border-radius:12px;
  background:transparent;
}
.mp-sample-create-point--below .mp-sample-create-point-title{
  color:var(--t2);
  font-size:14px;
  font-weight:900;
  line-height:1.4;
  margin-bottom:4px;
}
.mp-sample-create-point--below .mp-sample-create-point-text{
  color:var(--t3);
  font-size:13.5px;
  font-weight:700;
  line-height:1.6;
  text-align:left;
}

body.pc-layout .pc-resume-image-center .mp-sample-create-point--below{
  margin-left:54px;
  margin-right:54px;
}


.mp-intro-panel{
  max-width:360px;
}
.mp-intro-title{
  font-size:18px;
  line-height:1.35;
  margin-bottom:6px;
}
.mp-intro-sub{
  font-size:13px;
  line-height:1.7;
  margin-bottom:20px;
}
.mp-intro-btn{
  min-height:106px;
  padding:20px 10px;
}
.mp-intro-btn-icon{
  font-size:25px;
}
.mp-intro-btn-label{
  font-size:13px;
  line-height:1.35;
}
.mp-intro-checkbox-label{
  font-size:13px;
}
.mp-intro-note{
  font-size:11px;
  line-height:1.55;
}
.mp-genre-nav-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.mp-genre-nav-title{
  grid-column:2;
  justify-self:center;
  text-align:center;
  font-size:15px;
  font-weight:900;
  color:var(--t1);
  letter-spacing:-.01em;
  line-height:1.3;
  white-space:nowrap;
}
.mp-genre-nav-row .mp-genre-back{
  margin-bottom:0;
  justify-self:start;
  min-height:34px;
  padding:7px 13px 7px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--bg3);
  color:var(--t2);
  font-size:12px;
  font-weight:900;
}
.mp-genre-nav-row .mp-genre-close{
  justify-self:end;
}
.mp-genre-close{
  flex-shrink:0;
  min-height:34px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--bg3);
  color:var(--t2);
  font-size:12px;
  font-weight:900;
  font-family:var(--font);
  cursor:pointer;
}
.mp-genre-close:active{
  transform:scale(.97);
}
.mp-intro-overlay.sample-mode{
  align-items:center;
  padding:calc(12px + env(safe-area-inset-top,0px)) 10px calc(12px + env(safe-area-inset-bottom,0px));
}
.mp-intro-overlay.sample-mode .mp-intro-panel{
  width:min(620px, calc(100vw - 20px));
  max-width:min(620px, calc(100vw - 20px));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  padding:16px 14px 14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.mp-intro-overlay.sample-mode .mp-intro-page.active{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:0 2px 4px;
}
.mp-intro-overlay.sample-mode .mp-genre-hd{
  margin-bottom:12px;
}
.mp-intro-overlay.sample-mode .mp-genre-sample-sections{
  min-width:0;
  overflow:hidden;
}
.mp-intro-overlay.sample-mode .mp-genre-sample-rail{
  margin-left:0;
  margin-right:0;
  padding-left:6px;
  padding-right:10px;
  scroll-padding-left:6px;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
}
.mp-intro-overlay.sample-mode .mp-resume-mini-card.mp-resume-real-card{
  width:min(318px, calc(100vw - 54px));
  min-width:min(318px, calc(100vw - 54px));
}
.resume-image-body{
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
.resume-image-sample-sections{
  overflow:hidden;
  min-width:0;
}
.resume-image-sample-sections .mp-genre-sample-rail{
  margin-left:0;
  margin-right:0;
  padding-left:6px;
  padding-right:10px;
  scroll-padding-left:6px;
  max-width:100%;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
}
.resume-image-sample-sections .mp-resume-mini-card.mp-resume-real-card{
  width:min(318px, calc(100vw - 54px));
  min-width:min(318px, calc(100vw - 54px));
}
@media (max-width:380px){
  .mp-intro-overlay.sample-mode .mp-intro-panel{
    width:calc(100vw - 12px);
    max-width:calc(100vw - 12px);
    padding-left:10px;
    padding-right:10px;
  }
  .mp-intro-overlay.sample-mode .mp-genre-sample-rail{
    padding-left:4px;
    padding-right:8px;
    scroll-padding-left:4px;
  }
  .mp-intro-overlay.sample-mode .mp-resume-mini-card.mp-resume-real-card{
    width:min(292px, calc(100vw - 42px));
    min-width:min(292px, calc(100vw - 42px));
  }
  .resume-image-sample-sections .mp-genre-sample-rail{
    padding-left:4px;
    padding-right:8px;
    scroll-padding-left:4px;
  }
  .resume-image-sample-sections .mp-resume-mini-card.mp-resume-real-card{
    width:min(292px, calc(100vw - 42px));
    min-width:min(292px, calc(100vw - 42px));
  }
}


.mp-intro-overlay.sample-mode .mp-intro-panel{
  overflow:hidden;
}
.mp-intro-overlay.sample-mode .mp-intro-page.active{
  flex:1 1 auto;
  max-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:none;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.mp-intro-overlay.sample-mode .mp-genre-sample-sections{
  overflow-x:hidden;
  overflow-y:visible;
  min-height:0;
}
.mp-intro-overlay.sample-mode .mp-genre-sample-rail,
.resume-image-sample-sections .mp-genre-sample-rail{
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
  touch-action:pan-x pan-y;
}
.mp-intro-overlay.sample-mode .mp-resume-mini-card.mp-resume-real-card,
.resume-image-sample-sections .mp-resume-mini-card.mp-resume-real-card{
  touch-action:pan-y;
}


.resume-image-sample-overlay{
  align-items:center;
  padding:calc(12px + env(safe-area-inset-top,0px)) 10px calc(12px + env(safe-area-inset-bottom,0px));
  overflow:hidden;
}
.resume-image-sample-panel{
  width:min(620px, calc(100vw - 20px));
  max-width:min(620px, calc(100vw - 20px));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:none;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.resume-image-sample-panel .mp-tpl-rail,
.resume-image-sample-panel .mp-genre-sample-rail{
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
}
@media (max-width:380px){
  .resume-image-sample-panel{
    width:calc(100vw - 12px);
    max-width:calc(100vw - 12px);
  }
}


.mp-sample-rail-wrap{
  position:relative;
  min-width:0;
  overflow:visible;
}
.mp-sample-rail-wrap .mp-genre-sample-rail{
  touch-action:pan-x pan-y;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  cursor:grab;
}
.mp-sample-rail-wrap .mp-genre-sample-rail:active{
  cursor:grabbing;
}
.mp-intro-overlay.sample-mode .mp-intro-page.active,
.resume-image-sample-panel{
  touch-action:pan-x pan-y;
}
.mp-intro-overlay.sample-mode .mp-resume-mini-card.mp-resume-real-card,
.resume-image-sample-sections .mp-resume-mini-card.mp-resume-real-card{
  touch-action:pan-x pan-y;
}
.mp-sample-rail-nav{
  position:absolute;
  top:50%;
  z-index:5;
  width:34px;
  height:46px;
  transform:translateY(-50%);
  border:1px solid var(--border2);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  color:var(--t2);
  font-size:26px;
  font-weight:800;
  line-height:1;
  font-family:var(--font);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mp-sample-rail-nav:active{
  transform:translateY(-50%) scale(.96);
}
.mp-sample-rail-nav-prev{left:0;}
.mp-sample-rail-nav-next{right:0;}
.mp-sample-rail-hint{
  margin:6px 4px 0;
  color:var(--t4);
  font-size:11px;
  line-height:1.5;
  text-align:center;
}
.mp-intro-overlay.sample-mode .mp-sample-rail-nav-prev{left:2px;}
.mp-intro-overlay.sample-mode .mp-sample-rail-nav-next{right:2px;}
.resume-image-sample-sections .mp-sample-rail-nav-prev{left:2px;}
.resume-image-sample-sections .mp-sample-rail-nav-next{right:2px;}
@media (max-width:380px){
  .mp-sample-rail-nav{
    width:30px;
    height:42px;
    font-size:23px;
  }
  .mp-sample-rail-hint{
    font-size:10.5px;
  }
}


.mp-intro-overlay.sample-mode{
  align-items:stretch;
  justify-content:center;
  padding:0;
  background:var(--bg);
}
.mp-intro-overlay.sample-mode .mp-intro-panel{
  width:100%;
  max-width:480px;
  height:100dvh;
  max-height:none;
  border-radius:0;
  padding:0;
  margin:0 auto;
  background:var(--bg);
  box-shadow:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.mp-intro-overlay.sample-mode .mp-intro-page.active{
  flex:1 1 auto;
  max-height:none;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px calc(20px + env(safe-area-inset-bottom,0px));
}
.mp-intro-overlay.sample-mode .mp-genre-nav-row{
  position:sticky;
  top:0;
  z-index:4;
  margin:-12px -14px 12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
}
.mp-intro-overlay.sample-mode .mp-genre-hd{
  margin-bottom:12px;
}
.mp-sample-screen-tabs{
  display:flex;
  gap:7px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px 2px 10px;
  margin:0 0 10px;
  scroll-snap-type:x proximity;
}
.mp-sample-screen-tabs::-webkit-scrollbar{display:none;}
.mp-sample-tab{
  flex:0 0 auto;
  scroll-snap-align:start;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--surface);
  color:var(--t3);
  font-family:var(--font);
  font-size:12px;
  font-weight:900;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.mp-sample-tab.active{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--on-accent);
}
.mp-sample-screen-card-wrap{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-width:0;
  padding:0 0 2px;
}
.mp-sample-screen-card-wrap .mp-resume-mini-card.mp-resume-real-card,
.resume-image-sample-sections .mp-sample-screen-card-wrap .mp-resume-mini-card.mp-resume-real-card,
.mp-intro-overlay.sample-mode .mp-sample-screen-card-wrap .mp-resume-mini-card.mp-resume-real-card{
  width:min(340px, 100%);
  min-width:0;
  flex:0 1 auto;
  scroll-snap-align:none;
  touch-action:pan-y;
}
.resume-image-body{
  padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
  overflow-x:hidden;
}
.resume-image-sample-sections{
  overflow:visible;
}
.resume-image-sample-sections .mp-sample-screen-tabs{
  margin-left:0;
  margin-right:0;
}
.resume-image-sample-sections .mp-sample-screen-card-wrap{
  padding-left:0;
  padding-right:0;
}
.mp-sample-empty{
  border:1px dashed var(--border2);
  background:var(--surface);
  border-radius:16px;
  padding:18px;
  color:var(--t4);
  font-size:13px;
  line-height:1.6;
  text-align:center;
}

.mp-sample-rail-wrap,
.mp-sample-rail-nav,
.mp-sample-rail-hint{
  display:none !important;
}
@media (max-width:380px){
  .mp-intro-overlay.sample-mode .mp-intro-page.active{
    padding-left:12px;
    padding-right:12px;
  }
  .mp-sample-tab{
    font-size:11.5px;
    padding-left:10px;
    padding-right:10px;
  }
}


.mp-intro-overlay.sample-mode .mp-intro-page.active{
  padding:0 14px calc(20px + env(safe-area-inset-bottom,0px));
  scroll-padding-top:168px;
}
.mp-intro-overlay.sample-mode .mp-genre-nav-row{
  position:sticky;
  top:0;
  z-index:20;
  margin:0 -14px;
  padding:calc(6px + env(safe-area-inset-top,0px)) 14px 8px;
  min-height:calc(48px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb,var(--surface) 98%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
.mp-intro-overlay.sample-mode .mp-genre-hd{
  position:sticky;
  top:calc(48px + env(safe-area-inset-top,0px));
  z-index:19;
  margin:0 -14px;
  padding:10px 14px 9px;
  background:color-mix(in srgb,var(--surface) 98%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
.mp-intro-overlay.sample-mode .mp-sample-screen-tabs{
  position:sticky;
  top:calc(111px + env(safe-area-inset-top,0px));
  z-index:18;
  margin:0 -14px 12px;
  padding:9px 14px 10px;
  background:color-mix(in srgb,var(--surface) 98%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
.mp-intro-overlay.sample-mode .mp-genre-sample-sections{
  overflow:visible;
}
.mp-intro-overlay.sample-mode .mp-sample-screen-card-wrap{
  padding-top:2px;
}


#screenResumeImage .resume-image-body{
  padding:0 14px calc(22px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-padding-top:132px;
}
#screenResumeImage .resume-image-intro-card,
#screenResumeImage .resume-image-section-title{
  position:sticky;
  z-index:12;
  background:var(--bg);
}
#screenResumeImage .resume-image-intro-card{
  top:0;
  margin:0 -14px;
  padding:12px 14px 10px;
  border-radius:0;
  border-left:0;
  border-right:0;
  border-top:0;
}
#screenResumeImage .resume-image-section-title{
  top:86px;
  margin:0 -14px;
  padding:8px 14px 7px;
  border-bottom:1px solid var(--border);
}
#screenResumeImage .resume-image-sample-sections .mp-sample-screen-tabs{
  position:sticky;
  top:122px;
  z-index:11;
  margin:0 -14px 12px;
  padding:9px 14px 10px;
  background:color-mix(in srgb,var(--surface) 98%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
#screenResumeImage .resume-image-sample-sections{
  overflow:visible;
}

@media (max-width:380px){
  .mp-intro-overlay.sample-mode .mp-intro-page.active{
    padding-left:12px;
    padding-right:12px;
    scroll-padding-top:164px;
  }
  .mp-intro-overlay.sample-mode .mp-genre-nav-row,
  .mp-intro-overlay.sample-mode .mp-genre-hd,
  .mp-intro-overlay.sample-mode .mp-sample-screen-tabs{
    margin-left:-12px;
    margin-right:-12px;
    padding-left:12px;
    padding-right:12px;
  }
  .mp-intro-overlay.sample-mode .mp-sample-screen-tabs{
    top:calc(108px + env(safe-area-inset-top,0px));
  }
  #screenResumeImage .resume-image-section-title{
    top:92px;
  }
  #screenResumeImage .resume-image-sample-sections .mp-sample-screen-tabs{
    top:128px;
  }
}


#screenResumeImage{
  overflow:hidden;
  background:var(--bg);
}
#screenResumeImage .resume-image-as-sample-screen{
  height:100%;
  min-height:0;
  padding:0 14px calc(20px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scroll-padding-top:168px;
  box-sizing:border-box;
}
#screenResumeImage .resume-image-as-sample-screen .mp-genre-nav-row{
  position:sticky;
  top:0;
  z-index:20;
  margin:0 -14px;
  padding:calc(6px + env(safe-area-inset-top,0px)) 14px 8px;
  min-height:calc(48px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb,var(--surface) 98%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
#screenResumeImage .resume-image-as-sample-screen .mp-genre-hd{
  
  position:static;
  margin:14px 0 18px;
  padding:14px 16px;
  background:color-mix(in srgb,var(--t4) 6%,var(--surface));
  border:1px solid var(--border);
  border-radius:14px;
}
#screenResumeImage .resume-image-as-sample-screen .mp-sample-screen-tabs{
  position:sticky;
  top:calc(111px + env(safe-area-inset-top,0px));
  z-index:18;
  margin:0 -14px 12px;
  padding:9px 14px 10px;
  background:color-mix(in srgb,var(--surface) 98%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
#screenResumeImage .resume-image-as-sample-screen .resume-image-sample-sections{
  overflow:visible;
  min-width:0;
}
#screenResumeImage .resume-image-as-sample-screen .mp-sample-screen-card-wrap{
  padding-top:2px;
}
@media (max-width:380px){
  #screenResumeImage .resume-image-as-sample-screen{
    padding-left:12px;
    padding-right:12px;
    scroll-padding-top:164px;
  }
  #screenResumeImage .resume-image-as-sample-screen .mp-genre-nav-row,
  #screenResumeImage .resume-image-as-sample-screen .mp-sample-screen-tabs{
    margin-left:-12px;
    margin-right:-12px;
    padding-left:12px;
    padding-right:12px;
  }
  #screenResumeImage .resume-image-as-sample-screen .mp-sample-screen-tabs{
    top:calc(108px + env(safe-area-inset-top,0px));
  }
}



.mp-sample-screen-tabs{
  padding-left:14px;
  padding-right:14px;
  scroll-padding-left:14px;
  scroll-padding-right:14px;
}
.mp-sample-screen-tabs .mp-sample-tab:first-child{
  margin-left:0;
}
.mp-intro-overlay.sample-mode .mp-sample-screen-tabs,
#screenResumeImage .resume-image-as-sample-screen .mp-sample-screen-tabs{
  padding-left:14px;
  padding-right:14px;
  scroll-padding-left:14px;
  scroll-padding-right:14px;
}
@media (max-width:380px){
  .mp-sample-screen-tabs,
  .mp-intro-overlay.sample-mode .mp-sample-screen-tabs,
  #screenResumeImage .resume-image-as-sample-screen .mp-sample-screen-tabs{
    padding-left:12px;
    padding-right:12px;
    scroll-padding-left:12px;
    scroll-padding-right:12px;
  }
}


.mp-genre-sample-sections,
.resume-image-sample-sections{
  min-width:0;
}
.mp-sample-slide-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:2px 0 10px;
  padding:0 2px;
}
.mp-sample-slide-count{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 11%,var(--surface));
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.mp-sample-slide-label{
  margin-top:5px;
  color:var(--t1);
  font-size:16px;
  font-weight:950;
  line-height:1.25;
}
.mp-sample-slide-hint{
  flex:0 0 auto;
  color:var(--t4);
  font-size:11px;
  font-weight:850;
  letter-spacing:.04em;
}
.mp-sample-slider-viewport{
  position:relative;
  overflow:hidden;
  width:100%;
  min-width:0;
  border-radius:22px;
  touch-action:pan-y;
}
.mp-sample-slider-track{
  display:flex;
  align-items:flex-start;
  width:100%;
  transition:transform .28s cubic-bezier(.22,.8,.28,1);
  will-change:transform;
}
.mp-sample-slide{
  flex:0 0 100%;
  min-width:100%;
  box-sizing:border-box;
  padding:0 1px 2px;
  opacity:.52;
  transform:scale(.985);
  transition:opacity .22s, transform .22s;
}
.mp-sample-slide.active{
  opacity:1;
  transform:scale(1);
}
.mp-sample-slide-kicker{
  display:none;
}
.mp-sample-slide .mp-sample-screen-card-wrap{
  padding-top:0;
}
.mp-sample-slide-nav{
  display:grid;
  grid-template-columns:minmax(74px,1fr) auto minmax(74px,1fr);
  align-items:center;
  gap:8px;
  margin:12px 0 8px;
}
.mp-sample-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:36px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--surface);
  color:var(--t2);
  font-family:var(--font);
  font-size:12px;
  font-weight:900;
  line-height:1.2;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mp-sample-nav-btn:disabled{
  opacity:.38;
  cursor:default;
}
.mp-sample-nav-name{
  max-width:86px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mp-sample-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  min-width:72px;
}
.mp-sample-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:color-mix(in srgb,var(--t4) 34%,transparent);
  cursor:pointer;
}
.mp-sample-dot.active{
  width:18px;
  background:var(--accent);
}
.mp-sample-jump-row{
  display:flex;
  gap:7px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 12px;
  margin:0 0 4px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-padding-left:2px;
}
.mp-sample-jump-row::-webkit-scrollbar{display:none;}
.mp-sample-jump-chip{
  flex:0 0 auto;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--surface);
  color:var(--t4);
  font-family:var(--font);
  font-size:11.5px;
  font-weight:900;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
}
.mp-sample-jump-chip.active{
  border-color:color-mix(in srgb,var(--accent) 65%,var(--border2));
  background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  color:var(--accent);
}
.mp-intro-overlay.sample-mode .mp-sample-screen-tabs,
#screenResumeImage .resume-image-as-sample-screen .mp-sample-screen-tabs{
  display:none;
}
.mp-intro-overlay.sample-mode .mp-sample-slide-head,
#screenResumeImage .resume-image-as-sample-screen .mp-sample-slide-head{
  margin-top:10px;
}
@media (max-width:380px){
  .mp-sample-slide-label{font-size:15px;}
  .mp-sample-nav-name{max-width:70px;}
  .mp-sample-slide-nav{gap:6px;}
  .mp-sample-nav-btn{font-size:11.5px;padding-left:8px;padding-right:8px;}
  .mp-sample-jump-chip{font-size:11px;padding-left:9px;padding-right:9px;}
}


.mp-sample-stage{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
}
.mp-sample-stage .mp-sample-slider-viewport{
  flex:1 1 auto;
  min-width:0;
}
.mp-sample-edge-arrow{
  flex:0 0 auto;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);
  border-radius:50%;
  background:var(--surface);
  color:var(--t2);
  cursor:pointer;
  box-shadow:0 3px 10px rgba(30,34,50,.07);
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.mp-sample-edge-arrow:hover{
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border2));
  color:var(--accent);
  transform:translateY(-1px);
}
.mp-sample-edge-arrow:disabled{
  opacity:.34;
  cursor:default;
  box-shadow:none;
}
.mp-sample-edge-arrow:disabled:hover{
  background:var(--surface);
  border-color:var(--border2);
  color:var(--t2);
  transform:none;
}
.mp-sample-edge-arrow svg{width:18px;height:18px;}
@media (max-width:420px){
  .mp-sample-stage{gap:6px;}
  .mp-sample-edge-arrow{width:36px;height:36px;}
  .mp-sample-edge-arrow svg{width:15px;height:15px;}
}


#screenResumeImage .resume-image-as-sample-screen .mp-sample-stage,
.mp-intro-overlay .mp-sample-stage{
  position:relative;
  display:block;   
  margin-top:16px; 
}
#screenResumeImage .resume-image-as-sample-screen .mp-sample-stage .mp-sample-slider-viewport,
.mp-intro-overlay .mp-sample-stage .mp-sample-slider-viewport{
  width:100%;
}
#screenResumeImage .resume-image-as-sample-screen .mp-sample-edge-arrow,
.mp-intro-overlay .mp-sample-edge-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 14px rgba(30,34,50,.18);
}
#screenResumeImage .resume-image-as-sample-screen .mp-sample-edge-prev,
.mp-intro-overlay .mp-sample-edge-prev{left:4px;}
#screenResumeImage .resume-image-as-sample-screen .mp-sample-edge-next,
.mp-intro-overlay .mp-sample-edge-next{right:4px;}
#screenResumeImage .resume-image-as-sample-screen .mp-sample-edge-arrow:hover,
.mp-intro-overlay .mp-sample-edge-arrow:hover{transform:translateY(-50%);}


body.pc-layout .pc-resume-image-center .mp-genre-nav-row{
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
  margin-bottom:14px;
}
body.pc-layout .pc-resume-image-center .mp-genre-hd{
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--t4) 6%,var(--surface));
  border-radius:14px;
  padding:16px 18px;
  margin-bottom:20px;
  gap:6px;
}
body.pc-layout .pc-resume-image-center .mp-genre-hd-title{font-size:15px;}
body.pc-layout .pc-resume-image-center .mp-genre-hd-sub{font-size:11.5px;color:var(--t3);}


@media (min-width:768px){
  .mp-intro-overlay{
    padding:16px !important;
  }
  .mp-intro-overlay.demo-mode{
    padding:16px !important;
  }
  .mp-intro-overlay.demo-mode .mp-intro-panel{
    width:480px !important;
    max-width:480px !important;
    height:calc(100dvh - 32px) !important;
    max-height:760px !important;
    border-radius:28px !important;
    border:1px solid rgba(74,85,104,.14);
    box-shadow:0 24px 80px rgba(26,32,44,.18) !important;
    overflow:hidden;
  }
  .mp-intro-overlay.demo-mode .mp-intro-page,
  .mp-intro-overlay.demo-mode .mp-intro-page.active{
    min-height:0;
  }
  .mp-intro-overlay.demo-mode #mpIntroPageDemo.active,
  .mp-intro-overlay.demo-mode #mpIntroPageLikeDemo.active,
  .mp-intro-overlay.demo-mode #mpIntroPageEmpathyDemo.active,
  .mp-intro-overlay.demo-mode #mpIntroPageReactionDemo.active,
  .mp-intro-overlay.demo-mode #mpIntroPageMypageGuide.active{
    width:100%;
    height:100%;
    min-height:0;
  }
  .mp-intro-overlay.demo-mode #mpIntroPageDemo .tt-app,
  .mp-intro-overlay.demo-mode .ld-app,
  .mp-intro-overlay.demo-mode .mg-app{
    width:100% !important;
    max-width:480px !important;
    height:100% !important;
    max-height:none !important;
    border-radius:0;
  }

  .mp-intro-overlay.sample-mode .mp-intro-panel{
    width:480px !important;
    max-width:480px !important;
    max-height:calc(100dvh - 32px) !important;
    border-radius:28px !important;
    border:1px solid rgba(74,85,104,.14);
    box-shadow:0 24px 80px rgba(26,32,44,.18) !important;
  }

  .hi-edit-overlay{
    align-items:center !important;
    justify-content:center !important;
    padding:16px !important;
  }
  .hi-edit-sheet{
    width:480px !important;
    max-width:480px !important;
    height:calc(100dvh - 32px) !important;
    max-height:760px !important;
    border-radius:28px !important;
    border:1px solid rgba(74,85,104,.14);
    overflow:hidden;
    box-shadow:0 24px 80px rgba(26,32,44,.18) !important;
  }
  .hi-edit-overlay.open .hi-edit-sheet{
    transform:translateY(0) !important;
  }
}

@media (min-width:768px) and (max-height:720px){
  .mp-intro-overlay.demo-mode,
  .hi-edit-overlay{
    padding:0 !important;
  }
  .mp-intro-overlay.demo-mode .mp-intro-panel,
  .hi-edit-sheet{
    height:100dvh !important;
    max-height:none !important;
    border-top:0;
    border-bottom:0;
    border-radius:0 !important;
  }
}


.tt-add-btn,
.tt-hl-add-card{
  border:1px solid var(--border2);
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface2) 88%,var(--accent) 12%),color-mix(in srgb,var(--surface) 92%,var(--accent) 8%));
  color:var(--t2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent),0 8px 18px rgba(0,0,0,.10);
}
.tt-add-btn svg,
.tt-hl-add-plus{
  color:var(--accent);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 26%,transparent));
}
.tt-add-btn:hover,
.tt-add-btn:focus-visible,
.tt-hl-add-card:hover,
.tt-hl-add-card:focus-visible,
.tt-hl-add-card.focused{
  border-color:var(--accent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface2) 78%,var(--accent) 22%),color-mix(in srgb,var(--surface) 84%,var(--accent) 16%));
  color:var(--t1);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),0 10px 22px rgba(0,0,0,.14);
  outline:none;
}
.tt-hl-add-card{
  min-height:44px;
  flex-direction:row;
  gap:8px;
  padding:10px 12px;
}
.tt-hl-add-plus{
  width:22px;
  height:22px;
  border-color:color-mix(in srgb,currentColor 58%,transparent);
}
.tt-publish-area .tt-draft-btn{order:1;}
.tt-publish-area .tt-publish-btn{order:2;}


.auth-login-box{
  max-width:380px;
  width:calc(100% - 40px);
  text-align:left;
}

.auth-login-box{--accent:#2F6B4F;--accent2:#3A7A5B;--accent3:#1F4A36;}
.auth-login-box .confirm-dialog-btn.publish-primary{background:linear-gradient(135deg,#1F4A36 0%,#2F6B4F 48%,#7FA37A 100%);color:#fff;}
.auth-login-box .confirm-dialog-btn.publish-primary:hover{opacity:.92;}
.auth-login-lead{
  font-size:13px;
  color:#666;
  margin:2px 0 14px;
  line-height:1.6;
}
.auth-login-field{ margin:0 0 10px; }
.auth-login-field label{
  display:block;
  font-size:12px;
  color:#666;
  margin:0 0 4px;
}
.auth-login-field input{
  width:100%;
  box-sizing:border-box;
  padding:9px 11px;
  border:1px solid #d9d9d9;
  border-radius:8px;
  font-size:14px;
  color:#222;
  background:#fff;
}
.auth-login-field input:focus{
  outline:none;
  border-color:#2b6cb0;
  box-shadow:0 0 0 2px rgba(43,108,176,.15);
}
.auth-login-remember{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 10px;
}
.auth-login-remember input{
  width:auto;
  margin:0;
  flex:0 0 auto;
}
.auth-login-remember label{
  font-size:13px;
  color:#555;
  margin:0;
  cursor:pointer;
}
.auth-login-status{
  font-size:13px;
  min-height:18px;
  margin:6px 0 4px;
  color:#666;
}
.auth-login-status.ok{ color:#1a7f37; }
.auth-login-status.ng{ color:#b42318; }
.auth-login-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

.auth-login-actions[hidden]{ display:none; }
.auth-login-actions .confirm-dialog-btn.publish-primary{ width:100%; }
.auth-login-link-btn{
  appearance:none;
  background:transparent;
  border:none;
  color:#2b6cb0;
  font-size:13px;
  padding:4px;
  cursor:pointer;
  text-decoration:underline;
}
.auth-login-close{ width:100%; margin-top:10px; }

.auth-login-box .auth-login-sublinks{flex-direction:row;gap:8px;}
.auth-login-box .auth-login-sublinks .auth-login-link-btn{flex:1 1 0;min-width:0;background:#f0f1f4;border:none;border-radius:9px;color:#3a3f46;font-size:12.5px;font-weight:700;line-height:1.3;padding:10px 8px;text-decoration:none;}
.auth-login-box .auth-login-sublinks .auth-login-link-btn:hover{background:#e6e8ec;}
.auth-login-box #authLoginSwitchBtn::before,
.auth-login-box #authForgotLink::before{content:"";display:inline-block;width:13px;height:13px;margin-right:5px;vertical-align:-2px;background-repeat:no-repeat;background-position:center;background-size:contain;}
.auth-login-box #authLoginSwitchBtn::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233a3f46" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M19 8v6M16 11h6"/></svg>');}
.auth-login-box #authForgotLink::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233a3f46" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15" r="4.5"/><path d="M11 12l9-9M17 3l3 3M15 5l2 2"/></svg>');}

.auth-login-social{ margin-top:14px; }
.auth-login-divider{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#999;
  margin:0 0 10px;
}
.auth-login-divider::before,
.auth-login-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:#ececec;
}
.auth-login-social-btn{
  appearance:none;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  margin:0 0 8px;
  border:1px solid #d9d9d9;
  border-radius:8px;
  background:#fff;
  color:#222;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}
.auth-login-social-btn:last-child{ margin-bottom:0; }
.auth-login-social-btn:hover{ background:#f7f7f7; }
.auth-login-social-btn:focus-visible{
  outline:none;
  border-color:#2b6cb0;
  box-shadow:0 0 0 2px rgba(43,108,176,.15);
}
.auth-login-social-btn:disabled{ opacity:.55; cursor:default; }
.auth-login-social-btn svg{ flex:0 0 auto; }


.email-verify-banner{
  display:none;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:9px 14px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  box-shadow:inset 4px 0 0 #e8a33d;
}
.email-verify-banner.show{ display:flex; }
.email-verify-banner-text{
  flex:1 1 auto;
  font-size:12px;
  font-weight:700;
  color:var(--t1);
  line-height:1.4;
}
.email-verify-banner-btn{
  flex:0 0 auto;
  padding:6px 12px;
  font-size:12px;
  font-weight:900;
  font-family:var(--font);
  color:#fff;
  background:#2b6cb0;
  border:none;
  border-radius:8px;
  cursor:pointer;
}
.email-verify-banner-btn:hover{ background:#255d99; }
.email-verify-banner-btn:disabled{ opacity:.55; cursor:default; }
.email-verify-banner-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(43,108,176,.25);
}



.handle-copyable{
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:fit-content;
  max-width:100%;
  overflow:visible;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .15s ease;
}
.handle-copyable:hover{
  opacity:.7;
}
.handle-copyable:focus-visible{
  outline:none;
  border-radius:4px;
  box-shadow:0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
}
.handle-copyable::after{
  content:'';
  flex:0 0 auto;
  width:11px;
  height:11px;
  background-color:currentColor;
  opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15%201H4a2%202%200%200%200-2%202v12h2V3h11V1zm3%204H8a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2zm0%2016H8V7h10v14z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15%201H4a2%202%200%200%200-2%202v12h2V3h11V1zm3%204H8a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2zm0%2016H8V7h10v14z'/%3E%3C/svg%3E") center/contain no-repeat;
}



.tt-section-appearance{margin-top:14px;}
.tt-section-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.tt-section-head .tt-section-label{margin-bottom:0;}
.tt-help-btn{width:20px;height:20px;border-radius:50%;border:1px solid var(--border2,#d7dbe0);background:var(--surface,#fff);color:var(--t3,#94a0b0);font-size:11px;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;}


#ttCreateBody .tt-section{
  margin-bottom:16px;padding:14px;
  border:1px solid var(--border2,#d7dbe0);border-radius:20px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface,#fff) 94%, var(--bg2,#EDF0F4)), var(--surface,#fff));
  box-shadow:0 8px 20px rgba(15,23,42,.045);
}
#ttCreateBody .tt-section-label{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  padding:4px 12px;border:1px solid var(--border,#e2e6ec);border-radius:99px;
  background:var(--bg2,#EDF0F4);color:var(--t1,#2d3340);
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:none;
  margin-bottom:10px;
}
#ttCreateBody .tt-section-head .tt-section-label{margin-bottom:0;}
#ttCreateBody .tt-section-label::before{display:none;}

#ttCreateBody .tt-section .tt-profile-card{background:color-mix(in srgb, var(--surface,#fff) 84%, var(--bg2,#EDF0F4));}


.tt-theme-picker{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;-webkit-overflow-scrolling:touch;}
.tt-rtp-option{position:relative;flex:0 0 auto;width:84px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface,#fff);border:1.5px solid var(--border,#e2e6ec);border-radius:12px;padding:9px 8px;cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;}
.tt-rtp-swatch{width:34px;height:34px;border-radius:9px;border:1px solid rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.tt-rtp-swatch i{width:15px;height:15px;border-radius:50%;display:block;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.tt-rtp-name{font-size:11px;font-weight:700;color:var(--t2,#4a5568);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.tt-th-a .tt-rtp-swatch{background:linear-gradient(135deg,#F7F8FA,#E2E8F0);}
.tt-th-b .tt-rtp-swatch{background:linear-gradient(135deg,#7C51E0,#B36BE0);}
.tt-th-c .tt-rtp-swatch{background:linear-gradient(135deg,#FF9D7A,#F57EB0);}
.tt-th-d .tt-rtp-swatch{background:linear-gradient(135deg,#2B2F3A,#4A5568);}

.tt-rtp-option.applied{border-color:var(--accent,#7C51E0);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent,#7C51E0) 55%, transparent), 0 2px 8px rgba(0,0,0,.12);}
.tt-rtp-applied-badge{position:absolute;top:4px;left:4px;height:16px;padding:0 6px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;line-height:1;color:#fff;border-radius:999px;background:var(--accent,#7C51E0);box-shadow:0 1px 4px rgba(0,0,0,.28);}

.tt-rtp-collab{border-color:#d4a017;background:color-mix(in srgb, #d4a017 8%, transparent);box-shadow:0 0 0 1px rgba(212,160,23,.35), 0 2px 8px rgba(212,160,23,.18);}
.tt-rtp-collab-badge{position:absolute;top:4px;left:4px;height:16px;padding:0 5px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;line-height:1;color:#5a3d00;border-radius:999px;background:linear-gradient(135deg,#ffd76b,#e8a31a);box-shadow:0 1px 4px rgba(0,0,0,.28);}


.tt-cover-picker{padding:0 2px;}
.tt-cover-preview{height:80px;border-radius:10px;background:var(--surface2,#eef1f5);overflow:hidden;transition:background .35s ease;}
.tt-cover-actions{display:flex;gap:8px;margin-top:10px;}
.tt-rcp-btn{flex:1;padding:9px 12px;border:1px solid var(--border2,#d7dbe0);border-radius:10px;background:var(--surface,#fff);color:var(--t1,#333);font-size:14px;font-weight:600;cursor:pointer;transition:transform .12s ease, box-shadow .15s ease;}
.tt-rcp-btn.focused{box-shadow:0 0 0 2px var(--accent,#7C51E0);}
.tt-cover-status{margin-top:8px;font-size:12px;color:var(--t2,#888);}
.tt-cover-status.custom{color:var(--accent,#7C51E0);font-weight:700;}


.tt-cover-sheet{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,22,30,.28);opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s ease;}
.tt-cover-sheet.open{opacity:1;visibility:visible;}
.tt-cover-sheet-panel{width:100%;background:var(--surface,#fff);border-radius:16px 16px 0 0;padding:16px 16px 22px;box-shadow:0 -6px 24px rgba(0,0,0,.18);transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.8,.3,1);}
.tt-cover-sheet.open .tt-cover-sheet-panel{transform:translateY(0);}
.tt-cover-sheet-title{font-size:13px;font-weight:800;color:var(--t1,#333);margin-bottom:12px;text-align:center;}
.tt-cover-sheet-grid{display:flex;gap:10px;}
.tt-cover-opt{flex:1;height:54px;border-radius:10px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);cursor:pointer;padding:0;transition:transform .15s ease, box-shadow .15s ease;}
.tt-cover-opt.selected{box-shadow:0 0 0 2px var(--accent,#7C51E0);transform:translateY(-2px);}
.tt-cv-a{background:linear-gradient(135deg,#A8C5FF,#7A9DFF);}
.tt-cv-b{background:linear-gradient(135deg,#7C51E0,#B36BE0 55%,#F0A7C8);}
.tt-cv-c{background:linear-gradient(135deg,#FFD9A8,#FF9D7A 55%,#F57EB0);}



.tt-theme-summary{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:1.5px solid var(--border2,#d7dbe0);border-radius:12px;background:var(--surface,#fff);color:var(--t1,#333);cursor:pointer;text-align:left;transition:box-shadow .15s ease, transform .12s ease;}
.tt-theme-summary.focused{box-shadow:0 0 0 2px var(--accent,#7C51E0);}
.tt-ths-preview{width:44px;height:34px;border-radius:9px;flex:0 0 auto;border:1px solid rgba(0,0,0,.1);background:linear-gradient(135deg,#F7F8FA,#E2E8F0);transition:background .3s ease;}
.tt-ths-main{min-width:0;flex:1;display:flex;flex-direction:column;}
.tt-ths-label{font-size:10px;color:var(--t3,#888);font-weight:700;margin-bottom:1px;}
.tt-ths-name{font-size:13px;color:var(--t1,#333);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tt-ths-cta{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--accent,#7C51E0);white-space:nowrap;}

.tt-theme-sheet{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,22,30,.28);opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s ease;}
.tt-theme-sheet.open{opacity:1;visibility:visible;}
.tt-theme-sheet-panel{width:100%;background:var(--surface,#fff);border-radius:16px 16px 0 0;padding:14px 14px 20px;box-shadow:0 -6px 24px rgba(0,0,0,.18);transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.8,.3,1);max-height:90%;overflow-y:auto;}
.tt-theme-sheet.open .tt-theme-sheet-panel{transform:translateY(0);}
.tt-theme-sheet-title{font-size:13px;font-weight:800;color:var(--t1,#333);margin-bottom:10px;text-align:center;}
.tt-theme-sheet-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch;}
.tt-tst-tab{flex:0 0 auto;padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:800;border:1px solid var(--border2,#d7dbe0);background:var(--bg2,#EDF0F4);color:var(--t3,#888);white-space:nowrap;}
.tt-tst-tab.on{background:var(--accent,#7C51E0);color:#fff;border-color:var(--accent,#7C51E0);}
.tt-tst-dist{border-style:dashed;}
.tt-theme-sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.tt-th-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--surface,#fff);border:1.5px solid var(--border,#e2e6ec);border-radius:12px;padding:11px 8px;cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease;}
.tt-th-opt.selected{border-color:var(--accent,#7C51E0);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent,#7C51E0) 55%, transparent), 0 2px 8px rgba(0,0,0,.12);transform:translateY(-1px);}
.tt-th-opt-sw{width:100%;height:34px;border-radius:9px;border:1px solid rgba(0,0,0,.08);background:linear-gradient(135deg,#F7F8FA,#E2E8F0);}
.tt-th-opt-nm{font-size:11px;font-weight:700;color:var(--t2,#4a5568);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.tt-th-opt-badge{position:absolute;top:5px;left:5px;height:15px;padding:0 6px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;line-height:1;color:#fff;border-radius:999px;background:#b8258f;box-shadow:0 1px 4px rgba(0,0,0,.28);z-index:2;}
.tt-th-a .tt-th-opt-sw{background:linear-gradient(135deg,#F7F8FA,#E2E8F0);}
.tt-th-b .tt-th-opt-sw{background:linear-gradient(135deg,#7C51E0,#B36BE0);}
.tt-th-c .tt-th-opt-sw{background:linear-gradient(135deg,#FF9D7A,#F57EB0);}
.tt-th-d .tt-th-opt-sw{background:linear-gradient(135deg,#7bb0d6,#3a6ea5);}

#ttResumeCard.tt-rt-c .tt-resume-name{color:#C13B82;}
#ttResumeCard.tt-rt-c .tt-resume-hash{color:#E06A9A;}
#ttResumeCard.tt-rt-c .tt-resume-tl-yr{background:#FFE3D6;color:#C7502A;}


.tt-pause-btn{width:28px;height:28px;border-radius:50%;border:none;background:var(--bg3,#E2E8F0);color:var(--t2,#4a5568);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background .15s ease, transform .12s ease;}
.tt-pause-btn:hover{background:var(--bg2,#EDF0F4);}
.tt-pause-btn:active{transform:scale(.92);}
.tt-pause-btn.paused{background:var(--accent,#7C51E0);color:#fff;}


body:not(.pc-layout) .mp-intro-overlay.sample-mode{
  align-items:center !important;
  justify-content:center !important;
  padding:calc(16px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px)) !important;
  background:rgba(24,26,34,.5) !important;
}
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-intro-panel{
  width:min(440px, calc(100vw - 24px)) !important;
  max-width:min(440px, calc(100vw - 24px)) !important;
  height:auto !important;
  max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
  border-radius:22px !important;
  padding:14px 12px 12px !important;
  background:var(--surface) !important;
  box-shadow:0 24px 70px rgba(20,22,34,.34) !important;
  border:1px solid var(--border) !important;
  margin:0 auto !important;
}
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-resume-mini-card.mp-resume-real-card{
  width:min(300px, calc(100vw - 92px)) !important;
  min-width:min(300px, calc(100vw - 92px)) !important;
}


body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-intro-panel{ padding:12px 8px 10px !important; }
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-intro-page.active{ padding-left:8px !important; padding-right:8px !important; }
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-genre-nav-row{ margin-left:-8px !important; margin-right:-8px !important; padding-left:8px !important; padding-right:8px !important; }
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-genre-nav-row .mp-genre-back{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:5px !important;
  box-sizing:border-box !important;min-width:64px !important;width:auto !important;height:32px !important;min-height:32px !important;padding:6px 12px !important;margin:0 !important;
  font-size:13px !important;color:var(--t3) !important;border:1px solid var(--border) !important;border-radius:99px !important;background:transparent !important;flex-shrink:0 !important;
}
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-genre-nav-row .mp-genre-back svg{ width:14px !important;height:14px !important; }
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-genre-nav-row .mp-genre-close{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  box-sizing:border-box !important;width:40px !important;min-width:40px !important;height:40px !important;min-height:40px !important;padding:0 !important;
  border:1px solid var(--border) !important;border-radius:50% !important;background:transparent !important;color:var(--t3) !important;flex-shrink:0 !important;justify-self:end !important;
}
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-genre-nav-row .mp-genre-close svg{ width:14px !important;height:14px !important; }


body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-genre-sample-rail{ padding-left:2px !important; padding-right:2px !important; }
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-sample-screen-card-wrap{ padding-left:0 !important; padding-right:0 !important; }
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-genre-sample-sections .mp-sample-screen-card-wrap .mp-resume-mini-card.mp-resume-real-card,
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-resume-mini-card.mp-resume-real-card{
  width:min(360px, calc(100vw - 58px)) !important;
  min-width:min(360px, calc(100vw - 58px)) !important;
  max-width:min(360px, calc(100vw - 58px)) !important;
}
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-sample-edge-arrow{ width:38px !important; height:38px !important; }
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-sample-edge-prev{ left:-8px !important; }
body:not(.pc-layout) .mp-intro-overlay.sample-mode .mp-sample-edge-next{ right:-8px !important; }


body:not(.pc-layout) .mp-intro-overlay.demo-mode{
  align-items:center !important;
  justify-content:center !important;
  padding:calc(16px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px)) !important;
}
body:not(.pc-layout) .mp-intro-overlay.demo-mode .mp-intro-panel{
  width:min(440px, calc(100vw - 24px)) !important;
  max-width:min(440px, calc(100vw - 24px)) !important;
  height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
  max-height:min(760px, calc(100dvh - 32px)) !important;
  border-radius:22px !important;
  border:1px solid var(--border) !important;
  box-shadow:0 24px 70px rgba(20,22,34,.34) !important;
  overflow:hidden !important;
  background:var(--surface) !important;
}