/* Nexuvius Notes demo. Builds on /styles.css (tokens, fonts, top bar). */
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;cursor:pointer}
.btn{border:0}
.btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px var(--violet)}
.btn.ghost:hover{background:var(--violet);color:var(--black)}
.link{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:.2em}
.link:hover{color:var(--violet)}

.busy{padding-block:3rem;color:var(--muted)}
.problem{margin-top:2rem;padding:1rem 1.25rem;border:1px solid #6b2a4a;background:rgba(255,92,150,.07)}
.problem strong{font-family:var(--display);font-weight:600;font-size:1.15rem}
.problem p{margin:.35rem 0 0;color:var(--white)}

.demo-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding-block:clamp(3rem,7vw,5.5rem);
  background-image:linear-gradient(rgba(178,92,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(178,92,255,.06) 1px,transparent 1px);background-size:44px 44px}
.demo-hero .glyph{display:block;font-size:2.6rem;margin-bottom:.75rem}
.demo-hero .name{font-size:clamp(2.6rem,7vw,4.8rem);margin-bottom:1rem}
.demo-hero .lede{max-width:36ch}

.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2rem 0 1.5rem}
.choice{display:flex;flex-direction:column;gap:.35rem;text-align:left;color:var(--white);background:linear-gradient(135deg,rgba(178,92,255,.12),rgba(0,0,0,.2) 70%);
  border:1px solid #3b2d4d;padding:1.25rem 1.25rem 1.4rem;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:border-color .15s,background .15s}
.choice:hover,.choice:focus-visible{border-color:var(--violet);background:linear-gradient(135deg,rgba(178,92,255,.22),rgba(0,0,0,.2) 70%)}
.choice .lvl{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.choice strong{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.2}
.choice span:last-child{color:var(--muted);font-size:.95rem}
.fine{color:var(--muted);font-size:.95rem;max-width:70ch;margin:0}

.who{padding-block:clamp(2.5rem,6vw,4rem);border-bottom:1px solid var(--line);background:linear-gradient(to bottom,rgba(178,92,255,.08),transparent)}
.who-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.hello{margin:0;color:var(--muted);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.person{font-family:var(--display);font-weight:600;font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:.3rem 0 .2rem;overflow-wrap:anywhere}
.email{color:var(--muted);margin:0 0 1.5rem;overflow-wrap:anywhere}
.how{border:1px solid var(--line);padding:1.5rem;background:#07040b}
.how h2{font-size:1.35rem;margin-bottom:1rem}
.methods{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1.25rem;padding:0}
.methods li{font-size:.95rem;padding:.3rem .75rem;border:1px solid #3b2d4d;background:rgba(178,92,255,.06)}
.methods li.strong{border-color:var(--violet);box-shadow:0 0 12px rgba(178,92,255,.35)}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;list-style:none;margin:0 0 .75rem;padding:0;counter-reset:l}
.ladder li{position:relative;padding:.65rem .6rem .55rem;border-top:3px solid #2a2136;color:var(--muted);font-size:.9rem;line-height:1.3}
.ladder li.on{border-top-color:var(--violet);color:var(--white)}
.ladder li.current{background:rgba(178,92,255,.10)}
.ladder li.current::after{content:"You are here";display:block;font-size:.75rem;color:var(--violet);margin-top:.2rem}
.when{color:var(--muted);font-size:.9rem;margin:0}
.stepup{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.stepup p{margin:0 0 .9rem;color:var(--muted);font-size:.95rem}

.notes-sec .intro{margin-bottom:1.5rem}
.note-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end;margin-bottom:1.5rem}
.note-form textarea{width:100%;font:inherit;color:var(--white);background:#0b0710;border:1px solid #3b2d4d;padding:.75rem .9rem;resize:vertical;min-height:3.2rem}
.note-form textarea:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.notes li{padding:1rem 0;border-bottom:1px solid var(--line)}
.notes p{margin:0 0 .35rem;white-space:pre-wrap;overflow-wrap:anywhere}
.notes .meta{display:flex;gap:1rem;color:var(--muted);font-size:.85rem}
.empty{color:var(--muted)}
.raw{margin-top:2.5rem;border:1px solid var(--line);padding:1rem 1.25rem}
.raw summary{font-family:var(--display);font-weight:500;cursor:pointer}
.raw p{color:var(--muted);font-size:.95rem}
.raw code{color:var(--violet)}
.raw pre{margin:0;overflow-x:auto;font-size:.85rem;line-height:1.5;background:#0b0710;padding:1rem;border:1px solid #2a2136}

.explain{border-top:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;list-style:none;margin:2rem 0 2rem;padding:0;counter-reset:s}
.steps li{counter-increment:s;padding-top:1rem;border-top:1px solid var(--violet)}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:600;color:var(--violet);display:block;font-size:1.4rem;margin-bottom:.3rem}
.steps strong{font-family:var(--display);font-weight:600;display:block;font-size:1.1rem;margin-bottom:.3rem}
.steps span{color:var(--muted)}

@media (max-width:900px){
  .choices{grid-template-columns:1fr}
  .who-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .wrap{width:calc(100% - 2rem)}
  .steps{grid-template-columns:1fr}
  .note-form{grid-template-columns:1fr}
  .ladder li{font-size:.8rem}
}