:root{
    --bg: #1b211c;
    --bg-2: #222a23;
    --tablet: #262f27;
    --groove: #10140f;
    --bone: #ecdfc0;
    --bone-dim: #cabf9f;
    --brass: #c3934a;
    --rust: #a8562f;
    --moss: #6f7f60;
    --muted: #8d9787;
    --line: #3a4338;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse at top, #232b23 0%, var(--bg) 55%),
      var(--bg);
    color: var(--bone-dim);
    font-family:'Inter',sans-serif;
    line-height:1.55;
    min-height:100vh;
  }
  ::selection{ background: var(--brass); color:#1b211c; }

  /* ---------- Header ---------- */
  header{
    position:relative;
    padding: 54px 24px 40px;
    text-align:center;
    overflow:hidden;
    border-bottom: 1px solid var(--line);
    background:
      repeating-linear-gradient(90deg, rgba(236,223,192,0.025) 0 2px, transparent 2px 34px);
  }
  header::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(circle at 50% -20%, rgba(195,147,74,0.14), transparent 60%);
    pointer-events:none;
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:11.5px;
    color: var(--brass);
    margin-bottom:14px;
  }
  h1{
    font-family:'Fraunces', serif;
    font-optical-sizing:auto;
    font-weight:600;
    font-size: clamp(34px, 6vw, 56px);
    margin:0 0 10px;
    color: var(--bone);
    letter-spacing:-0.01em;
  }
  header p.sub{
    max-width:560px;
    margin: 0 auto;
    color: var(--muted);
    font-size:15px;
  }

  main{
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 24px 90px;
    display:grid;
    gap:40px;
  }

  section{ position:relative; }
  .section-label{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--moss);
    margin-bottom:14px;
    display:flex; align-items:center; gap:10px;
  }
  .section-label::after{
    content:""; flex:1; height:1px; background:var(--line);
  }

  /* ---------- Input card ---------- */
  .input-card{
    background: var(--bg-2);
    border:1px solid var(--line);
    border-radius:14px;
    padding:22px;
  }
  textarea{
    width:100%;
    min-height:96px;
    resize:vertical;
    background: var(--groove);
    border:1px solid var(--line);
    border-radius:10px;
    color: var(--bone);
    font-family:'JetBrains Mono', monospace;
    font-size:16px;
    padding:16px;
    outline:none;
  }
  textarea:focus{ border-color: var(--brass); }
  .controls{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; align-items:center;
  }
  .chip{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition: border-color .15s, color .15s;
  }
  .chip:hover{ border-color:var(--brass); color:var(--brass); }
  .spacer{flex:1;}
  .btn{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:13px;
    padding:9px 16px;
    border-radius:9px;
    border:1px solid var(--brass);
    background: rgba(195,147,74,0.1);
    color: var(--brass);
    cursor:pointer;
    transition: background .15s;
  }
  .btn:hover{ background: rgba(195,147,74,0.22); }

  /* ---------- Tablet output ---------- */
  .tablet-wrap{
    background: linear-gradient(180deg, #2a332b, #1e251f);
    border:1px solid var(--line);
    border-radius:16px;
    padding:4px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
  }
  .tablet{
    position:relative;
    border-radius:12px;
    min-height:170px;
    padding: 26px 22px;
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 3px, transparent 3px 46px),
      linear-gradient(180deg, #2b3429 0%, #232b21 100%);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.35);
    display:flex; flex-wrap:wrap; align-content:flex-start; gap: 4px 0;
  }
  .word-group{
    display:flex; gap:2px; margin: 6px 18px 6px 0; align-items:flex-end;
  }
  .glyph-box{
    width:56px; height:56px;
    cursor:default;
  }
  .glyph-box svg{ width:100%; height:100%; overflow:visible; }
  .stroke-shadow{ fill:none; stroke:var(--groove); stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
  .stroke-main{ fill:none; stroke:var(--bone); stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round; }
  .mark-shadow{ fill:none; stroke:var(--groove); stroke-width:6.5; stroke-linecap:round; }
  .mark-main{ fill:none; stroke:var(--brass); stroke-width:4; stroke-linecap:round; }
  .placeholder-text{
    color: var(--muted);
    font-family:'JetBrains Mono',monospace;
    font-size:13px;
    align-self:center;
  }

  /* ---------- Breakdown table ---------- */
  .breakdown{
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .syl-card{
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    display:flex; align-items:center; gap:10px;
    min-width:96px;
  }
  .syl-card .g{ width:38px; height:38px; flex:none; }
  .syl-card .g svg{ width:100%; height:100%; overflow:visible; }
  .syl-card .meta{ font-family:'JetBrains Mono',monospace; font-size:12.5px; }
  .syl-card .meta .latin{ color:var(--bone); font-weight:700; }
  .syl-card .meta .note{ color:var(--rust); font-size:10.5px; display:block; margin-top:2px; }

  /* ---------- Legend ---------- */
  .legend-toggle, .ref-toggle{
    background:none;border:1px solid var(--line);color:var(--muted);
    font-family:'JetBrains Mono',monospace; font-size:12px;
    padding:8px 14px; border-radius:8px; cursor:pointer;
  }
  .legend-toggle:hover, .ref-toggle:hover{ border-color:var(--brass); color:var(--brass); }
  .legend-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(84px,1fr));
    gap:14px;
  }
  .legend-item{
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 6px 10px;
    text-align:center;
  }
  .legend-item .g{ width:44px; height:44px; margin:0 auto 6px; }
  .legend-item .g svg{ width:100%; height:100%; overflow:visible; }
  .legend-item .label{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--bone-dim); }
  .legend-sub-title{
    font-family:'Inter',sans-serif; font-size:12.5px; color:var(--muted);
    margin:22px 0 8px;
  }
  .hidden{ display:none; }

  .ref-image-wrap{
    margin-top:16px;
    background: var(--bg-2);
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px;
  }
  .ref-image-wrap img{ width:100%; max-width:620px; display:block; margin:0 auto; border-radius:6px; }
  .ref-caption{
    font-size:12px; color:var(--muted); text-align:center; margin-top:10px;
    font-family:'JetBrains Mono',monospace;
  }

  .note-box{
    font-size:13px; color:var(--muted);
    border-left:2px solid var(--brass);
    padding: 4px 0 4px 14px;
  }
  .note-box b{ color:var(--bone-dim); }

  footer{
    text-align:center; padding: 20px 24px 50px;
    color:var(--muted); font-size:12px; font-family:'JetBrains Mono',monospace;
  }

  @media (max-width:600px){
    .glyph-box{ width:46px; height:46px; }
  }