bookshelf/static/alectryon/alectryon.css

@charset "UTF-8";
/*
Copyright © 2019 Clément Pit-Claudel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/*******************************/
/* CSS reset for .alectryon-io */
/*******************************/

.alectryon-io blockquote {
    line-height: inherit;
}

.alectryon-io blockquote:after {
    display: none;
}

.alectryon-io label {
    display: inline;
    font-size: inherit;
    margin: 0;
}

.alectryon-io a {
    text-decoration: none !important;
    font-style: oblique !important;
    color: unset;
}

/* Undo <small> and <blockquote>, added to improve RSS rendering. */

.alectryon-io small.alectryon-output,
.alectryon-io small.alectryon-type-info {
    font-size: inherit;
}

.alectryon-io blockquote.alectryon-goal,
.alectryon-io blockquote.alectryon-message {
    font-weight: normal;
    font-size: inherit;
}

/***************/
/* Main styles */
/***************/

.alectryon-coqdoc .doc .code,
.alectryon-coqdoc .doc .comment,
.alectryon-coqdoc .doc .inlinecode,
.alectryon-mref,
.alectryon-block, .alectryon-io,
.alectryon-toggle-label, .alectryon-banner {
    font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
    font-size: 0.875em;
    font-feature-settings: "COQX" 1 /* Coq ligatures */, "XV00" 1 /* Legacy */, "calt" 1 /* Fallback */;
    line-height: initial;
}

.alectryon-io, .alectryon-block, .alectryon-toggle-label, .alectryon-banner {
    overflow: visible;
    overflow-wrap: break-word;
    position: relative;
    white-space: pre-wrap;
}

/*
CoqIDE doesn't turn off the unicode bidirectional algorithm (and PG simply
respects the user's `bidi-display-reordering` setting), so don't turn it off
here either.  But beware unexpected results like `Definition test_אב := 0.`

.alectryon-io span {
    direction: ltr;
    unicode-bidi: bidi-override;
}

In any case, make an exception for comments:

.highlight .c {
    direction: embed;
    unicode-bidi: initial;
}
*/

.alectryon-mref,
.alectryon-mref-marker {
    align-self: center;
    box-sizing: border-box;
    display: inline-block;
    font-size: 80%;
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 0 0 1pt black;
    padding: 1pt 0.3em;
    text-decoration: none;
}

.alectryon-block .alectryon-mref-marker,
.alectryon-io .alectryon-mref-marker {
    user-select: none;
    margin: -0.25em 0 -0.25em 0.5em;
}

.alectryon-inline .alectryon-mref-marker {
    margin: -0.25em 0.15em -0.25em 0.625em; /* 625 = 0.5em / 80% */
}

.alectryon-mref {
    color: inherit;
    margin: -0.5em 0.25em;
}

.alectryon-goal:target .goal-separator .alectryon-mref-marker,
:target > .alectryon-mref-marker {
    animation: blink 0.2s step-start 0s 3 normal none;
    background-color: #fcaf3e;
    position: relative;
}

@keyframes blink {
    50% {
        box-shadow: 0 0 0 3pt #fcaf3e, 0 0 0 4pt black;
        z-index: 10;
    }
}

.alectryon-toggle,
.alectryon-io .alectryon-extra-goal-toggle {
    display: none;
}

.alectryon-bubble,
.alectryon-io label,
.alectryon-toggle-label {
    cursor: pointer;
}

.alectryon-toggle-label {
    display: block;
    font-size: 0.8em;
}

.alectryon-io .alectryon-input {
    padding: 0.1em 0; /* Enlarge the hitbox slightly to fill interline gaps */
}

.alectryon-io .alectryon-token {
    white-space: pre-wrap;
    display: inline;
}

.alectryon-io .alectryon-sentence.alectryon-target .alectryon-input {
    /* FIXME if keywords were ‘bolder’ we wouldn't need !important */
    font-weight: bold !important; /* Use !important to avoid a * selector */
}

