/* Диплом AI Native Designer · Pixel Perfect — единый стилевой файл конвейера.
   Один на все дипломы: HTML-странички ссылаются на него относительным путём. */

  :root{
    --paper:#F2F1EA; --paper-deep:#E9E8DF; --paper-deeper:#DEDDD2;
    --card:#FBFAF5;
    --ink:#1B1D18; --ink-2:#22251F;
    --lime:#DCFF90; --stone:#AFB09B;
    --fg:#22251F; --fg-mid:#43463C; --fg-muted:#6A6D5F;
    --fg-on-dark:#F2F1EA; --fg-dim:#A3A695;
    --r-sm:14px; --r-lg:20px; --r-xl:26px;
    --line:rgba(34,37,31,.14);
    --ease-strong:cubic-bezier(0.23,1,0.32,1);
    --ease-flip:cubic-bezier(0.32,0.72,0,1);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--paper); color:var(--fg); font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased}
  a{color:inherit}

  /* бесшовный переход диплом ↔ проект */
  @view-transition{navigation:auto}

  /* зерно печати */
  body::after{content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  .wrap{max-width:1080px; margin:0 auto; padding:26px clamp(20px,4vw,48px) 92px}

  .pplogo{display:block; aspect-ratio:155/17; height:auto}

  /* ── топ-бар ─────────────────────────────── */
  .topbar{display:flex; align-items:center; gap:14px; padding:12px 0 44px}
  .topbar .pplogo{width:138px; color:var(--fg); view-transition-name:pp-logo}
  .topbar .doc{margin-left:auto; font-size:13.5px; font-weight:500; color:var(--fg-muted)}

  /* ── шапка ───────────────────────────────── */
  .head{margin-bottom:38px}
  .head h1{margin:0 0 14px; font-size:clamp(34px,5vw,56px); font-weight:700; letter-spacing:-0.03em; line-height:1.02; text-wrap:balance}
  .head h1 .dot{color:var(--stone)}
  .head .sub{font-size:16.5px; color:var(--fg-muted); line-height:1.6; max-width:540px; text-wrap:pretty}
  .meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:22px}
  .vchip{display:inline-flex; align-items:center; gap:7px; padding:8px 15px 8px 11px; border-radius:999px; font-size:13px; font-weight:600; background:var(--lime); color:var(--ink)}
  .vchip svg{width:14px; height:14px}
  .meta .m{font-size:13.5px; font-weight:600; color:var(--fg-mid); white-space:nowrap}
  .meta .m span{color:var(--fg-muted); font-weight:400}
  .meta .sep{color:var(--stone)}

  /* ── диплом ──────────────────────────────── */
  .card3d{perspective:2200px; margin:0 0 30px}
  .tilt{width:100%; aspect-ratio:1.5/1; transform-style:preserve-3d; transition:transform .15s var(--ease-strong); will-change:transform}
  .flipper{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1.1s var(--ease-flip); will-change:transform; cursor:pointer}
  .face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--r-xl); overflow:hidden; box-shadow:0 34px 80px -38px rgba(24,26,18,.55)}

  /* фронт: фото-фон (лайм-дуга), затемнён поверх ради контраста текста */
  .front{
    background-color:#15170F;
    background-image:
      linear-gradient(158deg, rgba(24,26,19,.52) 0%, rgba(20,22,16,.66) 55%, rgba(16,18,12,.86) 100%),
      url('assets/bg-arc.webp');
    background-size:cover; background-position:center;
    color:var(--fg-on-dark); display:flex;
    print-color-adjust:exact; -webkit-print-color-adjust:exact;
  }
  .fbody{flex:1; min-width:0; padding:clamp(22px,3.8vw,52px); display:flex; flex-direction:column}
  .fbody .row-top{display:flex; align-items:center; gap:16px}
  .fbody .row-top .pplogo{width:clamp(104px,12vw,148px); color:var(--fg-on-dark)}
  .fbody .did{margin-left:auto; text-align:right; font-size:clamp(9px,1vw,12px); font-weight:500; color:var(--fg-dim); line-height:1.6}

  .fbody .core{flex:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(10px,1.6vw,20px)}
  .fbody .eyebrow{font-weight:600; font-size:clamp(11px,1.25vw,14.5px); color:var(--lime)}
  .fbody .dname{font-size:clamp(30px,6.2vw,80px); font-weight:700; letter-spacing:-0.035em; line-height:1; margin:0; white-space:nowrap}
  .fbody .dfor{font-size:clamp(12px,1.5vw,18.5px); color:var(--fg-dim); line-height:1.55; max-width:min(94%,60ch); text-wrap:balance}
  .fbody .dfor b{color:var(--fg-on-dark); font-weight:600}

  .fbody .row-bot{display:flex; align-items:flex-start; gap:clamp(30px,5vw,72px); position:relative; padding-top:clamp(12px,1.7vw,20px)}
  .fbody .row-bot::before{content:""; position:absolute; top:0; left:0; right:calc(clamp(96px,17.6vw,232px) + clamp(20px,3.4vw,48px) + 28px); height:1px; background:rgba(242,241,234,.24)}
  .fbody .cell{display:flex; flex-direction:column; gap:5px}
  .fbody .cell .k{font-size:clamp(9.5px,1vw,12px); font-weight:500; color:var(--fg-dim)}
  .fbody .cell .v{font-size:clamp(11.5px,1.35vw,16.5px); font-weight:600}
  .fbody{position:relative}
  .fbody .sig{position:absolute; right:clamp(20px,3.4vw,48px); bottom:clamp(10px,1.6vw,22px); width:clamp(96px,17.6vw,232px); height:auto; pointer-events:none}

  /* оборот: фирменная лайм-сторона */
  .back{background:var(--lime); color:var(--ink); transform:rotateY(180deg); display:flex; align-items:center; justify-content:center;
    background-image:radial-gradient(rgba(27,29,24,.13) 1px, transparent 1.4px); background-size:24px 24px}
  .back .bcore{display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2.4vw,30px)}
  .back .pplogo{width:clamp(240px,42vw,540px); color:var(--ink)}
  .back .bsub{font-weight:600; font-size:clamp(11px,1.3vw,15px); color:rgba(27,29,24,.6)}
  .back .burl{position:absolute; bottom:clamp(16px,2.4vw,30px); left:0; right:0; text-align:center; font-size:clamp(10px,1.1vw,13px); font-weight:600; color:rgba(27,29,24,.5)}

  /* ── действия ────────────────────────────── */
  .actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
  .btn{appearance:none; border:0; cursor:pointer; font-family:inherit; font-weight:600; font-size:15px; padding:14px 25px; border-radius:999px; display:inline-flex; align-items:center; gap:10px; text-decoration:none; transition:transform .16s var(--ease-strong), filter .14s ease, box-shadow .2s ease}
  @media (hover:hover) and (pointer:fine){
    .btn:hover{transform:translateY(-1.5px); filter:brightness(.98); box-shadow:0 10px 22px -12px rgba(24,26,18,.4)}
  }
  .btn:active{transform:scale(.97)}
  .btn.primary{background:var(--ink); color:var(--lime)}
  .btn.lime{background:var(--lime); color:var(--ink)}
  .btn.ghost{background:var(--card); border:1px solid var(--line); color:var(--fg)}

  /* ── секции ──────────────────────────────── */
  .section{margin-top:72px}
  .stitle{margin:0 0 24px; font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-0.025em; line-height:1.1; text-wrap:balance}

  /* выпускной проект */
  .project{view-transition-name:project-card; background:linear-gradient(158deg,#242720 0%,#1B1D18 60%,#15170F 100%); color:var(--fg-on-dark); border-radius:var(--r-xl); padding:clamp(28px,4vw,46px); display:flex; flex-direction:column; gap:18px}
  .btn .arr{transition:transform .16s var(--ease-strong)}
  @media (hover:hover) and (pointer:fine){ .btn:hover .arr{transform:translateX(3px)} }
  .project .pe{font-weight:600; font-size:14px; color:var(--lime)}
  .project h3{margin:0; font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-0.02em; line-height:1.12; text-wrap:balance}
  .project .pd{font-size:16px; color:var(--fg-dim); line-height:1.65; max-width:58ch; text-wrap:pretty}
  .project .ptags{display:flex; flex-wrap:wrap; gap:8px}
  .project .ptag{font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:999px; background:rgba(242,241,234,.11); color:var(--fg-on-dark)}
  .project .pcta{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:10px}

  /* путь: точка старта и точка финиша */
  .journey{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .jcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:16px}
  .jcard .jtag{align-self:flex-start; font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:9px; background:var(--paper-deeper); color:var(--fg-mid)}
  .jcard.fin .jtag{background:var(--ink); color:var(--lime)}
  .jcard .jq{font-size:16.5px; line-height:1.65; letter-spacing:-0.005em; color:var(--fg); text-wrap:pretty}
  .jcard .jsrc{margin-top:auto; padding-top:6px; font-size:13px; color:var(--fg-muted)}

  /* рекомендация автора программы */
  .ref{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,3.4vw,42px)}
  .ref .rtext{margin:0; font-size:clamp(15.5px,1.6vw,17px); line-height:1.7; color:var(--fg); max-width:66ch; text-wrap:pretty}
  .ref .rsign{display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin-top:24px}
  .ref .rsig{width:clamp(96px,10vw,126px); height:auto; filter:brightness(0); opacity:.85}
  .ref .rwho .rname{font-size:14.5px; font-weight:600}
  .ref .rwho .rrole{font-size:13px; color:var(--fg-muted); margin-top:2px}

  /* компетенции: реестр по модулям */
  .comp{border-top:1px solid var(--line)}
  .crow{display:grid; grid-template-columns:minmax(210px,290px) 1fr; gap:20px 56px; padding:32px 0; border-bottom:1px solid var(--line)}
  .cmod{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
  .cmod .cnum{font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:9px; background:var(--paper-deeper); color:var(--fg-mid)}
  .crow.final .cnum{background:var(--ink); color:var(--lime)}
  .cmod .cname{font-size:19px; font-weight:700; letter-spacing:-0.015em}
  .cmod .csub{font-size:13.5px; color:var(--fg-muted); line-height:1.5}
  .cskills{display:flex; flex-direction:column; gap:18px; padding-top:4px}
  .cskill .ct{font-size:16px; font-weight:600; color:var(--fg); letter-spacing:-0.01em}
  .cskill .cd{margin-top:3px; font-size:14px; color:var(--fg-muted); line-height:1.55; text-wrap:pretty; max-width:56ch}

  /* цифры: цельная лаймовая лента */
  .statsband{margin-top:16px; background:var(--lime); border-radius:var(--r-xl); padding:clamp(26px,3.4vw,40px) clamp(26px,3.8vw,46px); display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
  .statsband .st .n{font-size:clamp(30px,3.6vw,44px); font-weight:700; letter-spacing:-0.035em; color:var(--ink); line-height:1}
  .statsband .st .l{font-size:13.5px; font-weight:500; color:rgba(27,29,24,.62); margin-top:8px; line-height:1.45}

  /* верификация */
  .vtext{margin:0; font-size:15px; line-height:1.7; color:var(--fg-mid); max-width:62ch; text-wrap:pretty}
  .vtext b{color:var(--fg)}
  .vreq{margin-top:16px; font-size:14px; font-weight:600; color:var(--fg)}

  footer{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; color:var(--fg-muted); font-size:13.5px}
  footer .sep{opacity:.4}
  footer a{color:var(--fg-mid); text-decoration:none; font-weight:600}

  /* ── движение: вход и появление ──────────── */
  .topbar,.head,.card3d,.actions{opacity:0; transform:translateY(10px); animation:enter .55s var(--ease-strong) forwards}
  .head{animation-delay:70ms}
  .card3d{animation-delay:140ms}
  .actions{animation-delay:240ms}
  @keyframes enter{to{opacity:1; transform:translateY(0)}}

  .reveal{opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease-strong), transform .5s var(--ease-strong)}
  .reveal.in{opacity:1; transform:none}
  .comp .crow{opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease-strong), transform .45s var(--ease-strong)}
  .reveal.in .crow{opacity:1; transform:none}
  .reveal.in .crow:nth-child(1){transition-delay:60ms}
  .reveal.in .crow:nth-child(2){transition-delay:120ms}
  .reveal.in .crow:nth-child(3){transition-delay:180ms}
  .reveal.in .crow:nth-child(4){transition-delay:240ms}
  .reveal.in .crow:nth-child(5){transition-delay:300ms}
  .journey .jcard{opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease-strong), transform .45s var(--ease-strong)}
  .reveal.in .jcard{opacity:1; transform:none}
  .reveal.in .jcard:nth-child(1){transition-delay:60ms}
  .reveal.in .jcard:nth-child(2){transition-delay:140ms}

  @media (prefers-reduced-motion:reduce){
    .topbar,.head,.card3d,.actions{animation:none; opacity:1; transform:none}
    .reveal,.comp .crow,.journey .jcard{transition:opacity .2s ease; transform:none}
    .flipper{transition:none}
  }

  /* ═══ одна страница: вид диплома и скрытый вид проекта ═══ */
  .view[hidden]{display:none}

  /* ── печать: только фронт диплома ────────── */
  @media print{
    .view-diploma{display:block!important}
    .view-project{display:none!important}
    *{animation:none!important; transition:none!important; opacity:1!important; transform:none!important}
    @page{size:A4 landscape; margin:0}
    body{background:#fff}
    body::after{display:none}
    .topbar,.head,.actions,.section,footer{display:none!important}
    .wrap{max-width:none; padding:0; margin:0}
    .card3d{margin:0; perspective:none}
    .tilt{aspect-ratio:auto; width:297mm; height:210mm}
    .flipper{transform:none!important}
    .face,.face.front{position:absolute!important; border-radius:0; box-shadow:none}
    .back{display:none}
    /* в печати vw-клампы и экранные media ненадёжны: все размеры жёстко в мм и с !important */
    .fbody{padding:14mm 16mm!important}
    .fbody .row-top .pplogo{width:34mm!important}
    .fbody .did{font-size:3mm!important}
    .fbody .core{gap:6mm!important; padding:0!important}
    .fbody .eyebrow{font-size:3.8mm!important}
    .fbody .dname{font-size:17mm!important; white-space:nowrap!important}
    .fbody .dfor{font-size:4.6mm!important; max-width:170mm!important}
    .fbody .row-bot{padding-top:5mm!important; gap:16mm!important; margin:0!important}
    .fbody .row-bot::before{right:66mm!important}
    .fbody .cell{gap:1.6mm!important}
    .fbody .cell .k{font-size:2.9mm!important}
    .fbody .cell .v{font-size:4.1mm!important}
    .fbody .sig{position:absolute!important; width:46mm!important; right:14mm!important; bottom:9mm!important; margin:0!important}
  }

  @media (max-width:900px){
    .statsband{grid-template-columns:repeat(2,1fr)}
  }

  @media (max-width:760px){
    .topbar{padding:8px 0 30px}
    .topbar .pplogo{width:114px}
    .topbar .doc{white-space:nowrap}
    .head{margin-bottom:30px}
    .head .sub{font-size:15.5px}
    .meta{gap:10px 14px}
    .meta .sep{display:none}

    /* карта: документ авто-высоты вместо сжатого ландшафта */
    .tilt{aspect-ratio:auto}
    .face.front{position:relative}
    .fbody{padding:26px 22px}
    .fbody .row-top .pplogo{width:104px}
    .fbody .did{font-size:10px}
    .fbody .core{padding:36px 0 18px; gap:12px}
    .fbody .eyebrow{font-size:12.5px}
    .fbody .dname{white-space:normal; font-size:clamp(32px,10.5vw,40px); line-height:1.06}
    .fbody .dfor{max-width:100%; font-size:14.5px}
    .fbody .sig{position:static; width:150px; margin:2px 6px -12px auto}
    .fbody .row-bot{flex-wrap:wrap; gap:14px 30px}
    .fbody .row-bot::before{right:0}
    .fbody .cell .k{font-size:11px}
    .fbody .cell .v{font-size:13.5px}
    .back .pplogo{width:min(240px,64vw)}

    .actions .btn{flex:1 1 100%; justify-content:center}
    .project .ptags{display:none}
    .crow{grid-template-columns:1fr; gap:16px}
    .journey{grid-template-columns:1fr}
    .statsband{grid-template-columns:repeat(2,1fr); gap:18px}
  }

/* ═══════════ страница проекта (page-project) ═══════════ */
  .backlink{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--fg-mid); text-decoration:none; padding:8px 14px; border-radius:999px; background:var(--card); border:1px solid var(--line); transition:transform .16s var(--ease-strong), box-shadow .2s ease}
  @media (hover:hover) and (pointer:fine){ .backlink:hover{transform:translateY(-1px); box-shadow:0 8px 18px -12px rgba(24,26,18,.4)} }
  /* ── hero проекта: приёмник морфа с диплома ── */
  .phero{view-transition-name:project-card; background:linear-gradient(158deg,#242720 0%,#1B1D18 60%,#15170F 100%); color:var(--fg-on-dark); border-radius:var(--r-xl); padding:clamp(30px,4.6vw,54px); display:flex; flex-direction:column; gap:18px}
  .phero .pe{font-weight:600; font-size:14px; color:var(--lime)}
  .phero h1{margin:0; font-size:clamp(30px,4.6vw,52px); font-weight:700; letter-spacing:-0.03em; line-height:1.05; text-wrap:balance}
  .phero .pd{font-size:clamp(15px,1.6vw,17.5px); color:var(--fg-dim); line-height:1.65; max-width:58ch; text-wrap:pretty}
  .phero .pmeta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:8px; font-size:13.5px; font-weight:600}
  .phero .pmeta .mp{white-space:nowrap}
  .phero .pmeta .ml{color:var(--fg-dim); font-weight:400}
  .phero .pmeta a{color:var(--fg-on-dark); text-decoration:none; border-bottom:1px solid rgba(242,241,234,.35)}
  .phero .sep{color:rgba(242,241,234,.3)}
  .cbody{display:flex; flex-direction:column; gap:16px; padding-top:4px}
  .cbody p{margin:0; font-size:15px; line-height:1.65; color:var(--fg-mid); max-width:58ch; text-wrap:pretty}
  .facts{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:4px}
  .fact{font-size:13.5px; font-weight:650; letter-spacing:-0.005em; color:var(--fg)}
  .fact:not(:last-child)::after{content:"\00B7"; margin-left:10px; color:var(--fg-muted); font-weight:400}
  .cnote{font-size:13.5px; color:var(--fg-muted); line-height:1.55; max-width:56ch; text-wrap:pretty}
  .cnote .cnl{color:var(--fg-mid); font-weight:600}
  .links{display:flex; flex-wrap:wrap; gap:10px}
  .lnk{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; text-decoration:none; padding:11px 18px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--fg); transition:transform .16s var(--ease-strong), box-shadow .2s ease}
  .lnk.lime{background:var(--lime); border-color:transparent; color:var(--ink)}
  @media (hover:hover) and (pointer:fine){ .lnk:hover{transform:translateY(-1.5px); box-shadow:0 10px 22px -12px rgba(24,26,18,.4)} }
  .lnk:active{transform:scale(.97)}
  .lnk .arr{transition:transform .16s var(--ease-strong)}
  @media (hover:hover) and (pointer:fine){ .lnk:hover .arr{transform:translateX(3px)} }
  /* финальная лента */
  .liveband{margin-top:72px; background:var(--lime); border-radius:var(--r-xl); padding:clamp(28px,3.6vw,42px) clamp(28px,4vw,48px); display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px}
  .liveband .lt{flex:1 1 380px}
  .liveband .lt .h{font-size:clamp(21px,2.4vw,27px); font-weight:700; letter-spacing:-0.02em; color:var(--ink); text-wrap:balance}
  .liveband .lt .s{margin-top:6px; font-size:14.5px; color:rgba(27,29,24,.62); line-height:1.5; max-width:52ch; text-wrap:pretty}
  .liveband .lnk.ink{background:var(--ink); border-color:transparent; color:var(--lime); font-size:15px; padding:14px 25px}
  .phero{opacity:0; transform:translateY(10px); animation:enter .55s var(--ease-strong) forwards; animation-delay:80ms}

  @media (prefers-reduced-motion:reduce){
    .phero{animation:none; opacity:1; transform:none}
  }

  @media (max-width:760px){
    .view-project .topbar .doc{display:none}
    .backlink{white-space:nowrap; margin-left:auto}
    .phero .sep{display:none}
    .phero .pmeta{gap:8px 16px}
    .section{margin-top:56px}
    .crow{padding:30px 0}
    .liveband{margin-top:56px}
    .liveband .lnk.ink{width:100%; justify-content:center}
  }

  .journey.single{grid-template-columns:1fr}
  .ref .rtext p{margin:0 0 14px}
  .ref .rtext p:last-child{margin-bottom:0}