:root {--hello-nerds: url(https://ravelry.com/api); --color-sage-01: #f3f4f0; --color-sage-02: #DBDED3; --color-sage-03: #C4C9B5; --color-sage-04: #ABB398; --color-sage-05: #939D7B; --color-teal-01: #EFFAF9; --color-teal-02: #DAF7F3; --color-teal-03: #C5F2EC; --color-teal-04: #97EFE3; --color-teal-05: #72DFD0; --color-yellow-01: #FEFBE7; --color-yellow-02: #FDF5B0; --color-yellow-03: #FBEF7E; --color-yellow-04: #F3DD1B; --color-yellow-05: #DFCA0C; --color-darkgreen-01: #5998A6; --color-darkgreen-02: #477A85; --color-darkgreen-03: #2E606B; --color-darkgreen-04: #1A444D; --color-darkgreen-05: #173036; --color-red-01: #FEF7F6; --color-red-02: #F4C3BE; --color-red-02_5:#F0AEA8; --color-red-03: #EE6E62; --color-red-04: #E5594C; --color-red-05: #BF4A40; --color-greyscale-01: #fff; --color-greyscale-02: #d9d9d9; --color-greyscale-03: #7f7f7f; --color-greyscale-04: #585858; --color-greyscale-05: #000; --color-advanced-search-hover: var(--color-red-04); --color-advanced-search: var(--color-red-03); --color-background-card-sidebar: var(--color-teal-01); --color-background-card: var(--color-greyscale-01); --color-background-card: transparent; --color-background-clicker-hover: var(--color-teal-05); --color-background-clicker: var(--color-teal-04); --color-background-comment: transparent; --color-background-forum-posts: transparent; --color-background-hover: var(--color-teal-01); --color-background-infobox-title: var(--color-yellow-02); --color-background-input: var(--color-greyscale-01); --color-background-inset-content: var(--color-teal-01); --color-background-navigation-dropdown: var(--color-greyscale-01); --color-background-organizer-selected: var(--color-red-04); --color-background-photo: transparent; --color-background-select-hover: var(--color-teal-01); --color-background-sidebar: var(--color-teal-01); --color-background-table-alternate: #f3f3f3; --color-background-table-hover: var(--color-yellow-02); --color-background-table: transparent; --color-background-window: var(--color-greyscale-01); --color-background: var(--color-greyscale-01); --color-background-count: var(--color-teal-02); --color-border-logo-image: transparent; --color-border-tabular-data: #d9d9d9; --color-breadcrumbs-tools: var(--color-teal-01); --color-core-item-label: #666666; --color-link-button-hover: var(--color-teal-01); --color-navigation-background: var(--color-sage-01); --color-navigation-notification-background: var(--color-greyscale-01); --color-paging-active: var(--color-teal-05); --color-paging-hover: var(--color-teal-05); --color-paging-inactive: var(--color-teal-02); --color-search-subnavigation-background: var(--color-greyscale-01); --color-tabs-mobile-background: var(--color-teal-01); --global-box-shadow-size: 4px; --global-box-shadow-reversed-size: -4px; --line-height-base: 1.5714; --line-height-base-rem: 1.625rem; --line-height-base-em: 1.625rem; --img-photo-placeholder: url(/images/assets/illustrations/color/svg/blank-skein.svg); --transition-duration-1: 0.1s; --transition-duration-2: 0.2s; --transition-duration-3: 0.3s; --transition-duration-5: 0.5s; --transition-duration-7: 0.7s; --transition-duration-10: 1s}
body.swatch_inter {--line-height-base: 1.625; --line-height-base-rem: 1.625rem; --line-height-base-em: 1.625rem}
body.theme_herdwick {--global-box-shadow-size: 0px; --global-box-shadow-reversed-size: -1px; --color-advanced-search-hover: var(--color-red-02_5); --color-advanced-search: var(--color-red-02); --color-background-card-sidebar: var(--color-greyscale-01); --color-background-card: var(--color-greyscale-01); --color-background-clicker-hover: var(--color-teal-03); --color-background-clicker: var(--color-teal-02); --color-background-comment: var(--color-greyscale-01); --color-background-forum-posts: var(--color-greyscale-01); --color-background-hover: var(--color-greyscale-01); --color-background-infobox-title: var(--color-yellow-01); --color-background-input: var(--color-greyscale-01); --color-background-inset-content: var(--color-greyscale-01); --color-background-organizer-selected: var(--color-red-02); --color-background-photo: var(--color-greyscale-01); --color-background-sidebar: var(--color-greyscale-01); --color-background-table-alternate: var(--color-greyscale-01); --color-background-table: var(--color-greyscale-01); --color-background-window: var(--color-greyscale-01); --color-background: #f7f7f7; --color-background-count: var(--color-greyscale-01); --color-border-logo-image: #000; --color-border-tabular-data: #707070; --color-breadcrumbs-tools: #f7f7f7; --color-core-item-label: #707070; --color-link-button-hover: var(--color-greyscale-01); --color-navigation-background: var(--color-greyscale-01); --color-navigation-notification-background: var(--color-teal-02); --color-paging-active: var(--color-teal-04); --color-paging-hover: var(--color-teal-03); --color-paging-inactive: var(--color-teal-02); --color-search-subnavigation-background: var(--color-greyscale-01); --color-tabs-mobile-background: var(--color-greyscale-01); --img-photo-placeholder: url(/images/assets/illustrations/color/svg/blank-skein-herdwick.svg)}
body.without_motion {--transition-duration-1: 0s; --transition-duration-2: 0s; --transition-duration-3: 0s; --transition-duration-5: 0s; --transition-duration-7: 0s; --transition-duration-10: 0s}
@font-face {font-family: "Inter"; font-style: normal; font-weight: 300; src: url("https://style.ravelrycache.com/fonts/inter/Inter-Light.woff2?v=3.7") format("woff2"), url("https://style.ravelrycache.com/fonts/inter/Inter-Light.woff?v=3.7") format("woff"); font-feature-settings: "cv11" 1}
@font-face {font-family: "Inter"; font-style: normal; font-weight: 700; src: url("https://style.ravelrycache.com/fonts/inter/Inter-Bold.woff2?v=3.7") format("woff2"), url("https://style.ravelrycache.com/fonts/inter/Inter-Bold.woff?v=3.7") format("woff"); font-feature-settings: "cv11" 1}
@font-face {font-family: "Inter"; font-style: normal; font-weight: 900; src: url("https://style.ravelrycache.com/fonts/inter/Inter-ExtraBold.woff2?v=3.7") format("woff2"), url("https://style.ravelrycache.com/fonts/inter/Inter-ExtraBold.woff?v=3.7") format("woff"); font-feature-settings: "cv11" 1}
html {-webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent}
body {margin: 0}
main {display: block}
p, table, blockquote, address, pre, iframe, form, figure, dl {margin: 0}
h1, h2, h3, h4, h5, h6 {font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0}
ul, ol {margin: 0; padding: 0; list-style: none}
a {background-color: transparent; color: inherit}
b, strong {font-weight: bolder}
small {font-size: 80%}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline}
sub {bottom: -0.25em}
sup {top: -0.5em}
img {border-style: none; vertical-align: bottom}
embed, object, iframe {border: 0; vertical-align: bottom}
button, input, optgroup, select, textarea {vertical-align: middle; color: inherit; font: inherit; border: 0; background: transparent; padding: 0; margin: 0}
select {-webkit-appearance: none; appearance: none; border-radius: 0}
button, input {overflow: visible}
button, select {text-transform: none}
button, [type=button], [type=reset], [type=submit] {cursor: pointer; -webkit-appearance: none; appearance: none}
button[disabled], [type=button][disabled], [type=reset][disabled], [type=submit][disabled] {cursor: default}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {border-style: none; padding: 0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {outline: 1px dotted ButtonText}
fieldset {margin: 0; padding: 0; border: 0; min-width: 0}
[type=checkbox], [type=radio] {box-sizing: border-box; padding: 0}
label[for] {cursor: pointer}
#rack_bug, #rack_bug_toolbar {display: none}
:root {--global-box-shadow-size: 4px; --global-box-shadow-reversed-size: -4px}
html {font-family: "Inter", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4285714286; overflow-y: scroll; min-height: 100%; overflow-x: hidden; max-width: 100vw}
a {color: var(--color-darkgreen-03)}
a:hover {color: var(--color-darkgreen-04)}
input[type=text], input[type=password] {border: 1px solid #555; padding: 8px; box-sizing: border-box}
input[type=text].with_error, input[type=password].with_error {border-color: var(--color-red-05); background-image: url(/images/assets/icons/ui/alert-circle-red.svg); background-size: 14px; background-repeat: no-repeat; background-position: right 12px center}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset}
input:-webkit-autofill:focus {-webkit-box-shadow: 0 0 0px 1000px #effaf9 inset}
input:focus {background-color: #effaf9; outline: 0}
input[type=submit] {display: inline-block; box-shadow: var(--global-box-shadow-size) var(--global-box-shadow-size) 0 0 var(--color-greyscale-05); font-size: 12px; height: 36px; line-height: 36px; border: 1px solid var(--color-greyscale-05); background-color: var(--color-background-clicker); text-decoration: none; margin-top: -4px; margin-left: -4px; padding-left: 8px; padding-right: 8px; width: auto !important; white-space: nowrap; box-sizing: content-box; text-transform: capitalize}
input[type=submit] img {margin-right: 8px; width: 16px; height: 16px}
input[type=submit]:active {box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0); margin-top: 0; margin-right: 0}
input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder, input::placeholder {color: #8b8b8b; opacity: 1}
input::placeholder {color: #8b8b8b; opacity: 1}
.basic_box {background-color: var(--color-greyscale-01); margin-bottom: 32px; padding: 20px; box-shadow: var(--global-box-shadow-size) var(--global-box-shadow-size) 0 0 var(--color-greyscale-05); border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border: 1px solid var(--color-greyscale-05)}
form.stacked_form input[type=text], form.stacked_form input[type=password], form.stacked_form select, form.stacked_form label {width: 100%}
form.stacked_form input + select, form.stacked_form input + button, form.stacked_form input + input {margin-top: 20px}
form.stacked_form fieldset, form.stacked_form .splash_page__submit {margin-bottom: 20px}
form.stacked_form button[type=submit], form.stacked_form input[type=submit] {float: right}
form.stacked_form label {display: block; font-weight: bold; font-size: 12px; height: 16px; padding-bottom: 4px}
form.stacked_form label.label--inline {display: inline; padding-bottom: 0}
.stacked_form__field {margin-bottom: 20px}
.clicker--large button, button.clicker--large, a.clicker--large {display: inline-block; box-shadow: var(--global-box-shadow-size) var(--global-box-shadow-size) 0 0 var(--color-greyscale-05); font-size: 12px; height: 36px; line-height: 36px; border: 1px solid var(--color-greyscale-05); background-color: var(--color-background-clicker); text-decoration: none; margin-top: -4px; margin-left: -4px; padding-left: 8px; padding-right: 8px; width: auto !important; white-space: nowrap; height: 50px; line-height: 50px; font-size: 14px; padding-left: 16px; padding-right: 16px; color: #000}
.clicker--large button img, button.clicker--large img, a.clicker--large img {margin-right: 8px; width: 16px; height: 16px}
.clicker--large button:active, button.clicker--large:active, a.clicker--large:active {box-shadow: none; margin-top: 0; margin-right: 0}
.clicker--large button:hover, button.clicker--large:hover, a.clicker--large:hover {background-color: var(--color-background-clicker-hover)}
body.splash {background-color: #d5e4e9; background-image: url(/images/assets/splash/splash_background.jpg); background-repeat: repeat; background-size: 80%}
.splash_page {display: -ms-flexbox; display: -webkit-flex; display: flex; min-height: 100vh}
.on_splash_page_transition {opacity: 1; transition: opacity 0.3s ease}
.splash_page__pride {margin-top: 45vh; height: 10vh; width: 0; left: 0; top: 0; position: absolute; transition: width ease-in 0.5s}
body.with_form_submit .splash_page__pride {width: 200vw; mask-image: -webkit-gradient(linear, left top, right top, from(black), to(rgba(0, 0, 0, 0))); -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(black), to(rgba(0, 0, 0, 0)))}
body.with_form_submit .on_splash_page_transition {opacity: 0}
body.with_form_submit #splash_page_balloon_bob {width: 200px; position: absolute; top: calc(50vh - 200px); left: calc(50vw - 100px)}
body.with_form_submit input {outline: none; cursor: none}
.splash_page__image {width: 100%}
.splash_page__image__background {z-index: 0; min-height: 100vh; width: 100%; height: auto}
.splash_page__logo {z-index: 3; position: absolute; width: 23.5%; top: 9%; left: 18%}
.splash_page__logo img {width: 100%; height: auto}
.splash_page__balloon {z-index: 2; position: absolute; height: auto}
.splash_page__cloud {z-index: 0; position: absolute}
.splash_page__cloud img {width: 100%; height: auto; opacity: 0.8}
.splash_page__error {font-size: 0.8571428571rem; color: var(--color-red-05); margin-top: 4px}
.splash_page__login {z-index: 3; max-width: 620px; width: 50%; -ms-flex-shrink: 0; -webkit-flex-shrink: 0; flex-shrink: 0}
.splash_page__login .basic_box {height: calc(100vh- 96px); padding: 48px; box-sizing: border-box; margin: 20px}
.splash_page__login h1 {font-size: 40px; line-height: 1.2; font-weight: 900}
@media (min-width: 1000px) and (max-height: 900px) {.splash_page__login h1 {font-size: 4.2vh}
}
@media (min-width: 1000px) and (max-height: 480px) {.splash_page__login h1 {font-size: 20px}
}
.splash_page__login h2 {font-size: 20px; margin-bottom: 16px; font-weight: bold}
.splash_page__login form {margin-bottom: 48px}
.splash_page__login button, .splash_page__login input[type=submit] {width: 100px !important}
.splash_page__submit {display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-align-items: center; -webkit-align-items: center; align-items: center; width: 100%; height: 64px}
.splash_page__submit > * {-ms-flex-shrink: 0; -webkit-flex-shrink: 0; flex-shrink: 0; -ms-flex-grow: 0; -webkit-flex-grow: 0; flex-grow: 0}
.splash_page__submit__remember, .splash_page__submit__more {-ms-flex-grow: 1; -webkit-flex-grow: 1; flex-grow: 1; text-align: right; margin-right: 1em}
.splash_page__submit__remember label {font-weight: normal !important; font-size: 1rem !important}
.splash_page__submit__remember input {margin-right: 4px}
.splash_page__submit__remember input[type=checkbox] {opacity: 0}
.splash_page__submit__remember label {position: relative; display: inline-block; padding-left: 22px}
.splash_page__submit__remember label::before {position: absolute; content: ""; display: inline-block; left: 0px; top: 0px; width: 16px; height: 16px; background-size: 16px; background-repeat: no-repeat; background-image: url(/images/assets/icons/forms/square.svg?v=4)}
.splash_page__submit__remember input[type=checkbox]:checked + label::before {background-image: url(/images/assets/icons/forms/check-square-GREEN.svg?v=4)}
.splash_page__submit__remember input[type=checkbox]:focus + label::before {outline: var(--color-darkgreen-03) solid 1px; box-shadow: 0 0px 8px var(--color-darkgreen-04)}
.splash_page__forgot {text-align: right; font-size: 0.8571428571rem; margin-top: 4px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between}
.splash_page__forgot .splash_page__error {margin-top: 0}
.splash_page__balloon img {width: 100%; height: auto}
#splash_page_balloon_alpaca img {animation: bounce_balloon 4s cubic-bezier(0.36, -0.06, 0.63, 0.94) infinite}
#splash_page_balloon_sheep img {animation: bounce_balloon 2.5s cubic-bezier(0.36, -0.06, 0.63, 0.94) infinite}
#splash_page_balloon_bob img {animation: bounce_balloon 2.25s cubic-bezier(0.36, -0.06, 0.63, 0.94) infinite}
body.without_motion img {animation: none !important}
body.without_motion .splash_page__cloud {transform: none}
@media (prefers-reduced-motion: reduce) {img {animation: none !important}
.splash_page__pride {display: none !important}
.splash_page__motion_controls {display: none !important}
.splash_page__cloud {transition: transform 0s}
}
@keyframes bounce_balloon {0%, 100% {padding-top: 0; padding-left: 0; width: 100%}
50% {padding-top: 6px; padding-left: 2px; width: 102%}
75% {padding-left: -2px}
}
#splash_page_balloon_alpaca {width: 13%; left: 47%; top: 30%}
#splash_page_balloon_sheep {width: 15%; left: 29%; top: 44%}
#splash_page_balloon_bob {width: 26%; left: 3.5%; top: 3.5%}
#splash_page_cloud_small {width: 10%; left: 33%; top: 33%}
#splash_page_cloud_medium {width: 16.5%; left: -5.5%; top: 78%}
#splash_page_cloud_large {width: 15%; left: 41%; top: 72%}
.splash_page__motion_controls {display: none}
@media (min-width: 1000px) {.splash_page__logo--alt {display: none}
.splash_page__motion_controls {display: block; position: fixed; bottom: 0; left: 0; z-index: 101; text-align: center; box-sizing: border-box}
.splash_page__motion_controls a {text-decoration: none; color: #2E606B; padding: 20px}
.splash_page__motion_controls img {vertical-align: middle}
.splash_page__motion_controls__play {display: none}
.splash_page__motion_controls__pause {display: block}
body.without_motion .splash_page__motion_controls__play {display: block}
body.without_motion .splash_page__motion_controls__pause {display: none}
.splash_page__login {display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-align-items: center; -webkit-align-items: center; align-items: center}
.splash_page__login .basic_box {margin-top: 40px; margin-right: 80px; margin-left: 40px; margin-bottom: 40px}
}
@media (max-width: 1000px) and (min-width: 479px) {body.splash {background-attachment: fixed}
.splash_page {-ms-flex-wrap: "wrap"; -webkit-flex-wrap: "wrap"; flex-wrap: "wrap"; justify-content: center}
.splash_page__login {margin-top: 24px; width: 100%; max-width: 500px; margin-bottom: 200px}
.splash_page__logo {display: none}
.splash_page__logo--alt {display: block; position: static; width: 60%; margin-left: auto; margin-right: auto}
.splash_page__image {position: fixed; left: 0; right: 0; bottom: 0; top: 0}
#splash_page_balloon_bob {width: 37%; left: -7.5%; top: 18.5%}
#splash_page_balloon_alpaca {width: 22%; left: 80.5%; top: 14%}
#splash_page_balloon_sheep {width: 23%; left: 47%; top: 55%}
#splash_page_cloud_medium {width: 31.5%; left: -11.5%; top: -3%}
#splash_page_cloud_large {width: 24%; left: 89%; top: 72%}
}
@media (max-width: 479px) {body.splash {background-image: none}
.splash_page__logo {display: none}
.splash_page__logo--alt {display: block; position: static; width: 60%; margin-left: auto; margin-right: auto}
.splash_page {-ms-flex-wrap: "wrap"; -webkit-flex-wrap: "wrap"; flex-wrap: "wrap"}
.splash_page__image {width: 180vw; position: fixed; z-index: -1; left: -50px; background-image: url(/images/assets/splash/splash_background.jpg); background-repeat: repeat; background-size: 100%}
.splash_page__login {width: 100%}
.splash_page__logo--alt {height: 128px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-align-items: center; -webkit-align-items: center; align-items: center}
#splash_page_balloon_sheep {width: 25%; left: -8.5%; top: -12.5%}
#splash_page_balloon_alpaca {width: 19%; left: 53%; top: -16%}
#splash_page_balloon_bob {width: 20%; left: 21%; top: 136px}
.splash_page__login .basic_box {margin: 0; border: none; border-top: 4px solid var(--color-darkgreen-04)}
body:not(.with_form_submit) img {animation: none !important}
body.with_form_submit {overflow: hidden; height: 100vh}
body.with_form_submit .splash_page__balloon {display: none}
}