:root{--scroll-size: 20px;--line-count: 3;--controller-height: 5em;--card-height: calc(100vh - var(--controller-height));--card-width: calc(var(--card-height) + var(--scroll-size));--store-width: max(256px, calc(100vw - var(--card-width)));--maker-width: min( var(--card-width), calc(100vw - var(--store-width)) );--store-size: calc(var(--store-width) - var(--scroll-size));--image-size: calc(var(--store-size) / var(--line-count));--tool-width: min( calc(var(--maker-width) / 2), max( 14em, calc(var(--maker-width) / 4) ));--one-card-margin: 1em;--size-chooser-height: 8em;--image-store-height: calc(100% - var(--size-chooser-height));--crop-border-color: #000c;--uncropped-border-color: #0001;--inactive-color: #aaa;--disabled-color: #666 }#controller{display:flex;justify-content:space-between;align-items:center;height:var(--controller-height)}#controller .hidden{position:absolute;visibility:hidden}#controller #page{font-size:.8em;text-align:center;width:24em;margin:1em;border:1px inset #666;background-color:#222}#controller h1{position:relative;margin:.5em 0 .2em}#controller button{display:block;margin:0 auto;background-color:#111;padding:.25em .5em;border:2px outset #666;border-radius:.5em;color:inherit}#controller .image-count{text-align:center}#controller .file-picker{display:flex;flex-direction:column;justify-content:center;align-items:center}#controller .file-picker label{margin-top:1em}#controller .file-picker label span{font-size:.75em}#controller .file-picker input[type=file]{font-size:1em;width:18em}#controller .file-dialog{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000e;pointer-events:none;display:flex;justify-content:center;align-items:center}#controller .file-dialog .outline{position:relative;padding:1em;border:2px outset #888;border-radius:5px}#controller .file-dialog .close{font-size:2em;position:absolute;top:-.1em;right:0;padding:0;margin:0;width:1em;height:1em;line-height:1em;border:none;background-color:transparent;pointer-events:all}#controller .file-dialog button.save{margin:2em auto 0;padding:.25em 2em;border:2px outset #080;background-color:#060;color:#ddd;text-decoration:none}#controller .file-dialog button.save[disabled]{background-color:#777;border-color:#888;color:#999}#controller .file-dialog input,#controller .file-dialog button{pointer-events:all}#controller .file-dialog p.feedback{color:#900;margin-bottom:0}@media (max-width: 785px){#controller .image-count{display:none}#controller #page{width:250px;font-size:11.5px}}@media (max-width: 555px){#controller #page{font-size:1.8vw}#controller #page button{font-size:inherit}}@media (max-width: 512px){body *{font-size:3vw!important}:root{--store-width: 50vw;--maker-width: 50vw}#size-chooser span{box-sizing:border-box}#card-maker #set-tools{left:50vw}}#card-tools{right:0;text-align:right;margin-right:var(--scroll-size)}#card-tools #card-scale{display:flex;display:none}#card-tools #card-scale .slider{flex-grow:1;display:flex;justify-content:stretch}#card-tools #card-scale .slider *{display:inline-block}#card-tools #card-scale .slider input{width:3.5em;height:1em}#card-tools #card-scale .slider div{border:1px solid black;border-radius:1em;height:1em}#card-tools #card-scale .slider .range{flex-grow:1;flex-basis:5em;background-color:#fff}#card-tools #card-scale .slider .thumb{width:1em;box-sizing:border-box}#card-maker{position:absolute;bottom:0;right:0;height:var(--card-height);width:var(--maker-width);overflow:auto}#card-maker div[id$=-tools]{position:fixed;top:var(--controller-height);width:var(--tool-width);overflow:hidden}#card-maker div#card-scale,#card-maker div#image-tools{opacity:.25;pointer-events:none}#card-maker div[id$=-tools] .slider,#card-maker div[id$=-tools] button{display:flex;justify-content:center;align-items:center;height:2rem;width:2rem}#card-maker #set-tools{display:block;top:var(--controller-height);left:var(--store-width);background-color:#0008}#card-maker #set-tools label{display:block}#card-maker #set-tools label:disabled span{color:#666}#card-maker #set-tools input:not(:checked)~span{color:var(--inactive-color)}#card-maker #set-tools input:disabled~span{color:var(--disabled-color)}#card-maker #image-tools{display:flex;display:none;justify-content:end;top:auto;bottom:0;right:0;width:fit-content}#card-maker #image-tools #reset-offset{font-size:2em}#card-maker .cards svg{vertical-align:top}#card-maker .crop-circle{opacity:0}#card-maker #preview{position:fixed;bottom:1em;right:1em;padding:.25em .5em}#images-in-cards{height:var(--image-store-height);overflow:auto}#images-in-cards .one-card{margin:var(--one-card-margin) 0}#images-in-cards .one-card.yellow{background-color:#ffd}#images-in-cards .one-card.lime{background-color:#efd}#images-in-cards .one-card.green{background-color:#dfd}#images-in-cards .one-card.teal{background-color:#dfe}#images-in-cards .one-card.cyan{background-color:#dff}#images-in-cards .one-card.blue{background-color:#def}#images-in-cards .one-card.royal{background-color:#ddf}#images-in-cards .one-card.purple{background-color:#edf}#images-in-cards .one-card.violet{background-color:#fde}#images-in-cards .one-card.pink{background-color:#fdd}#images-in-cards .one-card.grey{background-color:#eee}#images-in-cards .one-card:first-child,#images-in-cards .one-card:last-child{margin:0}#images-in-cards .square{display:inline-block;position:relative;width:var(--image-size);height:var(--image-size);overflow:hidden;vertical-align:top;cursor:pointer}#images-in-cards .square .gap{border:100vmax solid var(--uncropped-border-color);box-sizing:content-box}#images-in-cards .square .gap.crop{border-color:var(--crop-border-color)}#images-in-cards .square .gap.dragging{border:none}#images-in-cards .square.on-all-preview-cards{cursor:default}#images-in-cards .square .gap,#images-in-cards .square .circle{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;z-index:1;box-sizing:content-box}#images-in-cards .square.hilite img{opacity:1}#images-in-cards img{width:100%;height:100%;opacity:.75;object-fit:contain}#images-in-cards img.dragging{opacity:.125}#images-in-cards .extra div{display:inline-block}#images-in-cards .extra img{opacity:.25}#images-in-cards .pin{position:absolute;top:2px;left:calc(50% - 8px);width:20px;height:30px;opacity:1}#image-store{height:100%;width:var(--store-width);background-color:#111}#image-store #size-chooser{display:flex;flex-direction:column;justify-content:space-around;align-items:center;height:var(--size-chooser-height)}#image-store #size-chooser .images-per-card span{display:inline-block;width:2em;height:2em;line-height:2em;border:2px outset #666;border-radius:6px;text-align:center;background-color:#333}#image-store #size-chooser .images-per-card input[type=radio]{position:absolute;visibility:hidden;width:0}#image-store #size-chooser .images-per-card input[type=radio]:checked~span{border-style:inset;background-color:#111}#image-store #size-chooser .add-more{color:#a00}#image-store #size-chooser .just-right{color:#090}#image-store #size-chooser .too-many{color:#aa0}#create{height:var(--card-height);background-color:#222}article h1{margin-top:0;padding-top:1em}main{height:calc(100% - var(--controller-height));width:100%;max-width:1000px;margin:0 auto;overflow:auto;background-color:#fff}main .tweaker{display:none}a.button{border:1px #888 outset;border-radius:1em;padding:.5em 1em;margin-right:1em;color:#ccc;text-decoration:none}a.button:hover{color:#fff}a.button:active{border-style:inset}@media print{#controller,#controller *{display:none!important}#root{height:auto!important}}body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#222;color:#ddd}#root{width:100vw;height:100vh;overflow:hidden;background-color:#333;box-shadow:#000 1em 0 1em}