:root{
  --bg:#02040a;--card:#0a1429;--glass:rgba(12,22,48,.6);--line:rgba(96,140,255,.18);
  --text:#eaf1ff;--muted:#8ea3d0;--a:#2f7bff;--b:#19c3ff;--sh:0 12px 40px rgba(0,0,0,.5);
  --o1:#1d4ed8;--o2:#0ea5e9;--grid:rgba(96,140,255,.07);--oa:.4;
}
[data-theme="light"]{
  --bg:#eef4ff;--card:#fff;--glass:rgba(255,255,255,.7);--line:rgba(37,99,235,.16);
  --text:#0b1736;--muted:#53668f;--a:#2563eb;--b:#06b6d4;--sh:0 12px 34px rgba(37,99,235,.14);
  --o1:#8ab6ff;--o2:#c4b5fd;--grid:rgba(37,99,235,.06);--oa:.6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:"DM Sans","Segoe UI",system-ui,sans-serif;color:var(--text);background:var(--bg);transition:background .4s,color .4s;position:relative}
body::before{content:"";position:fixed;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 60% 40%,#000,transparent 75%);mask-image:radial-gradient(circle at 60% 40%,#000,transparent 75%)}
.orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:var(--oa);pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.o1{width:46vw;height:46vw;background:var(--o1);top:-18vw;right:-10vw}
.o2{width:34vw;height:34vw;background:var(--o2);bottom:-16vw;left:18vw;animation-delay:-9s}
@keyframes drift{to{transform:translate(-5vw,4vw) scale(1.12)}}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4,.tag,.pill,.brand{font-family:"Sora","Segoe UI",sans-serif}
.app{position:relative;height:100dvh;display:grid;grid-template-columns:200px 1fr;gap:18px;padding:18px}

/* rail */
.rail{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--glass);border:1px solid var(--line);border-radius:26px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--sh)}
.brand{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,var(--a),var(--b));color:#fff;font-weight:700;box-shadow:0 0 24px color-mix(in srgb,var(--a) 50%,transparent);margin-bottom:14px}
.rail-top,.rail-bottom{display:flex;flex-direction:column;gap:6px}
.rail-bottom{margin-top:auto}
.nav{position:relative;text-align:left;padding:11px 14px 11px 28px;border-radius:14px;color:var(--muted);font-size:.9rem;transition:.2s}
.nav::before{content:"";position:absolute;left:12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--line);transition:.2s}
.nav:hover{color:var(--text);background:color-mix(in srgb,var(--a) 10%,transparent)}
.nav.active{color:#fff;background:linear-gradient(135deg,var(--a),var(--b))}
.nav.active::before{background:#fff}
.theme{padding:10px 14px;border-radius:14px;border:1px solid var(--line);font-size:.8rem;color:var(--muted);transition:.2s}
.theme:hover{color:var(--text);border-color:var(--a)}
.t-light,[data-theme="light"] .t-dark{display:none}
[data-theme="light"] .t-light{display:inline}

.stage{position:relative;min-height:0;min-width:0}
.view{display:none;height:100%;flex-direction:column;gap:16px;min-height:0}
.view.show{display:flex;animation:in .4s ease}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h2{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:700;line-height:1.15}
.head p{color:var(--muted);margin-top:6px}

/* photos */
.photo{position:relative;display:grid;place-items:center;overflow:hidden;cursor:pointer;background:var(--card);border:2px dashed var(--line);color:var(--muted);text-align:center;font-size:.76rem;transition:.2s;flex-shrink:0}
.photo:hover{border-color:var(--a);color:var(--text)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.photo.has img{display:block}.photo.has .ph{display:none}
.photo.big,.photo.xl,.photo.mate{border-radius:50%;aspect-ratio:1}
.photo.big{width:clamp(110px,22vh,190px)}
.photo.xl{width:clamp(130px,30vh,250px)}
.photo.mate{width:clamp(56px,11vh,92px)}
.photo.logo{width:clamp(64px,14vh,104px);aspect-ratio:1;border-radius:22px}
.ring{position:relative;display:grid;place-items:center;padding:6px;border-radius:50%;flex-shrink:0}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--a),var(--b),transparent 60%,var(--a));animation:spin 7s linear infinite}
.ring .photo,.ring .photo.has{position:relative;z-index:1;border:4px solid var(--bg)}
@keyframes spin{to{transform:rotate(360deg)}}