.alectryon-bubble:before,
.alectryon-toggle-label:before,
.alectryon-io label.alectryon-input:after,
.alectryon-io .alectryon-goal > label:before {
    border: 1px solid #babdb6;
    border-radius: 1em;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    font-weight: bold;
    height: 0.25em;
    margin-bottom: 0.15em;
    vertical-align: middle;
    width: 0.75em;
}

.alectryon-toggle-label:before,
.alectryon-io .alectryon-goal > label:before {
    margin-right: 0.25em;
}

.alectryon-io .alectryon-goal > label:before {
    margin-top: 0.125em;
}

.alectryon-io label.alectryon-input {
    padding-right: 1em; /* Prevent line wraps before the checkbox bubble */
}

.alectryon-io label.alectryon-input:after {
    margin-left: 0.25em;
    margin-right: -1em; /* Compensate for the anti-wrapping space */
}

.alectryon-failed {
    /* Underlines are broken in Chrome (they reset at each element boundary)… */
    /* text-decoration: red wavy underline; */
    /* … but it isn't too noticeable with dots */
    text-decoration: red dotted underline;
    text-decoration-skip-ink: none;
    /* Chrome prints background images in low resolution, yielding a blurry underline */
    /* background: bottom / 0.3em auto repeat-x url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyLjY0NiAxLjg1MiIgaGVpZ2h0PSI4IiB3aWR0aD0iMTAiPjxwYXRoIGQ9Ik0wIC4yNjVjLjc5NCAwIC41MyAxLjMyMiAxLjMyMyAxLjMyMi43OTQgMCAuNTMtMS4zMjIgMS4zMjMtMS4zMjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmVkIiBzdHJva2Utd2lkdGg9Ii41MjkiLz48L3N2Zz4=); */
}

/* Wrapping :hover rules in a media query ensures that tapping a Coq sentence
   doesn't trigger its :hover state (otherwise, on mobile, tapping a sentence to
   hide its output causes it to remain visible (its :hover state gets triggered.
   We only do it for the default style though, since other styles don't put the
   output over the main text, so showing too much is not an issue. */
@media (any-hover: hover) {
    .alectryon-bubble:hover:before,
    .alectryon-toggle-label:hover:before,
    .alectryon-io label.alectryon-input:hover:after {
        background: #eeeeec;
    }

    .alectryon-io label.alectryon-input:hover {
        text-decoration: underline dotted #babdb6;
	    text-shadow: 0 0 1px rgb(46, 52, 54, 0.3); /* #2e3436 + opacity */
    }

    .alectryon-io .alectryon-sentence:hover .alectryon-output,
    .alectryon-io .alectryon-token:hover .alectryon-type-info-wrapper,
    .alectryon-io .alectryon-token:hover .alectryon-type-info-wrapper {
        z-index: 2; /* Place hovered goals above .alectryon-sentence.alectryon-target ones */
    }
}

.alectryon-toggle:checked + .alectryon-toggle-label:before,
.alectryon-io .alectryon-sentence > .alectryon-toggle:checked + label.alectryon-input:after,
.alectryon-io .alectryon-extra-goal-toggle:checked + .alectryon-goal > label:before {
    background-color: #babdb6;
    border-color: #babdb6;
}

/* Disable clicks on sentences when the document-wide toggle is set. */
.alectryon-toggle:checked + label + .alectryon-container label.alectryon-input {
    cursor: unset;
    pointer-events: none;
}

/* Hide individual checkboxes when the document-wide toggle is set. */
.alectryon-toggle:checked + label + .alectryon-container label.alectryon-input:after {
    display: none;
}

/* .alectryon-output is displayed by toggles, :hover, and .alectryon-target rules */
.alectryon-io .alectryon-output {
    box-sizing: border-box;
    display: none;
    left: 0;
    right: 0;
    position: absolute;
    padding: 0.25em 0;
    overflow: visible; /* Let box-shadows overflow */
    z-index: 1; /* Default to an index lower than that used by :hover */
}

.alectryon-io .alectryon-type-info-wrapper {
    position: absolute;
    display: inline-block;
    width: 100%;
}

.alectryon-io .alectryon-type-info-wrapper.full-width {
    left: 0;
    min-width: 100%;
    max-width: 100%;
}

.alectryon-io .alectryon-type-info .goal-separator {
    height: unset;
    margin-top: 0em;
}

