@import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap";:root{--color-accent:#ff218f;--color-accent-hover:#b11b66;--color-buttons-dialog:#212124;--color-canvas-background:#0e0e0e;--color-config:#212124;--color-gray3:#262629;--color-header:#2b2b31;--color-lighter:#ffffff87;--color-link:#68c0ff;--color-link-hover:#85ccff;--color-player:#222226;--color-text:White;--color-text-hover:#85ccff;--color-input:#c51880;--color-input-hover:#961663;--color-input-active:#e20c8c;--horizontal-padding:16px;--vertical-padding:12px;--logo1:#9892ff;--logo1-active:#c5c2ff;--logo2:#d4c1ff;--border-light:solid 1px #3a3a3a;--border-lighter:dotted 1px #505050;--circular_button_width:38px;--controls-height:50px;--header-height:45px;--select-height:49px;--sidebar-form-padding-top:16px;--sidebar-width:270px;--player-mobile-height:40px;--responsive-width:600px}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0;padding:0;overflow:hidden}body{background:var(--color-canvas-background);color:var(--color-text);font-family:Roboto,sans-serif}main{grid-template-columns:var(--sidebar-width)1fr;grid-template-rows:var(--header-height)var(--select-height)1fr;grid-template-areas:"header canvas""pattern_select canvas""config canvas";height:100%;display:grid}@media only screen and (width>=601px){body[data-pattern] main{grid-template-columns:var(--sidebar-width)1fr;grid-template-rows:var(--header-height)var(--select-height)1fr var(--controls-height);grid-template-areas:"header canvas""pattern_select canvas""config canvas""controls player"}}button{font-family:Roboto}#sidebar_form{border-right:var(--border-light);background:var(--color-config);grid-area:config;max-height:100%;overflow:hidden;box-shadow:1px 0 #000}#main_header{background:var(--color-header);border-right:var(--border-light);z-index:2;width:100%;padding:0 var(--horizontal-padding);flex-direction:row;align-items:center;display:flex;position:relative;box-shadow:0 2px 6px #0000004d}h1{flex-grow:0;gap:.5em;margin:0;padding:0;font-size:21px;font-weight:500;display:flex}.logo1{color:var(--logo1)}.logo2{color:var(--logo2)}canvas,svg{width:100%;height:100%}a{color:var(--color-link);font-size:14px}a:hover{color:var(--color-link-hover);text-decoration:underline}#canvas_panel{text-align:center;grid-area:canvas;overflow:hidden}#canvas_panel.overflow{overflow:auto}.small_only,.large_only{display:none!important}.no_text_break{white-space:nowrap}#player{background:var(--color-player);--player_text_width:80px;--player-gap:10px;grid-area:player;justify-content:center;align-items:center;font-size:14px;display:flex}#player_text{justify-content:end;align-items:center;display:flex}#player #pause_btn,#player.playing #play_btn{display:none}#player.playing #pause_btn{display:inline}#player_buttons i{font-size:22px}#player_controls{gap:var(--player-gap);flex-direction:row;width:100%;max-width:800px;padding:0 16px;display:flex}#player_track{flex:1;align-items:center;display:flex}#player_position{background:#fff9;border-radius:0;width:100%;height:7px;margin:0}#player_position::-webkit-slider-thumb{-webkit-appearance:none;background:#ff4500;border-radius:50%;width:10px;height:10px;transition:background .3s ease-in-out;box-shadow:0 0 2px #555}#player_buttons .circular_btn{background:0 0}@media only print{.noprint{display:none}main{grid-template:"canvas"1fr/1fr}canvas,svg{height:100%}}.margin-top{margin-top:16px}#controls_panel{padding:16px var(--horizontal-padding);height:100%;overflow-y:auto}#size_controls{margin-top:16px}label{font-size:14px;font-weight:500}.control{margin-top:16px;position:relative}#controls>.control:first-child{margin-top:0}form label{display:block}input[type=checkbox]+label{margin-top:0;margin-left:4px;display:inline-block;position:relative;top:-1px}input[type=number],input[type=text]{vertical-align:bottom;height:24px;margin-top:2px;margin-right:4px}fieldset{border:var(--border-light);background:#ffffff08;border-radius:9px}fieldset>legend{cursor:pointer;opacity:.8}fieldset>legend:hover{opacity:1}fieldset .control:first-child{margin-top:8px}fieldset.minimized{background:0 0;border:none;padding:0}fieldset.minimized>legend{padding:0}fieldset.minimized>div{display:none}legend:before{content:"";opacity:.7;vertical-align:top;margin-inline-end:2px;font-family:string_art_studio;font-size:20px;display:inline-block}fieldset.minimized>legend:before{transform:rotate(-90deg)}string-art-range-input+.control_input_value,input[type=range]+.control_input_value{position:absolute;top:2px;right:0}select{width:100%;margin-top:4px;margin-bottom:8px;padding:4px}.control_input_value{margin-inline-start:2px;font-size:12px;display:inline-block;position:relative;top:-3px}#size_custom{flex-direction:row;align-items:center;gap:8px;max-width:270px;margin-bottom:16px;display:flex}#size_custom>div{flex:1}#size_custom input{width:100%}#buttons{grid-area:"controls";border-right:var(--border-light);background:var(--color-header);z-index:3;padding:0 var(--horizontal-padding);justify-content:space-evenly;align-items:center;display:flex;position:relative;box-shadow:0 -2px 6px #0000004d}#buttons .btn{margin:0}.btn{color:#fff;cursor:pointer;background:#0375fb;border:none;border-radius:15px;width:100%;height:30px;margin-bottom:8px}.btn:hover{background:#3592ff}.btn_subdued{color:#000;background:#c5c5c5}.btn_subdued:hover{color:#000;background:#efefef}.circular_btn{width:var(--controls-height);height:var(--controls-height);cursor:pointer;color:var(--color-text);background:0 0;border:none;justify-content:center;align-items:center;font-size:28px;display:flex}.circular_btn:hover{background:#0000004d}.circular_btn img{width:18px;height:18px}.circular_btn.active{background:#0000004d;padding:0;box-shadow:inset 1px 1px 7px #000}.circular_btn.active i{transform:scale(.95)}#buttons_dialogs{z-index:2;height:calc(100vh - var(--controls-height) - var(--select-height));width:100%;position:absolute;bottom:100%;overflow:hidden}.buttons_dialog{--buttons-dialog-border-radius:10px;bottom:var(--controls-height);z-index:1;background:var(--color-buttons-dialog);width:var(--sidebar-width);padding:var(--vertical-padding)var(--horizontal-padding);padding-top:calc(2*var(--buttons-dialog-border-radius));border-top:var(--border-light);transition:transform .2s ease-out;position:fixed;transform:translateY(100%);box-shadow:0 -2px 7px #000000b3}.buttons_dialog.open{transform:translateY(0)}.btn-icon{color:#fff;background:0 0;border:none;font-size:22px}.menu_btn{background:var(--color-accent);height:48px;color:var(--color-text);border-radius:24px;align-items:center;padding:0 32px 0 24px;font-weight:500;text-decoration:none;display:inline-flex;font-size:1.1em!important}@media only screen and (width<=600px){.menu_btn{justify-content:center;width:auto;display:flex}}.menu_btn:hover{background:var(--color-accent-hover);color:var(--color-text);text-decoration:none}.menu_btn img{margin-inline-end:8px}#pattern_link{white-space:nowrap;flex:0}#pattern_select_panel{padding:var(--vertical-padding)var(--horizontal-padding);background:var(--color-gray3);border-bottom:var(--border-light);border-right:var(--border-light);flex:1;grid-area:pattern_select;align-items:center;display:flex;position:relative}#pattern_select_panel.minimized #pattern_select_btn:after{transform:rotate(-90deg)translate(1px)}#pattern_select_panel.minimized #pattern_select_dropdown{display:none}#pattern_select_btn{color:var(--color-text);cursor:pointer;text-align:left;background:0 0;border:none;flex:1;padding:0;font-size:24px;font-weight:300}#pattern_select_btn:hover{color:var(--color-text-hover)}#pattern_select_btn:after{content:"";opacity:.7;margin-inline-start:4px;font-family:string_art_studio;font-size:24px;transition:transform .2s ease-out;display:inline-block;position:relative;top:4px;transform:rotate(0)}#pattern_select_dropdown{background:var(--color-gray3);z-index:2;width:100%;max-height:calc(100vh - var(--select-height) - var(--header-height) - var(--controls-height));padding:0 16px 16px;position:absolute;top:100%;left:0;overflow:auto;box-shadow:-5px 9px 8px #00000080}#pattern_select_thumbnails_title{text-align:center;border-top:var(--border-light);border-bottom:var(--border-light);color:#ffffff4d;text-transform:uppercase;margin-top:0;padding:8px 0;font-size:12px;font-weight:400}#pattern_select_thumbnails{column-width:100px;margin:0;padding:0;list-style:none}#pattern_select_thumbnails li{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;margin-bottom:8px;display:inline-block}#pattern_select_thumbnails a{cursor:pointer;transition:transform .2s ease-out;display:inline-block}#pattern_select_thumbnails a:hover{transform:scale(1.1)}#pattern_select_dropdown_instructions{border-top:1px solid #000000b3;padding:16px 0;box-shadow:inset 0 1px #ffffff26}#pattern_select_dropdown_instructions a{text-align:center;display:block}@font-face{font-family:string_art_studio;src:url(string_art_studio.19f87e17.ttf)format("truetype"),url(string_art_studio.319bd9b7.woff)format("woff"),url(string_art_studio.cb8fed03.svg#string_art_studio)format("svg");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\ icon-]{speak:never;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;font-family:string_art_studio!important}.icon-pause:before{content:""}.icon-play:before{content:""}.icon-arrow_left:before{content:""}.icon-arrow_right:before{content:""}.icon-caret_down:before{content:""}.icon-fullscreen:before{content:""}.icon-download:before{content:""}.icon-hamburger:before{content:""}.icon-options:before{content:""}.icon-refresh:before{content:""}.icon-share:before{content:""}.icon-thumbnails:before{content:""}.icon-x:before{content:""}input[type=color]{background:0 0;border:none;padding:0;position:relative;top:2px}input[type=number],input[type=text]{padding:4px}input[type=range],string-art-range-input{width:100%}#menu_btn{opacity:.5;margin-top:1px;margin-right:8px}#mobile_menu{background:var(--color-header);padding:16px;line-height:1.5rem;overflow:auto}#mobile_menu_contents{max-width:800px;margin:0 auto}@media only screen and (width>=601px){#mobile_menu{grid-area:canvas;padding-top:80px}body[data-pattern] #mobile_menu{display:none}}@media only screen and (width<=600px){#mobile_menu{z-index:5;width:100vw;max-width:400px;height:100%;transition:transform .2s ease-out;position:fixed;top:0;left:0;transform:translate(-100%);box-shadow:3px 0 7px #0006}}#mobile_menu.open{transform:translate(0)}#mobile_menu_header{flex-direction:row;align-items:center;display:flex}#mobile_menu_header h1{flex:1;font-size:24px}#mobile_menu h2{color:var(--logo2);text-transform:uppercase;font-size:14px;font-weight:700}#mobile_menu_header div{flex:0}#mobile_menu ol{margin:0;padding:0 16px}#mobile_menu ol li{margin-bottom:16px}#mobile_menu ol li::marker{color:var(--color-lighter)}#mobile_menu section{border-top:1px solid #000000b3;margin-top:16px;box-shadow:inset 0 1px #ffffff26}.menu_links{margin:0;padding:0;list-style:none}.menu_links li{border-top:var(--border-lighter);padding:8px 16px}.menu_link,.menu_links a{font-size:1rem;text-decoration:none}.menu_link_img{width:24px}.menu_item_aside{float:inline-end;margin-inline-start:16px}@media only screen and (width<=600px){main{grid-template-columns:1fr;grid-template-rows:var(--select-height)1fr;grid-template-areas:"pattern_select""canvas"}body[data-pattern] main{grid-template-columns:1fr;grid-template-rows:var(--select-height)1fr var(--player-mobile-height)var(--controls-height);grid-template-areas:"pattern_select""canvas""player""controls"}.dialog_sidebar_form main{grid-template-rows:var(--select-height)100vw;grid-template-areas:"pattern_select""canvas"}body[data-pattern].dialog_sidebar_form main{grid-template-columns:1fr;grid-template-rows:var(--select-height)100vw 1fr var(--controls-height);grid-template-areas:"pattern_select""canvas""config""controls"}#main_header{display:none}#sidebar_form{border-right:none;border-top:var(--border-light);display:none;box-shadow:0 -5px 8px #0006,0 -1px #000}#pattern_select_panel{padding-inline-start:8px}.dialog_sidebar_form #sidebar_form{display:block}.dialog_sidebar_form #player{display:none!important}.buttons_dialog{width:100vw}.small_only{display:inherit!important}.circular_btn:not(.active):hover{background:0 0}}@media only screen and (width>=601px){.large_only{display:inherit!important}}
/*# sourceMappingURL=string_art.a468b282.css.map */