/* home */
#home{justify-content:space-between}
.hero{flex:1;min-height:0;display:flex;align-items:center;gap:clamp(20px,4vw,48px);padding:0 clamp(8px,2vw,24px)}
h1{font-size:clamp(1.7rem,4.4vw,3.4rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;background:linear-gradient(100deg,var(--text) 30%,var(--a) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.course{margin:10px 0 16px;color:var(--muted);font-size:clamp(.92rem,1.6vw,1.15rem)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:99px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:.88rem}
.chips i{font-style:normal;color:var(--b);font-weight:600}

.timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;height:clamp(120px,25vh,190px);align-items:center}
.timeline::before{content:"";position:absolute;left:4%;right:4%;top:50%;border-top:2px dashed var(--line)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;height:82%;padding:0 22px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);transition:.25s}
.tile:hover{transform:translateY(-4px);border-color:var(--a)}
.tile .node{position:absolute;right:18px;top:18px;width:11px;height:11px;border-radius:50%;background:var(--line)}
.tag{align-self:flex-start;font-size:.72rem;font-weight:600;padding:3px 11px;border-radius:99px;background:color-mix(in srgb,var(--a) 14%,transparent);color:var(--a);margin-bottom:4px}
.tile strong{font-family:"Sora",sans-serif;font-size:clamp(.95rem,1.7vw,1.2rem);font-weight:600}
.tile small{color:var(--muted);font-size:.8rem}
.tile.now{height:100%;color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 36px color-mix(in srgb,var(--a) 55%,transparent)}
.tile.now small{color:#e6f4ff}.tile.now .tag{background:rgba(255,255,255,.22);color:#fff}
.tile.now .node{background:#fff;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,.25)}}

/* content pages */
.page{position:relative;flex:1;min-height:0;display:flex;align-items:center;gap:clamp(20px,4vw,52px);padding:clamp(18px,4vh,44px);background:var(--glass);border:1px solid var(--line);border-radius:30px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--sh);overflow:hidden}
.page::after{content:attr(data-word);position:absolute;right:-1%;bottom:-8%;font:700 clamp(5rem,17vw,13rem)/1 "Sora",sans-serif;color:transparent;-webkit-text-stroke:1.5px var(--line);pointer-events:none}
.side{display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:1}
.pill{padding:6px 16px;border-radius:99px;font-size:.78rem;font-weight:600;color:var(--a);background:color-mix(in srgb,var(--a) 13%,transparent);border:1px solid var(--line)}
.body{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;min-width:0;flex:1}
.lead{color:var(--muted);line-height:1.65;max-width:560px;font-size:clamp(.9rem,1.4vw,1.04rem)}
.trio,.facts,.infos{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.facts{grid-template-columns:repeat(4,1fr)}
.mini{padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);transition:.2s}
.mini:hover{border-color:var(--a);transform:translateY(-2px)}
.mini h4{font-size:.85rem;color:var(--a);margin-bottom:5px}
.mini p{color:var(--muted);font-size:.84rem;line-height:1.45;outline:0}
.bars{display:grid;gap:9px;max-width:480px}
.bar{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:12px;font-size:.84rem;color:var(--muted)}
.bar span{outline:0}
.bar i{height:8px;border-radius:9px;background:var(--line);overflow:hidden}
.bar b{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--a),var(--b))}

/* achievements + classmates */

/* contact */
.infos{grid-template-columns:1fr;max-width:380px}
.form{position:relative;z-index:1;flex:1;max-width:440px;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);align-self:stretch;margin:clamp(0px,2vh,16px) 0}
.form input,.form textarea{width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:.92rem;outline:0;transition:.2s}
.form textarea{flex:1;min-height:90px;resize:none}
.form input:focus,.form textarea:focus{border-color:var(--a);box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 20%,transparent)}
.form button{padding:14px;border-radius:14px;color:#fff;font-weight:600;font-family:"Sora",sans-serif;background:linear-gradient(135deg,var(--a),var(--b));transition:.2s}
.form button:hover{box-shadow:0 0 26px color-mix(in srgb,var(--a) 55%,transparent);transform:translateY(-2px)}

@media (max-height:640px){.bars,.trio .mini:nth-child(3){display:none}.lead{font-size:.85rem}}
@media (max-width:860px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;padding:10px}
  .rail{flex-direction:row;align-items:center;padding:8px;overflow-x:auto;border-radius:18px}
  .brand{margin:0;width:38px;height:38px;border-radius:12px}
  .rail-top,.rail-bottom{flex-direction:row;margin:0}
  .nav{padding:8px 10px;font-size:.74rem;white-space:nowrap}.nav::before{display:none}
  .theme{padding:8px 10px;font-size:.7rem;white-space:nowrap}
  .hero{flex-direction:column;text-align:center;justify-content:center;gap:12px}
  .chips{justify-content:center}.chips span{font-size:.76rem;padding:7px 12px}
  .photo.big{width:clamp(80px,15vh,120px)}
  .timeline{grid-template-columns:1fr;height:auto;gap:8px}.timeline::before{display:none}
  .tile,.tile.now{height:auto;padding:10px 16px}.tile small{display:none}
  .page{flex-direction:column;justify-content:center;text-align:center;gap:10px;padding:14px;border-radius:22px}
  .body{align-items:center;flex:0}.photo.xl{width:clamp(90px,17vh,140px)}
  .trio,.facts,.bars,.page::after{display:none}
  .infos{grid-template-columns:1fr}.infos .mini:nth-child(n+2){display:none}
  .form{width:100%;max-width:none;padding:14px;margin:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- v3 additions ---------- */
.stage{display:flex;flex-direction:column;gap:12px}
.view{flex:1;height:auto}
.topbar{display:none}.stage.sub .topbar{display:flex}
.back{padding:8px 18px;border-radius:99px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:.85rem;font-weight:500;transition:.2s}
.back:hover{border-color:var(--a);color:var(--a);transform:translateX(-3px)}
.head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.head p{margin:0}

/* home */
.photo.big{width:clamp(120px,27vh,230px)}
.hero .id-text{flex:0 1 auto;min-width:0}
.code{margin-left:auto;width:clamp(240px,26vw,360px);padding:16px 18px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);font:.8rem/1.7 Consolas,"Courier New",monospace;color:var(--muted);flex-shrink:0}
.dots{display:flex;gap:6px;margin-bottom:10px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dots i:first-child{background:var(--b)}.dots i:nth-child(2){background:var(--a)}
.code .k{color:var(--b)}.code .s{color:#58c98a}
[data-theme="light"] .code .s{color:#0f9d58}
.caret{display:inline-block;width:7px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--a);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* fuller pages */
.page{padding:clamp(16px,3.5vh,36px)}
.photo.xl{width:clamp(150px,34vh,300px)}
.body{justify-content:center;gap:clamp(12px,2.4vh,22px)}
.lead{max-width:none;font-size:clamp(.95rem,1.5vw,1.12rem)}
.trio{flex:1;max-height:44%}
.mini{display:flex;flex-direction:column;justify-content:center;padding:clamp(12px,2.4vh,24px)}
.mini h4{font-size:1rem}.mini p{font-size:.92rem}
.facts{flex:0 0 auto}
.bars{max-width:none;gap:12px}.bar{font-size:.92rem}.bar i{height:10px}
.infos{max-width:none}
.contact{gap:clamp(24px,5vw,60px)}

/* cards */
.card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:14px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh);transition:.25s;min-height:0}
.card:hover{transform:translateY(-5px);border-color:var(--a);box-shadow:0 14px 40px color-mix(in srgb,var(--a) 28%,transparent)}
.card h3{font-size:1.02rem;font-weight:600}
.card p{color:var(--muted);font-size:.85rem}
.card em{font-style:normal;font-weight:600;font-size:.82rem;color:var(--a);margin-top:4px}
.journey{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lw{padding:6px;border-radius:32px;background:linear-gradient(135deg,var(--a),var(--b))}
.logo-box{display:grid;place-items:center;overflow:hidden;width:clamp(80px,19vh,150px);aspect-ratio:1;border-radius:26px;background:var(--card);font:700 1.8rem Sora,sans-serif;color:var(--a)}
.logo-box img{width:100%;height:100%;object-fit:contain}

.projects{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}
.proj{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;overflow:hidden;text-align:left}
.thumb{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--a),var(--b));color:rgba(255,255,255,.85);font:700 2.6rem Sora,sans-serif}
.thumb img{width:100%;height:100%;object-fit:cover}
.pinfo{display:flex;flex-direction:column;gap:6px;padding:12px 18px 14px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:.72rem;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--a) 14%,transparent);color:var(--a)}

