*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0b0d17;color:#edf1f8;font-family:Arial,Helvetica,sans-serif;font-size:14px}main{max-width:740px;margin:auto;padding:22px 24px 24px}a{color:#abb5c9;text-decoration:none}a:hover{color:#edf1f8}button,input,select{-webkit-tap-highlight-color:transparent;font:inherit}button,a,input,select{touch-action:manipulation}button:focus,a:focus,input:focus,select:focus{outline:0}a:focus{color:#edf1f8;text-decoration:underline}nav{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;font-size:12px;margin-bottom:30px}nav a{padding:10px 0}header{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;margin-bottom:28px}.identity{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.identity img{border-radius:12px;margin-right:12px}h1{font-size:30px;letter-spacing:-1.4px;margin:0}h1 span{display:block;font-size:8px;font-weight:normal;letter-spacing:2.2px;color:#9fa9c0;margin-top:5px}#connection{font-size:10px;border:1px solid #3b445c;border-radius:20px;padding:7px 10px;color:#aeb7ca}#connection.live{color:#c3cfdf;border-color:#48566d}.now{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;border:1px solid #303749;background:#151a29;padding:20px;border-radius:14px;margin-bottom:32px}.now>div{-webkit-flex:1;flex:1;min-width:0}.eyebrow{font-size:8px;letter-spacing:1.8px;color:#aebbd0}.now h2{font-size:21px;font-weight:normal;letter-spacing:-.5px;margin:9px 0 6px}.now p{font-size:11px;color:#9aa6bd;margin:0}.round{width:44px;height:44px;min-width:44px;border:1px solid #485269;border-radius:50%;color:#dce5f5;background:#1b2333;cursor:pointer;margin-left:8px}.round:hover{background:#2b3548}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.section-heading{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;margin-bottom:14px}.section-heading h2{font-size:15px;font-weight:normal;margin:0}.section-heading>span{font-size:8px;letter-spacing:1px;color:#8e9ab2}.gallery{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -6px 24px}.art-card{width:calc(50% - 12px);margin:0 6px 12px;padding:0;overflow:hidden;border:1px solid #303649;border-radius:12px;background:#131724;text-align:left;color:#eaf0f5;cursor:pointer;position:relative}.art-card.selected{border:1px solid #aab3c0}.art-card:hover{border-color:#7890b0}.picture{position:relative;display:block;height:160px;overflow:hidden;background:#141c30}.picture img,.picture canvas{position:absolute;width:100%;height:100%;left:0;top:0;object-fit:cover}.picture canvas{display:none}.art-card.live-preview .picture canvas{display:block}.art-card .number{position:absolute;top:10px;left:10px;background:#101624;color:#e4eaf6;border-radius:4px;font-size:9px;letter-spacing:1px;padding:5px 7px}.card-copy{display:block;padding:14px 13px 15px}.card-title{display:block;font-size:16px;margin-bottom:6px;letter-spacing:-.3px}.card-tag{display:block;font-size:8px;color:#96a4bb;letter-spacing:1.1px}.selected .card-tag{color:#c3cfdf}.selected-mark{position:absolute;right:10px;top:10px;display:none;border-radius:20px;background:#171c24;color:#edf1f8;font-size:9px;padding:5px 8px}.selected .selected-mark{display:block}.settings{margin-top:4px;padding:22px;border:1px solid #2c3245;border-radius:14px;background:#111522}.settings .section-heading{margin-bottom:26px}.slider-row{margin:0 0 22px}.slider-row label{display:block;font-size:12px;margin-bottom:11px}.slider-row output{float:right;color:#c3cfdf;font-size:11px;font-family:monospace}input[type=range]{display:block;width:100%;height:30px;margin:0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:#384455;height:4px;border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#91b7ed;border:0;width:20px;height:20px;border-radius:50%;margin-top:-8px}input[type=range]{-webkit-appearance:none;background:transparent}input[type=range]::-moz-range-track{background:#384455;height:4px}input[type=range]::-moz-range-thumb{background:#91b7ed;border:0;width:20px;height:20px;border-radius:50%}.range-labels{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;color:#8995ac;font-size:9px;margin-top:2px}.setting-row{min-height:62px;border-top:1px solid #262d3f;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between}.setting-row label{font-size:12px;margin-right:10px}.setting-row label span{display:block;font-size:10px;color:#8d9bb4;margin-top:5px}.setting-row select{max-width:49%;height:44px;background:#1d2435;color:#dce5f5;border:1px solid #3a455b;border-radius:6px;padding:0 8px;font-size:11px}.setting-row input[type=checkbox]{width:44px;height:26px;cursor:pointer}button:disabled,input:disabled,select:disabled{opacity:.45;cursor:default}footer{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;color:#828da3;font-size:9px;margin-top:26px;line-height:1.5}footer span:first-child{letter-spacing:1px} @media(max-width:480px){main{padding:14px 16px 22px}nav{margin-bottom:22px}header{margin-bottom:22px}h1{font-size:27px}#connection{font-size:9px}.now{padding:17px 14px;margin-bottom:27px}.now h2{font-size:18px}.now p{font-size:10px}.round{margin-left:6px;width:40px;height:40px;min-width:40px}.picture{height:116px}.card-title{font-size:14px}.card-copy{padding:12px 10px}.card-tag{font-size:7px;letter-spacing:.7px}.section-heading>span{font-size:7px;letter-spacing:.4px}.section-heading h2{font-size:14px}.settings{padding:19px 16px}.selected-mark{font-size:8px;padding:4px 6px}.art-card .number{font-size:8px;padding:4px 5px}footer{font-size:8px}}@media(max-width:350px){main{padding-left:12px;padding-right:12px}#connection{max-width:98px;text-align:center}.picture{height:100px}.card-title{font-size:13px}.card-tag{font-size:6px}.now h2{font-size:16px}.now p{max-width:140px}.identity img{width:32px;height:32px;margin-right:8px}.selected-mark{top:7px;right:6px}}

