:root{color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px}*,:before,:after{box-sizing:border-box}body{color:#000;background:#fff;min-height:100vh;margin:0}#root{justify-content:center;min-height:100vh;display:flex}.app{flex-direction:column;align-items:center;gap:24px;max-width:100%;padding:32px 16px 48px;display:flex}h1{letter-spacing:.5px;color:#000;margin:0;font-size:28px;font-weight:600}.nonogram{--cell-size:34px;--clue-size:28px;-webkit-user-select:none;user-select:none;background:#fff;border:2px solid #000;display:inline-grid}.corner{background:#fff}.col-clue,.row-clue{color:#000;font-variant-numeric:tabular-nums;background:#fff;font-size:13px;font-weight:700;display:flex}.col-clue{border-bottom:2px solid #000;border-left:1px solid #cfcfcf;justify-content:center;align-items:flex-end;padding:4px 0}.row-clue{border-top:1px solid #cfcfcf;border-right:2px solid #000;justify-content:flex-end;align-items:center;padding:0 6px}.col-clue.thick-left{border-left:2px solid #000}.row-clue.thick-top{border-top:2px solid #000}.clue-stack{flex-direction:column;align-items:center;gap:2px;line-height:1;display:flex}.clue-row{align-items:center;gap:6px;line-height:1;display:flex}.cell{cursor:pointer;color:#d33;background:#fff;border:none;border-top:1px solid #cfcfcf;border-left:1px solid #cfcfcf;justify-content:center;align-items:center;margin:0;padding:0;font-family:inherit;font-size:18px;font-weight:700;line-height:1;transition:background-color 50ms;display:flex}.cell:hover:not(:disabled):not(.filled){background:#f1f1f1}.cell.thick-left{border-left:2px solid #000}.cell.thick-top{border-top:2px solid #000}.cell.filled{color:#000;background:#000}.cell.hint,.cell.hint:disabled{color:#d33;opacity:1;cursor:default;background:#d33}.cell:disabled{cursor:default}.solved{color:#000;margin:0;font-size:22px;font-weight:600}.secret-message{text-align:left;word-break:break-all;white-space:pre-wrap;background:#fff;border:2px solid #000;max-width:min(640px,100%);padding:12px 16px;font-size:15px;line-height:1.4}.secret-label{font-weight:700}.secret-text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.create-puzzle{flex-direction:column;align-items:center;gap:12px;width:min(480px,100%);margin-top:24px;display:flex}.create-label{color:#000;font-size:18px;font-weight:600}.create-subtitle{color:#555;text-align:center;margin:0;font-size:14px}.create-size{color:#000;font-variant-numeric:tabular-nums;margin:0;font-size:15px;font-weight:600}.generated-url{color:#000;word-break:break-all;-webkit-user-select:all;user-select:all;background:#f8f8f8;border:2px solid #000;width:100%;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.4}.create-input{color:#000;background:#fff;border:2px solid #000;border-radius:0;outline:none;width:100%;padding:10px 12px;font-family:inherit;font-size:16px}.create-input:focus{background:#fafafa}.controls{flex-flow:column wrap;justify-content:center;gap:12px;display:flex}.button-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.controls button{color:#000;cursor:pointer;background:#d9d9d9;border-radius:1dvh;padding:10px 20px;font-family:inherit;font-size:15px;font-weight:600;transition:background-color .1s,color .1s}.controls button:hover{color:#fff;background:#a3a3a3}.controls button:active{transform:translateY(1px)}.controls button:disabled{opacity:.4;cursor:not-allowed;color:#000;background:#fff}.modal-backdrop{z-index:10;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{text-align:center;background:#fff;border:2px solid #000;flex-direction:column;gap:20px;max-width:min(420px,100% - 32px);padding:24px 28px;display:flex}.modal-text{color:#000;margin:0;font-size:18px;font-weight:600}.modal-actions{justify-content:center;gap:12px;display:flex}.modal-actions button{color:#000;cursor:pointer;background:#fff;border:2px solid #000;border-radius:0;padding:8px 22px;font-family:inherit;font-size:15px;font-weight:600;transition:background-color .1s,color .1s}.modal-actions button:hover{color:#fff;background:#000}
