:root{
  --paper:#faf7f2; --card:#ffffff; --ink:#2b2723; --soft:#6f675e; --faint:#a89f93;
  --line:#e8e1d6; --sage:#7c9a72; --sage-soft:#eef3ec; --terra:#c07a56; --terra-soft:#f8ece5;
  --plum:#8a6d9e; --plum-soft:#f1ecf5; --danger:#b96363; --danger-soft:#f8e9e9;
}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{
  font-family:'Nunito',sans-serif;color:var(--ink);overflow:auto;
  background:var(--paper);
  background-image:radial-gradient(#e5ddd0 1px, transparent 1px);
  background-size:26px 26px;
  display:flex;flex-direction:column;
}
body:has(#app.immersive){height:100%;overflow:hidden}
[v-cloak]{display:none}
#app{min-height:100%;display:flex;flex-direction:column;flex:1}
#app.immersive{height:100%}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 34px}
.brand{font-family:'Crimson Pro',serif;font-size:21px;font-weight:600;letter-spacing:-.01em}
.brand em{color:var(--sage);font-style:normal}
.head-meta{display:flex;gap:22px;align-items:center;font-size:12.5px;color:var(--soft)}
.head-meta a{color:var(--soft);text-decoration:none;font-weight:700}
.head-meta a.on{color:var(--sage);border-bottom:2px solid var(--sage);padding-bottom:2px}
.head-meta a:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(124,154,114,.28);outline-offset:3px}
.theme-toggle:focus-visible{outline:3px solid rgba(124,154,114,.28);outline-offset:3px}
.theme-toggle{position:relative;width:58px;height:26px;flex-shrink:0;margin-left:2px;padding:0;border-radius:999px;border:1px solid rgba(71,57,45,.20);background:rgba(255,250,239,.85);cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;transition:background .25s,border-color .25s}
.theme-toggle:hover{border-color:rgba(71,57,45,.42)}
.theme-icon{position:relative;z-index:2;width:13px;height:13px;transition:color .25s}
.theme-icon--computer{margin-left:6px;color:rgba(60,47,36,.35)}
.theme-icon--garden{margin-right:6px;color:var(--sage)}
.theme-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#dff3df;border:1px solid var(--sage);transform:translateX(32px);transition:transform .3s cubic-bezier(.34,1.56,.4,1),background .25s,border-color .25s}

main{display:grid;grid-template-columns:minmax(0,640px) 300px;justify-content:center;gap:28px;padding:8px 34px 32px;flex:1}
main.single-col{grid-template-columns:minmax(0,720px)}
#app.immersive main{flex:1;min-height:0;padding-bottom:0}

.site-footer{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:16px 34px 22px;font-size:11.5px;color:var(--faint);font-weight:700;
}
.site-footer em{color:var(--sage);font-style:normal;font-family:'Crimson Pro',serif;font-weight:600}
.site-footer-note{color:var(--soft);font-weight:600}
.site-footer-note::before{content:'·';margin-right:10px;color:var(--line)}
#app.immersive .site-footer{padding:12px 20px 16px;flex-shrink:0}

.session{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:34px 38px;box-shadow:0 24px 60px rgba(90,70,50,.10);display:flex;flex-direction:column;gap:0;overflow:visible}
#app.immersive .session{overflow:auto;min-height:0;align-self:stretch}
.greet{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--terra)}
.session h1{font-family:'Crimson Pro',serif;font-size:30px;font-weight:600;margin:8px 0 22px;line-height:1.15}

