dialog.camera-playground{box-sizing:border-box;width:min(960px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;overflow:hidden;border:1px solid #c4d5e8;border-radius:12px;background:#fff;color:#24435c;font:16px/1.5 var(--rocode-font-family,Arial,sans-serif);box-shadow:0 20px 70px #18375b30}
dialog.camera-playground[open]{display:flex;flex-direction:column}
.camera-playground::backdrop{background:#17355270;backdrop-filter:blur(3px)}
.camera-playground-heading{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px 0}
.camera-playground-heading h2{margin:0;font-size:23px;line-height:1.3;font-weight:750}
.camera-playground-heading .rocode-brand-label{display:inline-flex;align-items:center;gap:10px}
.camera-playground button{min-height:42px;padding:9px 16px;border:1px solid #4471ed;border-radius:6px;background:#fff;color:#2459c5;font:650 15px/1.4 var(--rocode-font-family,Arial,sans-serif);cursor:pointer;transition:background-color .15s,border-color .15s}
.camera-playground button:hover{background:#edf5ff;border-color:#2459c5}
.camera-playground .camera-playground-close{width:42px;padding:9px;display:grid;place-items:center;border-color:transparent;color:#45637b}
.camera-playground :is(button,select):focus-visible{outline:3px solid #3264e6;outline-offset:3px}
.camera-playground-intro{flex:none;margin:10px 24px 20px;max-width:700px;color:#536f86}
.camera-playground-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 24px 8px}
.camera-playground-choices{display:grid;grid-template-columns:minmax(130px,1fr) minmax(180px,2fr);gap:16px}
.camera-playground-choices label{display:grid;gap:5px;font-size:14px;font-weight:700}
.camera-playground select{width:100%;min-width:0;min-height:42px;padding:8px 12px;border:1px solid #adc6df;border-radius:6px;background:white;color:#24435c;font:600 15px/1.4 var(--rocode-font-family,Arial,sans-serif)}
.camera-playground select:disabled{background:#f1f5f8;color:#657e92}
.camera-playground-camera-hint{margin:9px 0 18px;color:#647c90;font-size:13px}
.camera-playground-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:20px;align-items:start}
.camera-playground-preview{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid #c1d8ee;border-radius:9px;background-color:#eff8ff;background-image:radial-gradient(#cbe4f4 1px,transparent 1px);background-size:12px 12px}
.camera-playground-preview canvas{display:block;width:100%;height:100%}
.camera-playground-preview[data-detected=true]{border-color:#54a075}
.camera-playground-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;color:#53718b;font-size:17px;font-weight:600}
.camera-playground-empty[hidden]{display:none}
.camera-playground-challenge h3{margin:0 0 12px;font-size:20px;line-height:1.35;color:#23435c}
.camera-playground-challenge ol{margin:0;padding-left:24px;font-size:15px;color:#49687f}
.camera-playground-challenge li{padding-left:3px;margin:0 0 9px}
.camera-playground-challenge li::marker{color:#2459c5;font-weight:750}
.camera-playground-result{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:3px;margin-top:18px;padding-top:16px;border-top:1px solid #d4e1ec}
.camera-playground-count{font-size:36px;line-height:1.1;font-weight:750;color:#2459c5}
.camera-playground-count-label{font-size:14px;color:#557088}
.camera-playground-gesture{flex-basis:100%;margin:5px 0 0;color:#287147;font-size:17px;font-weight:750;min-height:26px}
.camera-playground-status{margin:18px 0 12px;padding:10px 13px;border-left:3px solid #6a99cb;background:#f1f7fd;border-radius:0 5px 5px 0;font-size:15px}
.camera-playground-status[data-state=error]{background:#fff4ee;border-color:#c26138;color:#903e23}
.camera-playground-status[data-state=ready]{background:#f1f8f3;border-color:#54a075}
.camera-playground-footer{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:0;padding:12px 24px 16px;border-top:1px solid #d4e1ec;background:#fff;font-size:13px;color:#657c90}
.camera-playground-permission{min-width:0;grid-column:1;grid-row:1}
.camera-playground-done{grid-column:2;grid-row:1}
.camera-playground-note{grid-column:1/-1;grid-row:2}
.camera-playground-footer button{min-width:100px;background:#3264e6;border-color:#3264e6;color:white}
.camera-playground-footer button:hover{background:#2455ce;color:white}
@media(max-width:720px){.camera-playground-layout{grid-template-columns:1fr}.camera-playground-challenge{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}.camera-playground-challenge h3{grid-column:1/-1}.camera-playground-result{margin-top:0;padding-top:0;border-top:0}.camera-playground-heading h2{font-size:20px}}
@media(max-width:450px){.camera-playground-heading,.camera-playground-body,.camera-playground-footer{padding-left:16px;padding-right:16px}.camera-playground-intro{margin-left:16px;margin-right:16px}.camera-playground-choices,.camera-playground-challenge{grid-template-columns:1fr}.camera-playground-result{padding-top:12px;border-top:1px solid #d4e1ec}.camera-playground-permission{grid-column:1/-1}.camera-playground-done{grid-row:2}.camera-playground-note{grid-column:1;grid-row:2}}
@media(prefers-reduced-motion:reduce){.camera-playground button{transition:none}.camera-playground::backdrop{backdrop-filter:none}}