:root{
  --bg:#FFFFFF; --ink:#111111; --ink2:#6B6B6B; --ink3:#9C9C9C;
  --line:#E7E7E7; --line2:#D4D4D4;
  --red:#B31B1B; --blue:#4478CE; --ok:#2E9E63;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;}
.mono, .cc, .c b{font-family:"Roboto Mono", ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.wrap{max-width:none; margin:0 auto; padding:0 clamp(48px, 5vw, 110px)}
a{color:inherit}
.hidden{display:none !important}

.bar{display:flex; align-items:center; gap:24px; padding-top:14px; padding-bottom:6px}
.logo{font-size:23px; font-weight:600; letter-spacing:-.01em; position:relative;
  padding-right:44px; line-height:1}
.logo i{font-style:normal; color:var(--red)}
.bar .who{margin-left:auto}
.settings-link{border:0; background:none; font:inherit; font-size:13px; color:var(--ink3); cursor:pointer; padding:0}
.settings-link:hover{color:var(--ink)}

/* the owl: mostly perched beside the wordmark, with short flights to
   other perches: on top of the letters, mid-word, a hover to the right */
.owl-perch{position:absolute; right:0; bottom:-3px; width:30px; height:30px;
  pointer-events:none; z-index:5; animation:owl-flight 30s ease-in-out infinite}
.owl-svg{display:block; width:100%; height:100%; animation:owl-bob 3.4s ease-in-out infinite}
.no-flight .owl-perch{animation:none}
@keyframes owl-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.5px)}}
@keyframes owl-flight{
  0%,34%{transform:translate(0,0) rotate(0deg)}
  37%{transform:translate(-70px,-26px) rotate(-6deg)}
  40%{transform:translate(-150px,-17px) rotate(0deg)}
  40.5%,49%{transform:translate(-150px,-16px) rotate(0deg)}
  52%{transform:translate(-96px,-30px) rotate(4deg)}
  54%{transform:translate(-58px,-17px) rotate(0deg)}
  54.5%,63%{transform:translate(-58px,-16px) rotate(0deg)}
  66%{transform:translate(-10px,-24px) rotate(6deg)}
  69%{transform:translate(34px,-3px) rotate(0deg)}
  69.5%,76%{transform:translate(34px,-2px) rotate(0deg)}
  80%{transform:translate(12px,-14px) rotate(-4deg)}
  84%,100%{transform:translate(0,0) rotate(0deg)}
}

.hdr-links{margin-left:auto; display:flex; gap:20px}

/* hero stats: each number gets its own bar, same colors as the timeline */
.stats{display:flex; justify-content:center; gap:8px 56px; margin:8px 0 8px; flex-wrap:wrap}
.stat{width:280px; position:relative}
.stat:hover::after{content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%); background:var(--ink); color:#fff; font-size:13.5px; line-height:1.6;
  padding:12px 16px; white-space:pre-line; width:max-content; max-width:420px; text-align:left;
  z-index:30; pointer-events:none}