.step{display:grid;grid-template-columns:26px 1fr;gap:14px;position:relative;padding-bottom:24px}
.step::before{content:'';position:absolute;left:12px;top:30px;bottom:2px;width:2px;background:var(--line)}
.step:last-child::before{display:none}
.dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--sage-soft);color:var(--sage);border:1.5px solid var(--sage)}
.step.plum .dot{background:var(--plum-soft);color:var(--plum);border-color:var(--plum)}
.step.terra .dot{background:var(--terra-soft);color:var(--terra);border-color:var(--terra)}
.step h3{font-size:14px;font-weight:800;margin-bottom:8px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12.5px;color:var(--soft);font-weight:800}
.field textarea,.field input,.field select{
  width:100%;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);
  font-family:'Nunito',sans-serif;font-size:14px;line-height:1.45;padding:12px 14px;
}
.field textarea{min-height:96px;resize:vertical}
.field select{cursor:pointer}
.bug-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.bug-pill{display:inline-flex;align-items:center;gap:7px;background:var(--plum-soft);border:1px solid #d9cde3;color:var(--plum);border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:700;cursor:pointer}
.bug-pill.on{background:var(--plum);color:#fff;border-color:var(--plum)}
.bug-pill small{font-weight:800;opacity:.75}
.bug-why{font-size:13px;color:var(--soft);line-height:1.6;margin-top:10px}
.bug-why b{color:var(--plum)}
.ai-panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
.ai-panel p{font-size:12.5px;color:var(--soft);line-height:1.55;margin-top:4px}
.ai-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.analysis-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.analysis-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:13px 14px;text-align:left;font-family:'Nunito',sans-serif;cursor:pointer}
.analysis-card.on{border-color:var(--plum);box-shadow:0 0 0 3px rgba(138,109,158,.14)}
.analysis-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:800;color:var(--ink)}
.analysis-head small{display:block;font-size:11px;color:var(--faint);font-weight:800;margin-top:2px}
.confidence{color:var(--plum);font-size:12px;white-space:nowrap}
.analysis-card p{font-size:12.5px;color:var(--soft);line-height:1.5;margin-top:8px}
.evidence{font-family:'Crimson Pro',serif;color:var(--ink)!important;font-size:15px!important}
.manual-picker{margin-top:14px}
.manual-picker summary{cursor:pointer;color:var(--sage);font-weight:800;font-size:12.5px}

