:root{color-scheme:light;--bg: #f5f5f7;--surface: #ffffff;--ink: #1d1d1f;--secondary: #6e6e73;--line: #d2d2d7;--blue: #0071e3;--blue-hover: #0077ed;--blue-soft: #e8f2ff;--success: #248a3d;--danger: #d70015;--viewport: #09090b;--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace}*{box-sizing:border-box}html{background:var(--bg)}body{min-height:100svh;margin:0;color:var(--ink);background:var(--bg);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}a{color:var(--blue)}button,a,label{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(0,113,227,.35);outline-offset:3px}[hidden]{display:none!important}.home-page,.tool-page,.receiver-page{display:flex;flex-direction:column}.home-shell{width:min(980px,calc(100% - 40px));min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:54px;margin:0 auto;padding:64px 0}.hero{text-align:center}.hero h1{margin:0;font-size:clamp(46px,7vw,68px);line-height:1;letter-spacing:-.055em}.hero p{margin:20px 0 0;color:var(--secondary);font-size:clamp(17px,2vw,20px)}.transfer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.transfer-card{min-height:176px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:30px;color:var(--ink);background:var(--surface);border:1px solid rgba(0,0,0,.06);border-radius:24px;box-shadow:0 10px 30px #0000000d;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}.transfer-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px #00000014}.card-icon{width:52px;height:52px;display:grid;place-items:center;color:var(--blue);background:var(--blue-soft);border-radius:15px}.card-icon svg{width:27px;height:27px}.card-content{min-width:0;display:flex;flex-direction:column;gap:5px}.card-content strong{font-size:30px;line-height:1.1;letter-spacing:-.035em}.card-content span{color:var(--secondary)}.card-arrow{width:22px;height:22px;color:var(--blue)}.site-header{position:sticky;top:0;z-index:10;min-height:60px;display:grid;grid-template-columns:44px auto 44px;align-items:center;justify-content:space-between;padding:max(9px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 9px max(18px,env(safe-area-inset-left));border-bottom:1px solid rgba(0,0,0,.08);background:#f5f5f7db;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}.nav-home{width:40px;height:40px;display:grid;place-items:center;color:var(--ink);border-radius:50%}.nav-home svg{width:22px;height:22px}.tool-nav{display:flex;gap:3px;padding:3px;border-radius:999px;background:#7676801f}.tool-nav a,.tool-nav span{min-width:76px;padding:6px 14px;color:var(--secondary);border-radius:999px;font-size:13px;font-weight:600;text-align:center;text-decoration:none}.tool-nav a[aria-current=page],.tool-nav span[aria-current=page]{color:var(--ink);background:var(--surface);box-shadow:0 1px 4px #0000001a}.nav-spacer{width:40px}.send-shell,.receiver-shell{width:min(640px,calc(100% - 32px));flex:1 0 auto;margin:0 auto;padding:clamp(42px,7vw,68px) 0 max(42px,env(safe-area-inset-bottom))}.send-shell,.receiver-primary{display:flex;flex-direction:column;gap:14px}.tool-intro,.receiver-heading{margin-bottom:14px}.tool-intro h1,.receiver-heading h1{margin:0;font-size:clamp(40px,8vw,54px);line-height:1;letter-spacing:-.05em}.tool-intro p{margin:14px 0 0;color:var(--secondary);font-size:16px}.hint{color:var(--secondary);font-size:13px}.status-line{min-height:20px;font-family:var(--mono);font-size:12px}.receiver-heading .status-line{margin-top:14px}.status-line.error{padding:11px 13px;color:var(--danger);background:#fff0f1;border-radius:10px;font-weight:600}.mode-picker{display:flex;gap:3px;padding:3px;background:#7676801f;border-radius:12px}.mode-picker label{flex:1}.mode-picker input{position:absolute;opacity:0;pointer-events:none}.mode-picker span{display:block;padding:9px 12px;color:var(--secondary);border-radius:9px;font-size:13px;font-weight:600;text-align:center;cursor:pointer}.mode-picker input:checked+span{color:var(--ink);background:var(--surface);box-shadow:0 1px 4px #0000001a}.mode-picker input:focus-visible+span{outline:3px solid rgba(0,113,227,.35);outline-offset:2px}.file-picker,.demo-picker,.note-composer{width:100%}.file-picker{min-height:104px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:22px;background:var(--surface);border:1px solid rgba(0,0,0,.07);border-radius:18px}.file-picker span{font-weight:600}.file-picker input{max-width:100%;color:var(--secondary)}.file-picker input::file-selector-button{margin-right:10px;padding:9px 15px;color:var(--blue);background:var(--blue-soft);border:0;border-radius:999px;font-weight:600;cursor:pointer}button,a.download{min-height:50px;padding:13px 22px;color:#fff;background:var(--blue);border:0;border-radius:999px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none}button:hover,a.download:hover{background:var(--blue-hover)}button:disabled{opacity:.55;cursor:default}.secondary-button{color:var(--blue);background:var(--surface);border:1px solid var(--line)}.secondary-button:hover{color:var(--blue-hover);background:var(--surface)}.demo-picker{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;background:var(--surface);border-radius:16px;font-weight:600}.demo-buttons{display:flex;flex-wrap:wrap;gap:8px}.demo-buttons button{min-height:40px;padding:8px 14px;font-size:13px}.note-composer{display:flex;flex-direction:column;gap:9px;color:var(--secondary);font-size:13px;font-weight:600}.note-composer textarea{width:100%;min-height:176px;resize:vertical;padding:17px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:16px;outline:none;font:16px/1.55 var(--font)}.note-composer textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px #0071e31a}.note-composer button{align-self:flex-start}.stage{max-width:100%;align-self:center;padding:18px;overflow:hidden;background:#fff;border-radius:18px;box-shadow:0 10px 30px #0000000f;scroll-margin-top:76px}.stage canvas{display:block;image-rendering:pixelated}.capture-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.capture-actions #start{min-width:210px}.preview{position:relative;width:100%;aspect-ratio:16 / 9;max-height:calc(100dvh - 145px);overflow:hidden;background:var(--viewport);border-radius:18px}.preview video{width:100%;height:100%;display:block;object-fit:contain}.transfer-hud{width:100%;padding:2px 2px 0;pointer-events:none}.progress-status{display:flex;justify-content:space-between;flex-wrap:nowrap;gap:14px;margin-top:8px;color:var(--secondary);font:12px/1.35 var(--mono)}.progress-status strong{flex:none;color:var(--ink);white-space:nowrap}.progress-status span{min-width:0;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap}.progress{height:7px;overflow:hidden;background:#76768029;border-radius:999px}.progress>div{height:100%;background:var(--blue);border-radius:inherit;transition:width .25s ease}.progress>div.error{background:#ff453a}#result:empty{display:none}#result{display:flex;flex-direction:column;align-items:center;gap:14px}.done,.failed{font-size:24px;font-weight:700}.done{color:var(--success)}.failed{color:var(--danger)}.note-actions{max-width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}a.download{display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere}img.received{max-width:100%;border-radius:16px}.received-note,.no-signal{width:100%;margin:0;padding:18px;color:var(--ink);background:var(--surface);border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere}.no-signal{color:var(--secondary);white-space:normal;font-size:13px}.no-signal strong{display:block;margin-bottom:8px;color:var(--ink);font-size:14px}.no-signal ul{margin:0;padding-left:18px}.no-signal li+li{margin-top:6px}.text-button{min-height:0;padding:0;color:var(--blue);background:transparent;border:0;border-radius:0;font-size:13px}.text-button:hover{color:var(--blue-hover);background:transparent}.no-signal-dismiss{margin-top:12px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:700px){.home-shell{width:min(100% - 28px,520px);justify-content:flex-start;gap:42px;padding-top:clamp(72px,18vh,140px)}.transfer-grid{grid-template-columns:1fr}.transfer-card{min-height:148px;padding:24px}.send-shell,.receiver-shell{width:calc(100% - 24px);padding-top:34px}.receiver-shell{padding-top:24px}.receiver-heading{margin-bottom:8px}.preview{aspect-ratio:4 / 3;max-height:none}}@media(max-width:420px){.site-header{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.tool-nav a,.tool-nav span{min-width:68px;padding-inline:10px}.hero h1{font-size:42px}.transfer-card{grid-template-columns:auto minmax(0,1fr) auto;gap:14px}.card-icon{width:46px;height:46px}.card-content strong{font-size:26px}.file-picker{align-items:flex-start;flex-direction:column}.capture-actions{flex-direction:column}.capture-actions button{width:100%}}@media(max-height:620px)and (orientation:landscape){.receiver-shell{padding-top:18px}.receiver-heading h1{font-size:34px}.preview{width:auto;height:calc(100dvh - 116px);align-self:center}}
