*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6;color:#111;background:#fff}body{min-height:100vh}header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid #e5e5e5}header .logo{text-decoration:none;color:#111;font-size:1.25rem;font-weight:600}header .nav-link{color:#555;text-decoration:none;margin-left:1.5rem;font-size:0.9rem;transition:color .2s}header .nav-link:hover{color:#111}main{max-width:1200px;margin:0 auto;padding:1rem}section{margin:2rem 0}section h2{margin-bottom:1rem;color:#111;font-size:1.5rem;font-weight:600}section h3{margin:1rem 0 0.5rem;color:#333;font-size:1.1rem;font-weight:500}.hero{text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#f5f7ff 0%,#e4e7f5 100%)}hero h1{font-size:2.2rem;margin-bottom:0.75rem}hero p{color:#555;font-size:1.1rem}.calculator-section{display:flex;flex-direction:column;gap:1.5rem}.form-card{background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.05);padding:2rem;max-width:600px;margin:0 auto}.field-group{display:flex;flex-direction:column;gap:0.5rem}label{font-size:0.9rem;font-weight:500;color:#333}select, input[type="number"]{width:100%;padding:0.75rem;border:1px solid #d1d5db;border-radius:6px;font-size:1rem;appearance:none;background:#fff}select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;background-size:16px}.unit{position:absolute;margin-left:0.75rem;color:#666;font-size:0.9rem}.presets{ margin-top:1rem;padding-top:1rem;border-top:1px solid #eee}fieldset{border:none;padding:0;margin:0}legend{font-size:0.85rem;color:#666;font-weight:500;margin-bottom:0.5rem}.preset-btn{background:#f5f5f5;border:none;padding:0.5rem 0.75rem;border-radius:4px;font-size:0.85rem;cursor:pointer;transition:background .15s}.preset-btn:hover{background:#e5e5e5}.button-group{display:flex;gap:0.75rem;margin-top:1.5rem}button{background:#111;color:#fff;border:none;padding:0.85rem 1.25rem;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:background .15s}button:hover{background:#222}button.secondary-btn{background:#fff;color:#111;border:1px solid #ddd;padding:0.75rem 1rem;border-radius:6px;font-size:0.95rem;cursor:pointer}button.secondary-btn:hover{background:#f5f5f5}.results{margin-top:1.5rem;padding:1.5rem;background:#f8f9ff;border-radius:8px;border-left:4px solid #4f46e5}.result-card{display:flex;flex-direction:column;gap:0.5rem}.result-card p{font-size:1.05rem}.result-card strong{color:#333}.grain-preview{text-align:center;margin-top:1rem}.grain-sample{display:inline-block}grain-sample rect{fill:url(#grainGrad)}.grain-sample circle{fill:#666}.grain-sample circle:nth-child(2){cx:70;cy:80}.grain-sample circle:nth-child(3){cx:130;cy:120;opacity:0.5}.grain-sample circle:nth-child(4){cx:90;cy:140;opacity:0.5}.actions{display:flex;gap:0.75rem;margin-top:1rem}.saved-profiles{padding:2rem;background:#f8fafc;border-radius:12px;margin:2rem auto;max-width:1100px}.saved-profiles h2{margin-bottom:1rem}.saved-profiles .profile-item{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:0.75rem 1rem;border-radius:6px;margin-bottom:0.5rem;box-shadow:0 1px 3px rgba(0,0,0,0.05)}.saved-profiles .profile-name{font-weight:500}.saved-profiles .delete-btn{background:none;border:none;color:#ef4444;cursor:pointer;font-size:1.2rem}.grain-table{width:100%;border-collapse:collapse;margin-top:1rem}.grain-table th,.grain-table td{padding:0.75rem;text-align:left;border-bottom:1px solid #e5e5e5;font-size:0.95rem}.grain-table th{background:#f5f5f5;font-weight:600}.tips-section,.output-guide{max-width:800px;margin:0 auto}.tips-section ul{list-style:none}.tips-section li{padding:0.75rem 1rem;margin-bottom:0.75rem;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.03)}.tips-section li strong{display:block;margin-bottom:0.25rem;color:#111}.empty-state{color:#666;font-style:italic;text-align:center;padding:1rem}.footer-note{font-size:0.85rem;color:#666;text-align:center;margin:1rem 0}.footer-links a{color:#666;text-decoration:none;font-size:0.9rem}:hover{text-decoration:underline}@media (min-width: 768px){.hero h1{font-size:2.5rem}.form-card{padding:2.5rem}.calculator-section{flex-direction:row;gap:2rem}}.media (min-width: 900px){.form-card{max-width:500px;flex-shrink:0};.reference-section,.tips-section,.output-guide{padding:0 1rem}}



/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}