.reframe-box{background:var(--sage-soft);border:1.5px solid #cfdcc9;border-radius:14px;padding:16px 18px;position:relative}
.reframe-box p{font-family:'Crimson Pro',serif;font-size:18px;line-height:1.5}
.reframe-label{position:absolute;top:-9px;left:14px;background:var(--sage);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:2px 9px;border-radius:99px}
.alt-links{margin-top:10px;font-size:12.5px;color:var(--soft)}
.inline-link{color:var(--sage);font-weight:700;text-decoration:none;border-bottom:1px dashed var(--sage);cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;padding:0;font-family:'Nunito',sans-serif;font-size:inherit}

.actions{display:flex;gap:10px;margin-top:20px}
.btn{border:none;border-radius:99px;padding:12px 22px;font-family:'Nunito',sans-serif;font-size:13.5px;font-weight:800;cursor:pointer}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-sage{background:var(--sage);color:#fff}
.btn-sage:hover:not(:disabled){background:#6b8a61}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--soft)}
.empty-state{background:var(--paper);border:1px dashed var(--line);border-radius:16px;color:var(--soft);font-size:13px;line-height:1.55;padding:18px}
.view-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.view-title h1{margin:0;font-size:30px}
.view-title p{font-size:13px;color:var(--soft);line-height:1.55;margin-top:6px}
.stack{display:flex;flex-direction:column;gap:12px}
.session-item{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.session-item h3{font-size:14px;margin-bottom:6px}
.session-item p{font-size:13px;color:var(--soft);line-height:1.5}
.session-item footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px;font-size:11.5px;color:var(--faint);font-weight:800}
.mini-actions{display:flex;gap:8px;flex-wrap:wrap}
.mini-btn{border:none;background:transparent;color:var(--sage);font-weight:800;font-family:'Nunito',sans-serif;font-size:12px;cursor:pointer;padding:0}
.mini-btn.danger{color:var(--danger)}
.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.library-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px}
.library-card h3{font-size:14px;margin-bottom:8px}
.library-card p{font-size:12.5px;line-height:1.5;color:var(--soft)}
.library-card small{display:inline-flex;margin-bottom:8px;border-radius:99px;background:var(--plum-soft);color:var(--plum);padding:3px 8px;font-weight:800}
.notice{font-size:12.5px;color:var(--sage);font-weight:800;margin-top:12px}
.notice-warn{color:var(--danger)}

aside{display:flex;flex-direction:column;gap:16px;overflow:auto;padding-bottom:20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 10px 30px rgba(90,70,50,.06)}
.panel h4{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.garden{display:flex;align-items:flex-end;gap:7px;height:74px;padding:0 4px}
.sprout{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#a5c39a,#7c9a72);position:relative;opacity:.9}
.sprout span{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--faint);font-weight:700}
.garden-note{font-size:12px;color:var(--soft);margin-top:26px;line-height:1.55}
.garden-note b{color:var(--sage)}
.freq{display:flex;flex-direction:column;gap:9px}
.freq-row{display:grid;grid-template-columns:1fr 44px;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--soft)}
.freq-bar{grid-column:1/3;height:6px;border-radius:99px;background:var(--paper);overflow:hidden}
.freq-bar i{display:block;height:100%;border-radius:99px;background:var(--plum);opacity:.75}
.freq-row b{text-align:right;color:var(--ink)}
.quote{font-family:'Crimson Pro',serif;font-size:15.5px;font-style:italic;line-height:1.55;color:var(--soft)}
.quote footer{font-size:11.5px;font-style:normal;font-weight:700;color:var(--faint);margin-top:8px;font-family:'Nunito',sans-serif}

/* ---- Computer theme: adapted from concept-1-focus-flow ---- */
html[data-theme="computer"]{
  color-scheme:dark;
  --paper:#08090d; --card:rgba(18,22,32,.85); --ink:#f6f7fb; --soft:#9aa3b2; --faint:#687184;
  --line:rgba(148,163,184,.16); --sage:#7dd3fc; --sage-soft:rgba(125,211,252,.10); --terra:#fbbf24; --terra-soft:rgba(251,191,36,.10);
  --plum:#a78bfa; --plum-soft:rgba(167,139,250,.10); --danger:#fca5a5; --danger-soft:rgba(252,165,165,.10);
}
html[data-theme="computer"] body{
  background:
    radial-gradient(circle at 18% 10%, rgba(125,211,252,.10), transparent 32rem),
    radial-gradient(circle at 85% 90%, rgba(167,139,250,.10), transparent 30rem),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    var(--paper);
  background-size:auto,auto,48px 48px,48px 48px;
}
html[data-theme="computer"] header{
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
html[data-theme="computer"] .site-footer{
  border-top:1px solid var(--line);
}
html[data-theme="computer"] .head-meta{font-size:12px;color:var(--soft)}
html[data-theme="computer"] .head-meta a{color:var(--soft)}
html[data-theme="computer"] .head-meta a.on{
  color:var(--sage);
  border-bottom-color:var(--sage);
}
html[data-theme="computer"] .theme-toggle{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
}
html[data-theme="computer"] .theme-toggle:hover{border-color:rgba(255,255,255,.3)}
html[data-theme="computer"] .theme-icon--computer{color:var(--sage)}
html[data-theme="computer"] .theme-icon--garden{color:rgba(255,255,255,.32)}
html[data-theme="computer"] .theme-thumb{
  transform:translateX(0);
  background:rgba(125,211,252,.14);
  border-color:rgba(125,211,252,.65);
}
html[data-theme="computer"] .session,
html[data-theme="computer"] .panel{
  background:var(--card);
  border-color:var(--line);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  backdrop-filter:blur(12px);
}
html[data-theme="computer"] .greet{
  color:var(--sage);
  letter-spacing:.14em;
}
html[data-theme="computer"] .dot{
  background:rgba(125,211,252,.10);
  color:var(--sage);
  border-color:rgba(125,211,252,.36);
}
html[data-theme="computer"] .step.plum .dot{
  background:rgba(167,139,250,.10);
  color:var(--plum);
  border-color:rgba(167,139,250,.36);
}
html[data-theme="computer"] .step.terra .dot{
  background:rgba(134,239,172,.08);
  color:#86efac;
  border-color:rgba(134,239,172,.32);
}
html[data-theme="computer"] .field textarea,
html[data-theme="computer"] .field input,
html[data-theme="computer"] .field select{
  background:rgba(8,9,13,.62);
  border-color:var(--line);
  color:var(--ink);
}
html[data-theme="computer"] .field textarea:focus,
html[data-theme="computer"] .field input:focus,
html[data-theme="computer"] .field select:focus{
  border-color:var(--sage);
  outline-color:rgba(125,211,252,.24);
}
html[data-theme="computer"] .field select option{background:#111827;color:var(--ink)}
html[data-theme="computer"] .ai-panel,
html[data-theme="computer"] .empty-state,
html[data-theme="computer"] .session-item,
html[data-theme="computer"] .library-card{
  background:rgba(8,9,13,.50);
  border-color:var(--line);
  border-radius:14px;
}
html[data-theme="computer"] .analysis-card{
  background:rgba(167,139,250,.07);
  border-color:rgba(167,139,250,.28);
  color:var(--ink);
  border-radius:12px;
}
html[data-theme="computer"] .analysis-card.on{
  border-color:var(--plum);
  box-shadow:0 0 0 1px rgba(167,139,250,.70);
}
html[data-theme="computer"] .analysis-head,
html[data-theme="computer"] .freq-row b{color:var(--ink)}
html[data-theme="computer"] .confidence{color:var(--plum)}
html[data-theme="computer"] .evidence{
  color:#dce6f2!important;
}
html[data-theme="computer"] .bug-pill,
html[data-theme="computer"] .library-card small{
  background:rgba(167,139,250,.10);
  border-color:rgba(167,139,250,.30);
  color:var(--plum);
}
html[data-theme="computer"] .bug-pill.on{
  background:rgba(167,139,250,.22);
  border-color:var(--plum);
  color:var(--ink);
}
html[data-theme="computer"] .reframe-box{
  background:rgba(134,239,172,.05);
  border-color:rgba(134,239,172,.22);
}
html[data-theme="computer"] .reframe-box p{
  color:#dcebe0;
}
html[data-theme="computer"] .reframe-label{
  background:#86efac;
  color:#0b0c11;
}
html[data-theme="computer"] .btn{border-radius:10px}
html[data-theme="computer"] .btn-sage{
  background:linear-gradient(135deg,var(--sage),var(--plum));
  color:#0b0c11;
}
html[data-theme="computer"] .btn-sage:hover:not(:disabled){filter:brightness(1.1)}
html[data-theme="computer"] .btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--soft);
}
html[data-theme="computer"] .btn-ghost:hover{
  color:var(--ink);
  border-color:var(--faint);
}
html[data-theme="computer"] .inline-link,
html[data-theme="computer"] .mini-btn{color:var(--sage);border-bottom-color:var(--sage)}
html[data-theme="computer"] .freq-bar{background:rgba(255,255,255,.08)}
html[data-theme="computer"] .freq-bar i{background:linear-gradient(90deg,var(--plum),var(--sage))}
html[data-theme="computer"] .sprout{background:linear-gradient(180deg,var(--sage),var(--plum));box-shadow:0 0 18px rgba(125,211,252,.20)}
html[data-theme="computer"] .quote{
  color:#cfe9d6;
}
html[data-theme="computer"] ::selection{background:rgba(125,211,252,.28)}

@media (max-width:900px){
  header{padding:18px 20px;align-items:flex-start;gap:16px;flex-direction:column}
  .head-meta{gap:14px;flex-wrap:wrap}
  main,main.single-col{grid-template-columns:1fr;padding:8px 20px 24px}
  .site-footer{padding:14px 20px 18px;gap:6px}
  .site-footer-note::before{display:none}
  #app.immersive aside{overflow:visible}
}
@media (max-width:620px){
  .session{padding:26px 22px}
  .step{grid-template-columns:22px 1fr;gap:12px}
  .dot{width:22px;height:22px}
  .step::before{left:10px}
  .actions{flex-direction:column}
  .library-grid{grid-template-columns:1fr}
}