:root{
  color-scheme:dark;
  --bg:#030712;
  --panel:#0f172a;
  --text:#f1f5f9;
  --soft:#cbd5e1;
  --muted:#64748b;
  --dark:#475569;
  --line:#1e293b;
  --teal:#2dd4bf;
  --yellow:#facc15;
  --max:896px;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  line-height:1.5
}
button,input,textarea,select{
  font:inherit
}
button,select{
  color:inherit
}
button{
  cursor:pointer
}
a{
  color:var(--teal);
  text-underline-offset:3px
}
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px
}
::-webkit-scrollbar{
  width:4px
}
::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:2px
}
.skip-link{
  position:fixed;
  top:.75rem;
  left:.75rem;
  z-index:100;
  transform:translateY(-180%);
  padding:.55rem .8rem;
  border-radius:.5rem;
  background:var(--text);
  color:var(--bg)
}
.skip-link:focus{
  transform:translateY(0)
}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.5rem;
  border-bottom:1px solid #1e293b99;
  background:#030712e6;
  backdrop-filter:blur(8px)
}
.brand-button{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:0;
  border:0;
  background:transparent;
  color:var(--soft);
  text-align:left
}
.brand-mark{
  display:grid;
  width:1.75rem;
  height:1.75rem;
  place-items:center;
  border:1px solid #2dd4bf4d;
  border-radius:.5rem;
  background:#2dd4bf1a;
  color:var(--teal)
}
.brand-button strong{
  display:block;
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.025em
}
.brand-button small{
  display:none;
  font-size:.875rem;
  font-weight:500
}
nav{
  display:flex;
  gap:.25rem
}
.nav-button{
  display:flex;
  align-items:center;
  gap:.375rem;
  padding:.375rem .75rem;
  border:1px solid transparent;
  border-radius:.5rem;
  background:transparent;
  color:#94a3b8;
  font-size:.75rem;
  font-weight:500
}
.nav-button:hover{
  background:#1e293b80;
  color:#e2e8f0
}
body[data-view=intro] #nav-assessment,body[data-view=assessment] #nav-assessment,body[data-view=results] #nav-results,body[data-view=explorer] #nav-explorer{
  border-color:#2dd4bf33;
  background:#2dd4bf1a;
  color:var(--teal)
}
main{
  min-height:calc(100vh - 8rem)
}
.intro-screen{
  display:flex;
  min-height:calc(100vh - 8rem);
  align-items:center;
  justify-content:center;
  padding:3rem 1.5rem
}
.intro-card{
  width:100%;
  max-width:32rem;
  text-align:center
}
.hero-mark{
  display:grid;
  width:3.5rem;
  height:3.5rem;
  margin:0 auto 2rem;
  place-items:center;
  border:1px solid #2dd4bf33;
  border-radius:1rem;
  background:#2dd4bf1a;
  color:var(--teal);
  font-size:1.6rem
}
.intro-card h1{
  margin:0 0 .75rem;
  font-size:clamp(1.9rem,5vw,2.25rem);
  font-weight:600;
  letter-spacing:-.025em
}
.subtitle{
  margin:0 0 .5rem;
  color:#94a3b8
}
.meta{
  margin:0 0 2.5rem;
  color:var(--dark);
  font-size:.875rem
}
.intro-copy{
  margin-bottom:1.25rem;
  padding:1.25rem;
  border:1px solid #1e293b99;
  border-radius:1rem;
  background:#0f172a66;
  color:#94a3b8;
  font-size:.875rem;
  line-height:1.65;
  text-align:left
}
.help-hint{
  margin:0 0 2rem;
  color:var(--muted);
  font-size:.8rem;
  text-align:center
}
.resume-status{
  margin:-.75rem 0 1rem;
  color:#94a3b8;
  font-size:.8rem
}
.intro-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem
}
.primary-button,.secondary-button,.quiet-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:2.65rem;
  padding:.65rem 1rem;
  border-radius:.75rem;
  font-size:.875rem;
  font-weight:500;
  transition:160ms ease
}
.primary-button{
  border:1px solid transparent;
  background:var(--teal);
  color:#030712;
  font-weight:650
}
.primary-button:hover{
  background:#5eead4;
  transform:translateY(-1px)
}
.secondary-button{
  border:1px solid #334155;
  background:#0f172a66;
  color:#cbd5e1
}
.secondary-button:hover{
  border-color:#2dd4bf66;
  color:var(--text)
}
.quiet-button{
  border:1px solid transparent;
  background:transparent;
  color:var(--muted)
}
.quiet-button:hover{
  color:var(--soft)
}
.secondary-button.destructive{
  border-color:#7f1d1d80;
  color:#fca5a5
}
.secondary-button.destructive:hover{
  border-color:#ef444480;
  background:#7f1d1d24;
  color:#fecaca
}
.reset-confirm{
  margin:1rem 0 2rem;
  padding:1rem;
  border:1px solid #7f1d1d80;
  border-radius:.75rem;
  background:#450a0a24;
  text-align:left
}
.reset-confirm p{
  margin:0 0 .75rem;
  color:#fecaca;
  font-size:.875rem
}
.reset-confirm div{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem
}
.assessment-screen{
  display:flex;
  min-height:calc(100vh - 8rem);
  flex-direction:column;
  padding:2.5rem 1.5rem
}
.assessment-shell{
  width:100%;
  max-width:42rem;
  margin:0 auto
}
.progress{
  margin-bottom:2rem
}
.progress-labels{
  display:flex;
  justify-content:space-between;
  margin-bottom:.5rem;
  color:var(--dark);
  font-size:.75rem
}
.progress-track{
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:var(--line)
}
.progress-fill{
  height:100%;
  border-radius:999px;
  transition:width 300ms ease
}
.back-top{
  display:inline-flex;
  margin:0 0 1.5rem;
  padding:0;
  border:0;
  background:transparent;
  color:var(--dark);
  font-size:.875rem
}
.back-top:hover{
  color:var(--soft)
}
.question-stage{
  display:flex;
  flex:1;
  align-items:center;
  justify-content:center
}
.question-card{
  width:100%;
  max-width:42rem
}
.section-label{
  margin:0 0 .75rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase
}
.question-row{
  display:flex;
  align-items:flex-start;
  gap:.75rem
}
.question-row h1{
  flex:1;
  margin:0;
  font-size:clamp(1.35rem,4vw,1.75rem);
  font-weight:500;
  line-height:1.3
}
.example{
  margin:1rem 0 0;
  padding:.1rem 0 .1rem .9rem;
  border-left:2px solid var(--section-color);
  color:#94a3b8;
  font-size:.84rem;
  line-height:1.6
}
.example span{
  display:block;
  margin-bottom:.2rem;
  color:var(--section-color);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase
}
.example p{
  margin:0
}
.options{
  display:grid;
  gap:.75rem;
  margin-top:1.6rem
}
.option{
  width:100%;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:.75rem;
  background:#0f172a4d;
  color:var(--soft);
  text-align:left
}
.option:hover{
  border-color:var(--section-color);
  background:rgba(var(--section-rgb),.06);
  color:var(--text)
}
.skip-row{
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid #1e293b66;
  text-align:center
}
.skip-button{
  padding:0;
  border:0;
  background:transparent;
  color:var(--dark);
  font-size:.75rem
}
.skip-button:hover{
  color:#94a3b8
}
.reveal{
  overflow:hidden;
  border:1px solid rgba(var(--section-rgb),.28);
  border-radius:1rem;
  background:#0f172a99
}
.reveal-head{
  padding:1.5rem 1.5rem 1rem;
  border-bottom:1px solid #1e293b99
}
.mini-label{
  margin:0 0 .5rem;
  color:var(--dark);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase
}
.answer-label{
  margin:0;
  color:#94a3b8;
  font-size:.875rem;
  font-style:italic
}
.reveal-body{
  padding:1.5rem
}
.term-chip{
  display:inline-block;
  margin-bottom:1rem;
  padding:.2rem .65rem;
  border:1px solid rgba(var(--section-rgb),.3);
  border-radius:.375rem;
  background:rgba(var(--section-rgb),.09);
  color:var(--section-color);
  font-size:.75rem;
  font-weight:600
}
.reveal-text{
  margin:0;
  color:var(--soft);
  font-size:.875rem;
  line-height:1.7
}
.reveal-actions{
  display:flex;
  gap:.75rem;
  padding:0 1.5rem 1.5rem
}
.page{
  width:min(var(--max),calc(100% - 3rem));
  margin:0 auto;
  padding:2.5rem 0 5rem
}
.page-heading{
  margin-bottom:1.5rem
}
.page-heading h1{
  margin:0 0 .5rem;
  font-size:clamp(1.5rem,5vw,1.875rem);
  font-weight:600;
  letter-spacing:-.025em
}
.page-heading p{
  margin:0;
  color:var(--dark);
  font-size:.875rem
}
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:2rem
}
.toolbar-primary{
  margin-bottom:.75rem
}
.toolbar-utilities{
  margin-bottom:2rem
}
.result-help{
  margin:0 0 1.5rem;
  color:var(--dark);
  font-size:.75rem
}
.section-group{
  margin-bottom:2rem
}
.section-heading{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.75rem
}
.section-dot{
  width:.5rem;
  height:.5rem;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--section-color)
}
.section-heading h2{
  margin:0;
  color:var(--section-color);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase
}
.section-line{
  height:1px;
  flex:1;
  background:rgba(var(--section-rgb),.13)
}
.result-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem
}
.result-card,.dimension-card{
  overflow:hidden;
  border:1px solid rgba(var(--section-rgb),.14);
  border-radius:.75rem;
  background:rgba(var(--section-rgb),.025)
}
.result-card.open,.dimension-card.open{
  border-color:rgba(var(--section-rgb),.32);
  background:rgba(var(--section-rgb),.05)
}
.result-card.not-assessed{
  border-color:var(--line);
  background:transparent
}
.card-summary{
  display:flex;
  width:100%;
  align-items:flex-start;
  justify-content:space-between;
  gap:.5rem;
  padding:.75rem 1rem;
  border:0;
  background:transparent;
  text-align:left
}
.card-summary h3{
  margin:0;
  color:#e2e8f0;
  font-size:.875rem;
  font-weight:500;
  line-height:1.4
}
.card-summary p{
  margin:.15rem 0 0;
  color:var(--section-color);
  font-size:.75rem
}
.not-assessed .card-summary h3{
  color:var(--dark)
}
.not-assessed .card-summary p{
  color:#334155;
  font-style:italic
}
.chevron{
  flex:0 0 auto;
  color:var(--dark);
  transition:transform 180ms ease
}
.open .chevron{
  transform:rotate(180deg)
}
.card-detail{
  padding:0 1rem 1rem;
  border-top:1px solid rgba(var(--section-rgb),.13)
}
.card-detail[hidden]{
  display:none
}
.description{
  margin:0;
  padding-top:.8rem;
  color:#94a3b8;
  font-size:.75rem;
  line-height:1.65
}
.question-box{
  margin:.75rem 0;
  padding:.65rem .75rem;
  border:1px solid #1e293b99;
  border-radius:.5rem;
  background:#0f172a66
}
.question-box strong,.positions-label,.field-label{
  display:block;
  margin-bottom:.3rem;
  color:var(--dark);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase
}
.question-box p{
  margin:0;
  color:#94a3b8;
  font-size:.75rem;
  font-style:italic
}
.positions{
  display:grid;
  gap:.4rem;
  padding:0;
  list-style:none
}
.positions li{
  padding:.55rem .65rem;
  border:1px solid var(--line);
  border-radius:.5rem;
  color:var(--dark);
  font-size:.75rem
}
.positions li.selected{
  border-color:rgba(var(--section-rgb),.28);
  background:rgba(var(--section-rgb),.07);
  color:var(--soft)
}
.position-name{
  display:inline-block;
  margin-right:.3rem;
  padding:.05rem .35rem;
  border-radius:.25rem;
  background:var(--line);
  color:var(--muted);
  font-weight:500
}
.positions li.selected .position-name{
  border:1px solid rgba(var(--section-rgb),.25);
  background:rgba(var(--section-rgb),.12);
  color:var(--section-color)
}
.edit-fields{
  display:grid;
  gap:.75rem;
  margin-top:.9rem
}
.edit-fields select,.edit-fields textarea{
  width:100%;
  margin-top:.25rem;
  padding:.6rem;
  border:1px solid var(--line);
  border-radius:.5rem;
  background:#020617;
  color:var(--soft);
  font-size:.75rem
}
.edit-fields textarea{
  min-height:4rem;
  resize:vertical
}
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:2rem
}
.filter-button{
  padding:.375rem .75rem;
  border:1px solid var(--filter-line,#334155);
  border-radius:.5rem;
  background:transparent;
  color:var(--filter-color,#94a3b8);
  font-size:.75rem;
  font-weight:500
}
.filter-button.active{
  background:var(--filter-bg,#2dd4bf1a);
  color:var(--filter-active,var(--teal))
}
.dimension-list{
  display:grid;
  gap:.5rem
}
.dimension-card .card-summary{
  align-items:center;
  padding:1rem 1.25rem;
  background:#0f172a4d
}
.dimension-name{
  display:flex;
  min-width:0;
  align-items:center;
  gap:.75rem
}
.dimension-name p{
  margin:0;
  color:#e2e8f0;
  font-size:.875rem;
  font-weight:500
}
.dimension-name small{
  display:block;
  margin-top:.1rem;
  color:var(--dark);
  font-size:.75rem
}
.dimension-card .card-detail{
  padding:0 1.25rem 1.25rem;
  background:#0f172a2e
}
.print-report{
  display:none
}
.site-footer{
  display:flex;
  width:min(var(--max),calc(100% - 3rem));
  margin:0 auto;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
  border-top:1px solid #1e293b66;
  color:#334155;
  font-size:.75rem
}
.site-footer p{
  margin:0
}
.site-footer a{
  color:#14b8a699;
  text-decoration:none
}
.toast{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:100;
  max-width:min(22rem,calc(100% - 2rem));
  padding:.75rem 1rem;
  border:1px solid #334155;
  border-radius:.65rem;
  background:var(--panel);
  color:var(--soft);
  opacity:0;
  transform:translateY(1rem);
  pointer-events:none;
  transition:180ms ease
}
.toast.show{
  opacity:1;
  transform:translateY(0)
}
@media(max-width:640px){
  .brand-button strong{
    display:none
  }
  .brand-button small{
    display:block
  }
  .nav-button span:last-child{
    display:none
  }
  .result-grid{
    grid-template-columns:1fr
  }
  .site-footer{
    align-items:flex-start;
    flex-direction:column
  }
}
@media print{
  :root{
    color-scheme:light
  }
  body{
    background:#fff;
    color:#111;
    font-size:10pt
  }
  .site-header,.site-footer,.toolbar,.reset-confirm,.result-help,.toast,.results-live{
    display:none!important
  }
  main{
    min-height:0
  }
  .page{
    width:100%;
    padding:0
  }
  .page-heading h1{
    color:#111
  }
  .page-heading p{
    color:#444
  }
  .print-report{
    display:block
  }
  .print-section{
    margin:1rem 0
  }
  .print-section h2{
    padding-bottom:.3rem;
    border-bottom:1px solid #bbb;
    color:#111;
    font-size:12pt;
    break-after:avoid
  }
  .print-position{
    break-inside:avoid;
    margin:.7rem 0
  }
  .print-position h3{
    margin:0 0 .2rem;
    color:#111;
    font-size:10pt
  }
  .print-position p{
    margin:.15rem 0;
    color:#333
  }
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto!important;
    transition:none!important
  }
}