.alectryon-io .alectryon-type-info-wrapper .alectryon-type-info {
    box-sizing: border-box;
    bottom: 100%;
    position: absolute;
    /*padding: 0.25em 0;*/
    visibility: hidden;
    overflow: visible; /* Let box-shadows overflow */
    z-index: 1; /* Default to an index lower than that used by :hover */
    white-space: pre-wrap !important;
}

.alectryon-io .alectryon-type-info-wrapper .alectryon-type-info .alectryon-goal.alectryon-docstring {
    white-space: pre-wrap !important;
}

@media (any-hover: hover) { /* See note above about this @media query */
    .alectryon-io .alectryon-sentence:hover .alectryon-output:not(:hover) {
        display: block;
    }

    .alectryon-io.output-hidden .alectryon-sentence:hover .alectryon-output:not(:hover) {
        display: none !important;
    }

    .alectryon-io.type-info-hidden .alectryon-token:hover .alectryon-type-info-wrapper .alectryon-type-info,
    .alectryon-io.type-info-hidden .alectryon-token:hover .alectryon-type-info-wrapper .alectryon-type-info {
        /*visibility: hidden !important;*/
    }

    .alectryon-io .alectryon-token:hover .alectryon-type-info-wrapper .alectryon-type-info,
    .alectryon-io .alectryon-token:hover .alectryon-type-info-wrapper .alectryon-type-info {
        visibility: visible;
        transition-delay: 0.5s;
    }
}

.alectryon-io .alectryon-sentence.alectryon-target .alectryon-output {
    display: block;
}

/* Indicate active (hovered or targeted) goals with a shadow. */
.alectryon-io .alectryon-sentence:hover .alectryon-output:not(:hover) .alectryon-messages,
.alectryon-io .alectryon-sentence.alectryon-target .alectryon-output  .alectryon-messages,
.alectryon-io .alectryon-sentence:hover .alectryon-output:not(:hover) .alectryon-goals,
.alectryon-io .alectryon-sentence.alectryon-target .alectryon-output  .alectryon-goals,
.alectryon-io .alectryon-token:hover .alectryon-type-info-wrapper .alectryon-type-info {
    box-shadow: 2px 2px 2px gray;
}

.alectryon-io .alectryon-extra-goals .alectryon-goal .goal-hyps {
    display: none;
}

.alectryon-io .alectryon-extra-goals .alectryon-extra-goal-toggle:not(:checked) + .alectryon-goal label.goal-separator hr {
    /* Dashes indicate that the hypotheses are hidden */
    border-top-style: dashed;
}


/* Show just a small preview of the other goals; this is undone by the
   "extra-goal" toggle and by :hover and .alectryon-target in windowed mode. */
.alectryon-io .alectryon-extra-goals .alectryon-goal .goal-conclusion {
    max-height: 5.2em;
    overflow-y: auto;
    /* Combining ‘overflow-y: auto’ with ‘display: inline-block’ causes extra space
       to be added below the box. ‘vertical-align: middle’ gets rid of it. */
    vertical-align: middle;
}

.alectryon-io .alectryon-goals,
.alectryon-io .alectryon-messages {
    background: #f6f7f6;
	/*border: thin solid #d3d7cf; /* Convenient when pre's background is already #EEE */
    display: block;
    padding: 0.25em;
}

.alectryon-message::before {
    content: '';
    float: right;
    /* etc/svg/square-bubble-xl.svg */
    background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 3.704 3.704' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd' stroke='%23000' stroke-width='.264'%3E%3Cpath d='M.794.934h2.115M.794 1.463h1.455M.794 1.992h1.852'/%3E%3C/g%3E%3Cpath d='M.132.14v2.646h.794v.661l.926-.661h1.72V.14z' fill='none' stroke='%23000' stroke-width='.265'/%3E%3C/svg%3E") top right no-repeat;
    height: 14px;
    width: 14px;
}

.alectryon-toggle:checked + label + .alectryon-container {
    width: unset;
}

