.playground-page{flex-direction:column;gap:16px;max-width:100%;display:flex;overflow:hidden}@media (min-width:640px){.playground-page{height:100%}}.playground-header{text-align:center;padding:12px 16px}.playground-header h2{margin-bottom:0}.playground-header .playground-description{opacity:.8;margin:4px 0 0;font-size:.9em}.playground-body{flex-direction:column;gap:16px;display:flex}@media (min-width:640px){.playground-body{flex-direction:row;flex:1;gap:20px;min-height:300px}}.playground-controls{border:3px solid var(--text-bg);border-radius:var(--border-radius);flex-direction:column;gap:12px;margin-bottom:20px;padding:12px;transition:background-color 3s;display:flex}@media (min-width:640px){.playground-controls{flex:0 0 280px;min-width:0;min-height:0;padding-right:10px;overflow-x:hidden;overflow-y:auto}}.playground-preview{border-radius:var(--border-radius);background-color:color-mix(in srgb,var(--text-bg),transparent 60%);order:-1;margin-bottom:20px;transition:background-color 3s;position:relative}@media (min-width:640px){.playground-preview{flex-direction:column;flex:1;order:0;min-height:0;display:flex;overflow:hidden}}.playground-preview canvas{border-radius:var(--border-radius);max-width:100%;height:auto;max-height:100%;display:block}.canvas-viewport{touch-action:none;justify-content:safe center;align-items:safe center;display:flex;overflow:auto}@media (min-width:640px){.canvas-viewport{flex:1;min-height:0}}.playground-placeholder{aspect-ratio:4/3;border:2px dashed var(--text-color);border-radius:var(--border-radius);opacity:.4;justify-content:center;align-items:center;display:flex}.playground-placeholder p{text-align:center;margin:0;padding:20px}.playground-processing{opacity:.6;background-color:var(--text-bg);border-radius:var(--border-radius);margin:0;padding:5px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.playground-processing:empty{display:none}.playground-image-sources{flex-direction:column;gap:8px;display:flex}.playground-btn{background-color:var(--text-bg);color:var(--text-color);border-radius:var(--border-radius);cursor:pointer;font-family:var(--font-cormorant);opacity:.8;border:none;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:8px 12px;font-weight:700;transition:opacity .3s,background-color 3s;display:flex}.playground-btn:hover{opacity:1}.playground-btn:focus-visible{outline:3px solid var(--text-color);outline-offset:2px}.playground-btn:disabled{opacity:.4;cursor:not-allowed}.playground-gallery-label{opacity:.6;margin:4px 0 0;font-size:.85em}.playground-gallery{gap:6px;padding-bottom:4px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000 100%)}.playground-thumb{border-radius:calc(var(--border-radius)/2);cursor:pointer;opacity:.6;background:0 0;border:2px solid #0000;flex-shrink:0;width:48px;height:48px;padding:0;transition:opacity .3s,border-color .3s;overflow:hidden}.playground-thumb:hover{opacity:1}.playground-thumb.active{opacity:1;border-color:var(--text-color)}.playground-thumb img{object-fit:cover;width:100%;height:100%;display:block}.playground-sliders{grid-template-columns:1fr 1fr;gap:6px 10px;display:grid}.playground-sliders label{flex-direction:column;grid-column:1/-1;gap:3px;min-width:0;font-size:.85em;display:flex}.playground-sliders span{white-space:nowrap}.playground-sliders input[type=range]{width:100%;min-width:0;accent-color:var(--text-color)}.playground-sliders select{border-radius:calc(var(--border-radius)/2);background-color:var(--text-bg);min-width:0;color:var(--text-color);font-family:var(--font-cormorant);cursor:pointer;border:none;flex:1;padding:4px 6px;font-size:.9em;transition:background-color 3s}.playground-mode-toggle{gap:4px;display:flex}.playground-mode-btn{flex:1}.playground-mode-btn.active{opacity:1;box-shadow:inset 0 0 0 2px var(--text-color)}.playground-tool-toggle{gap:4px;display:flex}.playground-tool-btn{flex:1}.playground-tool-btn.active{opacity:1;box-shadow:inset 0 0 0 2px var(--text-color)}canvas.brush-mode{cursor:crosshair;touch-action:none}.brush-cursor{pointer-events:none;z-index:9999;border:1.5px solid #00000080;border-radius:50%;display:none;position:fixed;transform:translateZ(0);box-shadow:0 0 0 1px #fff9}.playground-download-btn{font-size:.85em}.playground-brush-controls{flex-direction:column;gap:8px;display:flex}.playground-brush-controls label{flex-direction:row;align-items:center;gap:6px;min-width:0;font-size:.85em;display:flex}.playground-brush-controls span{white-space:nowrap;flex-shrink:0}.playground-brush-controls input[type=range]{min-width:0;accent-color:var(--text-color);flex:1}.playground-icon-btn{min-width:44px;padding:8px 10px}.playground-icon-btn.active{opacity:1;box-shadow:inset 0 0 0 2px var(--text-color)}.playground-canvas-overlay{z-index:1;gap:4px;display:flex;position:absolute;bottom:8px;left:8px}.playground-bottom-actions{gap:4px;display:flex}.playground-bottom-actions button{flex:1}.playground-zoom-controls{z-index:1;gap:2px;display:flex;position:absolute;bottom:8px;right:8px}.playground-zoom-controls .playground-btn{padding:4px 8px;font-size:.78em}.playground-zoom-level{font-variant-numeric:tabular-nums;min-width:42px}.modal-overlay{z-index:1000;background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal-panel{background:var(--bg-color);border:1px solid var(--text-bg);border-radius:var(--border-radius);flex-direction:column;gap:16px;width:calc(100% - 32px);max-width:400px;padding:24px;display:flex}.modal-panel h3{margin:0}.size-inputs{gap:12px;display:flex}.size-inputs label{flex-direction:column;flex:1;gap:4px;font-size:.85em;display:flex}.size-input-row{align-items:center;gap:4px;display:flex}.size-input-row input[type=number]{border-radius:calc(var(--border-radius)/2);background-color:var(--text-bg);min-width:0;color:var(--text-color);font-family:var(--font-cormorant);border:none;flex:1;padding:6px 8px;font-size:1em;transition:background-color 3s}.size-input-row span{opacity:.6;white-space:nowrap;font-size:.85em}.size-lock{cursor:pointer;align-items:center;gap:8px;font-size:.85em;display:flex}.size-lock input[type=checkbox]{accent-color:var(--text-color);cursor:pointer;flex-shrink:0;width:18px;height:18px}.pan-section{flex-direction:column;gap:8px;display:flex}.pan-label{opacity:.65;margin:0;font-size:.8em}.modal-label{margin:0;font-size:.85em}.pan-preview{border-radius:calc(var(--border-radius)/2);border:1px solid var(--text-color);touch-action:none;opacity:.9;position:relative;overflow:hidden}.pan-preview:active{cursor:grabbing!important}.pan-preview img{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;display:block}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.tooltip-trigger{cursor:help;opacity:.4;vertical-align:middle;flex-shrink:0;align-items:center;margin-left:4px;transition:opacity .2s;display:inline-flex}.tooltip-trigger:hover{opacity:.75}.tooltip-box{background:var(--bg-color);border:1px solid var(--text-bg);border-radius:calc(var(--border-radius)/2);z-index:10000;pointer-events:none;white-space:normal;text-align:left;width:200px;color:var(--text-color);padding:6px 10px;font-size:.875em;font-weight:400;line-height:1.5;position:fixed;transform:translateY(calc(-100% - 8px))}