:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;min-width:320px;min-height:100vh}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#222;background-color:#f8fafc;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background:#f8fafc}#root{width:100%;margin:0 auto;background:#f8fafc}.app-container{max-width:1400px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}.app-header{background:#3b82f6;color:#fff;padding:2rem 0;margin-bottom:2rem;box-shadow:0 4px 6px -1px #0000001a}.header-content{max-width:1400px;margin:0 auto;padding:0 2rem;text-align:center}.header-top{margin-bottom:1rem}.cookwcode-link{display:inline-flex;align-items:center;color:#fffc;text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s ease;padding:.5rem 1rem;border-radius:6px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cookwcode-link:hover{color:#fff;background:#fff3;text-decoration:none}.app-title{font-size:2.5rem;font-weight:700;margin:0 0 .5rem;text-shadow:0 2px 4px rgba(0,0,0,.1)}.app-subtitle{font-size:1.1rem;margin:0;opacity:.9;font-weight:400}.nyt-link-container{margin-top:1.5rem}.nyt-link{display:inline-flex;align-items:center;gap:.75rem;background:#ffffff26;color:#fff;text-decoration:none;padding:.75rem 1.5rem;border-radius:50px;font-weight:600;font-size:.95rem;transition:all .3s cubic-bezier(.4,0,.2,1);border:2px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 6px -1px #0000001a}.nyt-link:hover{background:#ffffff40;border-color:#fff6;transform:translateY(-2px);box-shadow:0 8px 15px -3px #0003}.nyt-link:active{transform:translateY(0);box-shadow:0 4px 6px -1px #0000001a}.nyt-link-icon{font-size:1.1rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.nyt-link-text{letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.1)}.app-main{flex:1;padding:0 2rem 2rem;display:flex;flex-direction:column;gap:2rem}.about-section{background:#fff;padding:2.5rem;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #f1f5f9}.about-content{color:#374151;line-height:1.7}.about-content p{margin:0 0 1.5rem;font-size:1.1rem}.about-features{margin-top:1.5rem}.about-features h3{font-size:1.2rem;font-weight:600;color:#1e293b;margin:0 0 1rem}.about-features ul{margin:0;padding-left:1.5rem}.about-features li{margin-bottom:.75rem;color:#4b5563;line-height:1.6}.about-features strong{color:#1e293b;font-weight:600}.about-link{color:#3b82f6;text-decoration:none;font-weight:500;transition:color .2s ease}.about-link:hover{color:#2563eb;text-decoration:underline}.how-to-use{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e5e7eb}.how-to-use h3{font-size:1.2rem;font-weight:600;color:#1e293b;margin:0 0 1rem}.how-to-use ol{margin:0;padding-left:1.5rem}.how-to-use li{margin-bottom:1rem;color:#4b5563;line-height:1.6}.how-to-use li:last-child{margin-bottom:0}.how-to-use strong{color:#1e293b;font-weight:600}.how-to-use-conclusion{margin-top:1rem;color:#4b5563}.section-title{font-size:1.5rem;font-weight:700;color:#0f172a;margin:0 0 1.5rem;padding-bottom:.75rem;border-bottom:3px solid #3b82f6;position:relative}.section-title:after{content:"";position:absolute;bottom:-3px;left:0;width:60px;height:3px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:2px}.puzzle-details-section{background:#fff;padding:2.5rem;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #f1f5f9}.grid-section{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 1px 3px #0000001a}.grid-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.grid-controls{display:flex;align-items:center;gap:1rem}.size-controls{display:flex;gap:1rem;align-items:center}.size-controls label{display:flex;align-items:center;gap:.75rem;font-weight:600;color:#1e293b;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px}.size-input{width:70px;padding:.75rem;border:2px solid #e2e8f0;border-radius:12px;font-size:.95rem;text-align:center;background:#f8fafc;color:#1e293b;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000000d}.size-input:focus{outline:none;border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px #3b82f61a,0 4px 6px -1px #0000001a;transform:translateY(-2px)}.size-input:hover{border-color:#cbd5e1;background:#f1f5f9;transform:translateY(-1px);box-shadow:0 2px 4px -1px #0000001a}.grid-workspace{display:flex;justify-content:center;align-items:flex-start;gap:2rem}.words-section{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 1px 3px #0000001a}.words-display{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.theme-words h3,.spangram-section h3{font-size:1.1rem;font-weight:600;color:#374151;margin:0 0 1rem}.words-list{display:flex;flex-wrap:wrap;gap:.5rem;min-height:2.5rem;align-items:center}.spangram-display{min-height:2.5rem;display:flex;align-items:center}.empty-state{color:#9ca3af;font-style:italic;font-size:.9rem}input[type=text],input[type=date],textarea{padding:.875rem;border:2px solid #e2e8f0;border-radius:8px;font-size:.95rem;transition:all .2s ease;background:#f8fafc;color:#1e293b;font-weight:500}input[type=text]:focus,input[type=date]:focus,textarea:focus{outline:none;border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61a;transform:translateY(-1px)}input[type=text]:hover,input[type=date]:hover,textarea:hover{border-color:#cbd5e1;background:#f1f5f9}.grid-editor input[type=text]:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.grid-editor input[type=text][readonly]{background:#f9fafb;cursor:not-allowed}button{padding:.75rem 1.5rem;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;background:#3b82f6;color:#fff}button:hover:not(:disabled){background:#2563eb;transform:translateY(-1px)}.grid-editor{display:flex;flex-direction:column;align-items:center;gap:1rem}.grid-editor td{padding:0;border:1px solid #e5e7eb}.grid-editor.path-mode{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.grid-editor.path-mode *:focus{outline:none!important;box-shadow:none!important}.grid-editor.path-mode *::selection{background:transparent!important}.grid-editor.path-mode *::-moz-selection{background:transparent!important}.metadata-form{display:flex;flex-direction:column;gap:2rem}.metadata-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.metadata-row{display:flex;flex-direction:column;gap:.75rem}.metadata-row label{font-weight:600;color:#1e293b;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.metadata-row input,.theme-field input,.notes-field textarea{padding:1rem;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);background:#f8fafc;color:#1e293b;font-weight:500;box-shadow:0 1px 2px #0000000d}.metadata-row input:focus,.theme-field input:focus,.notes-field textarea:focus{outline:none;border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px #3b82f61a,0 4px 6px -1px #0000001a;transform:translateY(-2px)}.metadata-row input::placeholder,.theme-field input::placeholder,.notes-field textarea::placeholder{color:#94a3b8;font-weight:400}.theme-field{display:flex;flex-direction:column;gap:.75rem}.theme-field label{font-weight:600;color:#1e293b;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.notes-field{display:flex;flex-direction:column;gap:.75rem}.notes-field label{font-weight:600;color:#1e293b;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.notes-field textarea{resize:vertical;min-height:120px;font-family:inherit;line-height:1.6}.metadata-row input:hover,.theme-field input:hover,.notes-field textarea:hover{border-color:#cbd5e1;background:#f1f5f9;transform:translateY(-1px);box-shadow:0 2px 4px -1px #0000001a}.metadata-row input[type=date]{position:relative}.metadata-row input[type=date]::-webkit-calendar-picker-indicator{background:transparent;color:transparent;cursor:pointer;height:auto;inset:0;position:absolute;width:auto}.export-section{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 1px 3px #0000001a;border:2px solid #e5e7eb}.export-content{display:flex;flex-direction:column;gap:1.5rem}.validation-status{display:flex;flex-direction:column;gap:1rem}.validation-errors,.validation-warnings{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1rem}.validation-warnings{background:#fffbeb;border-color:#fed7aa}.validation-errors h3,.validation-warnings h3{margin:0 0 .5rem;font-size:1rem;font-weight:600}.validation-errors h3{color:#dc2626}.validation-warnings h3{color:#d97706}.validation-errors ul,.validation-warnings ul{margin:0;padding-left:1.5rem;font-size:.9rem}.validation-errors li,.validation-warnings li{margin-bottom:.25rem}.export-button{padding:1rem 2rem;font-size:1.1rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;align-self:flex-start}.export-ready{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 6px -1px #10b9814d}.export-ready:hover{transform:translateY(-2px);box-shadow:0 8px 12px -1px #10b98166}.export-disabled{background:#e5e7eb;color:#9ca3af;cursor:not-allowed}@media (max-width: 1200px){.metadata-fields{grid-template-columns:1fr;gap:1.25rem}.metadata-form{gap:1.5rem}.words-display{grid-template-columns:1fr}}@media (max-width: 768px){.grid-header{flex-direction:column;align-items:flex-start}}@media (max-width: 768px){.app-main{padding:0 1rem 1rem}.puzzle-details-section,.grid-section,.words-section,.export-section{padding:1.5rem}.app-title{font-size:2rem}.app-subtitle{font-size:1rem}.metadata-row,.theme-field,.notes-field{gap:.5rem}.metadata-row input,.theme-field input,.notes-field textarea{padding:.875rem;font-size:.95rem}.metadata-row label,.theme-field label,.notes-field label{font-size:.9rem}.size-controls{flex-direction:column;align-items:flex-start}.nyt-link{padding:.6rem 1.2rem;font-size:.9rem}.nyt-link-icon{font-size:1rem}}