.code-workspace{max-width:1080px;margin:24px auto;padding:28px;border:1px solid #dae7ed;border-radius:22px;background:#fff;box-sizing:border-box;scroll-margin-top:100px}.code-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid #e0e9ed}.code-heading h2{font-size:22px;margin:0}.code-heading span{font-size:11px;color:#617986}.code-drop label,.code-field label,.code-text-label{display:block;font-size:13px;font-weight:700;margin-bottom:9px}.code-field select{width:100%;padding:12px;border:1px solid #d3e2e8;border-radius:10px;font:inherit;font-size:14px;background:#fcfefe}.code-drop{padding:25px;border:2px dashed #b5dce5;border-radius:14px;background:#f1fafd;margin:22px 0}.code-drop label{font-size:19px;color:#1d6476}.code-drop p{font-size:13px;line-height:1.7;color:#5b7886}.code-drop input{max-width:100%;font:inherit;font-size:13px}.code-drop.drag-over{background:#dff3f8;border-color:#087d96}.code-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:19px 0}.code-download,.code-workspace button{font:inherit;font-size:13px;font-weight:650;padding:11px 15px;min-height:43px;border:1px solid #cbdfe8;border-radius:10px;background:#f2f8fa;color:#155a70;cursor:pointer;text-decoration:none}.code-workspace button.code-primary{background:#087d96;border-color:#087d96;color:#fff}.code-workspace button:disabled{opacity:.5;cursor:not-allowed}.code-camera{background:#132d38;border-radius:14px;padding:14px;margin:20px 0;color:#fff}.code-camera video{width:100%;max-height:440px;display:block;object-fit:contain}.code-camera p{font-size:12px;text-align:center;color:#d8edf3}.code-preview{display:block;max-width:100%;max-height:380px;width:auto;height:auto;margin:20px auto;border:1px solid #d9e6ec;border-radius:12px;background:#f4f8fa}.code-output{margin-top:25px;border:1px solid #bfdde7;background:#f7fcfd;border-radius:14px;padding:22px}.code-output h3{margin-top:0}.code-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.code-summary>div{min-width:0}.code-summary dt{font-size:11px;color:#5e7886;margin-bottom:7px}.code-summary dd{margin:0;font-size:13px;font-weight:700;overflow-wrap:anywhere}#code-text{width:100%;min-height:170px;font:13px/1.75 ui-monospace,Consolas,monospace;border:1px solid #ccdee6;border-radius:10px;padding:14px;resize:vertical;background:#fff;white-space:pre-wrap;overflow-wrap:anywhere}.code-art{padding:25px;background:#eff9fc;border:1px solid #bfdee7;border-radius:21px;transform:rotate(3deg);text-align:center;box-shadow:0 14px 30px #1d617310}.code-art>span{font-size:8px;letter-spacing:1px;color:#518292;font-weight:700}.code-art-qr{position:relative;width:150px;height:150px;margin:23px auto;background:repeating-conic-gradient(#126b80 0 25%,transparent 0 50%) 0 0/24px 24px;border:9px solid #fff;box-sizing:border-box}.code-art-qr i{position:absolute;width:43px;height:43px;border:8px solid #126b80;background:#fff;box-shadow:0 0 0 4px #fff}.code-art-qr i:first-child{top:0;left:0}.code-art-qr i:nth-child(2){top:0;right:0}.code-art-qr i:nth-child(3){bottom:0;left:0}.code-art-qr b{position:absolute;right:6px;bottom:3px;background:#fff;color:#126b80;font-size:28px}.code-art-lines{width:145px;height:40px;margin:18px auto;background:repeating-linear-gradient(90deg,#126b80 0 3px,transparent 3px 6px,#126b80 6px 8px,transparent 8px 12px)}.code-art p{font-size:11px;color:#5e8491}@media(max-width:720px){.code-workspace{margin:20px 15px;padding:18px;scroll-margin-top:170px}.code-heading{align-items:flex-start;flex-direction:column;gap:10px}.code-drop{padding:20px 15px}.code-output{padding:17px}.code-summary{grid-template-columns:1fr}.code-art{max-width:290px;justify-self:center;width:100%;margin-top:15px}}