.gallery-item{position:relative;width:calc(50% - 12px);margin:0 6px 12px}.gallery-item .art-card{display:block;width:100%;margin:0}.loop-choice{position:absolute;top:3px;right:3px;z-index:1;display:block;width:44px;height:44px;padding:8px;cursor:pointer}.loop-choice input{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}.loop-choice span{position:relative;display:block;width:28px;height:28px;padding:0;border:1px solid #677087;border-radius:7px;background:#101624;color:#c3ccdc;background-repeat:no-repeat;background-position:center;background-size:18px 18px}.loop-choice input:checked+span{background-color:#101624;border-color:#aab3c0;color:#edf1f8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4L19 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.loop-choice input:focus+span{outline:0;border-color:#edf1f8;box-shadow:inset 0 0 0 1px #edf1f8}.loop-choice input:disabled{opacity:0;cursor:default}.loop-choice input:disabled+span{opacity:.55}.loop-tools{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between}.loop-tools p{font-size:12px;color:#91b7ed;margin:0 12px 0 0}.loop-tools button{min-height:44px;padding:0 12px;border:1px solid #485269;border-radius:6px;background:#1b2333;color:#edf1f8;white-space:nowrap;cursor:pointer}.loop-help{font-size:11px;line-height:1.6;color:#9aa6bd;margin:8px 0 16px}

.gallery-item .selected-mark{top:auto;bottom:10px;right:10px}

.setting-row input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #677087;border-radius:6px;background:#101624}.setting-row input[type=checkbox]:checked{background-color:#101624;border-color:#aab3c0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4L19 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}

.rotation-settings{margin:0 0 14px;padding:0 14px;background:#111522;border:1px solid #2c3245;border-radius:10px}.rotation-settings .setting-row:first-child{border-top:0}

.art-card{-webkit-appearance:none;-moz-appearance:none;appearance:none}.art-card:focus{outline:0;border-color:#c7ced8;box-shadow:inset 0 0 0 1px #c7ced8}
::selection{background:#424a58;color:#fff}::-moz-selection{background:#424a58;color:#fff}

.round:focus,.setting-row select:focus,.setting-row input[type=checkbox]:focus,#loopAll:focus{border-color:#edf1f8;box-shadow:inset 0 0 0 1px #edf1f8}input[type=range]:focus::-webkit-slider-thumb{background:#edf1f8}input[type=range]:focus::-moz-range-thumb{background:#edf1f8}