/* Show goals when a toggle is set */
.alectryon-toggle:checked + label + .alectryon-container label.alectryon-input + .alectryon-output,
.alectryon-io .alectryon-sentence > .alectryon-toggle:checked ~ .alectryon-output {
    display: block;
    position: static;
    width: unset;
    background: unset; /* Override the backgrounds set in floating in windowed mode */
    padding: 0.25em 0; /* Re-assert so that later :hover rules don't override this padding */
}

.alectryon-toggle:checked + label + .alectryon-container label.alectryon-input + .alectryon-output .goal-hyps,
.alectryon-io .alectryon-sentence > .alectryon-toggle:checked ~ .alectryon-output .goal-hyps {
    /* Overridden back in windowed style */
    flex-flow: row wrap;
    justify-content: flex-start;
}

.alectryon-toggle:checked + label + .alectryon-container .alectryon-sentence .alectryon-output > div,
.alectryon-io .alectryon-sentence > .alectryon-toggle:checked ~ .alectryon-output > div {
    display: block;
}

.alectryon-io .alectryon-extra-goal-toggle:checked + .alectryon-goal .goal-hyps {
    display: flex;
}

.alectryon-io .alectryon-extra-goal-toggle:checked + .alectryon-goal .goal-conclusion {
    max-height: unset;
    overflow-y: unset;
}

.alectryon-toggle:checked + label + .alectryon-container .alectryon-sentence > .alectryon-toggle ~ .alectryon-wsp,
.alectryon-io .alectryon-sentence > .alectryon-toggle:checked ~ .alectryon-wsp {
    display: none;
}

.alectryon-io .alectryon-messages,
.alectryon-io .alectryon-message,
.alectryon-io .alectryon-goals,
.alectryon-io .alectryon-goal,
.alectryon-io .goal-hyps > span,
.alectryon-io .goal-conclusion {
    border-radius: 0.15em;
}

.alectryon-io .alectryon-goal,
.alectryon-io .alectryon-message {
    align-items: center;
    background: #f6f7f6;
    border: 0em;
    display: block;
    flex-direction: column;
    margin: 0.25em;
    padding: 0.5em;
    position: relative;
}

.alectryon-io .goal-hyps {
    align-content: space-around;
    align-items: baseline;
    display: flex;
    flex-flow: column nowrap; /* re-stated in windowed mode */
    justify-content: space-around;
    /* LATER use a ‘gap’ property instead of margins once supported */
    margin: -0.15em -0.25em; /* -0.15em to cancel the item spacing */
    padding-bottom: 0.35em; /* 0.5em-0.15em to cancel the 0.5em of .goal-separator */
}

.alectryon-io .goal-hyps > br {
    display: none; /* Only for RSS readers */
}

.alectryon-io .goal-hyps > span,
.alectryon-io .goal-conclusion {
    /*background: #eeeeec;*/
    display: inline-block;
    padding: 0.15em 0.35em;
}

.alectryon-io .goal-hyps > span {
    align-items: baseline;
    display: inline-flex;
    margin: 0.15em 0.25em;
}

.alectryon-block var,
.alectryon-inline var,
.alectryon-io .goal-hyps > span > var {
    font-weight: 600;
    font-style: unset;
}

.alectryon-io .goal-hyps > span > var {
    /* Shrink the list of names, but let it grow as long as space is available. */
    flex-basis: min-content;
    flex-grow: 1;
}

.alectryon-io .goal-hyps > span b {
    font-weight: 600;
    margin: 0 0 0 0.5em;
    white-space: pre;
}

.alectryon-io .hyp-body,
.alectryon-io .hyp-type {
    display: flex;
    align-items: baseline;
}

.alectryon-io .goal-separator {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 1em; /* Fixed height to ignore goal name and markers */
    margin-top: -0.5em; /* Compensated in .goal-hyps when shown */
}

.alectryon-io .goal-separator hr {
    border: none;
    border-top: thin solid #555753;
    display: block;
    flex-grow: 1;
    margin: 0;
}

.alectryon-io .goal-separator .goal-name {
    font-size: 0.75em;
    margin-left: 0.5em;
}

/**********/
/* Banner */
/**********/

