:root{color-scheme:light;--paper:#f5f0e4;--ink:#354b39;--muted:#74836b;--line:#d8ddca;--gold:#ad945b;font-family:"Microsoft YaHei","PingFang SC",sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--paper);color:var(--ink)}[hidden]{display:none!important}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}#stage,#canvas-host{position:absolute;inset:0;overflow:hidden}#stage>video{position:absolute;max-width:none;max-height:none;z-index:0}#canvas-host{z-index:1;pointer-events:none}#canvas-host canvas{display:block;background:transparent;width:100%;height:100%}.topbar{position:absolute;z-index:5;inset:max(18px,env(safe-area-inset-top)) 22px auto;display:flex;align-items:center;justify-content:space-between;gap:14px;pointer-events:none}.topbar>*{pointer-events:auto}.brand{font-family:"STKaiti","KaiTi",serif;font-size:23px;letter-spacing:.15em}.brand small{display:block;font-family:"Microsoft YaHei",sans-serif;letter-spacing:.18em;font-size:9px;margin-top:6px;color:var(--muted)}.quiet{border:1px solid var(--line);background:rgba(249,246,237,.88);color:var(--ink);padding:9px 13px;font-size:11px;border-radius:24px}.welcome{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-48%);width:min(340px,calc(100% - 52px));max-height:calc(100dvh - 120px);overflow-y:auto;text-align:left;scrollbar-width:thin}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--muted);margin:0 0 15px}.welcome h1{font-family:"STKaiti","KaiTi","Songti SC",serif;font-size:52px;font-weight:400;letter-spacing:.08em;line-height:1.15;margin:0 0 17px}.lead{font-size:13px;line-height:1.9;color:#6b795f;margin:0 0 16px}.card-guide{display:flex;align-items:center;gap:15px;margin:0 0 18px}.card-guide img{width:49px;height:98px;object-fit:cover;border:1px solid #ded6c4;box-shadow:3px 5px 12px #8e87681c}.card-guide figcaption{font-size:11px;line-height:1.8;color:var(--muted);max-width:160px}.primary{width:100%;background:#425f47;color:#fffdf3;border:0;border-radius:6px;min-height:48px;letter-spacing:.12em;font-size:14px}.note{font-size:10px;color:var(--muted);line-height:1.7;margin:10px 0;text-align:center}.welcome-links{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:6px 2px}.text-button{padding:0;border:0;background:none;color:var(--ink);font-size:11px}#share-panel{text-align:center;padding:14px 0 4px}#qr-code{background:#fff;display:inline-block;line-height:0;padding:12px}#qr-code svg{width:128px;height:128px}.error-panel{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,calc(100% - 48px));padding:27px;background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 70px #1d35282a}.error-panel h2{font-size:21px;font-weight:400;margin:0 0 14px}.error-panel p:not(.eyebrow){font-size:13px;line-height:1.8;margin:0 0 20px}.error-panel>a{display:block;text-align:center;font-size:11px;margin:17px 0 0}.status{position:absolute;z-index:4;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:10px 17px;border-radius:28px;background:#f5f0e4e8;border:1px solid #e0ddcc;color:var(--ink);font-size:11px;max-width:calc(100% - 44px);text-align:center;white-space:normal}.scan-guide{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.scan-guide i{display:block;width:170px;height:270px;border:1px solid #f5f0e4b3;border-radius:7px;box-shadow:0 0 0 1px #3b594a2b}.scan-guide span{display:block;color:#fffdf2;text-shadow:0 1px 8px #000;font-size:11px;margin-top:15px;white-space:nowrap}.camera-active .brand{color:#f7f1dd;text-shadow:0 1px 8px #233f2c}.camera-active .brand small{color:#fffce8}.preview-mode #canvas-host{pointer-events:auto;touch-action:none}.preview-caption{position:absolute;left:35px;top:100px;z-index:2;pointer-events:none}.preview-caption h1{font-family:"STKaiti","KaiTi",serif;font-size:25px;font-weight:400;margin:0 0 10px;letter-spacing:.08em}.preview-caption p{font-size:11px;color:var(--muted);margin:0}.preview-controls{position:absolute;z-index:4;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:12px 16px;background:#f8f4e9ef;border:1px solid #e0ddcd;border-radius:28px;max-width:calc(100% - 24px);width:570px}.preview-controls .quiet{border:0;padding:5px;white-space:nowrap}.preview-controls input{min-width:30px;flex:1;accent-color:#8c9b79}.preview-controls output{font-size:10px;color:var(--muted);white-space:nowrap}.preview-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;z-index:3;background:var(--paper)}@media(min-width:820px){.welcome{width:380px}.welcome h1{font-size:62px}.card-guide img{width:54px;height:108px}.lead{font-size:14px}}@media(max-height:700px){.welcome{top:52%;max-height:calc(100dvh - 100px)}.welcome h1{font-size:40px;margin-bottom:12px}.eyebrow{margin-bottom:10px}.lead{margin-bottom:10px}.card-guide img{width:35px;height:70px}.card-guide{margin-bottom:12px}.primary{min-height:44px}.welcome-links{padding-top:0}}@media(max-width:480px){.topbar{left:19px;right:19px}.preview-caption{left:24px;top:94px}.preview-caption h1{font-size:21px}.preview-caption p{font-size:10px}.preview-controls{gap:9px;padding:10px 12px}.preview-controls output{font-size:9px}}
body[data-card="landscape"] .card-guide img {
  width: min(172px, 55%);
  height: auto;
  aspect-ratio: 4 / 3;
}
body[data-card="landscape"] .scan-guide i {
  width: min(76vw, 300px);
  height: auto;
  aspect-ratio: 4 / 3;
}
body[data-card="watercolor"] .card-guide img {
  width: min(172px, 55%);
  height: auto;
  aspect-ratio: 148 / 100;
}
body[data-card="watercolor"] .scan-guide i {
  width: min(76vw, 300px);
  height: auto;
  aspect-ratio: 148 / 100;
}