:root{font-family:Kanit,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.4;font-weight:400;color-scheme:light;background:#0b1020;color:#eef2ff;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(1200px 800px at 50% 0%,#16204b,#0b1020 55%,#070a14)}#app{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.app{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:0 auto}.header{text-align:left}.title{margin:0;font-size:20px;font-weight:700}.subtitle{margin:4px 0 0;font-size:14px;color:#eef2ffbf}.preview{position:relative;border-radius:16px;overflow:hidden;background:#ffffff0f;border:1px solid rgba(255,255,255,.12)}.scanner{position:relative;width:100%;height:min(62vh,520px);background:#060816}.scanner video,.scanner canvas{width:100%;height:100%;display:block;object-fit:cover}.scanner canvas.drawingBuffer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.panel{border-radius:16px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);padding:12px}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.buttons-spaced{margin-top:10px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:12px;border:1px solid rgba(255,255,255,.16);padding:12px 14px;font-size:16px;font-weight:600;background:#ffffff14;color:#eef2ff}.btn-wide{grid-column:1 / -1}.btn:disabled{opacity:.5}.btn-primary{background:#6366f140;border-color:#6366f173}.status{margin:10px 0 0;font-size:14px;color:#eef2ffd9}.result{margin-top:10px;display:flex;flex-direction:column;gap:8px}.resultHeader{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.resultLabel{font-size:14px;font-weight:700}.resultMeta{font-size:12px;color:#eef2ffbf}.resultText{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.14);padding:12px;font-size:16px;background:#00000047;color:#eef2ff;resize:none}.notion{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}.notionHeader{display:flex;justify-content:space-between;align-items:baseline}.field{margin-top:10px;display:flex;flex-direction:column;gap:6px}.label{font-size:12px;color:#eef2ffbf}.row{display:grid;grid-template-columns:1fr auto;gap:10px}.input{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.14);padding:12px;font-size:16px;background:#00000047;color:#eef2ff;outline:none}.results{display:flex;flex-direction:column;gap:8px}.pick{text-align:left;border-radius:12px;border:1px solid rgba(255,255,255,.14);padding:10px 12px;font-size:14px;background:#ffffff0f;color:#eef2ff}.hint{margin:10px 0 0;font-size:12px;color:#eef2ffb3}@media(min-width:900px){.scanner{height:220px}}