*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;background:#f9fafb;color:#0f172a}
.app{display:flex;flex-direction:column;min-height:100%}
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e5e7eb;background:#ffffff}
.header h1{margin:0;font-size:20px}
.header-actions{display:flex;gap:8px}
button{appearance:none;border:1px solid #86efac;background:#16a34a;color:#ffffff;padding:8px 12px;border-radius:8px;font-size:14px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
button:hover{background:#15803d}
button.secondary{background:#f59e0b;color:#0f172a;border-color:#f59e0b}
.main{display:grid;grid-template-columns:1fr 120px;gap:12px;padding:12px}
.sidebar{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.sidebar h2{margin:0 0 8px 0;font-size:16px}
.unit-list{display:flex;flex-direction:column;gap:8px}
.unit{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid #e5e7eb;border-radius:8px;background:#ffffff;cursor:pointer}
.unit:hover{background:#f1f5f9}
.unit .symbol{font-weight:600}
.canvas-section{display:flex;flex-direction:column;gap:12px}
.target{display:flex;flex-direction:column;gap:4px}
.equation-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.concept-hint,.term-hints{display:inline-flex;align-items:baseline;font-size:14px;line-height:1.25;gap:6px;flex-wrap:wrap}
.term-inline{color:#dc2626;font-size:12px}
.term-inline .katex{font-size:12px}
.concept-hint .katex{font-size:14px}
.target-formula .katex{font-size:14px}
.readout #current-formula .katex{font-size:14px}
.term-hints mjx-container{font-size:12px !important}
.equation-row .term-inline mjx-container{font-size:12px !important}
.equation-row .concept-hint mjx-container{font-size:14px !important}
.target-formula mjx-container{font-size:14px !important}
.readout #current-formula mjx-container{font-size:14px !important}
.equation-row mjx-container{font-size:1em}
.quantity-name{font-weight:700;color:#0f172a}
.target-desc{color:#f59e0b}
.target-formula{color:#111827}
.concept-hint{color:#111827}
.term-hints{color:#111827;display:flex;flex-wrap:wrap;gap:8px}
.readout #current-formula{color:#111827}
.term-box{border:1px solid #e5e7eb;border-radius:8px;background:#ffffff;padding:8px 12px;box-shadow:0 1px 2px rgba(0,0,0,0.05);display:inline-flex;align-items:baseline;gap:6px}
.hidden{display:none}
.canvas{height:240px;border:2px dashed #f59e0b;border-radius:12px;background:#ffffff;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.fraction{display:flex;flex-direction:column;height:100%}
.row{flex:1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.divider{height:2px;background:#fde68a;border-radius:2px;position:relative}
.divider::before{content:"÷";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#ffffff;color:#0f172a;font-weight:700;padding:0 6px;border-radius:6px}
.token{display:flex;align-items:center;gap:6px;background:#fef9c3;border:1px solid #f59e0b;border-radius:999px;padding:8px 7px;color:#0f172a;font-size:15px}
.token .sym{font-weight:700;font-size:16px}
.token .exp-controls{display:flex;align-items:center;gap:4px}
.token .exp{min-width:18px;text-align:center}
.token button{padding:2px 6px;border-radius:6px}
.token .remove{color:#ef4444;border-color:#ef4444}
.sep{color:#0f172a;margin:0 8px;font-weight:700;display:flex;align-items:center;font-size:18px;position:relative;top:2px}
.readout{display:flex;flex-direction:column;gap:8px}
.readout-row{display:flex;align-items:center;gap:8px}
.info-btn{margin-left:auto;width:24px;height:24px;border-radius:50%;background:#ffffff;border:1px solid #e5e7eb;display:inline-flex;align-items:center;justify-content:center;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.info-btn i{font-style:italic;font-weight:700}
.instructions{color:#475569;font-size:12px}
.palette{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sidebar.right{width:120px;height:320px;overflow:auto}
.palette-item{width:100%}
.palette .token{padding:6px 8px;font-size:13px}
.palette .token .sym{font-size:14px}
.palette .token .name{display:none}
.palette .token{white-space:nowrap}
.palette-item{user-select:none}
.palette .token{cursor:grab}
.palette .token:active{cursor:grabbing}
.row .token{cursor:grab}
.row .token:active{cursor:grabbing}
.footer{padding:8px 16px;color:#475569;border-top:1px solid #e5e7eb;background:#ffffff}

@media (max-width: 460px){
  .header{flex-direction:column;align-items:flex-start;gap:8px}
  .header-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  button{font-size:13px;padding:6px 10px}
  .main{grid-template-columns:1fr 120px}
  .canvas{height:240px;padding:10px;border-color:#f59e0b}
  .fraction{height:100%}
  .row{gap:6px}
  #numerator,#denominator{min-height:64px}
  .divider::before{font-size:16px;padding:0 4px}
  .token{padding:4px 5px;font-size:12px;border-color:#f59e0b;background:#fef9c3;max-width:100%}
  .token .sym{font-size:13px}
  .sep{font-size:13px;top:0}
  .palette{align-items:stretch}
  .palette-item{width:100%}
  .term-hints{flex-direction:column}
  .term-box{width:100%;padding:4px 8px}
  .palette .token{padding:4px 6px;font-size:12px}
  .palette .token .sym{font-size:13px}
  .footer{font-size:12px}
}

@media (max-height: 450px){
  .header{padding:8px 12px}
  .header h1{font-size:18px}
  .header-actions{gap:6px}
  button{font-size:12px;padding:5px 8px}
  .main{gap:8px;padding:8px}
  .sidebar{padding:8px}
  .canvas{height:180px;padding:8px;border-color:#f59e0b}
  .fraction{height:100%}
  #numerator,#denominator{min-height:56px}
  .divider::before{font-size:14px;padding:0 4px}
  .row{gap:6px}
  .token{padding:6px 10px;font-size:14px;border-color:#f59e0b;background:#fef9c3}
  .token .sym{font-size:16px}
  .sep{font-size:16px;top:0}
  .quantity-name{font-size:14px}
  .concept-hint,.term-hints{font-size:13px}
  .term-box{padding:6px 10px}
  .footer{padding:6px 12px;font-size:12px}
  .sidebar.right{max-height:150px;overflow:auto}
}