body {font-family:'Segoe UI',sans-serif;background:#0d1117;color:#c9d1d9;margin:0;padding:20px;}
  .container {max-width:1100px;margin:40px auto;background:#161b22;padding:35px;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.7);}
  h1 {text-align:center;color:#58a6ff;margin-bottom:8px;}
  .subtitle {text-align:center;color:#8b949e;margin-bottom:35px;}
  .controls {display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:30px;}
  @media (max-width:900px){.controls{grid-template-columns:1fr;}}
  label {display:block;margin-bottom:8px;font-weight:600;color:#58a6ff;}
  select,input[type=range]{width:100%;padding:13px;border-radius:10px;border:1px solid #30363d;background:#0d1117;color:#c9d1d9;font-size:16px;}
  input[type=range]{height:42px;}
  .slider-value{text-align:center;font-size:2.2em;font-weight:bold;color:#39ff8c;margin-top:12px;}
  .results{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:30px;}
  @media (max-width:900px){.results{grid-template-columns:1fr;}}
  .text-results{background:#21262d;padding:25px;border-radius:14px;font-size:1.35em;line-height:1.9;}
  .visual{display:flex;justify-content:center;align-items:center;position:relative;height:540px;background:#0d1117;border:2px dashed #30363d;border-radius:14px;overflow:hidden;}
  .reference-35mm{position:absolute;border:4px solid #ff5555;opacity:0.35;box-sizing:border-box;}
  .current-frame{border:4px solid #39ff8c;box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:center;box-shadow:0 0 40px rgba(57,255,140,0.5);}
  .lens-circle{position:absolute;border:3px dashed #ff79c6;border-radius:50%;opacity:0.75;}
  .frame-label{position:absolute;top:-38px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.92);padding:8px 18px;border-radius:10px;font-weight:600;color:#fff;}
  .size-label{position:absolute;bottom:-42px;left:50%;transform:translateX(-50%);color:#8b949e;font-size:0.98em;}
  .info-box{background:#1e2329;padding:25px;border-radius:14px;margin-top:40px;border-left:5px solid #58a6ff;}
  .info-box h3{color:#58a6ff;margin-top:0;}
  table {width:100%;border-collapse:collapse;margin-top:15px;}
  th, td {padding:10px;text-align:left;border-bottom:1px solid #30363d;}
  th {background:#0d1117;color:#58a6ff;}