:root{--color-bg: #0000ff;--color-text: #ffffff;--color-border-1: #ff0000;--color-border-2: #00530f;--color-border-corner: var(--color-border-1);--color-headline: #ffffff;--message-skew: 0deg;--message-scale: 1;--heading-font-weight: 400;--heading-font-weight-bold: 700;--heading-line-height: 1;--heading-font-size: 10vw;--border-size-base: 0px;--border-size: var(--border-size-base);--border-animation-duration: 2s;--ui-bg: #ffffff;--ui-bg-muted: #f5f5f5;--ui-color: #555555;--ui-strong: #111111;--ui-muted: #888888;--ui-text-color: var(--ui-color);--ui-heading-color: var(--ui-strong);--ui-border-color: var(--ui-color)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;position:fixed;overscroll-behavior:none;-webkit-overflow-scrolling:none;touch-action:none}body{position:relative;font-family:var(--body-font-family);font-weight:var(--body-font-weight);font-style:normal;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-bg);color:var(--color-text);padding:var(--border-size)}.checker-border{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.app,.checker-border{transition:opacity .2s ease}html.card-loading .app,html.card-loading .checker-border{opacity:0;visibility:hidden;pointer-events:none}html.card-ready .app,html.card-ready .checker-border{opacity:1;visibility:visible}.checker-border .dash{x:calc(var(--border-size) / 2);y:calc(var(--border-size) / 2);width:calc(100% - var(--border-size));height:calc(100% - var(--border-size));fill:none;stroke-width:var(--border-size);stroke-linecap:butt;stroke-dasharray:var(--border-dash-size) var(--border-dash-size)}.checker-border .corner{fill:var(--color-border-corner);stroke:none;width:var(--border-size);height:var(--border-size)}.checker-border .corner.top-left{x:0;y:0}.checker-border .corner.top-right{x:calc(100% - var(--border-size));y:0}.checker-border .corner.bottom-left{x:0;y:calc(100% - var(--border-size))}.checker-border .corner.bottom-right{x:calc(100% - var(--border-size));y:calc(100% - var(--border-size))}.checker-border .dash:nth-of-type(1){stroke:var(--color-border-1);stroke-dashoffset:0;animation:marchFirst var(--border-animation-duration) linear infinite}.checker-border .dash:nth-of-type(2){stroke:var(--color-border-2);stroke-dashoffset:var(--border-dash-size);animation:marchSecond var(--border-animation-duration) linear infinite}@keyframes marchFirst{to{stroke-dashoffset:calc(-1 * (var(--border-dash-size) * 2))}}@keyframes marchSecond{to{stroke-dashoffset:calc(-1 * var(--border-dash-size))}}@media(prefers-reduced-motion:reduce){.checker-border .dash{animation:none}}.app{width:100%;height:100%;position:relative;background:var(--color-bg);color:var(--color-text)}#canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;touch-action:none}.content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:100%;z-index:2;text-align:center;pointer-events:none}.instruction-message{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);margin-top:0;white-space:nowrap;z-index:2;pointer-events:none;background:var(--color-bg);padding:.1rem .5rem;opacity:0;transition:opacity .2s ease}html.intro-ui-visible .instruction-message{opacity:1}h1#message{font-family:var(--heading-font-family);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height);color:var(--color-headline);font-size:calc(var(--heading-font-size) * var(--message-scale));overflow-wrap:anywhere;white-space:pre-wrap;display:inline-block;transform:skewY(var(--message-skew));opacity:0;transition:opacity .25s ease}html.intro-message-visible h1#message{opacity:1}.message-input-hidden{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}.hidden{display:none}:root{--ui-icon-size: 50%;--ui-border-radius: 5px;--ui-border-size: 2px;--ui-font-family: "Montserrat", sans-serif;--ui-font-weight: 400;--ui-font-weight-bold: 700;--ui-space-1: .35rem;--ui-space-2: .65rem;--ui-space-3: 1rem;--ui-space-4: 1.5rem;--ui-text-size: 1rem;--ui-text-small: .9rem;--ui-line-height: 1.6;--ui-heading-1-size: 1.75rem;--ui-heading-2-size: 1.35rem;--ui-heading-3-size: 1.05rem}.ui-text{font-family:var(--ui-font-family);font-weight:var(--ui-font-weight);font-size:1rem}button{font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-bold);font-size:1rem;background:var(--ui-strong);color:var(--ui-bg);border:var(--ui-border-size) solid var(--ui-border-color);border-radius:var(--ui-border-radius);padding:.75rem 1.5rem;cursor:pointer;box-shadow:none;touch-action:manipulation}.action-buttons{position:absolute;top:clamp(.5rem,2vw,1.5rem);right:clamp(.5rem,2vw,1.5rem);display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;z-index:3;opacity:0;transition:opacity .2s ease}html.intro-ui-visible .action-buttons{opacity:1}.action-buttons .ribbon,.action-buttons .share-btn{position:static;padding:0}.info-btn,.settings-btn,.share-btn,.keyboard-btn{display:none;width:2.5rem;height:2.5rem;background:var(--ui-bg);color:var(--ui-color);font-size:1.2rem;font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-bold);border-radius:50%;box-shadow:none;padding:0}.keyboard-btn{position:absolute;bottom:clamp(.5rem,2vw,1.5rem);right:clamp(.5rem,2vw,1.5rem);z-index:3;opacity:0;transition:opacity .2s ease}html.intro-ui-visible .keyboard-btn{opacity:1}@media(hover:none)and (pointer:coarse)and (max-width:768px){[data-mode=edit] button.keyboard-btn{display:inline-flex}}button.icon-btn:not(.keyboard-btn){align-items:center;justify-content:center;transform:scale(1);transition:transform .2s ease}button.icon-btn:hover{transform:scale(1.2)}.icon-btn svg{width:var(--ui-icon-size);height:var(--ui-icon-size);display:block;margin:auto;fill:currentColor}[data-mode=edit] .info-btn,[data-mode=view] .info-btn,[data-mode=edit] .settings-btn,[data-mode=edit] .share-btn{display:inline-flex}[data-mode=view] .settings-btn,[data-mode=view] .share-btn,[data-mode=view] .instruction-message{display:none}[data-mode=edit] .instruction-message{display:block}.ribbon{position:absolute}.hidden{display:none!important}.overlay.hidden{display:flex!important}.overlay{font-family:var(--ui-font-family);font-weight:var(--ui-font-weight);position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,visibility 0s linear 0s;overflow:hidden;overscroll-behavior:none;touch-action:none}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s linear .15s}.overlay-content{background:var(--ui-bg);padding:2rem;max-width:520px;width:90%;max-height:85vh;max-height:85dvh;color:var(--ui-text-color);position:relative;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;border-radius:var(--ui-border-radius);box-shadow:none;opacity:1;transform:scale(1);transition:opacity .25s ease,transform .25s ease;display:flex;flex-direction:column;gap:var(--ui-space-3)}.overlay.hidden .overlay-content{opacity:0;transform:scale(.97)}.overlay-content h1,.overlay-content h2,.overlay-content h3,.overlay-content h4{font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-bold);color:var(--ui-heading-color);line-height:1.25;margin:0;max-width:calc(100% - 2rem)}.overlay-content h1{font-size:var(--ui-heading-1-size)}.overlay-content h2{font-size:var(--ui-heading-2-size)}.overlay-content h3{font-size:var(--ui-heading-3-size)}.overlay-content p,.overlay-content li{font-family:var(--ui-font-family);font-weight:var(--ui-font-weight);font-size:var(--ui-text-size);line-height:var(--ui-line-height);color:var(--ui-text-color)}.overlay-content p{margin:0}.overlay-content ul{margin:0;padding-left:1.25rem;color:var(--ui-text-color);display:flex;flex-direction:column;gap:var(--ui-space-1)}.overlay-content li{margin:0}.stack{display:flex;flex-direction:column;gap:var(--ui-space-2)}.section{display:flex;flex-direction:column;gap:var(--ui-space-1)}.text-small,.overlay-content .text-small,p.text-small{font-size:var(--ui-text-small);line-height:1.4}.text-muted{color:var(--ui-muted)}@media(max-width:640px){.overlay-content{padding:1.25rem;width:92%;gap:var(--ui-space-2)}.field{gap:.3rem}.field textarea,.field input[type=text]{padding:.65rem}}.overlay-content hr{margin:1.5rem 0;border:none;border-top:1px solid var(--ui-border-color)}.field{display:flex;flex-direction:column;gap:var(--ui-space-1);margin:0}.field .field-label,.field label{font-weight:var(--ui-font-weight-bold);color:var(--ui-heading-color)}.field textarea,.field input[type=text]{font-family:var(--ui-font-family);font-weight:var(--ui-font-weight);width:100%;padding:.75rem;border:var(--ui-border-size) solid var(--ui-border-color);border-radius:var(--ui-border-radius);font-size:1rem;background:var(--ui-bg);color:var(--ui-text-color);touch-action:manipulation}.field textarea{min-height:90px;resize:none}.field textarea::placeholder,.field input[type=text]::placeholder{color:var(--ui-muted);opacity:1}.overlay-content p.helper-text{margin:0;font-size:var(--ui-text-small);color:var(--ui-muted);line-height:1.4}.settings-overlay-content{max-width:520px}.theme-options{display:flex;width:100%}.theme-option{position:relative;flex:1;display:inline-flex;align-items:stretch;border:var(--ui-border-size) solid var(--ui-border-color);border-left:none;border-radius:0;background:var(--ui-bg);color:var(--ui-heading-color);padding:0;overflow:hidden}.theme-option input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.theme-option span{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:.65rem .75rem;transition:background .2s ease,color .2s ease,border-color .2s ease}.theme-option:first-child{border-top-left-radius:var(--ui-border-radius);border-bottom-left-radius:var(--ui-border-radius);border-left:var(--ui-border-size) solid var(--ui-border-color)}.theme-option:last-child{border-top-right-radius:var(--ui-border-radius);border-bottom-right-radius:var(--ui-border-radius)}.theme-option input:checked+span{background:var(--ui-strong);color:var(--ui-bg)}.range-row{display:flex;align-items:center;border-radius:var(--ui-border-radius);background:var(--ui-strong)}.range-row input[type=range]{position:relative;flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:2.75rem;background:var(--ui-bg);border:none;border-radius:var(--ui-border-radius);padding:0;cursor:pointer;touch-action:none;box-shadow:none;-webkit-box-shadow:none}.range-row input[type=range]:before{content:"";position:absolute;border:var(--ui-border-size) solid var(--ui-border-color);border-radius:var(--ui-border-radius);width:calc(100% - var(--ui-border-size) * 2);height:calc(100% - var(--ui-border-size) * 2);pointer-events:none}.range-row input[type=range]::-webkit-slider-runnable-track{height:100%;background:var(--ui-bg);border-radius:var(--ui-border-radius);box-shadow:none;-webkit-box-shadow:none}.range-row input[type=range]::-moz-range-track{height:100%;background:var(--ui-bg);border-radius:var(--ui-border-radius);box-shadow:none}.range-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2.75rem;height:2.75rem;background:var(--ui-strong);border:none;border-radius:var(--ui-border-radius);cursor:pointer;box-shadow:none;-webkit-box-shadow:none}.range-row input[type=range]::-moz-range-thumb{width:2.75rem;height:2.75rem;background:var(--ui-strong);border:none;border-radius:var(--ui-border-radius);cursor:pointer;margin-top:-1px;box-shadow:none}.range-value{width:3.5rem;text-align:right;font-weight:var(--ui-font-weight-bold);text-align:center;color:var(--ui-bg)}.recipient-message{background:var(--ui-bg-muted);border-radius:var(--ui-border-radius);padding:1rem}.recipient-message p{margin:0;color:var(--ui-text-color);white-space:pre-wrap}.recipient-message .sender-name{margin-top:.75rem;font-style:italic;color:var(--ui-muted)}.close-btn{position:absolute;top:.5rem;right:.5rem;background:transparent;color:var(--ui-color);line-height:1;padding:.4rem;width:3rem;height:3rem;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease;border:none}.close-btn:hover{transform:scale(1.2)}.close-btn svg{width:1.5rem;height:1.5rem;display:block;fill:currentColor}.primary-btn,.copy-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-1)}.primary-btn{margin-top:1rem;width:100%}.copy-btn{padding:.75rem 1.25rem}.link-box{display:flex;gap:.5rem;margin:1rem 0}.link-box input{font-family:var(--ui-font-family);font-weight:var(--ui-font-weight);font-size:var(--ui-text-small);flex:1;padding:.75rem;border:var(--ui-border-size) solid var(--ui-border-color);border-radius:var(--ui-border-radius);background:var(--ui-bg);color:var(--ui-text-color)}.success-msg{color:#28a745;font-weight:500;margin-top:.5rem;text-align:center}:root.theme-classic{--color-bg: #0000ff;--color-text: #ffffff;--color-headline: #ffffff;--heading-font-family: "Barriecito", cursive;--heading-font-weight: 400;--heading-font-weight-bold: 400;--heading-font-size: max(9vw, 7vh);--color-border-1: #ff0000;--color-border-2: #006308;--color-border-corner: var(--color-border-1);--border-size-base: 2vw;--border-size: var(--border-size-base);--border-dash-size: var(--border-size);--ui-bg: #ffffff;--ui-color: #000041;--ui-strong: #0000ff;--ui-muted: var(--ui-color);--ui-border-color: var(--ui-strong);--ui-bg-muted: #eaeaff}.theme-classic h1#message{text-shadow:.25rem .25rem 0 var(--color-border-1)}:root.theme-candy{--color-bg: #febab8;--color-text: #ff1616;--color-headline: #ff221a;--color-headline-shadow: white;--heading-font-family: "Borel", cursive;--heading-font-weight: 400;--heading-font-weight-bold: 400;--heading-font-size: max(9vw, 7vh);--heading-line-height: 1.2;--color-border-1: #7a5af8;--color-border-2: #d9c3ff;--color-border-corner: var(--color-border-1);--border-size-base: 0px;--border-size: var(--border-size-base);--border-dash-size: var(--border-size);--ui-bg: #ffffff;--ui-color: #430ca2;--ui-strong: #7729fe;--ui-muted: var(--ui-color);--ui-border-color: var(--ui-color);--ui-bg-muted: #fff1f1}.theme-candy h1#message{text-shadow:.25rem .25rem 0px var(--color-headline-shadow),.5rem .5rem 0px var(--color-headline);transform:skewY(var(--message-skew)) translateY(.15em)}.theme-candy .checker-border{display:none}:root.theme-occult{--color-bg: #000000;--color-text: #02F37E;--color-headline: #00ff84;--color-headline-shadow: #0000B4;--color-headline-glow: #EA3323;--heading-font-family: "Creepster", cursive;--heading-font-weight: 400;--heading-font-weight-bold: 400;--heading-font-size: max(10vw, 10vh);--color-border-1: black;--color-border-2: #0000B4;--color-border-corner: var(--color-border-1);--border-size-base: max(1vw, 1vh);--border-size: var(--border-size-base);--border-dash-size: var(--border-size);--border-animation-duration: 1s;--ui-bg: #adfed9;--ui-color: #31008d;--ui-strong: #6918FF;--ui-muted: var(--ui-color);--ui-border-color: var(--ui-strong);--ui-bg-muted: #e1fef1}.theme-occult h1{text-shadow:0 0 5px var(--color-headline-glow),0 0 10px var(--color-headline-glow),0 0 20px var(--color-headline-shadow),0 0 1.5vw var(--color-headline-shadow),0 0 2vw var(--color-headline-shadow)}.theme-occult .checker-border .dash:nth-of-type(1){animation:occultSwapFirst var(--border-animation-duration) steps(1,end) infinite}.theme-occult .checker-border .dash:nth-of-type(2){animation:occultSwapSecond var(--border-animation-duration) steps(1,end) infinite}@keyframes occultSwapFirst{0%,49.999%{stroke:var(--color-border-1)}50%,to{stroke:var(--color-border-2)}}@keyframes occultSwapSecond{0%,49.999%{stroke:var(--color-border-2)}50%,to{stroke:var(--color-border-1)}}