.mates{flex:1;min-height:0;display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:1fr;gap:6px;padding:clamp(10px,2vh,18px);background:var(--glass);border:1px solid var(--line);border-radius:26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--sh)}
.cm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:4px;border-radius:16px;min-width:0;transition:.2s}
.cm:hover{background:color-mix(in srgb,var(--a) 14%,transparent);transform:translateY(-3px)}
.cm>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;color:var(--muted)}
.cm:hover>span:last-child{color:var(--text)}
.av{display:grid;place-items:center;overflow:hidden;width:clamp(36px,9vh,68px);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));color:#fff;font:600 .85rem Sora,sans-serif}
.av img{width:100%;height:100%;object-fit:cover}

/* modal */
.modal{position:fixed;inset:0;z-index:20;display:none;place-items:center;padding:16px;background:rgba(2,6,16,.6);backdrop-filter:blur(8px)}
.modal.open{display:grid;animation:in .25s ease}
.sheet{position:relative;display:flex;gap:30px;align-items:center;width:min(760px,100%);max-height:94dvh;overflow:auto;padding:32px;border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);font-size:1.3rem;color:var(--muted)}
.x:hover{border-color:var(--a);color:var(--a)}
.mph{width:clamp(130px,26vw,230px);aspect-ratio:1;border-radius:50%}
.mph.square{border-radius:28px}
.mph.wide{width:clamp(170px,32vw,300px);aspect-ratio:4/3;border-radius:22px}
.m-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.m-body h3{font-size:clamp(1.3rem,3vw,1.8rem)}
.m-body p{color:var(--muted);line-height:1.6;font-size:.95rem}
.m-body .sub{color:var(--b);font-weight:500}
.btn{padding:11px 22px;border-radius:14px;color:#fff;font-weight:600;font-size:.88rem;text-decoration:none;background:linear-gradient(135deg,var(--a),var(--b));margin-top:4px}
.btn[hidden],.tags:empty{display:none}

@media (max-width:860px){
  .code{display:none}
  .photo.big{width:clamp(80px,15vh,120px)}.photo.xl{width:clamp(90px,17vh,140px)}
  .page{padding:14px}.mini{padding:10px 14px}.mini h4{font-size:.9rem}
  .head{gap:2px;flex-direction:column}
  .journey{grid-template-columns:repeat(2,1fr);gap:8px}
  .card{padding:8px}.logo-box{width:clamp(56px,12vh,90px)}.card p{font-size:.75rem}
  .projects{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}.proj:nth-child(n+7){display:none}
  .mates{grid-template-columns:repeat(6,1fr);gap:2px}.cm>span:last-child{display:none}.av{width:clamp(30px,5.5vh,44px);font-size:.7rem}
  .sheet{flex-direction:column;text-align:center;padding:22px;gap:14px}.m-body{align-items:center}
}

/* ---------- v4 additions ---------- */
.photo.big{width:clamp(150px,35vh,290px)}
.photo.xl{width:clamp(180px,43vh,360px)}
.nav{padding-top:clamp(7px,1.3vh,11px);padding-bottom:clamp(7px,1.3vh,11px)}
.rail{gap:clamp(4px,1vh,8px)}.brand{margin-bottom:clamp(6px,1.4vh,14px)}

/* family tree */
.famtree{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px 64px}
.famtree::before{content:"";position:absolute;left:50%;top:4%;bottom:4%;border-left:2px dashed var(--line)}
.famtree::after{content:"";position:absolute;top:50%;left:3%;right:3%;border-top:2px dashed var(--line)}
.fnode{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;color:#fff;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 30px color-mix(in srgb,var(--a) 55%,transparent);animation:pulse 2.4s infinite}
.fam{position:relative;z-index:1;flex-direction:row;justify-content:flex-start;gap:clamp(14px,2vw,26px);padding:16px clamp(16px,2vw,28px);text-align:left}
.ft{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.av.lg{width:clamp(70px,19vh,140px);flex-shrink:0;box-shadow:0 0 0 5px color-mix(in srgb,var(--a) 28%,transparent);font-size:1.3rem}

/* subjects */
.subjects{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}
.subj{overflow:hidden;gap:7px}
.subj::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--a),var(--b));filter:hue-rotate(calc(var(--i) * 7deg))}
.sbadge{padding:7px 16px;border-radius:14px;color:#fff;font:600 .85rem Sora,sans-serif;background:linear-gradient(135deg,var(--a),var(--b));filter:hue-rotate(calc(var(--i) * 7deg))}
.units{font-size:.74rem;padding:3px 11px;border-radius:99px;color:var(--a);background:color-mix(in srgb,var(--a) 13%,transparent)}
.mbadge{display:grid;place-items:center;width:clamp(120px,24vw,200px);aspect-ratio:1;border-radius:32px;color:#fff;font:700 1.5rem Sora,sans-serif;text-align:center;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 40px color-mix(in srgb,var(--a) 40%,transparent)}
.mbadge[hidden],.mph[hidden]{display:none}

/* professors */
.profs{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}
.prof .av.lg{width:clamp(64px,17vh,120px)}

/* ---------- creative light mode ---------- */
[data-theme="light"] body{background:radial-gradient(60vw 55vh at 88% 0%,#c6dcff,transparent 62%),radial-gradient(55vw 55vh at 0% 100%,#e4d4ff,transparent 62%),radial-gradient(40vw 40vh at 55% 105%,#c4f1ff,transparent 62%),#f5f9ff}
[data-theme="light"] body::before{background-image:radial-gradient(rgba(37,99,235,.2) 1.2px,transparent 1.2px);background-size:26px 26px}
[data-theme="light"] .o1{background:#8ab6ff}[data-theme="light"] .o2{background:#d8b4fe}
[data-theme="light"] .rail{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(232,241,255,.75));box-shadow:0 14px 40px rgba(37,99,235,.14)}
[data-theme="light"] .nav.active{background:linear-gradient(135deg,#2563eb,#7c5cff)}
[data-theme="light"] .brand{background:linear-gradient(135deg,#2563eb,#7c5cff)}
[data-theme="light"] h1{background-image:linear-gradient(100deg,#0b1736 15%,#2563eb 60%,#7c3aed);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] .ring::before{background:conic-gradient(#2563eb,#06b6d4,#a78bfa,#f0abfc,#2563eb)}
[data-theme="light"] .ring .photo,[data-theme="light"] .ring .photo.has{border-color:#fff}
[data-theme="light"] .tile.now,[data-theme="light"] .sbadge,[data-theme="light"] .fnode,[data-theme="light"] .mbadge,[data-theme="light"] .btn,[data-theme="light"] .form button{background:linear-gradient(135deg,#2563eb,#7c5cff 60%,#c084fc)}
[data-theme="light"] .tile.now{box-shadow:0 14px 40px rgba(124,92,255,.35)}
[data-theme="light"] .page{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(235,243,255,.78))}
[data-theme="light"] .page::after{-webkit-text-stroke:1.5px rgba(124,92,255,.22)}
[data-theme="light"] .card,[data-theme="light"] .mini,[data-theme="light"] .tile,[data-theme="light"] .form,[data-theme="light"] .code{box-shadow:0 10px 28px rgba(37,99,235,.11),inset 0 1px 0 #fff}
[data-theme="light"] .card:hover,[data-theme="light"] .tile:hover{box-shadow:0 16px 40px rgba(124,92,255,.25)}
[data-theme="light"] .mini h4,[data-theme="light"] .card em,[data-theme="light"] .tag,[data-theme="light"] .pill{color:#5b46e5}
[data-theme="light"] .mini,[data-theme="light"] .card{border-top:3px solid #a78bfa}
[data-theme="light"] .chips i,[data-theme="light"] .m-body .sub{color:#7c3aed}
[data-theme="light"] .mates{background:rgba(255,255,255,.7)}
[data-theme="light"] .av,[data-theme="light"] .thumb{background:linear-gradient(135deg,#2563eb,#a78bfa)}
[data-theme="light"] .bar b{background:linear-gradient(90deg,#2563eb,#a78bfa)}
[data-theme="light"] .caret{background:#7c3aed}

@media (max-width:860px){
  .photo.big{width:clamp(80px,15vh,120px)}.photo.xl{width:clamp(90px,17vh,140px)}
  .famtree{grid-template-columns:1fr 1fr;gap:8px}.famtree::before,.famtree::after,.fnode{display:none}
  .fam{flex-direction:column;text-align:center;padding:8px}.ft{align-items:center}.ft p,.fam em{display:none}
  .av.lg{width:clamp(44px,10vh,70px)}
  .subjects,.profs{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,minmax(0,1fr));gap:8px}
  .subj .units,.subj p,.prof em{display:none}.prof .av.lg{width:clamp(40px,8vh,60px)}
}

/* ---------- v5: portrait photos, richer home, intro ---------- */
.photo.big,.photo.xl{width:auto;aspect-ratio:3/4;border-radius:26px}
.photo.big{height:clamp(200px,47vh,400px)}
.photo.xl{height:clamp(240px,60vh,500px)}
.ring.rect{padding:6px;border-radius:32px;box-shadow:0 0 50px color-mix(in srgb,var(--a) 28%,transparent)}
.ring.rect::before{border-radius:32px;background:linear-gradient(160deg,var(--a),var(--b) 55%,transparent 95%);animation:glow 3.5s ease-in-out infinite alternate}
.ring.rect .photo,.ring.rect .photo.has{border-width:4px;border-radius:26px}
@keyframes glow{to{filter:brightness(1.4)}}
[data-theme="light"] .ring.rect::before{background:linear-gradient(160deg,#2563eb,#a78bfa 55%,#f0abfc)}
[data-theme="light"] .ring.rect{box-shadow:0 14px 50px rgba(124,92,255,.3)}

.hero{gap:clamp(18px,3vw,40px)}
.hero .id-text{flex:1}
.hello{margin-bottom:10px;color:var(--b);font:600 .78rem Sora,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn-p,.btn-g{padding:12px 24px;border-radius:14px;font-weight:600;font-size:.9rem;transition:.2s}
.btn-p{color:#fff;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 8px 24px color-mix(in srgb,var(--a) 35%,transparent)}
.btn-g{border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px)}
.btn-p:hover,.btn-g:hover{transform:translateY(-3px)}.btn-g:hover{border-color:var(--a);color:var(--a)}
.skillrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.skillrow span{font-size:.75rem;color:var(--muted);margin-right:4px}
.skillrow i{font-style:normal;font-size:.78rem;padding:4px 13px;border-radius:99px;border:1px solid var(--line);background:var(--glass)}
.hero-right{display:flex;flex-direction:column;justify-content:center;gap:12px;width:clamp(250px,26vw,330px);align-self:stretch;min-height:0;flex-shrink:0}
.hero-right .code{margin:0;width:auto;font-size:.74rem;line-height:1.6;padding:12px 16px}
.stats{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:10px;flex:1;min-height:0;max-height:290px}
.stat{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:8px 16px;text-align:left;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);transition:.25s}
.stat b{font:700 clamp(1.3rem,3.2vh,1.8rem) Sora,sans-serif;color:var(--a)}
.stat span{font-size:.8rem;color:var(--muted)}
.stat::after{content:"↗";position:absolute;right:14px;top:10px;color:var(--line);transition:.2s}
.stat:hover{transform:translateY(-3px);border-color:var(--a)}.stat:hover::after{color:var(--a)}
[data-theme="light"] .btn-p{background:linear-gradient(135deg,#2563eb,#7c5cff 60%,#c084fc)}
[data-theme="light"] .stat{border-top:3px solid #a78bfa;box-shadow:0 10px 28px rgba(37,99,235,.11)}
[data-theme="light"] .stat b,[data-theme="light"] .hello{color:#5b46e5}
@media (max-height:680px){.hero-right .code{display:none}}

/* intro */
.intro{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;text-align:center;cursor:pointer;background:radial-gradient(60vw 50vh at 50% 42%,color-mix(in srgb,var(--a) 30%,transparent),transparent 70%),var(--bg);transition:transform .9s cubic-bezier(.7,0,.2,1)}
[data-theme="light"] .intro{background:radial-gradient(60vw 55vh at 80% 10%,#c6dcff,transparent 62%),radial-gradient(55vw 55vh at 10% 95%,#e4d4ff,transparent 62%),#f5f9ff}
.intro.out{transform:translateY(-100%)}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:14px}
.i-logo{display:grid;place-items:center;width:84px;height:84px;border-radius:26px;color:#fff;font:700 1.9rem Sora,sans-serif;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 60px color-mix(in srgb,var(--a) 60%,transparent);animation:pop .9s cubic-bezier(.2,1.4,.4,1) both}
[data-theme="light"] .i-logo{background:linear-gradient(135deg,#2563eb,#7c5cff)}
@keyframes pop{from{transform:scale(.3) rotate(-25deg);opacity:0}}
.hi{opacity:0;color:var(--b);font:600 .85rem Sora,sans-serif;letter-spacing:.3em;text-transform:uppercase;animation:rise .7s .5s forwards}
.iname{max-width:900px;font:700 clamp(1.9rem,6vw,4rem)/1.15 Sora,sans-serif;letter-spacing:-.02em}
.iname span{display:inline-block;margin:0 .13em;opacity:0;transform:translateY(26px);animation:rise .7s forwards;animation-delay:calc(.8s + var(--d) * .14s)}
.iname span:last-child{color:var(--a)}
.irole{opacity:0;color:var(--muted);animation:rise .7s 1.9s forwards}
.ibar{width:min(280px,60vw);height:3px;margin-top:8px;border-radius:9px;background:var(--line);overflow:hidden}
.ibar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--a),var(--b));animation:load 3.2s .3s linear forwards}
.skip{opacity:0;padding:10px 22px;border-radius:99px;border:1px solid var(--line);color:var(--muted);animation:rise .6s 2.4s forwards}
.skip:hover{color:var(--a);border-color:var(--a)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes load{to{width:100%}}
@media (prefers-reduced-motion:reduce){.intro *{opacity:1!important;transform:none!important}.ibar i{width:100%}}

@media (max-width:860px){
  .photo.big{height:clamp(110px,21vh,170px)}.photo.xl{height:clamp(120px,23vh,190px)}
  .ring.rect,.ring.rect::before{border-radius:22px}.ring.rect .photo,.ring.rect .photo.has{border-radius:17px}
  .hero-right,.skillrow,.hello{display:none}
  .cta{justify-content:center;margin-top:10px}.btn-p,.btn-g{padding:9px 16px;font-size:.8rem}
}

/* ---------- v6: view-only photos + more creative light mode ---------- */
.photo,.photo:hover{cursor:default;border-style:solid;border-color:var(--line);color:var(--muted)}
.photo.has,.photo.has:hover{border-color:var(--a)}
.photo img{-webkit-user-drag:none;user-select:none;object-position:center 20%;image-rendering:auto}
.photo.big img,.photo.xl img{object-position:center 18%}
.ring .photo,.ring .photo.has{border-color:var(--bg)}
[data-theme="light"] .ring .photo,[data-theme="light"] .ring .photo.has{border-color:#fff}

/* light mode extras: colourful accents + floating shapes */
[data-theme="light"] body::after{content:"";position:fixed;z-index:-1;right:18vw;bottom:-12vw;width:32vw;height:32vw;border-radius:50%;background:#fbcfe8;filter:blur(90px);opacity:.75;pointer-events:none;animation:drift 22s ease-in-out infinite alternate}
[data-theme="light"] .stage::before{content:"";position:absolute;z-index:-1;right:-26px;top:14%;width:150px;height:150px;border:2px dashed rgba(124,92,255,.4);border-radius:50%;animation:spin 30s linear infinite}
[data-theme="light"] .stage::after{content:"";position:absolute;z-index:-1;left:42%;bottom:30%;width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,rgba(251,146,60,.35),rgba(244,114,182,.35));transform:rotate(18deg);animation:drift 14s ease-in-out infinite alternate}
[data-theme="light"] .tile:first-child{border-top:3px solid #fdba74}
[data-theme="light"] .tile:first-child .tag{background:#fff1de;color:#c2570c}
[data-theme="light"] .tile:last-child{border-top:3px solid #6ee7b7}
[data-theme="light"] .tile:last-child .tag{background:#dcfce7;color:#15803d}
[data-theme="light"] .stat:nth-child(1){border-top-color:#60a5fa}[data-theme="light"] .stat:nth-child(1) b{color:#2563eb}
[data-theme="light"] .stat:nth-child(2){border-top-color:#c084fc}[data-theme="light"] .stat:nth-child(2) b{color:#9333ea}
[data-theme="light"] .stat:nth-child(3){border-top-color:#f9a8d4}[data-theme="light"] .stat:nth-child(3) b{color:#db2777}
[data-theme="light"] .stat:nth-child(4){border-top-color:#fdba74}[data-theme="light"] .stat:nth-child(4) b{color:#ea580c}
[data-theme="light"] .stat:nth-child(5){border-top-color:#5eead4}[data-theme="light"] .stat:nth-child(5) b{color:#0d9488}
[data-theme="light"] .stat:nth-child(6){border-top-color:#a5b4fc}[data-theme="light"] .stat:nth-child(6) b{color:#4f46e5}
[data-theme="light"] .chips span{background:linear-gradient(135deg,#fff,#eef2ff);box-shadow:0 6px 16px rgba(99,102,241,.12)}
[data-theme="light"] .skillrow i{background:#fff;border-color:#ddd6fe;color:#5b46e5}
[data-theme="light"] .nav:hover::before{background:#a78bfa}
[data-theme="light"] .mates .cm:nth-child(3n+1) .av{background:linear-gradient(135deg,#2563eb,#38bdf8)}
[data-theme="light"] .mates .cm:nth-child(3n+2) .av{background:linear-gradient(135deg,#7c5cff,#f0abfc)}
[data-theme="light"] .mates .cm:nth-child(3n) .av{background:linear-gradient(135deg,#f97316,#f472b6)}
@media (max-width:860px){[data-theme="light"] .stage::before,[data-theme="light"] .stage::after{display:none}}

/* ---------- v7: About Me focus ---------- */
.strip{display:flex;flex-direction:column;gap:8px}
.strip-head{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.strip-head span{color:var(--b);font:600 .78rem Sora,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.strip-head button{font-size:.82rem;color:var(--muted);transition:.2s}.strip-head button:hover{color:var(--a)}
.fstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;height:clamp(92px,18vh,140px)}
.fact{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:10px 14px;text-align:left;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);transition:.25s}
.fact small{color:var(--a);font:600 .64rem Sora,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.fact strong{font:600 clamp(.82rem,1.05vw,1rem)/1.2 Sora,sans-serif}
.fact em{font-style:normal;font-size:.74rem;line-height:1.3;color:var(--muted)}
.fact:hover{transform:translateY(-4px);border-color:var(--a);box-shadow:0 12px 30px color-mix(in srgb,var(--a) 28%,transparent)}

.nicks{display:flex;align-items:center;gap:8px}
.nicks span{font-size:.8rem;color:var(--muted)}
.nicks b{padding:6px 16px;border-radius:99px;color:#fff;font:600 .85rem Sora,sans-serif;background:linear-gradient(135deg,var(--a),var(--b))}
.about .body{gap:12px}
.about .lead b{color:var(--text)}
.bento{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
.bt{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:12px 18px;border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);transition:.25s}
.bt:hover{transform:translateY(-3px);border-color:var(--a)}
.bt h4{color:var(--b);font:600 .68rem Sora,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:0}
.bt p{color:var(--muted);font-size:.82rem}
.bt strong{font:600 clamp(.9rem,2vh,1.05rem)/1.25 Sora,sans-serif}
.big{font:700 clamp(1.6rem,4.8vh,2.7rem)/1 Sora,sans-serif;background:linear-gradient(120deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.big small{font-size:.42em;margin-left:4px}
.span2{grid-column:span 2}.span4{grid-column:span 4}
.route{display:flex;align-items:center;gap:10px;margin-top:4px}
.stop{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stop i{width:12px;height:12px;margin-bottom:4px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 22%,transparent)}
.stop span{color:var(--muted);font:600 .64rem Sora,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.stop p{font-size:.78rem}
.rline{position:relative;flex:0 0 clamp(20px,4vw,56px);border-top:2px dashed var(--a);opacity:.55}
.rline::after{content:"›";position:absolute;right:-3px;top:-14px;color:var(--a);font-size:1.1rem}
.ident{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:2px}
.ident span{display:block;color:var(--muted);font-size:.72rem}
.ident b{font:600 .95rem Sora,sans-serif}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pills b{padding:5px 13px;border-radius:99px;font:600 .82rem Sora,sans-serif;color:var(--a);background:color-mix(in srgb,var(--a) 13%,transparent);border:1px solid var(--line)}

/* light mode */
[data-theme="light"] .fact,[data-theme="light"] .bt{border-top:3px solid #a78bfa;box-shadow:0 10px 28px rgba(37,99,235,.11),inset 0 1px 0 #fff}
[data-theme="light"] .fact:nth-child(1){border-top-color:#60a5fa}[data-theme="light"] .fact:nth-child(2){border-top-color:#c084fc}
[data-theme="light"] .fact:nth-child(3){border-top-color:#f9a8d4}[data-theme="light"] .fact:nth-child(4){border-top-color:#fdba74}
[data-theme="light"] .fact:nth-child(5){border-top-color:#5eead4}[data-theme="light"] .fact:nth-child(6){border-top-color:#a5b4fc}
[data-theme="light"] .fact small,[data-theme="light"] .bt h4,[data-theme="light"] .strip-head span{color:#5b46e5}
[data-theme="light"] .bt:nth-child(1) .big{background-image:linear-gradient(120deg,#2563eb,#38bdf8)}
[data-theme="light"] .bt:nth-child(2) .big{background-image:linear-gradient(120deg,#7c3aed,#c084fc)}
[data-theme="light"] .bt:nth-child(3) .big{background-image:linear-gradient(120deg,#db2777,#fb7185)}
[data-theme="light"] .bt:nth-child(4) .big{background-image:linear-gradient(120deg,#ea580c,#fbbf24)}
[data-theme="light"] .nicks b{background:linear-gradient(135deg,#2563eb,#7c5cff)}
[data-theme="light"] .pills b{background:#fff;border-color:#ddd6fe;color:#5b46e5}
[data-theme="light"] .stop i{background:linear-gradient(135deg,#2563eb,#c084fc)}

@media (max-height:640px){.about .lead{display:none}.bt p{display:none}}
@media (max-width:1100px){.fstrip{grid-template-columns:repeat(3,1fr);height:auto}}
@media (max-width:860px){
  .strip-head{display:none}
  .fstrip{gap:6px}.fact{padding:8px 10px}.fact em{display:none}.fact strong{font-size:.76rem}
  .about .body{flex:1;width:100%;align-items:stretch}.about .lead,.nicks,.bt p{display:none}
  .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:minmax(0,1fr);gap:6px}
  .span2,.span4{grid-column:span 2}.bt{padding:8px 12px}
  .route{flex-direction:column;align-items:flex-start;gap:4px}.rline,.stop p{display:none}.stop{flex-direction:row;align-items:center;gap:8px}.stop i{margin:0}
}

/* ---------- v8: creative home + Previous / Next ---------- */
@media (min-width:861px){.app{grid-template-columns:214px 1fr}}
.nav{font-size:.88rem}
.topbar{justify-content:space-between;align-items:center;gap:10px}
.crumb{flex:1;text-align:center;color:var(--muted);font-size:.82rem}
.pager{display:flex;gap:8px}
.next{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--a),var(--b))}
.next:hover{color:#fff;transform:translateX(3px)}
[data-theme="light"] .next{background:linear-gradient(135deg,#2563eb,#7c5cff)}

/* home */
#home .photo.big{height:clamp(170px,38vh,340px)}
#home h1{font-size:clamp(1.9rem,4.6vw,3.7rem)}
.pwrap{position:relative;flex-shrink:0}
.fl{position:absolute;z-index:3;display:grid;place-items:center;min-width:46px;height:46px;padding:0 12px;border-radius:16px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--sh);color:var(--a);font:600 .78rem Sora,sans-serif;animation:flt 5s ease-in-out infinite alternate}
.f1{left:-24px;top:9%}.f2{right:-26px;top:42%;animation-delay:-2s}.f3{left:-16px;bottom:8%;animation-delay:-3.5s}
@keyframes flt{to{transform:translateY(-12px)}}

.hub{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;height:clamp(160px,31vh,250px)}
.hubc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-width:0;padding:12px 16px;overflow:hidden;text-align:left;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);transition:.25s}
.hubc strong{font:600 clamp(.85rem,1.7vh,1.02rem)/1.2 Sora,sans-serif}
.hubc em{font-style:normal;font-size:.76rem;color:var(--muted)}
.hubc em b{font-weight:600;color:var(--a)}
.num{position:absolute;right:14px;top:6px;font:700 clamp(1.6rem,4.2vh,2.7rem)/1 Sora,sans-serif;color:transparent;-webkit-text-stroke:1.5px var(--line)}
.go{position:absolute;left:16px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--a);background:color-mix(in srgb,var(--a) 14%,transparent);transition:.25s}
.hubc:hover{transform:translateY(-4px);border-color:var(--a);box-shadow:0 12px 32px color-mix(in srgb,var(--a) 30%,transparent)}
.hubc:hover .go{color:#fff;background:var(--a);transform:rotate(-45deg)}
.hubc.feat{grid-column:span 2;color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 36px color-mix(in srgb,var(--a) 45%,transparent)}
.hubc.feat em{color:#e6f4ff}.hubc.feat .num{-webkit-text-stroke-color:rgba(255,255,255,.45)}
.hubc.feat .go{color:#fff;background:rgba(255,255,255,.22)}
.hubc.feat:hover .go{background:#fff;color:var(--a)}

.marquee{overflow:hidden;padding:9px 0;border-radius:99px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq{display:flex;width:max-content;animation:mq 30s linear infinite}
.mq span{display:flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap;color:var(--muted);font:600 .8rem Sora,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.mq i{font-style:normal;color:var(--a)}
@keyframes mq{to{transform:translateX(-50%)}}

[data-theme="light"] .hubc{border-top:3px solid #a78bfa;box-shadow:0 10px 28px rgba(37,99,235,.11),inset 0 1px 0 #fff}
[data-theme="light"] .hubc:nth-child(2){border-top-color:#60a5fa}[data-theme="light"] .hubc:nth-child(3){border-top-color:#f9a8d4}
[data-theme="light"] .hubc:nth-child(4){border-top-color:#fdba74}[data-theme="light"] .hubc:nth-child(5){border-top-color:#5eead4}
[data-theme="light"] .hubc:nth-child(6){border-top-color:#c084fc}[data-theme="light"] .hubc:nth-child(7){border-top-color:#a5b4fc}
[data-theme="light"] .hubc.feat{border-top-color:transparent;background:linear-gradient(135deg,#2563eb,#7c5cff 60%,#c084fc);box-shadow:0 14px 40px rgba(124,92,255,.35)}
[data-theme="light"] .hubc em b,[data-theme="light"] .fl{color:#5b46e5}
[data-theme="light"] .hubc.feat em{color:#f1ecff}
[data-theme="light"] .marquee{background:rgba(255,255,255,.75)}

@media (max-height:640px){.hubc em{display:none}}
@media (max-width:860px){
  .crumb,#nl{display:none}.pager{gap:6px}.back{padding:7px 12px;font-size:.78rem}
  #home .photo.big{height:clamp(110px,20vh,160px)}
  .fl,.marquee,.go,.num{display:none}
  .hub{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:auto;height:auto;gap:6px}
  .hubc{padding:10px 12px;border-radius:14px}.hubc em{display:none}.hubc.feat{grid-column:span 2}
}

/* ---------- v9: interests & goals ---------- */
.about .body{align-self:stretch;min-height:0}
.bhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:99px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.seg button{padding:7px 18px;border-radius:99px;color:var(--muted);font:600 .8rem Sora,sans-serif;transition:.2s}
.seg button:hover{color:var(--text)}
.seg button.on{color:#fff;background:linear-gradient(135deg,var(--a),var(--b))}
.pane{display:none;flex:1;min-height:0;flex-direction:column;gap:12px}
.pane.on{display:flex;animation:in .35s ease}
.bento2{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.15fr);gap:12px}
.bt p.keep{display:block}
.quote blockquote{font:600 clamp(1.05rem,2.7vh,1.55rem)/1.3 Sora,sans-serif;background:linear-gradient(120deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.quote::before{content:"“";position:absolute;right:18px;top:-18px;font:700 7rem/1 Sora,sans-serif;color:var(--line);pointer-events:none}
.bento2 .pills b{font-size:.84rem}
.bento2 .bt strong{font-size:clamp(1rem,2.3vh,1.25rem)}
.goal{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 36px color-mix(in srgb,var(--a) 40%,transparent)}
.goal h4{color:#dff1ff}.goal p{color:#fff;font-size:clamp(.86rem,1.9vh,1rem);line-height:1.55}
[data-theme="light"] .seg button.on,[data-theme="light"] .goal{background:linear-gradient(135deg,#2563eb,#7c5cff 60%,#c084fc)}
[data-theme="light"] .goal{border-top:3px solid transparent;box-shadow:0 14px 40px rgba(124,92,255,.35)}
[data-theme="light"] .goal h4{color:#f1ecff}
[data-theme="light"] .quote blockquote{background-image:linear-gradient(120deg,#2563eb,#7c3aed)}
[data-theme="light"] .quote::before{color:rgba(124,92,255,.18)}
@media (max-width:860px){
  .seg button{padding:6px 12px;font-size:.72rem}
  .bento2{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:minmax(0,1fr);gap:6px}
  .bento2 .span4,.bento2 .span2{grid-column:span 2}
  .quote p.keep{display:none}.quote::before{display:none}
}

/* ---------- v10: achievements pop-up (gallery, files, video) ---------- */
[hidden]{display:none!important}
.asheet{position:relative;display:flex;flex-direction:column;gap:14px;width:min(1020px,100%);max-height:94dvh;overflow:auto;padding:26px 30px;border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.ahead{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-right:44px}
.ahead h3{font:700 clamp(1.2rem,2.6vw,1.7rem)/1.2 Sora,sans-serif}
.ahead p{color:var(--muted);font-size:.9rem}
#aseg{align-self:flex-start;max-width:100%;overflow-x:auto}
.apane{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start}
.gal{display:flex;flex-direction:column;gap:10px;min-width:0}
.gmain{position:relative;height:clamp(220px,44vh,430px);overflow:hidden;border-radius:20px;background:color-mix(in srgb,var(--a) 9%,var(--card));border:1px solid var(--line)}
.gmain img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.gcap{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:5px 12px;border-radius:99px;color:#fff;font-size:.74rem;background:rgba(2,6,16,.68);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gthumbs{display:flex;gap:8px}
.gthumbs button{flex:1;max-width:120px;height:64px;overflow:hidden;border-radius:12px;border:2px solid transparent;opacity:.6;transition:.2s}
.gthumbs button.on,.gthumbs button:hover{opacity:1;border-color:var(--a)}
.gthumbs img{width:100%;height:100%;object-fit:cover}
.ainfo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.ainfo h4{font:700 clamp(1.05rem,2vw,1.4rem)/1.25 Sora,sans-serif}
.ainfo p{color:var(--muted);line-height:1.65;font-size:.93rem}
.ainfo .adate{color:var(--b);font-weight:500;font-size:.85rem}
.abadge{padding:6px 16px;border-radius:99px;color:#fff;font:600 .82rem Sora,sans-serif;background:linear-gradient(135deg,var(--a),var(--b))}
.extras{display:flex;flex-wrap:wrap;gap:8px}
.extras a,.extras button{padding:9px 16px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--text);font-size:.82rem;font-weight:500;text-decoration:none;transition:.2s}
.extras a:hover,.extras button:hover{border-color:var(--a);color:var(--a)}
#lb{z-index:40;background:rgba(2,4,10,.9)}
#lbbody img,#lbbody video{display:block;max-width:94vw;max-height:88dvh;border-radius:14px}
#lb .x{top:16px;right:20px;color:#fff;border-color:rgba(255,255,255,.45)}
[data-theme="light"] .abadge{background:linear-gradient(135deg,#2563eb,#7c5cff)}
@media (max-width:860px){
  .asheet{padding:18px 16px;border-radius:22px}
  .apane{grid-template-columns:1fr;gap:14px}
  .gmain{height:clamp(170px,32vh,280px)}
}
#adesc{white-space:pre-line}
.ident a{color:inherit;text-decoration:none;word-break:break-all}.ident a:hover{text-decoration:underline}.ident b{overflow-wrap:anywhere}