:root{--pad:clamp(16px, 3vw, 64px);--dost-w:calc(100dvw - 2 * var(--pad));--dost-h:calc(100dvh - 2 * var(--pad))}html,body{background:#000;width:100%;min-height:100%;margin:0}#root{box-sizing:border-box;width:100%;height:100dvh;padding:var(--pad);grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;display:grid}.stos{flex-direction:column;align-items:center;gap:clamp(20px,6dvh,64px);max-width:100%;max-height:100%;display:flex}.napis,.znak{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}.napis{width:auto;height:auto;max-width:min(var(--dost-w), 720px);max-height:calc(var(--dost-h) * .22);display:block}.znak{width:auto;height:auto;max-width:min(calc(var(--dost-w) / 2), 470px);max-height:min(calc(var(--dost-h) / 2), 867px);display:block}.znak-box{line-height:0;display:block;position:relative}.znak-canvas{touch-action:pinch-zoom;cursor:grab;opacity:0;width:100%;height:100%;transition:opacity .32s linear;display:block;position:fixed;inset:0}.znak-canvas:active{cursor:grabbing}.znak-box--live .znak-canvas{opacity:1}.znak-box--live .znak{opacity:0;transition:opacity .32s linear}@media (prefers-reduced-motion:reduce){.znak-canvas,.znak-box--live .znak{transition:none}}