.alectryon-banner {
    background: #eeeeec;
    border: 1px solid #babcbd;
    font-size: 0.75em;
    padding: 0.25em;
    text-align: center;
    margin: 1em 0;
}

.alectryon-banner a {
    cursor: pointer;
    text-decoration: underline;
}

.alectryon-banner kbd {
    background: #d3d7cf;
    border-radius: 0.15em;
    border: 1px solid #babdb6;
    box-sizing: border-box;
    display: inline-block;
    font-family: inherit;
    font-size: 0.9em;
    height: 1.3em;
    line-height: 1.2em;
    margin: -0.25em 0;
    padding: 0 0.25em;
    vertical-align: middle;
}

/**********/
/* Toggle */
/**********/

.alectryon-toggle-label {
    margin: 1rem 0;
}

/******************/
/* Floating style */
/******************/

/* If there's space, display goals to the right of the code, not below it. */
@media (min-width: 80rem) {
    /* Unlike the windowed case, we don't want to move output blocks to the side
       when they are both :checked and -targeted, since it gets confusing as
       things jump around; hence the commented-output part of the selector,
       which would otherwise increase specificity */
    .alectryon-floating .alectryon-sentence.alectryon-target /* > .alectryon-toggle ~ */ .alectryon-output,
    .alectryon-floating .alectryon-sentence:hover .alectryon-output {
        top: 0;
        left: 100%;
        right: -100%;
        padding: 0 0.5em;
        position:  absolute;
    }

    .alectryon-floating .alectryon-output {
        min-height: 100%;
    }

    .alectryon-floating .alectryon-sentence:hover .alectryon-output {
        background: white; /* Ensure that short goals hide long ones */
    }

    /* This odd margin-bottom property prevents the sticky div from bumping
       against the bottom of its container (.alectryon-output).  The alternative
       would be enlarging .alectryon-output, but that would cause overflows,
       enlarging scrollbars and yielding scrolling towards the bottom of the
       page.  Doing things this way instead makes it possible to restrict
       .alectryon-output to a reasonable size (100%, through top = bottom = 0).
       See also https://stackoverflow.com/questions/43909940/. */
    /* See note on specificity above */
    .alectryon-floating .alectryon-sentence.alectryon-target /* > .alectryon-toggle ~ */ .alectryon-output > div,
    .alectryon-floating .alectryon-sentence:hover .alectryon-output > div {
        margin-bottom: -200%;
        position: sticky;
        top: 0;
    }

    .alectryon-floating .alectryon-toggle:checked + label + .alectryon-container .alectryon-sentence .alectryon-output > div,
    .alectryon-floating .alectryon-io .alectryon-sentence > .alectryon-toggle:checked ~ .alectryon-output > div {
        margin-bottom: unset; /* Undo the margin */
    }

    /* Float underneath the current fragment
    @media (max-width: 80rem) {
        .alectryon-floating .alectryon-output {
            top: 100%;
        }
    } */
}

/********************/
/* Multi-pane style */
/********************/

.alectryon-windowed {
    border: 0 solid #2e3436;
    box-sizing: border-box;
}

.alectryon-windowed .alectryon-sentence:hover .alectryon-output {
    background: white; /* Ensure that short goals hide long ones */
}

.alectryon-windowed .alectryon-output {
    position: fixed; /* Overwritten by the ‘:checked’ rules */
}

/* See note about specificity below */
.alectryon-windowed .alectryon-sentence:hover .alectryon-output,
.alectryon-windowed .alectryon-sentence.alectryon-target > .alectryon-toggle ~ .alectryon-output {
    padding: 0.5em;
    overflow-y: auto; /* Windowed contents may need to scroll */
}

.alectryon-windowed .alectryon-io .alectryon-sentence:hover .alectryon-output:not(:hover) .alectryon-messages,
.alectryon-windowed .alectryon-io .alectryon-sentence.alectryon-target .alectryon-output  .alectryon-messages,
.alectryon-windowed .alectryon-io .alectryon-sentence:hover .alectryon-output:not(:hover) .alectryon-goals,
.alectryon-windowed .alectryon-io .alectryon-sentence.alectryon-target .alectryon-output  .alectryon-goals {
    box-shadow: none; /* A shadow is unnecessary here and incompatible with overflow-y set to auto */
}

