.\n\n.list-group {\n // No need to set list-style: none; since .list-group-item is block level\n padding-left: 0; // reset padding because ul and ol\n margin-bottom: 20px;\n}\n\n\n// Individual list items\n//\n// Use on `li`s or `div`s within the `.list-group` parent.\n\n.list-group-item {\n position: relative;\n display: block;\n padding: 10px 15px;\n // Place the border on the list items and negative margin up for better styling\n margin-bottom: -1px;\n background-color: @list-group-bg;\n border: 1px solid @list-group-border;\n\n // Round the first and last items\n &:first-child {\n .border-top-radius(@list-group-border-radius);\n }\n &:last-child {\n margin-bottom: 0;\n .border-bottom-radius(@list-group-border-radius);\n }\n\n // Disabled state\n &.disabled,\n &.disabled:hover,\n &.disabled:focus {\n color: @list-group-disabled-color;\n cursor: @cursor-disabled;\n background-color: @list-group-disabled-bg;\n\n // Force color to inherit for custom content\n .list-group-item-heading {\n color: inherit;\n }\n .list-group-item-text {\n color: @list-group-disabled-text-color;\n }\n }\n\n // Active class on item itself, not parent\n &.active,\n &.active:hover,\n &.active:focus {\n z-index: 2; // Place active items above their siblings for proper border styling\n color: @list-group-active-color;\n background-color: @list-group-active-bg;\n border-color: @list-group-active-border;\n\n // Force color to inherit for custom content\n .list-group-item-heading,\n .list-group-item-heading > small,\n .list-group-item-heading > .small {\n color: inherit;\n }\n .list-group-item-text {\n color: @list-group-active-text-color;\n }\n }\n}\n\n\n// Interactive list items\n//\n// Use anchor or button elements instead of `li`s or `div`s to create interactive items.\n// Includes an extra `.active` modifier class for showing selected items.\n\na.list-group-item,\nbutton.list-group-item {\n color: @list-group-link-color;\n\n .list-group-item-heading {\n color: @list-group-link-heading-color;\n }\n\n // Hover state\n &:hover,\n &:focus {\n color: @list-group-link-hover-color;\n text-decoration: none;\n background-color: @list-group-hover-bg;\n }\n}\n\nbutton.list-group-item {\n width: 100%;\n text-align: left;\n}\n\n\n// Contextual variants\n//\n// Add modifier classes to change text and background color on individual items.\n// Organizationally, this must come after the `:hover` states.\n\n.list-group-item-variant(success; @state-success-bg; @state-success-text);\n.list-group-item-variant(info; @state-info-bg; @state-info-text);\n.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);\n.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);\n\n\n// Custom content options\n//\n// Extra classes for creating well-formatted content within `.list-group-item`s.\n\n.list-group-item-heading {\n margin-top: 0;\n margin-bottom: 5px;\n}\n.list-group-item-text {\n margin-bottom: 0;\n line-height: 1.3;\n}\n","// List Groups\n\n.list-group-item-variant(@state; @background; @color) {\n .list-group-item-@{state} {\n color: @color;\n background-color: @background;\n\n a&,\n button& {\n color: @color;\n\n .list-group-item-heading {\n color: inherit;\n }\n\n &:hover,\n &:focus {\n color: @color;\n background-color: darken(@background, 5%);\n }\n &.active,\n &.active:hover,\n &.active:focus {\n color: #fff;\n background-color: @color;\n border-color: @color;\n }\n }\n }\n}\n","// stylelint-disable selector-max-type, selector-max-compound-selectors, selector-max-combinators, no-duplicate-selectors\n\n//\n// Panels\n// --------------------------------------------------\n\n\n// Base class\n.panel {\n margin-bottom: @line-height-computed;\n background-color: @panel-bg;\n border: 1px solid transparent;\n border-radius: @panel-border-radius;\n .box-shadow(0 1px 1px rgba(0, 0, 0, .05));\n}\n\n// Panel contents\n.panel-body {\n padding: @panel-body-padding;\n &:extend(.clearfix all);\n}\n\n// Optional heading\n.panel-heading {\n padding: @panel-heading-padding;\n border-bottom: 1px solid transparent;\n .border-top-radius((@panel-border-radius - 1));\n\n > .dropdown .dropdown-toggle {\n color: inherit;\n }\n}\n\n// Within heading, strip any `h*` tag of its default margins for spacing.\n.panel-title {\n margin-top: 0;\n margin-bottom: 0;\n font-size: ceil((@font-size-base * 1.125));\n color: inherit;\n\n > a,\n > small,\n > .small,\n > small > a,\n > .small > a {\n color: inherit;\n }\n}\n\n// Optional footer (stays gray in every modifier class)\n.panel-footer {\n padding: @panel-footer-padding;\n background-color: @panel-footer-bg;\n border-top: 1px solid @panel-inner-border;\n .border-bottom-radius((@panel-border-radius - 1));\n}\n\n\n// List groups in panels\n//\n// By default, space out list group content from panel headings to account for\n// any kind of custom content between the two.\n\n.panel {\n > .list-group,\n > .panel-collapse > .list-group {\n margin-bottom: 0;\n\n .list-group-item {\n border-width: 1px 0;\n border-radius: 0;\n }\n\n // Add border top radius for first one\n &:first-child {\n .list-group-item:first-child {\n border-top: 0;\n .border-top-radius((@panel-border-radius - 1));\n }\n }\n\n // Add border bottom radius for last one\n &:last-child {\n .list-group-item:last-child {\n border-bottom: 0;\n .border-bottom-radius((@panel-border-radius - 1));\n }\n }\n }\n > .panel-heading + .panel-collapse > .list-group {\n .list-group-item:first-child {\n .border-top-radius(0);\n }\n }\n}\n// Collapse space between when there's no additional content.\n.panel-heading + .list-group {\n .list-group-item:first-child {\n border-top-width: 0;\n }\n}\n.list-group + .panel-footer {\n border-top-width: 0;\n}\n\n// Tables in panels\n//\n// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and\n// watch it go full width.\n\n.panel {\n > .table,\n > .table-responsive > .table,\n > .panel-collapse > .table {\n margin-bottom: 0;\n\n caption {\n padding-right: @panel-body-padding;\n padding-left: @panel-body-padding;\n }\n }\n // Add border top radius for first one\n > .table:first-child,\n > .table-responsive:first-child > .table:first-child {\n .border-top-radius((@panel-border-radius - 1));\n\n > thead:first-child,\n > tbody:first-child {\n > tr:first-child {\n border-top-left-radius: (@panel-border-radius - 1);\n border-top-right-radius: (@panel-border-radius - 1);\n\n td:first-child,\n th:first-child {\n border-top-left-radius: (@panel-border-radius - 1);\n }\n td:last-child,\n th:last-child {\n border-top-right-radius: (@panel-border-radius - 1);\n }\n }\n }\n }\n // Add border bottom radius for last one\n > .table:last-child,\n > .table-responsive:last-child > .table:last-child {\n .border-bottom-radius((@panel-border-radius - 1));\n\n > tbody:last-child,\n > tfoot:last-child {\n > tr:last-child {\n border-bottom-right-radius: (@panel-border-radius - 1);\n border-bottom-left-radius: (@panel-border-radius - 1);\n\n td:first-child,\n th:first-child {\n border-bottom-left-radius: (@panel-border-radius - 1);\n }\n td:last-child,\n th:last-child {\n border-bottom-right-radius: (@panel-border-radius - 1);\n }\n }\n }\n }\n > .panel-body + .table,\n > .panel-body + .table-responsive,\n > .table + .panel-body,\n > .table-responsive + .panel-body {\n border-top: 1px solid @table-border-color;\n }\n > .table > tbody:first-child > tr:first-child th,\n > .table > tbody:first-child > tr:first-child td {\n border-top: 0;\n }\n > .table-bordered,\n > .table-responsive > .table-bordered {\n border: 0;\n > thead,\n > tbody,\n > tfoot {\n > tr {\n > th:first-child,\n > td:first-child {\n border-left: 0;\n }\n > th:last-child,\n > td:last-child {\n border-right: 0;\n }\n }\n }\n > thead,\n > tbody {\n > tr:first-child {\n > td,\n > th {\n border-bottom: 0;\n }\n }\n }\n > tbody,\n > tfoot {\n > tr:last-child {\n > td,\n > th {\n border-bottom: 0;\n }\n }\n }\n }\n > .table-responsive {\n margin-bottom: 0;\n border: 0;\n }\n}\n\n\n// Collapsible panels (aka, accordion)\n//\n// Wrap a series of panels in `.panel-group` to turn them into an accordion with\n// the help of our collapse JavaScript plugin.\n\n.panel-group {\n margin-bottom: @line-height-computed;\n\n // Tighten up margin so it's only between panels\n .panel {\n margin-bottom: 0;\n border-radius: @panel-border-radius;\n\n + .panel {\n margin-top: 5px;\n }\n }\n\n .panel-heading {\n border-bottom: 0;\n\n + .panel-collapse > .panel-body,\n + .panel-collapse > .list-group {\n border-top: 1px solid @panel-inner-border;\n }\n }\n\n .panel-footer {\n border-top: 0;\n + .panel-collapse .panel-body {\n border-bottom: 1px solid @panel-inner-border;\n }\n }\n}\n\n\n// Contextual variations\n.panel-default {\n .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);\n}\n.panel-primary {\n .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);\n}\n.panel-success {\n .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);\n}\n.panel-info {\n .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);\n}\n.panel-warning {\n .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);\n}\n.panel-danger {\n .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);\n}\n","// Panels\n\n.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {\n border-color: @border;\n\n & > .panel-heading {\n color: @heading-text-color;\n background-color: @heading-bg-color;\n border-color: @heading-border;\n\n + .panel-collapse > .panel-body {\n border-top-color: @border;\n }\n .badge {\n color: @heading-bg-color;\n background-color: @heading-text-color;\n }\n }\n & > .panel-footer {\n + .panel-collapse > .panel-body {\n border-bottom-color: @border;\n }\n }\n}\n","// Embeds responsive\n//\n// Credit: Nicolas Gallagher and SUIT CSS.\n\n.embed-responsive {\n position: relative;\n display: block;\n height: 0;\n padding: 0;\n overflow: hidden;\n\n .embed-responsive-item,\n iframe,\n embed,\n object,\n video {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 0;\n }\n}\n\n// Modifier class for 16:9 aspect ratio\n.embed-responsive-16by9 {\n padding-bottom: 56.25%;\n}\n\n// Modifier class for 4:3 aspect ratio\n.embed-responsive-4by3 {\n padding-bottom: 75%;\n}\n","//\n// Wells\n// --------------------------------------------------\n\n\n// Base class\n.well {\n min-height: 20px;\n padding: 19px;\n margin-bottom: 20px;\n background-color: @well-bg;\n border: 1px solid @well-border;\n border-radius: @border-radius-base;\n .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));\n blockquote {\n border-color: #ddd;\n border-color: rgba(0, 0, 0, .15);\n }\n}\n\n// Sizes\n.well-lg {\n padding: 24px;\n border-radius: @border-radius-large;\n}\n.well-sm {\n padding: 9px;\n border-radius: @border-radius-small;\n}\n","// stylelint-disable property-no-vendor-prefix\n\n//\n// Close icons\n// --------------------------------------------------\n\n\n.close {\n float: right;\n font-size: (@font-size-base * 1.5);\n font-weight: @close-font-weight;\n line-height: 1;\n color: @close-color;\n text-shadow: @close-text-shadow;\n .opacity(.2);\n\n &:hover,\n &:focus {\n color: @close-color;\n text-decoration: none;\n cursor: pointer;\n .opacity(.5);\n }\n\n // Additional properties for button version\n // iOS requires the button element instead of an anchor tag.\n // If you want the anchor version, it requires `href=\"#\"`.\n // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\n button& {\n padding: 0;\n cursor: pointer;\n background: transparent;\n border: 0;\n -webkit-appearance: none;\n appearance: none;\n }\n}\n","//\n// Modals\n// --------------------------------------------------\n\n// .modal-open - body class for killing the scroll\n// .modal - container to scroll within\n// .modal-dialog - positioning shell for the actual modal\n// .modal-content - actual modal w/ bg and corners and shit\n\n// Kill the scroll on the body\n.modal-open {\n overflow: hidden;\n}\n\n// Container that the modal scrolls within\n.modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: @zindex-modal;\n display: none;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n\n // Prevent Chrome on Windows from adding a focus outline. For details, see\n // https://github.com/twbs/bootstrap/pull/10951.\n outline: 0;\n\n // When fading in the modal, animate it to slide down\n &.fade .modal-dialog {\n .translate(0, -25%);\n .transition-transform(~\"0.3s ease-out\");\n }\n &.in .modal-dialog { .translate(0, 0); }\n}\n.modal-open .modal {\n overflow-x: hidden;\n overflow-y: auto;\n}\n\n// Shell div to position the modal with bottom padding\n.modal-dialog {\n position: relative;\n width: auto;\n margin: 10px;\n}\n\n// Actual modal\n.modal-content {\n position: relative;\n background-color: @modal-content-bg;\n background-clip: padding-box;\n border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)\n border: 1px solid @modal-content-border-color;\n border-radius: @border-radius-large;\n .box-shadow(0 3px 9px rgba(0, 0, 0, .5));\n // Remove focus outline from opened modal\n outline: 0;\n}\n\n// Modal background\n.modal-backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: @zindex-modal-background;\n background-color: @modal-backdrop-bg;\n // Fade for backdrop\n &.fade { .opacity(0); }\n &.in { .opacity(@modal-backdrop-opacity); }\n}\n\n// Modal header\n// Top section of the modal w/ title and dismiss\n.modal-header {\n padding: @modal-title-padding;\n border-bottom: 1px solid @modal-header-border-color;\n &:extend(.clearfix all);\n}\n// Close icon\n.modal-header .close {\n margin-top: -2px;\n}\n\n// Title text within header\n.modal-title {\n margin: 0;\n line-height: @modal-title-line-height;\n}\n\n// Modal body\n// Where all modal content resides (sibling of .modal-header and .modal-footer)\n.modal-body {\n position: relative;\n padding: @modal-inner-padding;\n}\n\n// Footer (for actions)\n.modal-footer {\n padding: @modal-inner-padding;\n text-align: right; // right align buttons\n border-top: 1px solid @modal-footer-border-color;\n &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons\n\n // Properly space out buttons\n .btn + .btn {\n margin-bottom: 0; // account for input[type=\"submit\"] which gets the bottom margin like all other inputs\n margin-left: 5px;\n }\n // but override that for button groups\n .btn-group .btn + .btn {\n margin-left: -1px;\n }\n // and override it for block buttons as well\n .btn-block + .btn-block {\n margin-left: 0;\n }\n}\n\n// Measure scrollbar width for padding body during modal show/hide\n.modal-scrollbar-measure {\n position: absolute;\n top: -9999px;\n width: 50px;\n height: 50px;\n overflow: scroll;\n}\n\n// Scale up the modal\n@media (min-width: @screen-sm-min) {\n // Automatically set modal's width for larger viewports\n .modal-dialog {\n width: @modal-md;\n margin: 30px auto;\n }\n .modal-content {\n .box-shadow(0 5px 15px rgba(0, 0, 0, .5));\n }\n\n // Modal sizes\n .modal-sm { width: @modal-sm; }\n}\n\n@media (min-width: @screen-md-min) {\n .modal-lg { width: @modal-lg; }\n}\n","//\n// Tooltips\n// --------------------------------------------------\n\n\n// Base class\n.tooltip {\n position: absolute;\n z-index: @zindex-tooltip;\n display: block;\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n .reset-text();\n font-size: @font-size-small;\n\n .opacity(0);\n\n &.in { .opacity(@tooltip-opacity); }\n &.top {\n padding: @tooltip-arrow-width 0;\n margin-top: -3px;\n }\n &.right {\n padding: 0 @tooltip-arrow-width;\n margin-left: 3px;\n }\n &.bottom {\n padding: @tooltip-arrow-width 0;\n margin-top: 3px;\n }\n &.left {\n padding: 0 @tooltip-arrow-width;\n margin-left: -3px;\n }\n\n // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1\n &.top .tooltip-arrow {\n bottom: 0;\n left: 50%;\n margin-left: -@tooltip-arrow-width;\n border-width: @tooltip-arrow-width @tooltip-arrow-width 0;\n border-top-color: @tooltip-arrow-color;\n }\n &.top-left .tooltip-arrow {\n right: @tooltip-arrow-width;\n bottom: 0;\n margin-bottom: -@tooltip-arrow-width;\n border-width: @tooltip-arrow-width @tooltip-arrow-width 0;\n border-top-color: @tooltip-arrow-color;\n }\n &.top-right .tooltip-arrow {\n bottom: 0;\n left: @tooltip-arrow-width;\n margin-bottom: -@tooltip-arrow-width;\n border-width: @tooltip-arrow-width @tooltip-arrow-width 0;\n border-top-color: @tooltip-arrow-color;\n }\n &.right .tooltip-arrow {\n top: 50%;\n left: 0;\n margin-top: -@tooltip-arrow-width;\n border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;\n border-right-color: @tooltip-arrow-color;\n }\n &.left .tooltip-arrow {\n top: 50%;\n right: 0;\n margin-top: -@tooltip-arrow-width;\n border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;\n border-left-color: @tooltip-arrow-color;\n }\n &.bottom .tooltip-arrow {\n top: 0;\n left: 50%;\n margin-left: -@tooltip-arrow-width;\n border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;\n border-bottom-color: @tooltip-arrow-color;\n }\n &.bottom-left .tooltip-arrow {\n top: 0;\n right: @tooltip-arrow-width;\n margin-top: -@tooltip-arrow-width;\n border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;\n border-bottom-color: @tooltip-arrow-color;\n }\n &.bottom-right .tooltip-arrow {\n top: 0;\n left: @tooltip-arrow-width;\n margin-top: -@tooltip-arrow-width;\n border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;\n border-bottom-color: @tooltip-arrow-color;\n }\n}\n\n// Wrapper for the tooltip content\n.tooltip-inner {\n max-width: @tooltip-max-width;\n padding: 3px 8px;\n color: @tooltip-color;\n text-align: center;\n background-color: @tooltip-bg;\n border-radius: @border-radius-base;\n}\n\n// Arrows\n.tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n}\n",".reset-text() {\n font-family: @font-family-base;\n // We deliberately do NOT reset font-size.\n font-style: normal;\n font-weight: 400;\n line-height: @line-height-base;\n line-break: auto;\n text-align: left; // Fallback for where `start` is not supported\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-break: normal;\n word-spacing: normal;\n word-wrap: normal;\n white-space: normal;\n}\n","//\n// Popovers\n// --------------------------------------------------\n\n\n.popover {\n position: absolute;\n top: 0;\n left: 0;\n z-index: @zindex-popover;\n display: none;\n max-width: @popover-max-width;\n padding: 1px;\n // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n .reset-text();\n font-size: @font-size-base;\n background-color: @popover-bg;\n background-clip: padding-box;\n border: 1px solid @popover-fallback-border-color;\n border: 1px solid @popover-border-color;\n border-radius: @border-radius-large;\n .box-shadow(0 5px 10px rgba(0, 0, 0, .2));\n\n // Offset the popover to account for the popover arrow\n &.top { margin-top: -@popover-arrow-width; }\n &.right { margin-left: @popover-arrow-width; }\n &.bottom { margin-top: @popover-arrow-width; }\n &.left { margin-left: -@popover-arrow-width; }\n\n // Arrows\n // .arrow is outer, .arrow:after is inner\n > .arrow {\n border-width: @popover-arrow-outer-width;\n\n &,\n &:after {\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n }\n\n &:after {\n content: \"\";\n border-width: @popover-arrow-width;\n }\n }\n\n &.top > .arrow {\n bottom: -@popover-arrow-outer-width;\n left: 50%;\n margin-left: -@popover-arrow-outer-width;\n border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback\n border-top-color: @popover-arrow-outer-color;\n border-bottom-width: 0;\n &:after {\n bottom: 1px;\n margin-left: -@popover-arrow-width;\n content: \" \";\n border-top-color: @popover-arrow-color;\n border-bottom-width: 0;\n }\n }\n &.right > .arrow {\n top: 50%;\n left: -@popover-arrow-outer-width;\n margin-top: -@popover-arrow-outer-width;\n border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback\n border-right-color: @popover-arrow-outer-color;\n border-left-width: 0;\n &:after {\n bottom: -@popover-arrow-width;\n left: 1px;\n content: \" \";\n border-right-color: @popover-arrow-color;\n border-left-width: 0;\n }\n }\n &.bottom > .arrow {\n top: -@popover-arrow-outer-width;\n left: 50%;\n margin-left: -@popover-arrow-outer-width;\n border-top-width: 0;\n border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback\n border-bottom-color: @popover-arrow-outer-color;\n &:after {\n top: 1px;\n margin-left: -@popover-arrow-width;\n content: \" \";\n border-top-width: 0;\n border-bottom-color: @popover-arrow-color;\n }\n }\n\n &.left > .arrow {\n top: 50%;\n right: -@popover-arrow-outer-width;\n margin-top: -@popover-arrow-outer-width;\n border-right-width: 0;\n border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback\n border-left-color: @popover-arrow-outer-color;\n &:after {\n right: 1px;\n bottom: -@popover-arrow-width;\n content: \" \";\n border-right-width: 0;\n border-left-color: @popover-arrow-color;\n }\n }\n}\n\n.popover-title {\n padding: 8px 14px;\n margin: 0; // reset heading margin\n font-size: @font-size-base;\n background-color: @popover-title-bg;\n border-bottom: 1px solid darken(@popover-title-bg, 5%);\n border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;\n}\n\n.popover-content {\n padding: 9px 14px;\n}\n","// stylelint-disable media-feature-name-no-unknown\n\n//\n// Carousel\n// --------------------------------------------------\n\n\n// Wrapper for the slide container and indicators\n.carousel {\n position: relative;\n}\n\n.carousel-inner {\n position: relative;\n width: 100%;\n overflow: hidden;\n\n > .item {\n position: relative;\n display: none;\n .transition(.6s ease-in-out left);\n\n // Account for jankitude on images\n > img,\n > a > img {\n &:extend(.img-responsive);\n line-height: 1;\n }\n\n // WebKit CSS3 transforms for supported devices\n @media all and (transform-3d), (-webkit-transform-3d) {\n .transition-transform(~\"0.6s ease-in-out\");\n .backface-visibility(~\"hidden\");\n .perspective(1000px);\n\n &.next,\n &.active.right {\n .translate3d(100%, 0, 0);\n left: 0;\n }\n &.prev,\n &.active.left {\n .translate3d(-100%, 0, 0);\n left: 0;\n }\n &.next.left,\n &.prev.right,\n &.active {\n .translate3d(0, 0, 0);\n left: 0;\n }\n }\n }\n\n > .active,\n > .next,\n > .prev {\n display: block;\n }\n\n > .active {\n left: 0;\n }\n\n > .next,\n > .prev {\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n > .next {\n left: 100%;\n }\n > .prev {\n left: -100%;\n }\n > .next.left,\n > .prev.right {\n left: 0;\n }\n\n > .active.left {\n left: -100%;\n }\n > .active.right {\n left: 100%;\n }\n\n}\n\n// Left/right controls for nav\n// ---------------------------\n\n.carousel-control {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: @carousel-control-width;\n font-size: @carousel-control-font-size;\n color: @carousel-control-color;\n text-align: center;\n text-shadow: @carousel-text-shadow;\n background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug\n .opacity(@carousel-control-opacity);\n // We can't have this transition here because WebKit cancels the carousel\n // animation if you trip this while in the middle of another animation.\n\n // Set gradients for backgrounds\n &.left {\n #gradient > .horizontal(@start-color: rgba(0, 0, 0, .5); @end-color: rgba(0, 0, 0, .0001));\n }\n &.right {\n right: 0;\n left: auto;\n #gradient > .horizontal(@start-color: rgba(0, 0, 0, .0001); @end-color: rgba(0, 0, 0, .5));\n }\n\n // Hover/focus state\n &:hover,\n &:focus {\n color: @carousel-control-color;\n text-decoration: none;\n outline: 0;\n .opacity(.9);\n }\n\n // Toggles\n .icon-prev,\n .icon-next,\n .glyphicon-chevron-left,\n .glyphicon-chevron-right {\n position: absolute;\n top: 50%;\n z-index: 5;\n display: inline-block;\n margin-top: -10px;\n }\n .icon-prev,\n .glyphicon-chevron-left {\n left: 50%;\n margin-left: -10px;\n }\n .icon-next,\n .glyphicon-chevron-right {\n right: 50%;\n margin-right: -10px;\n }\n .icon-prev,\n .icon-next {\n width: 20px;\n height: 20px;\n font-family: serif;\n line-height: 1;\n }\n\n .icon-prev {\n &:before {\n content: \"\\2039\";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)\n }\n }\n .icon-next {\n &:before {\n content: \"\\203a\";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)\n }\n }\n}\n\n// Optional indicator pips\n//\n// Add an unordered list with the following class and add a list item for each\n// slide your carousel holds.\n\n.carousel-indicators {\n position: absolute;\n bottom: 10px;\n left: 50%;\n z-index: 15;\n width: 60%;\n padding-left: 0;\n margin-left: -30%;\n text-align: center;\n list-style: none;\n\n li {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin: 1px;\n text-indent: -999px;\n cursor: pointer;\n // IE8-9 hack for event handling\n //\n // Internet Explorer 8-9 does not support clicks on elements without a set\n // `background-color`. We cannot use `filter` since that's not viewed as a\n // background color by the browser. Thus, a hack is needed.\n // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer\n //\n // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we\n // set alpha transparency for the best results possible.\n background-color: #000 \\9; // IE8\n background-color: rgba(0, 0, 0, 0); // IE9\n\n border: 1px solid @carousel-indicator-border-color;\n border-radius: 10px;\n }\n\n .active {\n width: 12px;\n height: 12px;\n margin: 0;\n background-color: @carousel-indicator-active-bg;\n }\n}\n\n// Optional captions\n// -----------------------------\n// Hidden by default for smaller viewports\n.carousel-caption {\n position: absolute;\n right: 15%;\n bottom: 20px;\n left: 15%;\n z-index: 10;\n padding-top: 20px;\n padding-bottom: 20px;\n color: @carousel-caption-color;\n text-align: center;\n text-shadow: @carousel-text-shadow;\n\n & .btn {\n text-shadow: none; // No shadow for button elements in carousel-caption\n }\n}\n\n\n// Scale up controls for tablets and up\n@media screen and (min-width: @screen-sm-min) {\n\n // Scale up the controls a smidge\n .carousel-control {\n .glyphicon-chevron-left,\n .glyphicon-chevron-right,\n .icon-prev,\n .icon-next {\n width: (@carousel-control-font-size * 1.5);\n height: (@carousel-control-font-size * 1.5);\n margin-top: (@carousel-control-font-size / -2);\n font-size: (@carousel-control-font-size * 1.5);\n }\n .glyphicon-chevron-left,\n .icon-prev {\n margin-left: (@carousel-control-font-size / -2);\n }\n .glyphicon-chevron-right,\n .icon-next {\n margin-right: (@carousel-control-font-size / -2);\n }\n }\n\n // Show and left align the captions\n .carousel-caption {\n right: 20%;\n left: 20%;\n padding-bottom: 30px;\n }\n\n // Move up the indicators\n .carousel-indicators {\n bottom: 20px;\n }\n}\n","// Clearfix\n//\n// For modern browsers\n// 1. The space content is one way to avoid an Opera bug when the\n// contenteditable attribute is included anywhere else in the document.\n// Otherwise it causes space to appear at the top and bottom of elements\n// that are clearfixed.\n// 2. The use of `table` rather than `block` is only necessary if using\n// `:before` to contain the top-margins of child elements.\n//\n// Source: http://nicolasgallagher.com/micro-clearfix-hack/\n\n.clearfix() {\n &:before,\n &:after {\n display: table; // 2\n content: \" \"; // 1\n }\n &:after {\n clear: both;\n }\n}\n","// Center-align a block level element\n\n.center-block() {\n display: block;\n margin-right: auto;\n margin-left: auto;\n}\n","// stylelint-disable font-family-name-quotes, font-family-no-missing-generic-family-keyword\n\n// CSS image replacement\n//\n// Heads up! v3 launched with only `.hide-text()`, but per our pattern for\n// mixins being reused as classes with the same name, this doesn't hold up. As\n// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.\n//\n// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757\n\n// Deprecated as of v3.0.1 (has been removed in v4)\n.hide-text() {\n font: ~\"0/0\" a;\n color: transparent;\n text-shadow: none;\n background-color: transparent;\n border: 0;\n}\n\n// New mixin to use as of v3.0.1\n.text-hide() {\n .hide-text();\n}\n","// stylelint-disable declaration-no-important, at-rule-no-vendor-prefix\n\n//\n// Responsive: Utility classes\n// --------------------------------------------------\n\n\n// IE10 in Windows (Phone) 8\n//\n// Support for responsive views via media queries is kind of borked in IE10, for\n// Surface/desktop in split view and for Windows Phone 8. This particular fix\n// must be accompanied by a snippet of JavaScript to sniff the user agent and\n// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at\n// our Getting Started page for more information on this bug.\n//\n// For more information, see the following:\n//\n// Issue: https://github.com/twbs/bootstrap/issues/10497\n// Docs: https://getbootstrap.com/docs/3.4/getting-started/#support-ie10-width\n// Source: https://timkadlec.com/2013/01/windows-phone-8-and-device-width/\n// Source: https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/\n\n@-ms-viewport {\n width: device-width;\n}\n\n\n// Visibility utilities\n// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0\n.visible-xs,\n.visible-sm,\n.visible-md,\n.visible-lg {\n .responsive-invisibility();\n}\n\n.visible-xs-block,\n.visible-xs-inline,\n.visible-xs-inline-block,\n.visible-sm-block,\n.visible-sm-inline,\n.visible-sm-inline-block,\n.visible-md-block,\n.visible-md-inline,\n.visible-md-inline-block,\n.visible-lg-block,\n.visible-lg-inline,\n.visible-lg-inline-block {\n display: none !important;\n}\n\n.visible-xs {\n @media (max-width: @screen-xs-max) {\n .responsive-visibility();\n }\n}\n.visible-xs-block {\n @media (max-width: @screen-xs-max) {\n display: block !important;\n }\n}\n.visible-xs-inline {\n @media (max-width: @screen-xs-max) {\n display: inline !important;\n }\n}\n.visible-xs-inline-block {\n @media (max-width: @screen-xs-max) {\n display: inline-block !important;\n }\n}\n\n.visible-sm {\n @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {\n .responsive-visibility();\n }\n}\n.visible-sm-block {\n @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {\n display: block !important;\n }\n}\n.visible-sm-inline {\n @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {\n display: inline !important;\n }\n}\n.visible-sm-inline-block {\n @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {\n display: inline-block !important;\n }\n}\n\n.visible-md {\n @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {\n .responsive-visibility();\n }\n}\n.visible-md-block {\n @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {\n display: block !important;\n }\n}\n.visible-md-inline {\n @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {\n display: inline !important;\n }\n}\n.visible-md-inline-block {\n @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {\n display: inline-block !important;\n }\n}\n\n.visible-lg {\n @media (min-width: @screen-lg-min) {\n .responsive-visibility();\n }\n}\n.visible-lg-block {\n @media (min-width: @screen-lg-min) {\n display: block !important;\n }\n}\n.visible-lg-inline {\n @media (min-width: @screen-lg-min) {\n display: inline !important;\n }\n}\n.visible-lg-inline-block {\n @media (min-width: @screen-lg-min) {\n display: inline-block !important;\n }\n}\n\n.hidden-xs {\n @media (max-width: @screen-xs-max) {\n .responsive-invisibility();\n }\n}\n.hidden-sm {\n @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {\n .responsive-invisibility();\n }\n}\n.hidden-md {\n @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {\n .responsive-invisibility();\n }\n}\n.hidden-lg {\n @media (min-width: @screen-lg-min) {\n .responsive-invisibility();\n }\n}\n\n\n// Print utilities\n//\n// Media queries are placed on the inside to be mixin-friendly.\n\n// Note: Deprecated .visible-print as of v3.2.0\n.visible-print {\n .responsive-invisibility();\n\n @media print {\n .responsive-visibility();\n }\n}\n.visible-print-block {\n display: none !important;\n\n @media print {\n display: block !important;\n }\n}\n.visible-print-inline {\n display: none !important;\n\n @media print {\n display: inline !important;\n }\n}\n.visible-print-inline-block {\n display: none !important;\n\n @media print {\n display: inline-block !important;\n }\n}\n\n.hidden-print {\n @media print {\n .responsive-invisibility();\n }\n}\n","// stylelint-disable declaration-no-important\n\n.responsive-visibility() {\n display: block !important;\n table& { display: table !important; }\n tr& { display: table-row !important; }\n th&,\n td& { display: table-cell !important; }\n}\n\n.responsive-invisibility() {\n display: none !important;\n}\n"]}
\ No newline at end of file
diff --git a/src/css/styles.css b/src/css/styles.css
new file mode 100644
index 0000000..e675ed8
--- /dev/null
+++ b/src/css/styles.css
@@ -0,0 +1,2555 @@
+/*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com */
+
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+ box-sizing: border-box;
+}
+
+/**
+Use a more readable tab size (opinionated).
+*/
+
+html {
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+}
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+*/
+
+html {
+ line-height: 1.15;
+ /* 1 */
+ -webkit-text-size-adjust: 100%;
+ /* 2 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+Remove the margin in all browsers.
+*/
+
+body {
+ margin: 0;
+}
+
+/**
+Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+
+body {
+ font-family:
+ system-ui,
+ -apple-system, /* Firefox supports this but not yet `system-ui` */
+ 'Segoe UI',
+ Roboto,
+ Helvetica,
+ Arial,
+ sans-serif,
+ 'Apple Color Emoji',
+ 'Segoe UI Emoji';
+}
+
+/*
+Grouping content
+================
+*/
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+
+hr {
+ height: 0;
+ /* 1 */
+ color: inherit;
+ /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+ font-family:
+ ui-monospace,
+ SFMono-Regular,
+ Consolas,
+ 'Liberation Mono',
+ Menlo,
+ monospace;
+ /* 1 */
+ font-size: 1em;
+ /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+ font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+ text-indent: 0;
+ /* 1 */
+ border-color: inherit;
+ /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ /* 1 */
+ font-size: 100%;
+ /* 1 */
+ line-height: 1.15;
+ /* 1 */
+ margin: 0;
+ /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+1. Remove the inheritance of text transform in Firefox.
+*/
+
+button,
+select {
+ /* 1 */
+ text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+ -webkit-appearance: button;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+ box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+ padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+ -webkit-appearance: textfield;
+ /* 1 */
+ outline-offset: -2px;
+ /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+ display: list-item;
+}
+
+/**
+ * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
+ * A thin layer on top of normalize.css that provides a starting point more
+ * suitable for web applications.
+ */
+
+/**
+ * Removes the default spacing and border for appropriate elements.
+ */
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+ margin: 0;
+}
+
+button {
+ background-color: transparent;
+ background-image: none;
+}
+
+fieldset {
+ margin: 0;
+ padding: 0;
+}
+
+ol,
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+/**
+ * Tailwind custom reset styles
+ */
+
+/**
+ * 1. Use the user's configured `sans` font-family (with Tailwind's default
+ * sans-serif font stack as a fallback) as a sane default.
+ * 2. Use Tailwind's default "normal" line-height so the user isn't forced
+ * to override it to ensure consistency even when using the default theme.
+ */
+
+html {
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ /* 1 */
+ line-height: 1.5;
+ /* 2 */
+}
+
+/**
+ * Inherit font-family and line-height from `html` so users can set them as
+ * a class directly on the `html` element.
+ */
+
+body {
+ font-family: inherit;
+ line-height: inherit;
+}
+
+/**
+ * 1. Prevent padding and border from affecting element width.
+ *
+ * We used to set this in the html element and inherit from
+ * the parent element for everything else. This caused issues
+ * in shadow-dom-enhanced elements like
where the content
+ * is wrapped by a div with box-sizing set to `content-box`.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/4
+ *
+ *
+ * 2. Allow adding a border to an element by just adding a border-width.
+ *
+ * By default, the way the browser specifies that an element should have no
+ * border is by setting it's border-style to `none` in the user-agent
+ * stylesheet.
+ *
+ * In order to easily add borders to elements by just setting the `border-width`
+ * property, we change the default border-style for all elements to `solid`, and
+ * use border-width to hide them instead. This way our `border` utilities only
+ * need to set the `border-width` property instead of the entire `border`
+ * shorthand, making our border utilities much more straightforward to compose.
+ *
+ * https://github.com/tailwindcss/tailwindcss/pull/116
+ */
+
+*,
+::before,
+::after {
+ box-sizing: border-box;
+ /* 1 */
+ border-width: 0;
+ /* 2 */
+ border-style: solid;
+ /* 2 */
+ border-color: currentColor;
+ /* 2 */
+}
+
+/*
+ * Ensure horizontal rules are visible by default
+ */
+
+hr {
+ border-top-width: 1px;
+}
+
+/**
+ * Undo the `border-style: none` reset that Normalize applies to images so that
+ * our `border-{width}` utilities have the expected effect.
+ *
+ * The Normalize reset is unnecessary for us since we default the border-width
+ * to 0 on all elements.
+ *
+ * https://github.com/tailwindcss/tailwindcss/issues/362
+ */
+
+img {
+ border-style: solid;
+}
+
+textarea {
+ resize: vertical;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ opacity: 1;
+ color: #9ca3af;
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+ opacity: 1;
+ color: #9ca3af;
+}
+
+input::placeholder,
+textarea::placeholder {
+ opacity: 1;
+ color: #9ca3af;
+}
+
+button,
+[role="button"] {
+ cursor: pointer;
+}
+
+table {
+ border-collapse: collapse;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+/**
+ * Reset links to optimize for opt-in styling instead of
+ * opt-out.
+ */
+
+a {
+ color: inherit;
+ text-decoration: inherit;
+}
+
+/**
+ * Reset form element properties that are easy to forget to
+ * style explicitly so you don't inadvertently introduce
+ * styles that deviate from your design system. These styles
+ * supplement a partial reset that is already applied by
+ * normalize.css.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ padding: 0;
+ line-height: inherit;
+ color: inherit;
+}
+
+/**
+ * Use the configured 'mono' font family for elements that
+ * are expected to be rendered with a monospace font, falling
+ * back to the system monospace stack if there is no configured
+ * 'mono' font family.
+ */
+
+pre,
+code,
+kbd,
+samp {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+/**
+ * 1. Make replaced elements `display: block` by default as that's
+ * the behavior you want almost all of the time. Inspired by
+ * CSS Remedy, with `svg` added as well.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ *
+ * 2. Add `vertical-align: middle` to align replaced elements more
+ * sensibly by default when overriding `display` by adding a
+ * utility like `inline`.
+ *
+ * This can trigger a poorly considered linting error in some
+ * tools but is included by design.
+ *
+ * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
+ */
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+ display: block;
+ /* 1 */
+ vertical-align: middle;
+ /* 2 */
+}
+
+/**
+ * Constrain images and videos to the parent width and preserve
+ * their intrinsic aspect ratio.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+video {
+ max-width: 100%;
+ height: auto;
+}
+
+*, ::before, ::after {
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ --tw-border-opacity: 1;
+ border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+ --tw-shadow: 0 0 #0000;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgba(59, 130, 246, 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+ --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+ --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+ --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+ --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+ --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+ --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+ --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+ --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+ --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+ --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+ --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+ --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+ --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+ --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+ --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+ --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+ --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+ --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+ --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ border-radius: 0px;
+ padding-top: 0.5rem;
+ padding-right: 0.75rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+ border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0;
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em;
+}
+
+select {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ color-adjust: exact;
+}
+
+[multiple] {
+ background-image: initial;
+ background-position: initial;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: 0.75rem;
+ -webkit-print-color-adjust: unset;
+ color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ color: #2563eb;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+}
+
+[type='checkbox'] {
+ border-radius: 0px;
+}
+
+[type='radio'] {
+ border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='file'] {
+ background: unset;
+ border-color: inherit;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-size: unset;
+ line-height: inherit;
+}
+
+[type='file']:focus {
+ outline: 1px auto -webkit-focus-ring-color;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+code {
+ margin-left: -0.125rem;
+ margin-right: -0.125rem;
+ margin-top: -0.125rem;
+ margin-bottom: -0.125rem;
+ border-radius: 0.25rem;
+ --tw-bg-opacity: 1;
+ background-color: rgba(232, 255, 234, var(--tw-bg-opacity));
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+ padding-top: 0.125rem;
+ padding-bottom: 0.125rem;
+ --tw-text-opacity: 1;
+ color: rgba(0, 144, 14, var(--tw-text-opacity));
+}
+
+tbody > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-y-reverse: 0;
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+ --tw-divide-opacity: 1;
+ border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
+}
+
+tbody {
+ --tw-bg-opacity: 1;
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+td {
+ white-space: nowrap;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ --tw-text-opacity: 1;
+ color: rgba(55, 65, 81, var(--tw-text-opacity));
+}
+
+.prose {
+ color: #374151;
+ max-width: 65ch;
+}
+
+.prose [class~="lead"] {
+ color: #4b5563;
+ font-size: 1.25em;
+ line-height: 1.6;
+ margin-top: 1.2em;
+ margin-bottom: 1.2em;
+}
+
+.prose a {
+ color: #111827;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+.prose strong {
+ color: #111827;
+ font-weight: 600;
+}
+
+.prose ol[type="A"] {
+ --list-counter-style: upper-alpha;
+}
+
+.prose ol[type="a"] {
+ --list-counter-style: lower-alpha;
+}
+
+.prose ol[type="A" s] {
+ --list-counter-style: upper-alpha;
+}
+
+.prose ol[type="a" s] {
+ --list-counter-style: lower-alpha;
+}
+
+.prose ol[type="I"] {
+ --list-counter-style: upper-roman;
+}
+
+.prose ol[type="i"] {
+ --list-counter-style: lower-roman;
+}
+
+.prose ol[type="I" s] {
+ --list-counter-style: upper-roman;
+}
+
+.prose ol[type="i" s] {
+ --list-counter-style: lower-roman;
+}
+
+.prose ol[type="1"] {
+ --list-counter-style: decimal;
+}
+
+.prose ol > li {
+ position: relative;
+ padding-left: 1.75em;
+}
+
+.prose ol > li::before {
+ content: counter(list-item, var(--list-counter-style, decimal)) ".";
+ position: absolute;
+ font-weight: 400;
+ color: #6b7280;
+ left: 0;
+}
+
+.prose ul > li {
+ position: relative;
+ padding-left: 1.75em;
+}
+
+.prose ul > li::before {
+ content: "";
+ position: absolute;
+ background-color: #d1d5db;
+ border-radius: 50%;
+ width: 0.375em;
+ height: 0.375em;
+ top: calc(0.875em - 0.1875em);
+ left: 0.25em;
+}
+
+.prose hr {
+ border-color: #e5e7eb;
+ border-top-width: 1px;
+ margin-top: 3em;
+ margin-bottom: 3em;
+}
+
+.prose blockquote {
+ font-weight: 500;
+ font-style: italic;
+ color: #111827;
+ border-left-width: 0.25rem;
+ border-left-color: #e5e7eb;
+ quotes: "\201C""\201D""\2018""\2019";
+ margin-top: 1.6em;
+ margin-bottom: 1.6em;
+ padding-left: 1em;
+}
+
+.prose blockquote p:first-of-type::before {
+ content: open-quote;
+}
+
+.prose blockquote p:last-of-type::after {
+ content: close-quote;
+}
+
+.prose h1 {
+ color: #111827;
+ font-weight: 800;
+ font-size: 2.25em;
+ margin-top: 0;
+ margin-bottom: 0.8888889em;
+ line-height: 1.1111111;
+}
+
+.prose h2 {
+ color: #111827;
+ font-weight: 700;
+ font-size: 1.5em;
+ margin-top: 2em;
+ margin-bottom: 1em;
+ line-height: 1.3333333;
+}
+
+.prose h3 {
+ color: #111827;
+ font-weight: 600;
+ font-size: 1.25em;
+ margin-top: 1.6em;
+ margin-bottom: 0.6em;
+ line-height: 1.6;
+}
+
+.prose h4 {
+ color: #111827;
+ font-weight: 600;
+ margin-top: 1.5em;
+ margin-bottom: 0.5em;
+ line-height: 1.5;
+}
+
+.prose figure figcaption {
+ color: #6b7280;
+ font-size: 0.875em;
+ line-height: 1.4285714;
+ margin-top: 0.8571429em;
+}
+
+.prose code {
+ color: #111827;
+ font-weight: 600;
+ font-size: 0.875em;
+}
+
+.prose code::before {
+ content: "`";
+}
+
+.prose code::after {
+ content: "`";
+}
+
+.prose a code {
+ color: #111827;
+}
+
+.prose pre {
+ color: #e5e7eb;
+ background-color: #1f2937;
+ overflow-x: auto;
+ font-size: 0.875em;
+ line-height: 1.7142857;
+ margin-top: 1.7142857em;
+ margin-bottom: 1.7142857em;
+ border-radius: 0.375rem;
+ padding-top: 0.8571429em;
+ padding-right: 1.1428571em;
+ padding-bottom: 0.8571429em;
+ padding-left: 1.1428571em;
+}
+
+.prose pre code {
+ background-color: transparent;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-weight: 400;
+ color: inherit;
+ font-size: inherit;
+ font-family: inherit;
+ line-height: inherit;
+}
+
+.prose pre code::before {
+ content: none;
+}
+
+.prose pre code::after {
+ content: none;
+}
+
+.prose table {
+ width: 100%;
+ table-layout: auto;
+ text-align: left;
+ margin-top: 2em;
+ margin-bottom: 2em;
+ font-size: 0.875em;
+ line-height: 1.7142857;
+}
+
+.prose thead {
+ color: #111827;
+ font-weight: 600;
+ border-bottom-width: 1px;
+ border-bottom-color: #d1d5db;
+}
+
+.prose thead th {
+ vertical-align: bottom;
+ padding-right: 0.5714286em;
+ padding-bottom: 0.5714286em;
+ padding-left: 0.5714286em;
+}
+
+.prose tbody tr {
+ border-bottom-width: 1px;
+ border-bottom-color: #e5e7eb;
+}
+
+.prose tbody tr:last-child {
+ border-bottom-width: 0;
+}
+
+.prose tbody td {
+ vertical-align: top;
+ padding-top: 0.5714286em;
+ padding-right: 0.5714286em;
+ padding-bottom: 0.5714286em;
+ padding-left: 0.5714286em;
+}
+
+.prose {
+ font-size: 1rem;
+ line-height: 1.75;
+}
+
+.prose p {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+}
+
+.prose img {
+ margin-top: 2em;
+ margin-bottom: 2em;
+}
+
+.prose video {
+ margin-top: 2em;
+ margin-bottom: 2em;
+}
+
+.prose figure {
+ margin-top: 2em;
+ margin-bottom: 2em;
+}
+
+.prose figure > * {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.prose h2 code {
+ font-size: 0.875em;
+}
+
+.prose h3 code {
+ font-size: 0.9em;
+}
+
+.prose ol {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+}
+
+.prose ul {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+}
+
+.prose li {
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+}
+
+.prose > ul > li p {
+ margin-top: 0.75em;
+ margin-bottom: 0.75em;
+}
+
+.prose > ul > li > *:first-child {
+ margin-top: 1.25em;
+}
+
+.prose > ul > li > *:last-child {
+ margin-bottom: 1.25em;
+}
+
+.prose > ol > li > *:first-child {
+ margin-top: 1.25em;
+}
+
+.prose > ol > li > *:last-child {
+ margin-bottom: 1.25em;
+}
+
+.prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol {
+ margin-top: 0.75em;
+ margin-bottom: 0.75em;
+}
+
+.prose hr + * {
+ margin-top: 0;
+}
+
+.prose h2 + * {
+ margin-top: 0;
+}
+
+.prose h3 + * {
+ margin-top: 0;
+}
+
+.prose h4 + * {
+ margin-top: 0;
+}
+
+.prose thead th:first-child {
+ padding-left: 0;
+}
+
+.prose thead th:last-child {
+ padding-right: 0;
+}
+
+.prose tbody td:first-child {
+ padding-left: 0;
+}
+
+.prose tbody td:last-child {
+ padding-right: 0;
+}
+
+.prose > :first-child {
+ margin-top: 0;
+}
+
+.prose > :last-child {
+ margin-bottom: 0;
+}
+
+.ok-container {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 64rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ padding-bottom: 2rem;
+}
+
+@media (min-width: 768px) {
+ .ok-container {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+
+ .ok-container {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+
+ .ok-container {
+ padding-bottom: 4rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ok-container {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
+}
+
+.ok-header {
+ margin-bottom: 2rem;
+ display: flex;
+ justify-content: space-between;
+}
+
+@media (min-width: 768px) {
+ .ok-header {
+ margin-bottom: 3rem;
+ }
+}
+
+.ok-textarea {
+ display: block;
+ width: 100%;
+ border-radius: 0.375rem;
+ border-width: 1px;
+ --tw-border-opacity: 1;
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+}
+
+.ok-textarea::-moz-placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgba(156, 163, 175, var(--tw-placeholder-opacity));
+}
+
+.ok-textarea:-ms-input-placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgba(156, 163, 175, var(--tw-placeholder-opacity));
+}
+
+.ok-textarea::placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgba(156, 163, 175, var(--tw-placeholder-opacity));
+}
+
+.ok-textarea {
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ok-textarea:focus {
+ --tw-border-opacity: 1;
+ border-color: rgba(0, 184, 18, var(--tw-border-opacity));
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgba(0, 184, 18, var(--tw-ring-opacity));
+}
+
+@media (min-width: 640px) {
+ .ok-textarea {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ }
+}
+
+.ok-input {
+ display: block;
+ width: 100%;
+ border-radius: 0.375rem;
+ --tw-border-opacity: 1;
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ok-input:focus {
+ --tw-border-opacity: 1;
+ border-color: rgba(0, 184, 18, var(--tw-border-opacity));
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgba(0, 184, 18, var(--tw-ring-opacity));
+}
+
+@media (min-width: 640px) {
+ .ok-input {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ }
+}
+
+.ok-label {
+ display: block;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ font-weight: 500;
+ --tw-text-opacity: 1;
+ color: rgba(55, 65, 81, var(--tw-text-opacity));
+}
+
+.ok-select {
+ display: block;
+ border-radius: 0.375rem;
+ --tw-border-opacity: 1;
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+ padding-right: 2.5rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ok-select:focus {
+ --tw-border-opacity: 1;
+ border-color: rgba(0, 184, 18, var(--tw-border-opacity));
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgba(0, 184, 18, var(--tw-ring-opacity));
+}
+
+@media (min-width: 640px) {
+ .ok-select {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ }
+}
+
+.ok-checkbox {
+ margin-right: 0.5rem;
+ height: 1rem;
+ width: 1rem;
+ border-radius: 0.25rem;
+ --tw-border-opacity: 1;
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+ --tw-text-opacity: 1;
+ color: rgba(0, 170, 17, var(--tw-text-opacity));
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ok-checkbox:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgba(0, 184, 18, var(--tw-ring-opacity));
+}
+
+.ok-radio {
+ height: 1rem;
+ width: 1rem;
+ --tw-border-opacity: 1;
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+ --tw-text-opacity: 1;
+ color: rgba(0, 170, 17, var(--tw-text-opacity));
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ok-radio:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgba(0, 184, 18, var(--tw-ring-opacity));
+}
+
+.ok-notification {
+ pointer-events: auto;
+ width: 18rem;
+ max-width: 100%;
+ border-radius: 0.5rem;
+ --tw-bg-opacity: 1;
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+ padding: 1rem;
+ --tw-text-opacity: 1;
+ color: rgba(17, 24, 39, var(--tw-text-opacity));
+ --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity));
+ --tw-ring-opacity: 0.05;
+}
+
+.ok-card {
+ --tw-bg-opacity: 1;
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+ --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+@media (min-width: 768px) {
+ .ok-card {
+ border-radius: 0.5rem;
+ }
+
+ .ok-card {
+ border-width: 1px;
+ }
+
+ .ok-card {
+ --tw-border-opacity: 1;
+ border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+ }
+}
+
+.ok-card__header {
+ display: flex;
+ justify-content: space-between;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
+}
+
+@media (min-width: 768px) {
+ .ok-card__header {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+}
+
+.ok-card__body > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.ok-card__body {
+ border-top-width: 1px;
+ --tw-border-opacity: 1;
+ border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
+}
+
+@media (min-width: 768px) {
+ .ok-card__body {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+}
+
+.ok-card__header-title {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+ font-weight: 500;
+ line-height: 1.5rem;
+ --tw-text-opacity: 1;
+ color: rgba(17, 24, 39, var(--tw-text-opacity));
+}
+
+.ok-helper-text {
+ margin-top: 0.5rem;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ --tw-text-opacity: 1;
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.ok-helper-text--danger {
+ --tw-text-opacity: 1;
+ color: rgba(220, 38, 38, var(--tw-text-opacity));
+}
+
+.ok-tab {
+ display: block;
+ white-space: nowrap;
+ border-bottom-width: 2px;
+ border-color: transparent;
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ font-weight: 500;
+ --tw-text-opacity: 1;
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.ok-tab:hover {
+ --tw-border-opacity: 1;
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+ --tw-text-opacity: 1;
+ color: rgba(55, 65, 81, var(--tw-text-opacity));
+}
+
+.active .ok-tab {
+ --tw-border-opacity: 1;
+ border-color: rgba(0, 184, 18, var(--tw-border-opacity));
+ --tw-text-opacity: 1;
+ color: rgba(0, 170, 17, var(--tw-text-opacity));
+}
+
+.tab-pane {
+ display: none;
+}
+
+.entropy-container.tab-pane + *, .generate-container.tab-pane + * {
+ margin-top: 0px !important;
+ margin-top: 0px !important;
+}
+
+.tab-pane.active {
+ display: block;
+}
+
+.insert-card > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.insert-card {
+ border-radius: 0.5rem;
+ border-width: 1px;
+ --tw-border-opacity: 1;
+ border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+ --tw-bg-opacity: 1;
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+ padding: 0.75rem;
+}
+
+@media (min-width: 640px) {
+ .insert-card {
+ padding: 1.5rem;
+ }
+}
+
+.dropdown {
+ position: relative;
+ align-self: flex-start;
+}
+
+.dropdown__menu {
+ pointer-events: none;
+ position: absolute;
+ right: -0.5rem;
+ top: 100%;
+ transform-origin: top right;
+ --tw-scale-x: .95;
+ --tw-scale-y: .95;
+ transform: var(--tw-transform);
+ transform: var(--tw-transform);
+ border-radius: 0.5rem;
+ border-width: 1px;
+ --tw-border-opacity: 1;
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+ --tw-bg-opacity: 1;
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+ padding: 0.25rem;
+ opacity: 0;
+ --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
+.dropdown__menu--active {
+ pointer-events: auto;
+ --tw-translate-y: 0.5rem;
+ transform: var(--tw-transform);
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ transform: var(--tw-transform);
+ opacity: 1;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.fixed {
+ position: fixed;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.relative {
+ position: relative;
+}
+
+.sticky {
+ position: sticky;
+}
+
+.top-0 {
+ top: 0px;
+}
+
+.left-\[11px\] {
+ left: 11px;
+}
+
+.top-\[11px\] {
+ top: 11px;
+}
+
+.top-4 {
+ top: 1rem;
+}
+
+.right-4 {
+ right: 1rem;
+}
+
+.left-1\/2 {
+ left: 50%;
+}
+
+.bottom-4 {
+ bottom: 1rem;
+}
+
+.col-span-full {
+ grid-column: 1 / -1;
+}
+
+.-m-1 {
+ margin: -0.25rem;
+}
+
+.m-1 {
+ margin: 0.25rem;
+}
+
+.-mx-4 {
+ margin-left: -1rem;
+ margin-right: -1rem;
+}
+
+.-mx-2\.5 {
+ margin-left: -0.625rem;
+ margin-right: -0.625rem;
+}
+
+.-mx-2 {
+ margin-left: -0.5rem;
+ margin-right: -0.5rem;
+}
+
+.mx-1 {
+ margin-left: 0.25rem;
+ margin-right: 0.25rem;
+}
+
+.-my-0\.5 {
+ margin-top: -0.125rem;
+ margin-bottom: -0.125rem;
+}
+
+.-my-0 {
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
+
+.ml-2 {
+ margin-left: 0.5rem;
+}
+
+.-mr-1 {
+ margin-right: -0.25rem;
+}
+
+.mb-2 {
+ margin-bottom: 0.5rem;
+}
+
+.-ml-2 {
+ margin-left: -0.5rem;
+}
+
+.mr-8 {
+ margin-right: 2rem;
+}
+
+.mr-3 {
+ margin-right: 0.75rem;
+}
+
+.mr-4 {
+ margin-right: 1rem;
+}
+
+.mt-1 {
+ margin-top: 0.25rem;
+}
+
+.mr-2 {
+ margin-right: 0.5rem;
+}
+
+.mb-1 {
+ margin-bottom: 0.25rem;
+}
+
+.-mb-1\.5 {
+ margin-bottom: -0.375rem;
+}
+
+.-mb-1 {
+ margin-bottom: -0.25rem;
+}
+
+.mt-2 {
+ margin-top: 0.5rem;
+}
+
+.-ml-1 {
+ margin-left: -0.25rem;
+}
+
+.mt-4 {
+ margin-top: 1rem;
+}
+
+.-mb-px {
+ margin-bottom: -1px;
+}
+
+.-mr-4 {
+ margin-right: -1rem;
+}
+
+.mr-6 {
+ margin-right: 1.5rem;
+}
+
+.\!mb-0 {
+ margin-bottom: 0px !important;
+}
+
+.block {
+ display: block;
+}
+
+.flex {
+ display: flex;
+}
+
+.inline-flex {
+ display: inline-flex;
+}
+
+.table {
+ display: table;
+}
+
+.grid {
+ display: grid;
+}
+
+.hidden {
+ display: none;
+}
+
+.h-10 {
+ height: 2.5rem;
+}
+
+.h-5 {
+ height: 1.25rem;
+}
+
+.h-8 {
+ height: 2rem;
+}
+
+.h-6 {
+ height: 1.5rem;
+}
+
+.max-h-\[520px\] {
+ max-height: 520px;
+}
+
+.w-10 {
+ width: 2.5rem;
+}
+
+.w-full {
+ width: 100%;
+}
+
+.w-5 {
+ width: 1.25rem;
+}
+
+.w-8 {
+ width: 2rem;
+}
+
+.w-72 {
+ width: 18rem;
+}
+
+.w-14 {
+ width: 3.5rem;
+}
+
+.w-6 {
+ width: 1.5rem;
+}
+
+.min-w-\[120px\] {
+ min-width: 120px;
+}
+
+.min-w-full {
+ min-width: 100%;
+}
+
+.max-w-2xl {
+ max-width: 42rem;
+}
+
+.max-w-full {
+ max-width: 100%;
+}
+
+.flex-shrink-0 {
+ flex-shrink: 0;
+}
+
+.-translate-x-1\/2 {
+ --tw-translate-x: -50%;
+ transform: var(--tw-transform);
+}
+
+.transform {
+ transform: var(--tw-transform);
+}
+
+.cursor-pointer {
+ cursor: pointer;
+}
+
+.cursor-help {
+ cursor: help;
+}
+
+.grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.flex-col {
+ flex-direction: column;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.items-start {
+ align-items: flex-start;
+}
+
+.items-center {
+ align-items: center;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.gap-6 {
+ gap: 1.5rem;
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-x-8 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(2rem * var(--tw-space-x-reverse));
+ margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-y-reverse: 0;
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-opacity: 1;
+ border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
+}
+
+.self-start {
+ align-self: flex-start;
+}
+
+.overflow-auto {
+ overflow: auto;
+}
+
+.truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.whitespace-nowrap {
+ white-space: nowrap;
+}
+
+.rounded-full {
+ border-radius: 9999px;
+}
+
+.rounded-md {
+ border-radius: 0.375rem;
+}
+
+.rounded {
+ border-radius: 0.25rem;
+}
+
+.border {
+ border-width: 1px;
+}
+
+.border-b {
+ border-bottom-width: 1px;
+}
+
+.border-t {
+ border-top-width: 1px;
+}
+
+.border-gray-300 {
+ --tw-border-opacity: 1;
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+ --tw-border-opacity: 1;
+ border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+}
+
+.border-yellow-200 {
+ --tw-border-opacity: 1;
+ border-color: rgba(253, 230, 138, var(--tw-border-opacity));
+}
+
+.border-transparent {
+ border-color: transparent;
+}
+
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+}
+
+.bg-yellow-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(255, 251, 235, var(--tw-bg-opacity));
+}
+
+.bg-green-600 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(0, 170, 17, var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+
+.bg-gray-800 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
+
+.bg-opacity-70 {
+ --tw-bg-opacity: 0.7;
+}
+
+.p-2 {
+ padding: 0.5rem;
+}
+
+.p-1\.5 {
+ padding: 0.375rem;
+}
+
+.p-1 {
+ padding: 0.25rem;
+}
+
+.p-0 {
+ padding: 0px;
+}
+
+.p-6 {
+ padding: 1.5rem;
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.py-2 {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+.px-1 {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+}
+
+.px-3 {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+}
+
+.py-1 {
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+}
+
+.px-1\.5 {
+ padding-left: 0.375rem;
+ padding-right: 0.375rem;
+}
+
+.px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+
+.py-3 {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+}
+
+.py-0\.5 {
+ padding-top: 0.125rem;
+ padding-bottom: 0.125rem;
+}
+
+.py-0 {
+ padding-top: 0px;
+ padding-bottom: 0px;
+}
+
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.pb-4 {
+ padding-bottom: 1rem;
+}
+
+.pb-0 {
+ padding-bottom: 0px;
+}
+
+.pl-\[38px\] {
+ padding-left: 38px;
+}
+
+.pt-8 {
+ padding-top: 2rem;
+}
+
+.text-left {
+ text-align: left;
+}
+
+.text-sm {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+}
+
+.text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+}
+
+.text-xs {
+ font-size: 0.75rem;
+ line-height: 1rem;
+}
+
+.font-medium {
+ font-weight: 500;
+}
+
+.font-bold {
+ font-weight: 700;
+}
+
+.font-normal {
+ font-weight: 400;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.tracking-wider {
+ letter-spacing: 0.05em;
+}
+
+.text-gray-700 {
+ --tw-text-opacity: 1;
+ color: rgba(55, 65, 81, var(--tw-text-opacity));
+}
+
+.text-gray-600 {
+ --tw-text-opacity: 1;
+ color: rgba(75, 85, 99, var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+ --tw-text-opacity: 1;
+ color: rgba(17, 24, 39, var(--tw-text-opacity));
+}
+
+.text-gray-400 {
+ --tw-text-opacity: 1;
+ color: rgba(156, 163, 175, var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+ --tw-text-opacity: 1;
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.text-yellow-600 {
+ --tw-text-opacity: 1;
+ color: rgba(217, 119, 6, var(--tw-text-opacity));
+}
+
+.text-yellow-400 {
+ --tw-text-opacity: 1;
+ color: rgba(251, 191, 36, var(--tw-text-opacity));
+}
+
+.text-red-600 {
+ --tw-text-opacity: 1;
+ color: rgba(220, 38, 38, var(--tw-text-opacity));
+}
+
+.text-black {
+ --tw-text-opacity: 1;
+ color: rgba(0, 0, 0, var(--tw-text-opacity));
+}
+
+.text-white {
+ --tw-text-opacity: 1;
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.underline {
+ text-decoration: underline;
+}
+
+.antialiased {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.shadow-sm {
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow {
+ --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-lg {
+ --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.backdrop-blur-lg {
+ --tw-backdrop-blur: blur(16px);
+ -webkit-backdrop-filter: var(--tw-backdrop-filter);
+ backdrop-filter: var(--tw-backdrop-filter);
+}
+
+.backdrop-saturate-150 {
+ --tw-backdrop-saturate: saturate(1.5);
+ -webkit-backdrop-filter: var(--tw-backdrop-filter);
+ backdrop-filter: var(--tw-backdrop-filter);
+}
+
+.backdrop-filter {
+ -webkit-backdrop-filter: var(--tw-backdrop-filter);
+ backdrop-filter: var(--tw-backdrop-filter);
+}
+
+.transition {
+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
+.visual-privacy .private-data, .addresses .invisible {
+ pointer-events: none;
+ --tw-blur: blur(4px);
+ filter: var(--tw-filter);
+ filter: var(--tw-filter);
+}
+
+.ok-textarea:-moz-read-only, .ok-input:-moz-read-only {
+ --tw-bg-opacity: 1;
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+ --tw-text-opacity: 1;
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.ok-textarea:read-only, .ok-input:read-only {
+ --tw-bg-opacity: 1;
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+ --tw-text-opacity: 1;
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.qr-image canvas {
+ max-height: 120px;
+ max-width: 120px;
+}
+
+.anchor-link-active {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity)) !important;
+ --tw-text-opacity: 1 !important;
+ color: rgba(17, 24, 39, var(--tw-text-opacity)) !important;
+}
+
+.anchor-link-active:hover {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity)) !important;
+}
+
+.anchor-link-active svg {
+ --tw-text-opacity: 1;
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.entropy-container.hidden + *, .generate-container.hidden + * {
+ margin-top: 0px !important;
+}
+
+.hover\:bg-gray-50:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-100:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-200:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+}
+
+.hover\:bg-green-700:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgba(0, 157, 16, var(--tw-bg-opacity));
+}
+
+.hover\:text-gray-900:hover {
+ --tw-text-opacity: 1;
+ color: rgba(17, 24, 39, var(--tw-text-opacity));
+}
+
+.hover\:text-gray-500:hover {
+ --tw-text-opacity: 1;
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.focus\:outline-none:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-green-600:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgba(0, 170, 17, var(--tw-ring-opacity));
+}
+
+.focus\:ring-green-500:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgba(0, 184, 18, var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+ --tw-ring-offset-width: 2px;
+}
+
+.focus\:ring-offset-gray-100:focus {
+ --tw-ring-offset-color: #f3f4f6;
+}
+
+@media (min-width: 640px) {
+ .sm\:mb-0 {
+ margin-bottom: 0px;
+ }
+
+ .sm\:flex {
+ display: flex;
+ }
+
+ .sm\:w-auto {
+ width: auto;
+ }
+
+ .sm\:w-20 {
+ width: 5rem;
+ }
+
+ .sm\:items-center {
+ align-items: center;
+ }
+
+ .sm\:justify-between {
+ justify-content: space-between;
+ }
+
+ .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+ }
+
+ .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
+ }
+
+ .sm\:text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+ }
+}
+
+@media (min-width: 768px) {
+ .md\:top-8 {
+ top: 2rem;
+ }
+
+ .md\:col-span-4 {
+ grid-column: span 4 / span 4;
+ }
+
+ .md\:col-span-8 {
+ grid-column: span 8 / span 8;
+ }
+
+ .md\:col-span-1 {
+ grid-column: span 1 / span 1;
+ }
+
+ .md\:mx-0 {
+ margin-left: 0px;
+ margin-right: 0px;
+ }
+
+ .md\:ml-0\.5 {
+ margin-left: 0.125rem;
+ }
+
+ .md\:ml-0 {
+ margin-left: 0px;
+ }
+
+ .md\:mb-8 {
+ margin-bottom: 2rem;
+ }
+
+ .md\:mb-0 {
+ margin-bottom: 0px;
+ }
+
+ .md\:ml-auto {
+ margin-left: auto;
+ }
+
+ .md\:-mr-2 {
+ margin-right: -0.5rem;
+ }
+
+ .md\:block {
+ display: block;
+ }
+
+ .md\:flex {
+ display: flex;
+ }
+
+ .md\:grid {
+ display: grid;
+ }
+
+ .md\:max-w-\[240px\] {
+ max-width: 240px;
+ }
+
+ .md\:grid-cols-12 {
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ }
+
+ .md\:grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .md\:flex-col {
+ flex-direction: column;
+ }
+
+ .md\:items-baseline {
+ align-items: baseline;
+ }
+
+ .md\:gap-4 {
+ gap: 1rem;
+ }
+
+ .md\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0px * var(--tw-space-x-reverse));
+ margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+ }
+
+ .md\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+ }
+
+ .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+ }
+
+ .md\:px-0 {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
+ .md\:py-0 {
+ padding-top: 0px;
+ padding-bottom: 0px;
+ }
+
+ .md\:px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+
+ .md\:pb-8 {
+ padding-bottom: 2rem;
+ }
+
+ .md\:pt-16 {
+ padding-top: 4rem;
+ }
+
+ .md\:text-4xl {
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .lg\:col-span-3 {
+ grid-column: span 3 / span 3;
+ }
+
+ .lg\:col-span-9 {
+ grid-column: span 9 / span 9;
+ }
+}
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
new file mode 100644
index 0000000..be514a9
--- /dev/null
+++ b/src/css/tailwind.css
@@ -0,0 +1,144 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ html {
+ scroll-behavior: smooth;
+ }
+
+ code {
+ @apply px-1 text-green-800 rounded bg-green-50 -mx-0.5 py-0.5 -my-0.5;
+ }
+
+ tbody {
+ @apply bg-white divide-y divide-gray-200;
+ }
+
+ td {
+ @apply px-6 py-3 text-sm text-gray-700 whitespace-nowrap;
+ }
+}
+
+@layer utilities {
+ .visual-privacy .private-data,
+ .addresses .invisible {
+ @apply pointer-events-none filter blur-sm;
+ }
+
+ .ok-textarea:read-only,
+ .ok-input:read-only {
+ @apply text-gray-500 bg-gray-200;
+ }
+
+ .qr-image canvas {
+ @apply max-w-[120px] max-h-[120px];
+ }
+
+ .anchor-link-active {
+ @apply text-gray-900 bg-gray-100 hover:bg-gray-100 !important;
+ }
+
+ .anchor-link-active svg {
+ @apply text-gray-500;
+ }
+
+ .entropy-container.hidden + *,
+ .generate-container.hidden + * {
+ @apply mt-0 !important;
+ }
+}
+
+@layer components {
+ .ok-container {
+ @apply max-w-5xl px-4 py-4 pb-8 mx-auto md:py-8 md:px-6 lg:px-8 md:pb-16;
+ }
+
+ .ok-header {
+ @apply flex justify-between mb-8 md:mb-12;
+ }
+
+ .ok-textarea {
+ @apply block w-full placeholder-gray-400 border border-gray-300 rounded-md shadow-sm sm:text-sm focus:ring-green-500 focus:border-green-500;
+ }
+
+ .ok-input {
+ @apply block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm;
+ }
+
+ .ok-label {
+ @apply block text-sm font-medium text-gray-700;
+ }
+
+ .ok-select {
+ @apply block py-2 pl-3 pr-10 text-base border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm;
+ }
+
+ .ok-checkbox {
+ @apply w-4 h-4 mr-2 text-green-600 border-gray-300 rounded shadow-sm focus:ring-green-500;
+ }
+
+ .ok-radio {
+ @apply w-4 h-4 text-green-600 border-gray-300 shadow-sm focus:ring-green-500;
+ }
+
+ .ok-notification {
+ @apply max-w-full p-4 text-gray-900 bg-white rounded-lg shadow-lg pointer-events-auto w-72 ring-1 ring-black ring-opacity-5;
+ }
+
+ .ok-card {
+ @apply bg-white shadow md:border md:border-gray-200 md:rounded-lg;
+ }
+
+ .ok-card__header {
+ @apply flex justify-between px-4 py-5 md:px-6;
+ }
+
+ .ok-card__body {
+ @apply px-4 py-5 space-y-6 border-t border-gray-200 md:px-6;
+ }
+
+ .ok-card__header-title {
+ @apply text-lg font-medium leading-6 text-gray-900;
+ }
+
+ .ok-helper-text {
+ @apply mt-2 text-sm text-gray-500;
+ }
+
+ .ok-helper-text--danger {
+ @apply text-red-600;
+ }
+
+ .ok-tab {
+ @apply block px-1 py-4 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 whitespace-nowrap;
+ }
+
+ .active .ok-tab {
+ @apply text-green-600 border-green-500;
+ }
+
+ .tab-pane {
+ @apply hidden;
+ }
+
+ .tab-pane.active {
+ @apply block;
+ }
+
+ .insert-card {
+ @apply p-3 space-y-6 border border-gray-200 rounded-lg sm:p-6 bg-gray-50;
+ }
+
+ .dropdown {
+ @apply relative self-start;
+ }
+
+ .dropdown__menu {
+ @apply absolute p-1 transition origin-top-right transform scale-95 bg-white border border-gray-300 rounded-lg shadow-lg opacity-0 pointer-events-none -right-2 top-full;
+ }
+
+ .dropdown__menu--active {
+ @apply scale-100 translate-y-2 opacity-100 pointer-events-auto;
+ }
+}
diff --git a/src/css/tippy-lightBorder.css b/src/css/tippy-lightBorder.css
new file mode 100644
index 0000000..e399c32
--- /dev/null
+++ b/src/css/tippy-lightBorder.css
@@ -0,0 +1 @@
+.tippy-tooltip.light-border-theme{background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,8,16,.15);color:#26323d;box-shadow:0 3px 14px -.5px rgba(0,8,16,.08)}.tippy-tooltip.light-border-theme .tippy-backdrop{background-color:#fff}.tippy-tooltip.light-border-theme .tippy-arrow:after,.tippy-tooltip.light-border-theme .tippy-arrow:before,.tippy-tooltip.light-border-theme .tippy-roundarrow:after,.tippy-tooltip.light-border-theme .tippy-roundarrow:before{content:"";position:absolute;z-index:-1}.tippy-tooltip.light-border-theme .tippy-roundarrow{fill:#fff}.tippy-tooltip.light-border-theme .tippy-roundarrow:after{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0IiB2aWV3Qm94PSIwIDAgMTggNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA3czIuMDIxLS4wMTUgNS4yNTMtNC4yMThDNi41ODQgMS4wNTEgNy43OTcuMDA3IDkgMGMxLjIwMy0uMDA3IDIuNDE2IDEuMDM1IDMuNzYxIDIuNzgyQzE2LjAxMiA3LjAwNSAxOCA3IDE4IDd6IiBmaWxsPSIjMzMzIiBmaWxsLW9wYWNpdHk9Ii4yMzUiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);background-size:18px 7px;width:18px;height:7px;left:0;top:0;fill:rgba(0,8,16,.15)}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-roundarrow:after{top:1px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow{border-top-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:after{border-top:7px solid #fff;top:-7px}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:before{border-top:7px solid rgba(0,8,16,.2);bottom:-1px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-roundarrow:after{top:-1px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow{border-bottom-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:after{border-bottom:7px solid #fff;bottom:-7px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:before{border-bottom:7px solid rgba(0,8,16,.2);bottom:-6px}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-roundarrow:after{left:1px;top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow{border-left-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:after{border-left:7px solid #fff;left:-7px}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:before{border-left:7px solid rgba(0,8,16,.2);left:-6px}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-roundarrow:after{left:-1px;top:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow{border-right-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:after{border-right:7px solid #fff;right:-7px}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:before{border-right:7px solid rgba(0,8,16,.2);right:-6px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-roundarrow,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-roundarrow{-webkit-transform:translateX(-1px);transform:translateX(-1px)}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:before,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:before{left:-7px;border-left:7px solid transparent;border-right:7px solid transparent}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-roundarrow,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-roundarrow{-webkit-transform:translateY(-1px);transform:translateY(-1px)}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:before,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:before{top:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent}
\ No newline at end of file
diff --git a/src/index-zh.html b/src/index-zh.html
new file mode 100644
index 0000000..e14c2fe
--- /dev/null
+++ b/src/index-zh.html
@@ -0,0 +1,1472 @@
+
+
+
+
+ OneKey BIP39 助记词
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
助记词转换器
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 「熵」是一个高级功能,如果这个功能使用不当,您的助记词可能不安全。了解更多
+
+
+
+
有效的熵值包括:
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
助记词长度
+
+
+
+ The recovery phrase will appear more secure than it really is.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Recovery phrase with less than 12 words have low entropy and may be guessed by an attacker.
+
+
+
+
+
+
如果随便输入您自己选的助记词,可能不管用(因为随机熵的质量通常得不到保证,且依据协议,最后一个词是校验词,它和前面的词有存在一定关联)。
+
+
+
+
+
+
+
+
+
+ 可选
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 这是一个高级功能,只有在您了解它的作用时才可以使用。请阅读 BIP85 规范 以了解更多信息。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
这个字段的值在这个页面的其他地方没有使用。它可以作为一个新的密钥使用。如果是 BIP39 应用程序,你可以把它粘贴到「BIP39 助记词」字段,作为一个新的助记词。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
帐户扩展密钥
+
帐户扩展密钥可用于导入大多数 BIP44 兼容的钱包,例如 Mycelium 或 Electrum。
+
+
+
+
+
+
+
+
+
+
+
+
BIP49 is unavailable for this coin.
+
+
+
+
+
+
+
+
+
+
帐户扩展密钥
+
账户扩展密钥可用于导入大多数 BIP49 兼容钱包。
+
+
+
+
+
+
+
+
+
+
+
+
+
BIP141 is unavailable for this coin.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
帐户扩展密钥
+
账户扩展密钥可用于导入大多数 BIP84 兼容钱包。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+ 路径
+
+
+ |
+
+
+ 地址
+
+
+ |
+
+
+ 公钥
+
+
+ |
+
+
+ 私钥
+
+
+ |
+
+
+
+ | |
+ |
+ |
+ |
+
+
+ | |
+ |
+ |
+ |
+
+
+ | |
+ |
+ |
+ |
+
+
+ | |
+ |
+ |
+ |
+
+
+ | |
+ |
+ |
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
更多信息
+
BIP39
+
用于生成确定性密钥的助记词。在 官方 BIP39 规范 中了解更多信息。
+
+
BIP32
+
分层确定性钱包。在 官方 BIP32 规范 中了解更多信息。在 bip32.org 中查看 Demo。
+
+
BIP44
+
确定性钱包的多账户结构。在 官方 BIP44 规范 中了解更多信息。
+
+
BIP49
+
基于 P2WPKH-nested-in-P2SH 账户的派生方案。在 官方 BIP49 规范 中了解更多信息。
+
+
BIP85
+
源于 BIP32 钥匙串的确定性熵。在 官方 BIP85 规范 了解更多信息。
+
+
熵
+
熵值不应该包括 BIP39 校验和。这是由工具自动添加的。
+
+
熵值必须来自一个强大的 随机性来源。这意味着抛出一个公平的硬币、摇动一个公平的骰子、噪声测量等。不要使用书籍中的短语、歌曲中的歌词、您的生日或街道地址,或任何您认为是随机的东西,因为相比于这个工具的需求来说,它的随机性很可能远远不够。
+
+
不要存储熵。
+
+
与存储助记词相比,存储熵(例如将一副牌保持在特定的洗牌顺序中)是不可靠的。与其存储熵,不如存储从熵中产生的助记词。在存储助记词时,隐写术 可能会来带帮助。
+
+
本页面的随机助记词生成器使用了 加密安全的随机数生成器。相比您自己对随机性的直觉,内置的随机生成器更值得信赖。如果密码随机性在您的浏览器中不可用,这个页面将显示一个警告,并且「生成」按钮将不起作用。在这种情况下,您可以选择您自己的熵源。
+
+
您的熵源并不良好。
+
+
卡片熵的实现是假设卡片是被替换的,而不是逐张抽取。一副完整的牌在替换后会产生 232 比特的熵(21 个字)。一副完整的牌没有替换产生 225 比特的熵(21 个字)。
+
+
许可证
+
+ 请查阅 软件许可证 了解更多信息。
+
+
本软件按「原样」提供,不提供任何明示或暗示的保证,包括但不限于对适销性、特定用途的适用性和非侵权性的保证。在任何情况下,使用本软件或其他交易引起的无论合同行为、侵权行为或其他行为,作者或版权持有人都不对任何索赔、损害或其他责任负责。
+
+
替代工具
+
这个工具可以与任何 BIP39 钱包互通。一些与此类似的工具(非消费者钱包)是 https://bip32jp.github.io/english/。
+
+
离线使用
+
您可以脱网使用这个工具:
+
+ - 在浏览器中,选择「文件」->「另存为」,将这个页面保存为文件;
+ - 在脱网的电脑中,双击在浏览器中打开文件;
+
+
这个项目完全开源
+
从仓库中获取代码 - https://github.com/OneKeyHQ/bip39
+
+
库
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.html b/src/index.html
index 854043b..e278f46 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,1123 +1,1521 @@
-
-
-
-
BIP39 - Mnemonic Code
-
-
-
-
-
-
-
-
-
-
-
-
Mnemonic Code Converter
-
v0.5.3
-
-
-
+
+
+
+
OneKey BIP39 Recovery Phrase
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
Recovery Phrase Converter
+
+
-
-
-
Derivation Path
-
- -
- BIP32
-
- -
- BIP44
-
- -
- BIP49
-
- -
- BIP84
-
- -
- BIP141
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Entropy is an advanced feature. Your recovery phrase may be insecure if this feature is used incorrectly. Read more
+
+
+
+
Valid entropy values include:
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
Some characters have been discarded.
-
+
+
+
+
+
+
+
+
Avg Bits Per Event
+
+
+
+
+
+
Raw Entropy Words
+
+
+
+
+
+
+
Filtered Entropy
+
+
+
+
+
+
+
Recovery Phrase Length
+
+
+
+ The recovery phrase will appear more secure than it really is.
+
+
+
+
+
Binary Checksum
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Recovery phrase with less than 12 words have low entropy and may be guessed by an attacker.
+
+
+
+
+
+
Typing your own words will probably not work how you expect, since the words require a particular structure (the last word contains a checksum).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is an advanced feature and should only be used if you understand what it does. Please read the BIP85 spec for more information.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The value of this field is not used elsewhere on this page. It can be used as a new key. In case of the BIP39 application, you can paste it into the "BIP39 Recovery Phrase" field to use it as a new recovery phrase.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Account extended keys
+
The account extended keys can be used for importing to most BIP44 compatible wallets, such as mycelium or electrum.
+
+
+
+
+
+
-
+
+
+
+
+
BIP49 is unavailable for this coin.
+
+
+
+
+
+
+
+
+
+
Account extended keys
+
The account extended keys can be used for importing to most BIP49 compatible wallets.
+
+
+
+
+
+
+
+
-
-
-
Derived Addresses
-
Note these addresses are derived from the BIP32 Extended Key
-
-
-
-
-
-
-
-
-
+
+
+
BIP141 is unavailable for this coin.
+
+
-
-
-
-
-
Enabling BIP38 means each key will take several minutes to generate.
+
+
-
-
-
+
+
+
+
+
+
+
+
+
Account extended keys
+
The account extended keys can be used for importing to most BIP84 compatible wallets.
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+