.stat-line{font-size:16px; color:var(--ink2); margin-bottom:5px}
.stat-line b{font-size:24px; font-weight:600; color:var(--ink); margin-right:2px}
.stat .track{display:flex; height:6px; background:#F0EFED; overflow:hidden}
.stat .seg-done{background:var(--ok)}
.stat .seg-now{background:var(--blue)}
.bar-key{flex-basis:100%; display:flex; justify-content:center; gap:16px; margin-top:2px;
  font-size:11px; color:var(--ink3)}
.bar-key i{display:inline-block; width:8px; height:8px; margin-right:5px}
.bar-key .kd{background:var(--ok)}
.bar-key .kn{background:var(--blue)}


/* settings */
.modal{position:fixed; inset:0; background:rgba(17,17,17,.28); display:flex;
  align-items:center; justify-content:center; z-index:40}
.sheet{background:#fff; border:1px solid var(--ink); padding:20px 26px 16px; width:380px; max-width:90vw}
.sheet h4{margin:0 0 14px; font-size:15px; font-weight:600}
.sheet h4 .close{float:right; font-weight:400; font-size:12px; color:var(--ink3); cursor:pointer}
.set-row{display:block; padding:8px 0; font-size:13.5px; border-bottom:1px solid var(--line)}
.set-row:last-of-type{border-bottom:0}
.set-row input[type="checkbox"]{margin-right:10px; accent-color:var(--ink)}

/* Worth a look: name first in ink, kind label quiet beside it */
.row .kind{flex:none; font-size:12px; color:var(--ink3)}
.row .name{color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .name a{color:var(--ink)}
.owl-chat{flex:none; width:22px; height:22px; margin-top:2px}
.owl-thinking{animation:owl-bob .9s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .owl-perch,.owl-svg,.owl-thinking{animation:none}
}
.bar .who{margin-left:auto; font-size:13px; color:var(--ink2)}
.bar .cr{font-size:13px; font-variant-numeric:tabular-nums}

.center{max-width:560px; margin:44px auto 0; padding:0 32px; text-align:center}
.center h1{font-size:22px; font-weight:500; margin:0 0 8px; text-wrap:balance}
.sub{color:var(--ink2); font-size:14px; margin:0 0 18px}
.sub.small{font-size:12px; color:var(--ink3); margin:10px 0 0}
.drop{display:block; border:1px dashed var(--line2); padding:30px 24px; cursor:pointer; color:var(--ink2)}
.drop:hover{border-color:var(--ink)}
.drop em{font-style:normal; font-size:12px; color:var(--ink3)}
.fail{margin-top:16px; text-align:left; font-size:12.5px; color:var(--red); border:1px solid var(--red); padding:12px 16px; white-space:pre-wrap}

.ask{max-width:920px; margin:16px auto 0; padding:0 32px; text-align:center}
.chatpanel{border:1px solid var(--line); text-align:left}
.chatpanel .chatlog{border:0; margin:0; max-height:40vh}
.chatpanel .chatlog.active{height:40vh; max-height:40vh}
.chatpanel .chatlog{transition:height .35s ease}
.chatpanel .askbox{border:0; border-top:1px solid var(--ink)}
.chatpanel .askbox input{padding-left:10px}
.chatpanel .askbox button{background:var(--red)}
.chatpanel .askbox button:hover{background:#9A1717}
.ask .kicker{font-size:18px; font-weight:600; color:var(--ink); margin-bottom:4px; letter-spacing:-.01em}
.ask h1{font-size:20px; font-weight:500; letter-spacing:-.01em; margin:0 0 16px; text-wrap:balance}
.askbox{display:flex; border:1px solid var(--ink); height:46px}
.askbox.slim{height:46px; max-width:400px; margin:0 auto 12px}
.askbox .ask-label{display:flex; align-items:center; font-weight:600; font-size:16px; padding-left:18px; white-space:nowrap}
.askbox input{flex:1; border:0; outline:none; padding:0 18px; font-size:16px; color:var(--ink); background:transparent; min-width:0}
.askbox input::placeholder{color:var(--ink3)}
.askbox button{border:0; background:var(--ink); color:#fff; font-size:15px; font-weight:500; padding:0 26px; cursor:pointer}
.askbox button:disabled{background:var(--ink3)}
.chips{display:flex; justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap}
.chips span{font-size:12px; color:var(--ink2); border:1px solid var(--line); padding:5px 12px; cursor:pointer}
.chips span:hover{border-color:var(--ink)}
.chatlog{margin-top:22px; text-align:left; border:1px solid var(--line); max-height:60vh; overflow-y:auto}
.msg{padding:8px 15px; font-size:15px; line-height:1.5; border-bottom:1px solid var(--line); white-space:pre-wrap}
.msg:last-child{border-bottom:0}
.msg.user{color:var(--ink2); background:#FAFAFA}
.msg.user::before{content:"you · "; font-size:11px; color:var(--ink3)}
.msg.bot{display:flex; gap:12px; align-items:flex-start; white-space:normal}
.msg.bot .body{flex:1; min-width:0; white-space:pre-wrap}
.msg.wait{color:var(--ink2); display:flex; align-items:center; gap:8px}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--red); animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25; transform:scale(.8)} 50%{opacity:1; transform:scale(1)}}
.dots::after{content:""; animation:dots 1.5s steps(4,end) infinite}
@keyframes dots{0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."}}
@media (prefers-reduced-motion: reduce){ .pulse,.dots::after{animation:none} .dots::after{content:"…"} }

.receipt{margin:0; font-size:11.5px; color:var(--ink3)}
.receipt b{color:var(--ok); font-weight:500}

.tl-head{display:flex; align-items:baseline; gap:16px; margin:20px 0 0; padding-bottom:8px; border-bottom:1px solid var(--ink)}
.tl-head h2{font-size:16.5px; font-weight:600; letter-spacing:-.01em; margin:0}
.tl-head .key{margin-left:auto; display:flex; gap:18px; font-size:12px; color:var(--ink2)}
.key i{display:inline-block; width:9px; height:9px; margin-right:6px}
.key .k1 i{background:var(--ok)}
.key .k2 i{background:var(--blue)}
.key .k3 i{border:1px dashed var(--red); background:none}
.tl-scroll{overflow-x:auto}
.tl{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(142px,1fr); min-width:1180px}
.term{border-right:1px solid var(--line); padding:10px 12px 12px; display:flex; flex-direction:column; gap:5px}
.term:last-child{border-right:0}
.t-name{font-size:14.5px; font-weight:600; display:flex; align-items:baseline; gap:6px}
.t-tag{font-size:9.5px; font-weight:600; letter-spacing:.02em; padding:1px 6px; white-space:nowrap}
.t-tag.done{background:#E7F6EE; color:var(--ok)}
.t-tag.now{background:#EBF1FB; color:var(--blue)}
.t-tag.plan{background:#F5F4F1; color:var(--ink3)}
.t-cr{font-size:12.5px; color:var(--ink3); margin-bottom:5px; font-variant-numeric:tabular-nums}
.c{font-size:13px; padding:6px 8px; border:1px solid var(--line); color:var(--ink2); line-height:1.35}
.c b{display:block; font-size:12.5px; font-weight:500; color:var(--ink); letter-spacing:.01em}
.c.now{border-left:2px solid var(--blue)}
.c.gap{border:1px dashed var(--red); color:var(--red)}
.c.gap b{color:var(--red)}
.c.soft{border-style:dotted; color:var(--ink3)}
.c.soft b{color:var(--ink3)}
.term.ghost .t-name{color:var(--ink3)}
.tl.compact .c span{display:none}
.tl.compact .c{padding:3.5px 8px}
.tl.compact .c b{font-size:12.5px}
.tl.compact .term{gap:3px; padding:5px 10px 5px}
.tl.compact{grid-auto-columns:minmax(118px,1fr); min-width:1020px}

.pathgrid{display:grid; grid-template-columns:1.6fr 1fr; gap:26px; margin:22px 0 0; align-items:start}
@media (max-width:900px){ .pathgrid{grid-template-columns:1fr} }
.worth{border:1px solid var(--ink); padding:9px 20px; min-width:0; max-height:300px; overflow-y:auto}
.worth h3, .contribute h3{font-size:16.5px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px}
.row{display:flex; align-items:baseline; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:14px}
.row:last-child{border-bottom:0}
.row .cc{font-size:11.5px; flex:none; width:92px}
.row .tt{color:var(--ink2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .m{flex:0 1 auto; min-width:0; max-width:45%; font-size:12px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row.miss .cc, .row.miss .lbl{color:var(--red)}
.row.review .cc, .row.review .lbl{color:var(--blue)}
.row .lbl{flex:none; width:92px; font-size:12px; font-weight:600}
.done-note{font-size:12px; color:var(--ink3); padding:9px 0}
.src{margin-top:10px; font-size:11px; color:var(--ink3)}
.src a{color:var(--ink3)}

.btn-small{padding:5px 12px; font-size:12px}
.panel{border:1px solid var(--line); margin-top:20px; padding:18px 22px}
.panel h4{margin:0 0 12px; font-size:14px; font-weight:600}
.panel h4 .close{float:right; font-weight:400; font-size:12px; color:var(--ink3); cursor:pointer}
.sched{display:grid; grid-template-columns:repeat(5,1fr)}
.sched .day{border-right:1px solid var(--line); padding:0 12px}
.sched .day:first-child{padding-left:0}
.sched .day:last-child{border-right:0}
.sched .d-name{font-size:12px; font-weight:600; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:8px}
.sched .mt{font-size:12px; padding:4px 7px; margin-bottom:5px; color:var(--ink2);
  border:1px solid var(--line); cursor:pointer; line-height:1.3}
.sched .mt b{display:block; color:var(--ink); font-weight:500; font-family:"Roboto Mono", ui-monospace,"SF Mono",Menlo,monospace; font-size:11px}
.sched .mt .mtt{display:block; font-size:11px; color:var(--ink3)}
.sched .mt .mtd{display:none; font-size:11px; color:var(--ink2); margin-top:2px}
.sched .mt.open .mtd{display:block}
.sched .mt.free{border:0; cursor:default; color:var(--ink3); padding-left:0}
.flex-note{margin-top:12px; font-size:11.5px; color:var(--ink3)}
.daytoggles{margin-left:12px; font-weight:400}
.sched .mt.add{border-left:2px solid var(--blue)}
.sched .mt.add b{color:var(--blue)}
.mode{display:inline-block; border:1px solid var(--line); font-size:11px; padding:2px 10px; margin-right:6px; cursor:pointer; color:var(--ink3)}
.mode.on{border-color:var(--ink); color:var(--ink); font-weight:600}
.daytoggle{display:inline-block; width:22px; text-align:center; border:1px solid var(--line); font-size:11px; padding:2px 0; margin-right:2px; cursor:pointer; color:var(--ink3); font-family:ui-monospace,"SF Mono",Menlo,monospace}
.daytoggle.on{border-color:var(--ink); color:var(--ink); font-weight:600}
.c.now{cursor:pointer}
.c.now:hover{border-color:var(--blue)}

.tograd{border:1px solid var(--ink); padding:9px 20px; min-width:0; max-height:300px; overflow-y:auto}
.tograd h3{font-size:16.5px; font-weight:600; letter-spacing:-.01em; margin:0 0 10px}
.stepwrap{border-bottom:1px solid var(--line)}
.stepwrap:last-of-type{border-bottom:0}
.tograd .step{display:flex; gap:12px; padding:5.5px 0; font-size:14.5px}
.tograd .step .n{flex:none; width:18px; color:var(--ink3); font-variant-numeric:tabular-nums}
.tograd .step .what{color:var(--ink)}
.tograd .step .how{margin-left:auto; flex:none; font-size:11.5px; color:var(--ink3); text-align:right; max-width:45%}
.step-sugg{padding:0 0 6px 30px}
.step-sugg .row{border-bottom:0; padding:3px 0; font-size:13.5px}
.step-sugg .row .cc{width:84px; font-size:11px}
.step-sugg .more{font-size:11px; color:var(--ink3); padding-top:2px}

/* major picker */
.major-select{font:inherit; font-size:13.5px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line2); padding:6px 10px; max-width:100%}
.major-select:hover{border-color:var(--ink)}
.set-label{font-size:13.5px; color:var(--ink2); margin-right:8px}
.major-row{margin:0 0 12px}

/* explore: requirement browser */
.xl-bar{display:flex; align-items:center; gap:10px; margin:26px 0 6px; flex-wrap:wrap}
.xl-bar .btn-outline{margin-left:auto}
#explore-tree{max-width:860px; margin:0 auto 60px}
#explore-tree h2{font-size:20px; font-weight:600; letter-spacing:-.01em; margin:22px 0 4px}
.xl-layer > h3{font-size:16.5px; font-weight:600; margin:26px 0 4px; padding-bottom:8px; border-bottom:1px solid var(--ink)}
.xl-src{font-size:11.5px; font-weight:400; color:var(--ink3); margin-left:8px}
.xl-group{margin:0 0 6px}
.xl-group > h4{font-size:14px; font-weight:600; margin:16px 0 2px}
.xl-rule{border-bottom:1px solid var(--line); padding:8px 0}
.xl-rule:last-child{border-bottom:0}
.xl-rule.manual{border-left:2px solid var(--blue); padding-left:10px}
.xl-head{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.xl-head b{font-weight:500; font-size:14.5px}
.xl-req{font-size:12px; color:var(--ink2); margin-left:auto; text-align:right; max-width:55%}
.xl-note{font-size:12px; color:var(--ink3); margin:3px 0}
.xl-course{display:flex; gap:10px; align-items:baseline; font-size:13px; padding:2px 0}
.xl-course .cc{font-size:11.5px; flex:none}
.xl-course .tt{color:var(--ink2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.xl-or{flex:none; width:18px; font-size:11px; color:var(--ink3)}
.xl-list summary, .xl-quote summary{font-size:11.5px; color:var(--ink3); cursor:pointer; padding:2px 0}
.xl-list summary:hover, .xl-quote summary:hover{color:var(--ink)}
.xl-list{margin:2px 0}
.xl-quote blockquote{margin:4px 0 2px; padding:6px 12px; border-left:2px solid var(--line2);
  font-size:12px; color:var(--ink2); white-space:pre-wrap}
.xl-poolgroup{padding:3px 0; font-size:13px}
.xl-poolgroup .tt{color:var(--ink)}
.xl-poolgroup .m{font-size:12px; color:var(--ink3); margin-left:8px}
.xl-variant{margin:4px 0; border:1px solid var(--line); padding:4px 12px}
.xl-variant summary{font-size:13px; font-weight:500; cursor:pointer; padding:4px 0}

/* advisor one-pager: exists only on paper */
#print-sheet{display:none}
@media print{
  body > :not(#print-sheet){display:none !important}
  @page{margin:10mm}
  #print-sheet{display:block; font:9.5px/1.3 "Roboto", Helvetica, Arial, sans-serif; color:#111}
  #print-sheet h1{font-size:14px; margin:0 0 1px}
  #print-sheet h2{font-size:11px; margin:8px 0 2px}
  .pr-kicker{font-size:10px; color:#444; margin-bottom:1px}
  .pr-stats{font-size:9.5px; margin:2px 0 6px}
  .pr-table{width:100%; border-collapse:collapse}
  .pr-table th{text-align:left; font-size:9.5px; padding:5px 6px 2px 0; border-bottom:1px solid #111}
  .pr-table td{padding:1.5px 8px 1.5px 0; border-bottom:.5px solid #ddd; vertical-align:top}
  .pr-table b{font-weight:500}
  .pr-status{width:64px; font-size:8.5px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap}
  .pr-fulfilled .pr-status{color:#2E9E63}
  .pr-in_progress .pr-status{color:#4478CE}
  .pr-needs_review .pr-status, .pr-open .pr-status{color:#B31B1B}
  .pr-by{width:26%; font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-size:8px}
  .pr-note{font-size:8px; color:#555}
  .pr-steps{margin:0; padding-left:16px; columns:2; column-gap:24px}
  .pr-steps li{padding:0.5px 0; break-inside:avoid}
  .pr-plan{font-size:9.5px}
  .pr-foot{margin-top:8px; padding-top:5px; border-top:1px solid #111; font-size:7.5px; color:#555}
  .pr-foot a{color:#555; text-decoration:none}
}

/* mobile (Phase 3 pass): nothing may widen the layout viewport past the
   device; wide grids scroll inside their own containers instead */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .bar{padding-top:16px; gap:14px}
  .hdr-links{gap:12px}
  .ask{padding:0 16px; margin-top:20px}
  .center{margin-top:44px; padding:0 20px}
  .stats{gap:8px 24px}
  .tl-head{flex-wrap:wrap; row-gap:8px}
  .tl-head .key{margin-left:0; flex-basis:100%}
  .panel{overflow-x:auto}
  .sched{min-width:620px}
  .xl-bar{flex-wrap:wrap}
  #explore-pick{flex:1 1 100%; min-width:0}
  #explore-pick .major-select{width:100%}
  .xl-head .xl-req{margin-left:0; max-width:100%; text-align:left}
  .major-select{max-width:calc(100vw - 32px)}
}

.contribute{display:flex; align-items:center; gap:24px; margin:14px 0 0; border-top:1px solid var(--line); padding:10px 0 0}
.contribute > div{flex:1}
.btn-outline{border:1px solid var(--ink); padding:9px 18px; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap}
.btn-outline:hover{background:var(--ink); color:#fff}
.foot{margin:10px 0 16px; font-size:11.5px; color:var(--ink3)}
.foot.disclaimer{text-align:center; margin:10px 0 8px}
.foot a{color:var(--ink3)}