:root{font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif;color:#e2f9f4;background:#102b38;--mint:#78e5d3}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;border:0;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #ffe092;outline-offset:3px}[hidden]{display:none!important}.stage{position:relative;width:100%;height:100svh;min-height:300px;overflow:hidden;isolation:isolate;background:#122f3c;background-image:radial-gradient(#68909d28 1px,transparent 1px);background-size:24px 24px}.stage:after{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 65% 55%,#28657666,transparent 65%)}#camera{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;display:none}#camera.on{display:block}#camera.mirror{transform:scaleX(-1)}#canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.camera-controls{position:absolute;z-index:6;top:calc(env(safe-area-inset-top) + 12px);right:calc(env(safe-area-inset-right) + 12px);display:flex;gap:6px;align-items:center}.toolbar-button,.camera-button{border:1px solid #c4efea24;background:#071e2ee8;border-radius:9px;padding:10px 12px;font-size:13px;font-weight:650;min-height:41px;white-space:nowrap}.toolbar-button[aria-pressed=true]{color:var(--mint);border-color:#78e5d355}.camera-button{background:var(--mint);color:#102b38}.periodic-shell{position:absolute;z-index:5;top:calc(env(safe-area-inset-top) + 66px);left:calc(env(safe-area-inset-left) + 12px);width:fit-content;max-width:calc(100% - 24px);padding:8px 10px;background:#071e2eef;border:1px solid #b1e1dc35;backdrop-filter:blur(10px);border-radius:12px;color:#e2f8f5;box-shadow:0 8px 26px #071b2b20}.periodic-shell.expanded{width:min(860px,calc(100% - 24px))}.table-heading{display:flex;align-items:center;gap:20px;min-height:34px}.table-heading strong{font-size:14px}.table-heading button{font-size:13px;font-weight:650;color:#9be7d8;background:#ffffff10;border:1px solid #9de6dd25;border-radius:7px;padding:7px 10px;margin-left:auto;min-height:34px;touch-action:manipulation}.table-scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:#698d94 transparent;max-height:calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 210px);margin-top:10px;overscroll-behavior:contain;touch-action:pan-x pan-y}.periodic-table{display:grid;min-width:822px;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(9,45px);gap:3px}.periodic-cell{min-width:0;min-height:45px;background:#dff9f012;border:1px solid #a1bcca25;border-radius:5px;padding:3px 0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:17px;font-weight:750;color:var(--element-color,#b5d5df);line-height:1.1;touch-action:pan-x pan-y}.periodic-cell small{font-size:10px;font-weight:450;line-height:1.1;opacity:.75;margin-bottom:3px}.periodic-cell:hover,.periodic-cell.pointed{background:#83dfbc44;border-color:#a4f9e3;color:white}.stage-result{position:absolute;z-index:4;bottom:calc(env(safe-area-inset-bottom) + var(--controls-height,54px) + 28px);left:12px;max-width:calc(100% - 124px);display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:10px 12px;background:#051927d9;border:1px solid #bcf0de25;border-radius:10px;touch-action:none;cursor:grab;user-select:none}.stage-result:active{cursor:grabbing}#stage-formula{font-size:21px;font-weight:800;overflow-wrap:anywhere;max-width:100%}#stage-material{font-size:12px;overflow-wrap:anywhere}.lab-controls{position:absolute;z-index:4;bottom:calc(env(safe-area-inset-bottom) + 12px);left:12px;display:flex;align-items:center;gap:12px;padding:7px 9px;background:#071d2fe3;backdrop-filter:blur(10px);border:1px solid #a5cbd32d;border-radius:12px;color:#def1f1}.bond-picker{display:flex;align-items:center;gap:4px}.bond-picker>span{font-size:12px;margin-right:5px}.bond-picker button{width:35px;height:36px;border-radius:8px;background:#ffffff0d;font-size:15px;font-weight:750;color:#cde9e9;border:1px solid #ffffff15}.bond-picker button.selected{background:var(--mint);color:#102b38;border-color:var(--mint)}.stage-button{font-size:12px;font-weight:650;padding:9px 10px;min-height:36px;border-radius:8px;background:#ffffff13;color:#dceded;white-space:nowrap}.trash-zone{position:absolute;right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + var(--controls-height,54px) + 24px);z-index:4;width:96px;min-height:100px;padding:8px 5px;border:1px dashed #f6b49c66;border-radius:14px;background:#091e2bd9;display:flex;align-items:center;flex-direction:column;gap:3px;color:#fac4b0;text-align:center;pointer-events:none}.trash-zone strong{font-size:13px}.trash-zone>span{font-size:11px;line-height:1.4;min-height:16px}.trash-ring{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ffb492 var(--trash-progress,0%),#ffffff10 0)}.trash-ring svg{width:29px;height:29px;padding:4px;border-radius:50%;background:#142d37;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.trash-zone.waiting{color:#fff0c5;border-style:solid;border-color:#ffc79c;background:#734031ee;box-shadow:0 0 22px #ffb98c25}.trash-zone.done{color:#8ce7cf;border-color:#8ce7cf}.hand-cursor{position:absolute;z-index:7;left:0;top:0;width:34px;height:34px;border:3px solid #76efcf;border-radius:50%;background:#76efcf25;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 10px #0004;color:#76efcf}.hand-cursor.second{border-color:#d4b4ff;background:#d4b4ff25;color:#d4b4ff}.hand-cursor.pinched{width:25px;height:25px;background:#b0ffff55}.hand-cursor span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:700;text-shadow:0 1px 5px #000}.camera-message{position:absolute;z-index:8;top:40%;left:50%;transform:translateX(-50%);width:min(370px,calc(100% - 26px));padding:20px;border-radius:15px;background:#fffffff5;color:#102b38;box-shadow:0 8px 35px #0004}.camera-message strong{font-size:16px}.camera-message p{font-size:14px;line-height:1.8}.camera-message button{font-size:14px;padding:10px 13px;background:#087f75;color:white;border-radius:9px;margin-right:7px}.camera-message .quiet{background:#e6eff0;color:#102b38}.toast{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 16px);left:50%;transform:translateX(-50%);z-index:20;background:#102b38;color:white;padding:11px 16px;border-radius:10px;font-size:13px;line-height:1.6;max-width:calc(100% - 24px);width:max-content;text-align:center;pointer-events:none}@media(max-width:359px){.toolbar-button,.camera-button{font-size:12px;padding:10px 9px}.camera-controls{gap:5px}.lab-controls{gap:8px}.bond-picker button{width:32px}}

@media(max-width:800px){.periodic-table{min-width:0;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:52px;gap:4px}.periodic-cell{grid-area:auto!important;min-height:52px}}@media(max-width:359px){.periodic-table{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* A compact support widget above the bin; it disappears during model manipulation. */
.support-link,#bmc-wbtn{right:calc(env(safe-area-inset-right) + 18px)!important;bottom:calc(env(safe-area-inset-bottom) + var(--controls-height,54px) + 148px)!important}.support-link{position:fixed;z-index:9;width:64px;height:64px;display:grid;place-items:center;background:#ffdd00;border-radius:50%;font-size:29px;text-decoration:none;box-shadow:0 4px 15px #0003}.support-link:focus-visible,#bmc-wbtn:focus-visible{outline:3px solid #fff;outline-offset:4px}body.table-open:not(.support-open) .support-link,body.table-open:not(.support-open) #bmc-wbtn,body.lab-interacting .support-link,body.lab-interacting #bmc-wbtn{visibility:hidden;pointer-events:none}body.support-open .stage{pointer-events:none}
@media(min-width:480px){#bmc-iframe{top:calc(env(safe-area-inset-top) + 12px)!important;bottom:calc(env(safe-area-inset-bottom) + 12px)!important;right:calc(env(safe-area-inset-right) + 94px)!important;width:min(420px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 112px))!important;max-width:none!important;height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)!important;min-height:0!important;max-height:none!important}}@media(max-width:479px){#bmc-iframe{left:0!important;right:0!important;top:0!important;bottom:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important}}

body.support-open #bmc-close-btn{visibility:visible!important;top:calc(env(safe-area-inset-top) + 16px)!important;right:calc(env(safe-area-inset-right) + 16px)!important;background:#fff;border:1px solid #ddd}#bmc-close-btn:focus-visible{outline:3px solid #78e5d3;outline-offset:3px}