.alectryon-windowed .alectryon-io .alectryon-sentence.alectryon-target .alectryon-output .goal-hyps {
    /* Restated to override the :checked style */
    flex-flow: column nowrap;
    justify-content: space-around;
}


.alectryon-windowed .alectryon-sentence.alectryon-target .alectryon-extra-goals .alectryon-goal .goal-conclusion
/* Like .alectryon-io .alectryon-extra-goal-toggle:checked + .alectryon-goal .goal-conclusion */ {
    max-height: unset;
    overflow-y: unset;
}

.alectryon-windowed .alectryon-output > div {
    display: flex; /* Put messages after goals */
    flex-direction: column-reverse;
}

/*********************/
/* Standalone styles */
/*********************/

.alectryon-standalone {
    font-family: 'IBM Plex Serif', 'PT Serif', 'Merriweather', 'DejaVu Serif', serif;
    line-height: 1.5;
}

@media screen and (min-width: 50rem) {
    html.alectryon-standalone {
        /* Prevent flickering when hovering a block causes scrollbars to appear. */
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }
}

/* Coqdoc */

.alectryon-coqdoc .doc .code,
.alectryon-coqdoc .doc .inlinecode,
.alectryon-coqdoc .doc .comment {
    display: inline;
}

.alectryon-coqdoc .doc .comment {
    color: #eeeeec;
}

.alectryon-coqdoc .doc .paragraph {
    height: 0.75em;
}

/* Centered, Floating */

.alectryon-standalone .alectryon-centered,
.alectryon-standalone .alectryon-floating {
    max-width: 50rem;
    margin: auto;
}

@media (min-width: 80rem) {
    .alectryon-standalone .alectryon-floating {
        max-width: 80rem;
    }

    .alectryon-standalone .alectryon-floating > * {
        width: 50%;
        margin-left: 0;
    }
}

/* Windowed */

.alectryon-standalone .alectryon-windowed {
    display: block;
    margin: 0;
    overflow-y: auto;
    position: absolute;
    padding: 0 1em;
}

.alectryon-standalone .alectryon-windowed > * {
    /* Override properties of docutils_basic.css */
    margin-left: 0;
    max-width: unset;
}

.alectryon-standalone .alectryon-windowed .alectryon-io {
    box-sizing: border-box;
    width: 100%;
}

/* No need to predicate the ‘:hover’ rules below on ‘:not(:checked)’, since ‘left’,
   ‘right’, ‘top’, and ‘bottom’ will be inactived by the :checked rules setting
   ‘position’ to ‘static’ */


/* Specificity: We want the output to stay inline when hovered while unfolded
   (:checked), but we want it to move when it's targeted (i.e. when the user
   is browsing goals one by one using the keyboard, in which case we want to
   goals to appear in consistent locations).  The selectors below ensure
   that :hover < :checked < -targeted in terms of specificity. */
/* LATER: Reimplement this stuff with CSS variables */
.alectryon-windowed .alectryon-sentence.alectryon-target > .alectryon-toggle ~ .alectryon-output {
    position: fixed;
}

@media screen and (min-width: 60rem) {
    .alectryon-standalone .alectryon-windowed {
        border-right-width: thin;
        bottom: 0;
        left: 0;
        right: 50%;
        top: 0;
    }

    .alectryon-standalone .alectryon-windowed .alectryon-sentence:hover .alectryon-output,
    .alectryon-standalone .alectryon-windowed .alectryon-sentence.alectryon-target .alectryon-output {
        bottom: 0;
        left: 50%;
        right: 0;
        top: 0;
    }
}

@media screen and (max-width: 60rem) {
    .alectryon-standalone .alectryon-windowed {
        border-bottom-width: 1px;
        bottom: 40%;
        left: 0;
        right: 0;
        top: 0;
    }

    .alectryon-standalone .alectryon-windowed .alectryon-sentence:hover .alectryon-output,
    .alectryon-standalone .alectryon-windowed .alectryon-sentence.alectryon-target .alectryon-output {
        bottom: 0;
        left: 0;
        right: 0;
        top: 60%;
    }
}