/* LiveFlow 聚 — styles
   1. first paint   2. the page: stage, rail, footer, corner, credits, mobile sheet   3. the full layer: music, deck (REC, camera), save/open */

/* ---------- 1 ---------- */
:root {
    color-scheme: light;
    padding: env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)
}

body {
    margin: 0;
    font: 14px system-ui,sans-serif;
    background: #fafaf7
}

img {
    max-width: 100%
}

[hidden] {
    display: none!important
}

/* ---------- 2 ---------- */
:root {
    --ground: #050506;
    --ink: #ecece8;
    --dim: rgba(236,236,232,.64);
    --faint: rgba(236,236,232,.4);
    --hair: rgba(236,236,232,.17);
    --veil: rgba(5,5,6,.84);
    --err: #e7a39b;
    --latin: "Manrope","Helvetica Neue",Arial,sans-serif;
    --cjk: "Noto Serif TC","Songti TC","PMingLiU",serif;
    --pad: clamp(16px,3vw,44px);
    color-scheme: dark
}

:root[data-paper="light"] {
    --ground: #f4f4f1;
    --ink: #101012;
    --dim: rgba(16,16,18,.66);
    --faint: rgba(16,16,18,.44);
    --hair: rgba(16,16,18,.18);
    --veil: rgba(244,244,241,.86);
    --err: #a8322a;
    color-scheme: light
}

* {
    box-sizing: border-box
}

html,body {
    height: 100%;
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    overflow: hidden;
    font-family: var(--latin);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    transition: background-color .5s ease,color .5s ease
}

canvas#c {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: var(--cur,grab)
}

canvas#c.drag {
    cursor: var(--grab,grabbing)
}

html,button,label,.seg,.mbar,.rail,#foot {
    touch-action: manipulation
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    letter-spacing: inherit;
    text-transform: inherit
}

button:disabled {
    opacity: .35;
    cursor: default
}

button:focus-visible,label:focus-within,#strip:focus-visible {
    outline: 1px solid var(--dim);
    outline-offset: 4px
}

input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.ui {
    transition: opacity .6s ease
}

body.hide-ui .ui {
    opacity: 0;
    pointer-events: none
}

.brand,.foot,.corner,.rail {
    text-shadow: 0 0 6px var(--ground),0 0 2px var(--ground)
}

.brand {
    position: fixed;
    left: var(--pad);
    top: calc(var(--pad) + env(safe-area-inset-top,0px));
    display: grid;
    gap: 10px;
    z-index: 3;
    pointer-events: none
}

.name {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .6em
}

.status {
    font-size: 9px;
    letter-spacing: .3em;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    line-height: 1.9;
    text-transform: uppercase;
    max-width: min(62vw,430px)
}

.corner {
    position: fixed;
    right: var(--pad);
    top: calc(var(--pad) + env(safe-area-inset-top,0px));
    z-index: 3;
    pointer-events: none;
    display: grid;
    justify-items: end;
    gap: 18px
}

#paper {
    width: 28px;
    height: 28px;
    display: block;
    color: var(--ink);
    pointer-events: auto
}

#paper svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .7s cubic-bezier(.3,.7,.2,1)
}


#paper .lightdot {
    fill: var(--ground)
}

#fsBtn {
    width: 22px;
    height: 22px;
    display: block;
    color: var(--dim);
    pointer-events: auto
}

#fsBtn:hover {
    color: var(--ink)
}

#fsBtn[hidden] {
    display: none
}

#fsBtn svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3
}

#fsBtn .fs-out {
    display: none
}

#fsBtn.on .fs-in {
    display: none
}

#fsBtn.on .fs-out {
    display: inline
}

#creditsBtn {
    pointer-events: auto;
    font-size: 8.5px;
    letter-spacing: .3em;
    color: var(--faint);
    padding-left: .3em
}

#creditsBtn:hover {
    color: var(--ink)
}

#fullLink {
    pointer-events: auto;
    font-size: 8.5px;
    letter-spacing: .3em;
    color: var(--dim);
    padding-left: .3em;
    text-decoration: none
}

#fullLink:hover {
    color: var(--ink)
}

#fullLink .fl-short {
    display: none
}

.toast a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    pointer-events: auto
}

.credits {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    background: var(--veil);
    padding: 16px
}

.credits[hidden] {
    display: none
}

.cr-box {
    width: min(620px,100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid var(--hair);
    background: var(--ground);
    padding: 22px 24px;
    display: grid;
    gap: 18px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--dim)
}

.cr-head {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: .32em;
    color: var(--ink)
}

#crClose {
    color: var(--dim);
    letter-spacing: .3em
}

#crClose:hover {
    color: var(--ink)
}

.cr-intro {
    margin: 0
}

.cr-use {
    margin: 0 0 6px;
    color: var(--ink);
    line-height: 1.7
}

.cr-item {
    display: grid;
    gap: 3px;
    border-top: 1px solid var(--hair);
    padding-top: 14px
}

.cr-name {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: .06em
}

.cr-lic {
    font-size: 9.5px;
    letter-spacing: .24em;
    color: var(--faint);
    text-transform: uppercase
}

.cr-copy {
    color: var(--ink)
}

.cr-text {
    white-space: pre-wrap;
    font: inherit;
    font-size: 9.5px;
    line-height: 1.6;
    color: var(--faint);
    margin: 6px 0 0
}

.cjk {
    font-family: var(--cjk);
    font-size: 24px;
    line-height: 1;
    opacity: .85
}

#veil {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
    mix-blend-mode: difference;
    opacity: 0
}

#veil .thin {
    stroke: #fff;
    stroke-width: 1;
    fill: none;
    opacity: .5;
    vector-effect: non-scaling-stroke
}

#hud {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none
}

#pad {
    width: 66px;
    height: 66px;
    display: block;
    cursor: crosshair;
    touch-action: none;
    overflow: hidden
}

#pad:focus-visible {
    outline: 1px solid var(--dim);
    outline-offset: 4px
}

#pad .fr {
    fill: none;
    stroke: var(--hair);
    stroke-width: 1;
    vector-effect: non-scaling-stroke
}

#pad #pdSide {
    fill: var(--ink);
    opacity: .11
}

#pad #pdLine {
    stroke: var(--ink);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke
}

#pad #pdStem {
    stroke: var(--dim);
    stroke-width: 1;
    vector-effect: non-scaling-stroke
}

#pad #pdTip {
    fill: var(--ink)
}

#pad .end {
    fill: var(--ground);
    stroke: var(--ink);
    stroke-width: 1;
    vector-effect: non-scaling-stroke
}

.rail {
    position: fixed;
    left: var(--pad);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: grid;
    gap: 10px;
    justify-items: start;
    max-height: calc(100% - 300px);
    overflow: auto;
    scrollbar-width: none;
    padding: 9px 8px 3px 3px
}

.rail::-webkit-scrollbar {
    display: none
}

.pic {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9px;
    letter-spacing: .3em;
    color: var(--faint);
    font-variant-numeric: tabular-nums
}

.pic .face {
    width: 42px;
    height: 42px;
    display: block;
    border: 1px solid transparent;
    padding: 2px;
    transition: border-color .3s,opacity .3s;
    opacity: .55
}

.pic .face canvas {
    width: 100%;
    height: 100%;
    display: block
}

.pic .face:hover {
    opacity: .9
}

.pic.on .face {
    border-color: var(--ink);
    opacity: 1
}

.pic.on {
    color: var(--ink)
}

.pic.wait .face {
    opacity: .25
}

.pic .x {
    position: absolute;
    left: 31px;
    top: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    padding: 0;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--hair);
    opacity: 0;
    transition: opacity .3s;
    z-index: 2
}

@media (hover: none) {
    .pic .x {
        opacity:.9;
        width: 22px;
        height: 22px;
        left: 29px;
        top: -8px;
        font-size: 14px
    }
}

.pic:hover .x,.pic .x:focus-visible {
    opacity: 1
}

.pic .x:hover {
    color: var(--ink)
}

.add {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hair);
    font-size: 16px;
    font-weight: 300;
    color: var(--dim);
    cursor: pointer;
    transition: border-color .3s,color .3s
}

.add:hover {
    border-color: var(--dim);
    color: var(--ink)
}

.add[aria-disabled="true"] {
    opacity: .3;
    pointer-events: none
}

.hint {
    position: fixed;
    left: 50%;
    top: calc(var(--pad) * .42 + env(safe-area-inset-top,0px));
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: .42em;
    color: var(--dim);
    pointer-events: none;
    transition: opacity .8s ease;
    text-align: center;
    line-height: 2.2;
    z-index: 3;
    padding-left: .42em;
    width: max-content;
    max-width: max(240px,calc(100vw - 600px));
    text-shadow: 0 0 8px var(--ground)
}

.toast {
    position: fixed;
    left: 50%;
    top: calc(var(--pad) + 64px);
    transform: translateX(-50%);
    z-index: 12;
    font-size: 11px;
    letter-spacing: .14em;
    line-height: 1.7;
    color: var(--ink);
    max-width: min(560px,calc(100vw - 32px));
    text-align: center;
    transition: opacity .5s;
    background: var(--veil);
    padding: 8px 14px
}

.toast.bad {
    color: var(--err)
}

.foot {
    position: fixed;
    left: var(--pad);
    right: var(--pad);
    bottom: calc(var(--pad) + env(safe-area-inset-bottom,0px));
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 32px;
    font-size: 10px;
    letter-spacing: .32em;
    color: var(--dim);
    pointer-events: none
}

.foot>* {
    pointer-events: auto
}

.foot button:hover:not(:disabled),.foot label:hover {
    color: var(--ink)
}

.transport {
    display: grid;
    gap: 10px;
    justify-items: start;
    min-width: 0
}

#rec,#next,#lightBtn {
    display: flex;
    align-items: center;
    gap: 12px
}

.key {
    color: var(--faint);
    font-size: 9px;
    letter-spacing: .26em
}

.rdot.lit {
    background: var(--ink)
}

.rdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid currentColor;
    display: block
}

#rec.live {
    color: var(--ink)
}

#rec.live .rdot {
    background: var(--err);
    border-color: var(--err);
    animation: blink 1.1s steps(2,start) infinite
}

@keyframes blink {
    to {
        visibility: hidden
    }
}

.recpanel {
    position: fixed;
    left: var(--pad);
    bottom: 200px;
    z-index: 8;
    background: var(--veil);
    border: 1px solid var(--hair);
    padding: 16px 18px;
    display: grid;
    gap: 12px;
    justify-items: start;
    font-size: 9.5px;
    letter-spacing: .28em;
    color: var(--faint);
    max-width: calc(100vw - 2 * var(--pad));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.recpanel[hidden] {
    display: none
}

.recpanel .head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 24px
}

#recClose {
    color: var(--dim)
}

#recClose:hover {
    color: var(--ink)
}

.recpanel.live [data-k] {
    opacity: .3;
    pointer-events: none
}

.recpanel.live #recGo .rdot {
    animation: blink 1.1s steps(2,start) infinite
}

.recpanel .prev {
    min-height: 60px;
    display: flex;
    align-items: center
}

#recPrev {
    display: block;
    border: 1px solid var(--hair)
}

.recpanel .note {
    font-variant-numeric: tabular-nums;
    line-height: 1.8;
    max-width: 300px
}

.recpanel .go {
    display: flex;
    gap: 18px;
    align-items: center
}

#recGo,#recSave {
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--dim)
}

#recGo .rdot {
    background: var(--err);
    border-color: var(--err)
}

body.recording #hint {
    opacity: 0!important
}

.transport button,.transport label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer
}

.tri {
    width: 0;
    height: 0;
    border-left: 8px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent
}

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 36px;
    height: 16px;
    margin: 0;
    background: transparent;
    cursor: ew-resize
}

input[type=range]::-webkit-slider-runnable-track {
    height: 1px;
    background: var(--hair)
}

input[type=range]::-moz-range-track {
    height: 1px;
    background: var(--hair)
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink);
    margin-top: -4px
}

input[type=range]::-moz-range-thumb {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    background: var(--ink)
}

input[type=range]:focus-visible {
    outline: 1px solid var(--dim);
    outline-offset: 3px
}

.mvhint {
    margin-left: 12px;
    color: var(--faint)
}

.mvhint kbd {
    margin: 0 2px 0 0!important
}

@media (hover: none) {
    .mvhint {
        display:none
    }
}

.mvout {
    min-width: 2em;
    text-align: right;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em
}

.move kbd,#recLoop kbd {
    font: inherit;
    font-size: 7.5px;
    letter-spacing: 0;
    margin-left: 4px;
    padding: 0 2px;
    border: 1px solid var(--hair);
    border-radius: 2px;
    color: var(--faint);
    vertical-align: 1px
}

@media (hover: none) {
    .move kbd,#recLoop kbd {
        display:none
    }
}

@media (min-width: 760px) {
    body::after {
        content:"";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(var(--stage-b,170px) + 60px);
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(to top,var(--ground) 0%,color-mix(in srgb,var(--ground) 88%,transparent) 45%,transparent 100%)
    }
}

.seg {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9.5px;
    letter-spacing: .28em;
    color: var(--faint)
}

.seg button {
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    color: var(--dim);
    font-variant-numeric: tabular-nums
}

.seg button.on {
    color: var(--ink);
    border-bottom-color: var(--dim)
}

.seg .sw {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--c);
    border: 0;
    padding: 0;
    display: block;
    position: relative;
    cursor: pointer;
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: outline-color .3s
}

.seg .sw.on {
    outline-color: var(--dim)
}

.seg .sw:hover {
    outline-color: var(--faint)
}

.seg .sw.any {
    border: 1px dashed var(--dim)
}

.seg .sw.any input {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    opacity: 0;
    cursor: pointer;
    padding: 0;
    border: 0
}

#drop {
    position: fixed;
    inset: 12px;
    border: 1px solid var(--dim);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    display: grid;
    place-items: center;
    font-size: 11px;
    letter-spacing: .5em;
    color: var(--ink);
    background: var(--veil);
    text-align: center;
    padding: 16px
}

body.dragging #drop {
    opacity: 1
}

.mbar {
    display: none
}

.mrow {
    display: flex;
    gap: 10px;
    height: 52px
}

.mbtn {
    flex: 1;
    height: 52px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    border: 1px solid var(--hair);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: .32em;
    padding-left: .32em;
    color: var(--ink);
    background: var(--veil);
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s
}

.mbtn:active,.mbtn.down {
    border-color: var(--ink)
}

.mbtn.small {
    flex: 0 0 86px;
    gap: 10px
}

.mbtn .rdot.lit {
    background: var(--ink)
}

#sheetBtn {
    height: 36px;
    font-size: 9.5px;
    letter-spacing: .34em;
    color: var(--dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

#sheetBtn .chev {
    display: inline-block;
    transition: transform .3s
}

body.sheet #sheetBtn .chev {
    transform: rotate(180deg)
}

@media (max-width: 760px) {
    :root {
        --mbar-h:calc(102px + env(safe-area-inset-bottom,0px))
    }

    .brand {
        gap: 4px
    }

    .name {
        font-size: 13px;
        letter-spacing: .5em
    }

    .status {
        display: none
    }

    .corner {
        display: flex;
        align-items: center;
        gap: 16px
    }

    #fullLink .fl-long {
        display: none
    }

    #fullLink .fl-short {
        display: inline
    }

    .cjk {
        font-size: 19px
    }

    #paper {
        width: 24px;
        height: 24px
    }

    .rail {
        top: auto;
        bottom: calc(var(--mbar-h) + 10px);
        transform: none;
        display: flex;
        left: var(--pad);
        right: var(--pad);
        max-height: none;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden
    }

    .pic {
        flex-direction: column;
        gap: 4px
    }

    .rail {
        padding-top: 10px;
        height: 76px
    }

    .mbar {
        display: grid;
        gap: 6px;
        position: fixed;
        left: var(--pad);
        right: var(--pad);
        bottom: calc(8px + env(safe-area-inset-bottom,0px));
        z-index: 7
    }

    .foot {
        display: none
    }

    body.sheet .foot {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 22px;
        left: 0;
        right: 0;
        bottom: var(--mbar-h);
        max-height: min(46vh,calc(100vh - var(--mbar-h) - 200px));
        max-height: min(46dvh,calc(100dvh - var(--mbar-h) - 200px));
        overflow-y: auto;
        padding: 20px var(--pad) 34px;
        scroll-padding-bottom: 34px;
        z-index: 6;
        text-shadow: none;
        font-size: 10px;
        pointer-events: auto;
        touch-action: pan-y;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch
    }

    body.sheet::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--mbar-h);
        height: var(--sheet-h,0px);
        background: var(--ground);
        border-top: 1px solid var(--hair);
        z-index: 5;
        pointer-events: none
    }

    .foot #next,.foot #lightBtn {
        display: none
    }

    input[type=range] {
        height: 26px
    }

    input[type=range]::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
        margin-top: -7.5px
    }

    input[type=range]::-moz-range-thumb {
        width: 16px;
        height: 16px
    }

    .seg {
        flex-wrap: wrap;
        gap: 10px 12px
    }

    .seg .sw {
        width: 20px;
        height: 20px
    }

    #pad {
        width: 96px;
        height: 96px
    }

    .hint {
        top: calc(var(--pad) + env(safe-area-inset-top,0px) + 34px);
        letter-spacing: .3em;
        width: calc(100vw - 32px);
        max-width: none;
        padding-left: 0
    }

    .recpanel {
        left: var(--pad);
        right: var(--pad)
    }
}
}

@media (prefers-reduced-motion:reduce) {
.ui,.hint,.pic .face,.toast,html,body,#paper svg {
    transition: none
}
}

/* ---------- 3 ---------- */
#saveBtn,#openBtn{pointer-events:auto;font-size:8.5px;letter-spacing:.3em;color:var(--dim);padding-left:.3em;cursor:pointer}
#saveBtn:hover,#openBtn:hover{color:var(--ink)}
#play.on,#mPlay.on{color:var(--ink)}
#play.on .tri,#mPlay.on .tri{border:0;width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
#recBtn.rec,#loopBtn.rec{color:var(--err);border-bottom-color:var(--err)}
.titlein{display:flex;align-items:center;gap:10px;font-size:9.5px;letter-spacing:.28em;color:var(--faint)}
.titlein input{font:inherit;letter-spacing:.2em;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--hair);padding:2px 0 4px;width:190px;text-transform:uppercase;border-radius:0}
.titlein input::placeholder{color:var(--faint)}
.titlein input:focus{outline:none;border-bottom-color:var(--dim)}
.rail .pic{cursor:grab}
@media (max-width:760px){
}


/* RANDOM */
.dice{width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg);display:block;margin:0 1px}

/* ---------- 4. the bar: everything at once, low along the bottom, one column per kind ---------- */
.foot{bottom:calc(14px + env(safe-area-inset-bottom,0px));align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;gap:0}
.col{display:grid;gap:7px;align-content:start;justify-items:start;min-width:min-content;flex:1 1 auto;padding:0 clamp(12px,1.6vw,28px);border-left:1px solid var(--hair)}
.col:first-child{padding-left:0;border-left:0;flex:0 0 auto}
.col:last-child{padding-right:0}
.col>.h{justify-self:stretch;display:flex;gap:14px;align-items:baseline;font-size:8px;letter-spacing:.34em;color:var(--faint);opacity:.8;margin-bottom:3px}
.two{display:grid;grid-template-columns:repeat(2,auto);gap:0 clamp(14px,1.4vw,24px)}
.stack{display:grid;gap:7px;align-content:start;justify-items:start;min-width:min-content}
.row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.transport{gap:9px}
.transport button{gap:11px}
.col .seg{font-size:8.5px;letter-spacing:.24em;gap:9px;flex-wrap:nowrap;white-space:nowrap}
.col .seg button{padding-bottom:3px}
.col .seg .sw{width:11px;height:11px}
.sl{display:flex;align-items:center;gap:10px;justify-self:stretch;font-size:8.5px;letter-spacing:.24em;color:var(--faint);min-width:0}
.sl>span{width:54px;flex:none}
.sl input[type=range]{min-width:60px;height:14px}
.act{display:flex;align-items:center;gap:12px;cursor:pointer;color:var(--dim);font-size:9px;letter-spacing:.28em}
.act:hover{color:var(--ink)}
.trk{color:var(--dim);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.24em}
.padrow{display:flex;align-items:flex-start;gap:10px;font-size:8.5px;letter-spacing:.24em;color:var(--faint)}
.padrow>span{width:54px;flex:none;padding-top:2px}
.padrow #pad{width:44px;height:44px}
.titlein{display:flex;align-items:center;gap:10px;justify-self:stretch;font-size:8.5px;letter-spacing:.24em;color:var(--faint)}
.titlein input{flex:1;min-width:0;width:auto;font-size:8.5px;padding:1px 0 3px}
/* the corner: full screen, then the film, then the piece */
.corner{gap:16px}
.cact{display:grid;gap:9px;justify-items:end;pointer-events:auto}
.cact button,.cact label{font-size:8.5px;letter-spacing:.3em;color:var(--dim);padding-left:.3em;cursor:pointer;display:flex;align-items:center;gap:8px}
.cact button:hover,.cact label:hover{color:var(--ink)}
.recBtn .rdot{width:7px;height:7px}
.recBtn.rec,#loopBtn.rec{color:var(--err)!important}
.recBtn.rec .rdot{background:var(--err);border-color:var(--err)}
.recview{position:fixed;right:calc(var(--pad) + 110px);top:calc(var(--pad) + env(safe-area-inset-top,0px));width:200px;z-index:3;border:1px solid var(--hair);background:var(--ground)}
.recview canvas{display:block;width:100%;height:auto}
/* narrower desktops: the same single row, drawn tighter; only below 1100px does it wrap */
@media (max-width:1700px) and (min-width:761px){
    .col{padding:0 12px}
    .two{gap:0 12px}
    .col .seg,.sl,.padrow,.titlein,.act{letter-spacing:.15em;font-size:8px}
    .col .seg{gap:7px}
    .sl>span,.padrow>span{width:44px}
    .sl input[type=range]{min-width:36px}
    .col>.h{letter-spacing:.26em}
    .transport button{letter-spacing:.22em}
    .trk{max-width:90px}
}
@media (max-width:1360px) and (min-width:761px){
    .foot{flex-wrap:wrap;row-gap:14px;justify-content:flex-start}
    .col{flex:0 1 auto}
}
@media (max-width:760px){
    body.sheet .foot{gap:0}
    .col{border-left:0;border-top:1px solid var(--hair);padding:16px 0 18px;gap:12px}
    .col:first-child{border-top:0;padding-top:0}
    .two{grid-template-columns:1fr;gap:12px}
    .stack{gap:12px}
    .col .seg{flex-wrap:wrap;white-space:normal}
    .col .seg .sw{width:20px;height:20px}
    .sl>span,.padrow>span{width:76px}
    .padrow #pad{width:96px;height:96px}
    .transport .sub,.foot #play{display:none}
    .corner{display:grid;justify-items:end;gap:10px}
    .cact{display:flex;gap:14px}
    .hint{top:calc(var(--pad) + env(safe-area-inset-top,0px) + 78px)}
    .recview{right:var(--pad);top:auto;bottom:calc(var(--mbar-h,120px) + 92px);width:150px}
}

/* ---------- 5. the name: LIVEFLOW — 聚, where 聚 turns the paper over (B) ---------- */
.brand .dash{color:var(--faint);letter-spacing:0;margin:0 .35em 0 -.2em}
#paper{display:inline-block;width:auto;height:auto;font-family:var(--cjk);font-size:21px;font-weight:300;letter-spacing:0;line-height:1;vertical-align:-3px;
    color:var(--ink);pointer-events:auto;cursor:pointer;opacity:.85;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .3s,text-shadow .3s}
#paper:hover{opacity:1;text-shadow:0 0 10px var(--dim)}
:root[data-paper="light"] #paper{transform:rotateY(360deg)}
.byline{font-size:9px;letter-spacing:.3em;color:var(--faint);display:flex;align-items:center;gap:0}
.byline .dash{margin:0 .8em 0 .5em}
#creditsBtn{pointer-events:auto;font-size:9px;letter-spacing:.3em;color:var(--dim);padding:0}
#creditsBtn:hover{color:var(--ink)}
.status:empty{display:none}
@media (max-width:760px){#paper{font-size:17px;width:auto;height:auto}.byline{font-size:8px}}

/* LIVEFLOW: the way back to the beginning; it turns like 聚 when pressed */
#homeBtn{pointer-events:auto;font:inherit;letter-spacing:inherit;color:inherit;display:inline-block;opacity:.92;transition:opacity .3s,text-shadow .3s}
#homeBtn:hover{opacity:1;text-shadow:0 0 10px var(--dim)}
#homeBtn.spin{animation:lfTurn .7s cubic-bezier(.3,.7,.2,1)}
@keyframes lfTurn{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){#homeBtn.spin{animation:none}}

/* ---------- 6. top left: the name, the title, what is rendered · bottom left: status and byline · bottom right: presets ---------- */
.brand{gap:12px}
.brand .titlein{pointer-events:auto;width:300px;font-size:9px;letter-spacing:.3em;margin-top:4px}
.brand .titlein input{font-size:10px;letter-spacing:.22em;color:var(--ink)}
.rendered{font-size:8.5px;letter-spacing:.3em;color:var(--faint);font-variant-numeric:tabular-nums}
.lowleft{position:fixed;left:var(--pad);bottom:calc(var(--stage-b,220px) - 34px);z-index:3;display:grid;gap:7px;pointer-events:none;text-shadow:0 0 6px var(--ground),0 0 2px var(--ground)}
.presets{position:fixed;right:var(--pad);bottom:calc(var(--stage-b,220px) - 34px);z-index:3;display:grid;gap:8px;justify-items:end;text-shadow:0 0 6px var(--ground),0 0 2px var(--ground)}
.presets button,.presets label{font-size:8.5px;letter-spacing:.3em;color:var(--dim);cursor:pointer;pointer-events:auto;padding-left:.3em}
.presets button:hover,.presets label:hover{color:var(--ink)}
.hint{top:auto;bottom:calc(var(--stage-b,220px) - 38px)}
@media (max-width:760px){
    .brand .titlein{display:none}
    .rendered{display:none}
    .lowleft{bottom:auto;top:calc(var(--pad) + env(safe-area-inset-top,0px) + 28px)}
    .presets{bottom:calc(var(--mbar-h,120px) + 96px)}
    .hint{top:calc(var(--pad) + env(safe-area-inset-top,0px) + 78px);bottom:auto}
}

/* ---------- 7. REC under the rail, one line under the title ---------- */
.rendered{max-width:min(560px,calc(100vw - 2 * var(--pad) - 120px));line-height:1.8}

/* ---------- 8. the title in the middle of the top line; REC on the right; the randomizer under full screen ---------- */
.brand .rendered{display:grid;gap:5px}
.titlebar{position:fixed;left:50%;top:calc(var(--pad) + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:3;text-shadow:0 0 6px var(--ground),0 0 2px var(--ground)}
.titlebar .titlein{width:min(360px,34vw);font-size:9px;letter-spacing:.3em;margin-top:1px}
.titlebar .titlein input{font-size:10px;letter-spacing:.22em;color:var(--ink);text-align:center}
.titlebar .titlein input::placeholder{text-align:center}
#recBtn{position:fixed;right:var(--pad);top:50%;transform:translateY(-50%);z-index:3;display:grid;justify-items:center;gap:7px;color:var(--dim);cursor:pointer}
#recBtn svg{width:22px;height:22px;display:block;overflow:visible}
#recBtn .ring{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
#recBtn .dot{fill:currentColor;transform-origin:10px 10px;transition:transform .3s}
#recBtn:hover{color:var(--ink)}
#recBtn:hover .dot{transform:scale(1.15)}
#recBtn .lbl{font-size:8.5px;letter-spacing:.24em;font-variant-numeric:tabular-nums;white-space:nowrap}
#recBtn.rec{color:var(--err)}
#recBtn.rec .dot{animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{50%{transform:scale(.7);opacity:.6}}
#randBtn{width:22px;height:22px;display:block;color:var(--dim);pointer-events:auto;cursor:pointer}
#randBtn svg{width:100%;height:100%;display:block;overflow:visible}
#randBtn .die{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
#randBtn circle{fill:currentColor}
#randBtn:hover{color:var(--ink)}
#randBtn:hover svg{transform:rotate(-8deg);transition:transform .3s}
#randBtn.roll svg{animation:dieRoll .6s cubic-bezier(.3,.7,.2,1)}
@keyframes dieRoll{0%{transform:rotate(0) scale(1)}35%{transform:rotate(200deg) scale(.78)}100%{transform:rotate(360deg) scale(1)}}
@media (prefers-reduced-motion:reduce){#randBtn.roll svg,#recBtn.rec .dot{animation:none}}
@media (max-width:760px){
    .titlebar{display:none}
    .brand .rendered{display:none}
    .corner{display:flex!important;flex-direction:row;align-items:center;gap:16px}
    #recBtn{top:calc(var(--pad) + env(safe-area-inset-top,0px));transform:none;right:calc(var(--pad) + 84px);grid-auto-flow:column;align-items:center}
}

/* ---------- 9. projects top left under the name; the randomizer bottom right, level with the byline; PLAY sits low ---------- */
.presets{left:var(--pad);right:auto;top:calc(var(--pad) + env(safe-area-inset-top,0px) + 196px);bottom:auto;justify-items:start}
.presets button,.presets label{padding-left:0}
#randBtn{position:fixed;right:var(--pad);bottom:calc(var(--stage-b,220px) - 25px);z-index:3}
.lowleft{bottom:calc(var(--stage-b,220px) - 20px)}
.hint{bottom:calc(var(--stage-b,220px) - 20px)}
.col.transport{align-self:flex-end}
@media (max-width:760px){
    .presets{left:auto;right:var(--pad);top:auto;bottom:calc(var(--mbar-h,120px) + 96px);justify-items:end}
    #randBtn{bottom:auto;top:calc(var(--pad) + env(safe-area-inset-top,0px));right:calc(var(--pad) + 42px)}
    .lowleft{bottom:auto}
    .hint{bottom:auto}
}
/* a smaller title line */
.titlebar .titlein{width:min(250px,26vw);font-size:8px;letter-spacing:.28em;gap:8px}
.titlebar .titlein input{font-size:8.5px;letter-spacing:.2em;padding:0 0 3px}

/* ---------- 10. one line on top, one line above the bar: everything on it shares its height and its middle ---------- */
:root{--row-top:calc(var(--pad) + env(safe-area-inset-top,0px));--row-h:26px;--row-low:calc(var(--stage-b,220px) - 28px)}
.brand{top:var(--row-top)}
.brand .name{height:var(--row-h);display:flex;align-items:center;line-height:1}
#paper{vertical-align:0}
.titlebar{top:var(--row-top);height:var(--row-h);display:flex;align-items:center}
.titlebar .titlein{width:min(380px,30vw);font-size:9.5px;letter-spacing:.34em;gap:12px;margin:0}
.titlebar .titlein input{font-size:12px;font-weight:500;letter-spacing:.34em;padding:0 0 4px}
.corner{top:var(--row-top)}
.corner #fsBtn{margin:calc((var(--row-h) - 22px) / 2) 0}
.lowleft,.hint,#randBtn{bottom:var(--row-low);height:var(--row-h);display:flex;align-items:center}
.lowleft{gap:0}
.hint{line-height:var(--row-h);padding-top:0;padding-bottom:0;white-space:nowrap}
#randBtn{width:22px;height:var(--row-h);padding:2px 0}
#randBtn svg{height:22px}
/* REC: the icon's middle sits on the rail's middle; the clock hangs below it without moving it */
#recBtn{top:calc(50% + 3px);transform:translateY(-50%);display:block;width:22px;height:22px}
#recBtn .lbl{position:absolute;top:30px;right:0;white-space:nowrap}
@media (max-width:760px){
    .lowleft,.hint{bottom:auto;height:auto}
    #recBtn{transform:none;top:calc(var(--row-top) + 2px)}
    #recBtn .lbl{top:4px;right:30px}
    #randBtn{bottom:auto;top:var(--row-top)}
}

/* REC exactly on the rail's middle; RANDOMIZER back in the PLAY column, so that column is four rows again and starts level with the others */
#recBtn{top:50%}
.col.transport{align-self:flex-start}
#randRow .die{width:11px;height:11px;overflow:visible;flex:none}
#randRow .die rect{fill:none;stroke:currentColor;stroke-width:1.3;vector-effect:non-scaling-stroke}
#randRow .die circle{fill:currentColor}
#randRow.roll .die{animation:dieRoll .6s cubic-bezier(.3,.7,.2,1)}
@media (prefers-reduced-motion:reduce){#randRow.roll .die{animation:none}}
.brand .name{gap:13px}
.brand .name .dash{margin:0}

/* AUTO DEPTH, in the MOTION heading */
.autotag{margin-left:10px;font-size:7.5px;letter-spacing:.26em;padding:2px 6px 2px 7px;border:1px solid var(--hair);border-radius:2px;color:var(--faint);cursor:pointer;transition:color .3s,border-color .3s}
.autotag:hover{color:var(--ink)}
.autotag.on{color:var(--ink);border-color:var(--dim)}

/* ---------- 11. MUSIC under the title (desktop); the bar is four rows at most ---------- */
.two.three{grid-template-columns:repeat(3,auto)}
.col.music .h .act{margin-left:6px;font-size:8px;letter-spacing:.24em}
.mus-more{display:grid;gap:7px}
@media (min-width:761px){
    .col.music{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--row-top) + var(--row-h) + 12px);border:0;padding:0;justify-items:center;gap:8px;min-width:0;text-shadow:0 0 6px var(--ground),0 0 2px var(--ground)}
    .col.music>.h{justify-self:center;margin:0;opacity:1;gap:10px}
    .col.music .trk{max-width:260px}
    .mus-more{display:none;justify-items:center}
    body.has-track .mus-more{display:grid}
    .col.music .row{justify-content:center;gap:6px 22px;flex-wrap:nowrap}
    .col.music .sl{justify-self:auto;width:210px}
    .col.music .sl input[type=range]{min-width:80px}
}
@media (max-width:760px){.two.three{grid-template-columns:1fr}.mus-more{display:grid}.col.music .row{flex-wrap:wrap}}
@media (max-width:760px){.titlebar{display:none!important}}

/* ---------- 12. credits ---------- */
.cr-box{width:min(660px,100%);padding:30px 34px 26px;gap:26px;border:1px solid var(--hair);box-shadow:0 30px 80px rgba(0,0,0,.55);font-size:11.5px;scrollbar-width:thin}
.cr-head{align-items:center;font-size:9px;letter-spacing:.38em;color:var(--faint)}
#crClose{display:flex;gap:10px;align-items:center;font-size:9px;letter-spacing:.32em}
.cr-hero{display:grid;gap:10px}
.cr-title{font-size:20px;font-weight:500;letter-spacing:.5em;color:var(--ink);display:flex;align-items:center;gap:.45em;flex-wrap:wrap;line-height:1.2}
.cr-dash{color:var(--faint);letter-spacing:0}
.cr-ju{font-family:var(--cjk);font-size:24px;letter-spacing:0;font-weight:300}
.cr-title small{font-size:10px;letter-spacing:.42em;color:var(--dim);margin-left:.2em}
.cr-by{font-size:9px;letter-spacing:.32em;color:var(--faint)}
.cr-box a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--hair);transition:color .3s,border-color .3s}
.cr-box a:hover{color:var(--ink);border-color:var(--dim)}
.cr-dot{color:var(--faint);margin:0 .3em}
.cr-use{margin:0;display:grid;gap:4px;padding:2px 0 2px 18px;border-left:1px solid var(--dim);color:var(--ink);font-size:13px;font-weight:300;line-height:1.75}
.cr-use p{margin:0}
.cr-use b{font-weight:500}
.cr-copybtn{justify-self:start;margin-top:12px;font-size:8.5px;letter-spacing:.32em;color:var(--dim);padding:7px 12px 7px 14px;border:1px solid var(--hair);transition:color .3s,border-color .3s}
.cr-copybtn:hover{color:var(--ink);border-color:var(--dim)}
.cr-built{display:grid;gap:0}
.cr-label{font-size:8.5px;letter-spacing:.38em;color:var(--faint);padding-bottom:8px}
.cr-intro{margin:0 0 10px;color:var(--dim)}
.cr-item{display:block;border-top:1px solid var(--hair);padding:0}
.cr-item:last-child{border-bottom:1px solid var(--hair)}
.cr-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto 14px;gap:2px 16px;align-items:baseline;padding:12px 0}
.cr-item summary::-webkit-details-marker{display:none}
.cr-item summary::after{content:"+";grid-column:3;grid-row:1;color:var(--faint);font-size:13px;line-height:1;transition:transform .3s}
.cr-item[open] summary::after{transform:rotate(45deg)}
.cr-item summary:hover .cr-name{color:var(--ink)}
.cr-name{grid-column:1;color:var(--dim);font-weight:500;letter-spacing:.06em;transition:color .3s}
.cr-lic{grid-column:2;grid-row:1;font-size:8.5px;letter-spacing:.22em;color:var(--faint);text-transform:uppercase;white-space:nowrap}
.cr-what{grid-column:1 / 3;color:var(--faint);font-size:10.5px;line-height:1.6}
.cr-full{padding:0 0 14px}
.cr-copy{color:var(--dim);font-size:10.5px}
.cr-text{max-height:220px;overflow:auto;margin-top:8px;padding:12px 14px;border:1px solid var(--hair);font-size:9.5px}
.cr-foot{font-size:8.5px;letter-spacing:.3em;color:var(--faint);text-align:center;padding-top:4px}
@media (max-width:760px){.cr-box{padding:24px 20px}.cr-title{font-size:16px}.cr-item summary{grid-template-columns:1fr 14px}.cr-lic{grid-column:1;grid-row:auto}.cr-what{grid-column:1}}

/* MODEL selector (top left) and the copy field in the credits */
.brand .rendered .seg{pointer-events:auto;font-size:8.5px;letter-spacing:.28em;gap:10px}
.brand .rendered .seg button{padding-bottom:2px}
.cr-line{display:block;width:100%;margin-top:10px;font:inherit;font-size:11px;letter-spacing:.04em;color:var(--ink);background:none;border:1px solid var(--hair);padding:8px 10px}
.cr-line[hidden]{display:none}

/* ---------- 19. MODEL a bit lower; PAUSE / PLAY in the music line ---------- */
.brand .rendered #modelBtn{margin-top:9px}
.mus-pp{display:none;font:inherit;background:none;border:0;padding:0;cursor:pointer;pointer-events:auto}
body.has-track .mus-pp{display:inline-flex}
.mus-pp.on .lbl{color:inherit}

/* ---------- 20. MODEL button + live MODEL window; WORD · PICTURE; SHARE · LINK ---------- */
#modelBtn{pointer-events:auto;justify-self:start;display:inline-flex;align-items:center;gap:10px;font-size:8.5px;letter-spacing:.28em;color:var(--ink);padding:3px 0;border-bottom:1px solid var(--hair);transition:border-color .3s}
#modelBtn .k{color:var(--faint)}
#modelBtn .car{color:var(--dim);font-size:8px;letter-spacing:0;transition:transform .3s}
#modelBtn:hover{border-color:var(--dim)}
#modelBtn:hover .car{transform:translateY(2px)}
.md-box{width:min(980px,100%)}
.md-sub{color:var(--faint);letter-spacing:.3em}
.md-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.md-card{display:grid;gap:8px;justify-items:start;text-align:left;padding:0;cursor:pointer;color:var(--dim)}
.md-card canvas{width:100%;aspect-ratio:1;display:block;border:1px solid var(--hair);background:var(--ground);transition:border-color .3s,transform .3s}
.md-card b{font-weight:500;font-size:10px;letter-spacing:.38em;color:var(--dim)}
.md-card small{font-size:7.5px;letter-spacing:.24em;color:var(--faint);line-height:1.6}
.md-card:hover canvas{border-color:var(--dim);transform:translateY(-2px)}
.md-card:hover b,.md-card.on b{color:var(--ink)}
.md-card.on canvas{border-color:var(--ink)}
.md-card.on b::after{content:"  ·  ON";color:var(--faint)}
.md-foot{font-size:8px;letter-spacing:.3em;color:var(--faint)}
.wd-box{width:min(460px,100%)}
#wordIn{width:100%;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--ink);font:600 34px/1.3 "Noto Serif CJK TC","Noto Serif TC",Georgia,serif;text-align:center;padding:10px 0;outline:none;letter-spacing:.08em}
#wordIn:focus{border-color:var(--dim)}
#wordIn::placeholder{color:var(--faint)}
.wd-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
#wdGo,#wdClose{color:var(--dim);letter-spacing:.3em;font-size:9px;cursor:pointer}
#wdGo:hover,#wdClose:hover{color:var(--ink)}
.add.word{font-size:12px;letter-spacing:.06em;font-family:Georgia,serif;background:none}
@media (max-width:760px){.md-grid{grid-template-columns:repeat(2,1fr)}.md-sub{display:none}}

/* ---------- 21. SHARE · PROJECT in line; the randomizer's die as wide as the triangles; word button lower; typefaces ---------- */
.presets #shareBtn{padding-left:.3em}
#randRow .die{margin:0 -1.6px 0 -1.4px}
.rail .add.word{margin-top:14px}
.wd-fonts{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.wd-fonts button{display:grid;gap:6px;justify-items:center;padding:10px 4px 8px;border:1px solid var(--hair);color:var(--dim);cursor:pointer;transition:border-color .3s,color .3s}
.wd-fonts button i{font-style:normal;line-height:1.2;color:var(--ink);white-space:nowrap}
.wd-fonts button span{font-size:7.5px;letter-spacing:.28em}
.wd-fonts button:hover{border-color:var(--dim)}
.wd-fonts button.on{border-color:var(--ink);color:var(--ink)}
.wd-box{width:min(560px,100%)}
@media (max-width:760px){.wd-fonts{grid-template-columns:repeat(3,1fr)}}

/* ---------- 22. your own typefaces: [ + ] and their tiles ---------- */
.wd-mine{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wd-mine button{display:grid;gap:6px;justify-items:center;padding:10px 8px 8px;min-width:78px;border:1px solid var(--hair);color:var(--dim);cursor:pointer;transition:border-color .3s,color .3s}
.wd-mine button i{font-style:normal;line-height:1.2;color:var(--ink);white-space:nowrap}
.wd-mine button span{font-size:7.5px;letter-spacing:.2em;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-mine button:hover{border-color:var(--dim)}
.wd-mine button.on{border-color:var(--ink);color:var(--ink)}
.wd-add{display:grid;gap:6px;justify-items:center;align-content:center;padding:10px 18px 8px;min-width:78px;border:1px dashed var(--hair);color:var(--dim);font-size:13px;letter-spacing:.3em;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.wd-add span{font-size:7px;letter-spacing:.24em;color:var(--faint)}
.wd-add:hover,.wd-add.over{border-color:var(--ink);color:var(--ink)}
.wd-add.over{background:rgba(255,255,255,.04)}

/* ---------- 23. SHARE · PROJECT window: key, name, short links ---------- */
.sh-box{width:min(640px,100%)}
.sh-pane{display:grid;gap:14px}
.sh-pane[hidden]{display:none}
.sh-lead{margin:0;font-size:10px;letter-spacing:.06em;line-height:1.7;color:var(--dim)}
.sh-lead b{color:var(--ink);font-weight:500}
.sh-h{font-size:9px;letter-spacing:.34em;color:var(--faint)}
.sh-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sh-card{display:grid;gap:10px;align-content:start;padding:16px;border:1px solid var(--hair)}
.sh-card small{font-size:7px;letter-spacing:.22em;color:var(--faint);line-height:1.6}
.sh-box input[type=text]{width:100%;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--ink);font:500 12px/1.4 Manrope,sans-serif;letter-spacing:.2em;padding:7px 0;outline:none}
.sh-box input[type=text]:focus{border-color:var(--dim)}
.sh-box input[type=text]::placeholder{color:var(--faint)}
#shKey{font-family:"Noto Serif TC",serif;letter-spacing:.12em}
.sh-box button,.sh-file{justify-self:start;font-size:9px;letter-spacing:.3em;color:var(--dim);cursor:pointer;padding:0;transition:color .3s}
.sh-box button:hover,.sh-file:hover{color:var(--ink)}
.sh-box button:disabled{opacity:.6;cursor:wait}
.sh-file{font-size:7.5px;color:var(--faint)}
.sh-main{color:var(--ink)!important;border-bottom:1px solid var(--dim)!important;padding-bottom:3px!important}
.sh-key{font:400 30px/1.3 "Noto Serif TC",serif;letter-spacing:.18em;color:var(--ink);text-align:center;padding:18px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);user-select:all;word-break:break-all}
.sh-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.sh-me{justify-content:space-between}
.sh-count{margin-left:10px;color:var(--faint)}
.sh-go input{flex:1;min-width:180px}
.sh-link{font:400 13px/1.5 "Noto Serif TC",serif;letter-spacing:.06em;color:var(--ink);padding:10px 12px;border:1px solid var(--hair);user-select:all;word-break:break-all}
.sh-items{list-style:none;margin:0;padding:0;display:grid;max-height:240px;overflow:auto;scrollbar-width:thin}
.sh-items li{display:grid;grid-template-columns:auto 1fr auto auto auto auto;gap:14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair);font-size:9px;letter-spacing:.2em}
.sh-id{font:400 13px "Noto Serif TC",serif;letter-spacing:.08em;color:var(--ink)}
.sh-t{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-d{color:var(--faint);font-size:8px}
.sh-alt{border-top:1px solid var(--hair);padding-top:12px}
.sh-alt[hidden]{display:none}
.sh-alt button{font-size:7.5px;color:var(--faint)}
@media (max-width:760px){.sh-two{grid-template-columns:1fr}.sh-items li{grid-template-columns:auto 1fr auto auto auto}.sh-d{display:none}}

/* ---------- 24. the gate: every visit opens on it, the live cloud blurred behind ---------- */
.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px 16px;overflow:auto;opacity:1;transition:opacity .9s ease}
.gate[hidden]{display:none}
.gate.out{opacity:0;pointer-events:none}
.gt-veil{position:fixed;inset:0;-webkit-backdrop-filter:blur(9px) brightness(.5) saturate(.8);backdrop-filter:blur(9px) brightness(.5) saturate(.8);
    background:radial-gradient(ellipse at 50% 46%,rgba(5,5,6,.1) 0,rgba(5,5,6,.55) 55%,rgba(5,5,6,.92) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
:root[data-paper="light"] .gt-veil{-webkit-backdrop-filter:blur(9px) brightness(1.05);backdrop-filter:blur(9px) brightness(1.05);background:radial-gradient(ellipse at 50% 46%,rgba(244,244,241,.15) 0,rgba(244,244,241,.6) 55%,rgba(244,244,241,.94) 100%)}
.gt-box{position:relative;width:min(400px,100%);display:grid;gap:20px;justify-items:center;text-align:center;color:var(--dim)}
.gt-mark{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font:200 min(70vh,70vw)/1 "Noto Serif TC",serif;color:var(--ink);opacity:.035;pointer-events:none;animation:gtBreath 9s ease-in-out infinite;z-index:-1}
@keyframes gtBreath{0%,100%{opacity:.03;transform:translate(-50%,-50%) scale(1)}50%{opacity:.06;transform:translate(-50%,-50%) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.gt-mark{animation:none}}
.gt-title{font-size:19px;font-weight:500;letter-spacing:.5em;color:var(--ink);padding-left:.5em;display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap;justify-content:center}
.gt-title .gt-dash{color:var(--faint);letter-spacing:0}
.gt-title small{font-size:9px;letter-spacing:.42em;color:var(--dim)}
.gt-by{font-size:8.5px;letter-spacing:.42em;color:var(--faint);margin-top:-12px}
.gt-pane{display:grid;gap:14px;justify-items:center;width:100%}
.gt-pane[hidden]{display:none}
.gt-lead{margin:0;font-size:10.5px;line-height:1.75;letter-spacing:.05em;color:var(--dim);max-width:340px}
.gt-form{display:grid;gap:12px;width:100%;justify-items:center}
.gt-box input[type=text]{width:100%;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--ink);font:500 13px/1.4 Manrope,sans-serif;letter-spacing:.24em;text-align:center;padding:9px 0;outline:none;transition:border-color .3s}
.gt-box input[type=text]:focus{border-color:var(--dim)}
.gt-box input[type=text]::placeholder{color:var(--faint)}
#gtKey{font-family:"Noto Serif TC",serif;letter-spacing:.14em}
.gt-box button{font-size:9px;letter-spacing:.32em;color:var(--dim);cursor:pointer;padding:0;transition:color .3s,border-color .3s,opacity .3s}
.gt-box button:hover{color:var(--ink)}
.gt-main{color:var(--ink)!important;border:1px solid var(--dim)!important;padding:11px 20px 10px 22px!important;width:100%}
.gt-main:hover{border-color:var(--ink)!important}
.gt-main:disabled{opacity:.45;cursor:not-allowed}
.gt-or{display:flex;align-items:center;gap:14px;width:100%;font-size:8px;letter-spacing:.4em;color:var(--faint)}
.gt-or::before,.gt-or::after{content:"";flex:1;height:1px;background:var(--hair)}
.gt-small{font-size:7.5px!important;letter-spacing:.3em!important;color:var(--faint)!important;cursor:pointer}
.gt-small:hover{color:var(--ink)!important}
.gt-guest{margin-top:6px}
.gt-guest[hidden]{display:none}
.gt-h{font-size:9px;letter-spacing:.36em;color:var(--faint)}
.gt-dot{color:var(--faint)}
.gt-key{font:400 28px/1.35 "Noto Serif TC",serif;letter-spacing:.16em;color:var(--ink);padding:16px 0;width:100%;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);user-select:all;word-break:break-all}
.gt-row{display:flex;gap:26px;justify-content:center}
.gt-who{font-size:20px;font-weight:500;letter-spacing:.3em;color:var(--ink)}
body.gated .ui,body.gated .foot{opacity:0!important;pointer-events:none!important;transition:opacity .9s}
body.gated .hint.ui{opacity:1!important;z-index:61;position:fixed}
.gt-msg{min-height:14px;font-size:8.5px;letter-spacing:.24em;line-height:1.6;color:var(--err,#e0614f);max-width:360px}

/* ---------- 25. the gate's title, stacked: LIVEFLOW / 聚 / DEPTH / BY PEACE ---------- */
.gt-title{display:grid;justify-items:center;gap:0;padding-left:0}
.gt-name{font-size:19px;font-weight:500;letter-spacing:.5em;padding-left:.5em;color:var(--ink)}
.gt-ju{font:400 46px/1 "Noto Serif TC",serif;color:var(--ink);margin:16px 0 12px;letter-spacing:0}
.gt-sub{font-size:9px;font-weight:500;letter-spacing:.6em;padding-left:.6em;color:var(--dim)}
.gt-title .gt-by{font-size:8px;letter-spacing:.45em;padding-left:.45em;color:var(--faint);margin-top:10px}

/* ---------- 26. the gate in two halves: NEW HERE | OR | I HAVE A KEY ---------- */
.gt-box{width:min(760px,100%)}
.gt-title .gt-by{margin-top:22px}
.gt-title{margin-bottom:6px}
.gt-split{display:grid;grid-template-columns:1fr auto 1fr;gap:0;width:100%;margin-top:8px}
.gt-col{padding:26px 34px 22px;gap:16px;align-content:start;border:1px solid var(--hair);background:rgba(5,5,6,.28)}
:root[data-paper="light"] .gt-col{background:rgba(244,244,241,.35)}
.gt-col .gt-h{margin-bottom:2px}
.gt-note{cursor:default;margin-top:2px}
label.gt-note{cursor:pointer}
.gt-split .gt-or{flex-direction:column;width:64px;height:auto;gap:12px;align-self:stretch;justify-content:center}
.gt-split .gt-or::before,.gt-split .gt-or::after{width:1px;height:auto;flex:1;background:var(--hair)}
.gt-split .gt-or span{padding:2px 0}
@media (max-width:700px){
    .gt-split{grid-template-columns:1fr}
    .gt-split .gt-or{flex-direction:row;width:100%;height:auto;margin:14px 0}
    .gt-split .gt-or::before,.gt-split .gt-or::after{height:1px;width:auto}
    .gt-col{padding:22px 22px 18px}
}
#gtNew,#gtBack{max-width:440px}

/* ---------- 27. top left stacked like the gate: LIVEFLOW / 聚 / DEPTH, then @name · PROFILE; names in capitals ---------- */
#gtName,#shName{text-transform:uppercase}
.brand .name{display:grid!important;justify-items:start;height:auto!important;gap:0!important;line-height:1}
.brand .name #homeBtn{line-height:var(--row-h)}
.brand .name #paper{font-size:30px;margin:6px 0 8px;vertical-align:0}
.brand .name .sub{font-size:8.5px;font-weight:500;letter-spacing:.6em;color:var(--dim)}
#profileBtn{pointer-events:auto;justify-self:start;display:inline-flex;align-items:baseline;gap:2px;margin-top:4px;font-size:9px;letter-spacing:.28em;color:var(--ink);padding:0;cursor:pointer}
#profileBtn[hidden]{display:none}
#profileBtn .at{color:var(--faint)}
#profileBtn .pf-go{margin-left:12px;font-size:7.5px;color:var(--faint);transition:color .3s}
#profileBtn:hover .pf-go{color:var(--ink)}
.brand .rendered{margin-top:2px}
@media (max-width:760px){.brand .name .sub{display:none}.brand .name #paper{font-size:20px;margin:4px 0 0}#profileBtn .pf-go{display:none}}
/* the profile page */
.pf-box{width:min(880px,100%);gap:22px}
.pf-hero{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--hair)}
.pf-ju{font:300 54px/1 "Noto Serif TC",serif;color:var(--ink);opacity:.9}
.pf-name{font-size:22px;font-weight:500;letter-spacing:.3em;color:var(--ink)}
.pf-meta{margin-top:8px;font-size:8.5px;letter-spacing:.3em;color:var(--faint)}
.pf-keys{display:grid;gap:9px;justify-items:end}
.pf-keys button,.pf-card button{font-size:8px;letter-spacing:.3em;color:var(--dim);cursor:pointer;padding:0;transition:color .3s}
.pf-keys button:hover,.pf-card button:hover{color:var(--ink)}
.pf-save{display:flex;gap:22px;align-items:center}
.pf-save input{flex:1;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--ink);font:500 11px/1.4 Manrope,sans-serif;letter-spacing:.22em;padding:8px 0;outline:none}
.pf-save input:focus{border-color:var(--dim)}
.pf-save input::placeholder{color:var(--faint)}
.pf-save button{font-size:9px;letter-spacing:.3em;cursor:pointer}
.pf-link{font:400 12px/1.5 "Noto Serif TC",serif;color:var(--ink);padding:9px 12px;border:1px solid var(--hair);word-break:break-all;user-select:all}
.pf-link[hidden],.pf-empty[hidden]{display:none}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;max-height:46vh;overflow:auto;scrollbar-width:thin}
.pf-card{display:grid;gap:8px;padding:16px 16px 14px;border:1px solid var(--hair);transition:border-color .3s}
.pf-card:hover{border-color:var(--dim)}
.pf-id{font:400 20px/1.2 "Noto Serif TC",serif;letter-spacing:.06em;color:var(--ink)}
.pf-t{font-size:9px;letter-spacing:.26em;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-w{font:400 12px/1.4 "Noto Serif TC",serif;color:var(--faint);min-height:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-d{font-size:7.5px;letter-spacing:.3em;color:var(--faint)}
.pf-do{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.pf-empty{font-size:8.5px;letter-spacing:.26em;line-height:1.8;color:var(--faint);padding:20px 0;text-align:center}
@media (max-width:760px){.pf-hero{grid-template-columns:auto 1fr}.pf-keys{grid-column:1/-1;justify-items:start;grid-auto-flow:column;gap:16px}.pf-save{flex-wrap:wrap}}

/* ---------- 28. RENDERED up top in the middle; MUSIC bottom left by the Aa; the rail under SHARE; 聚 and DEPTH centred ---------- */
.titlebar #renderedPts{display:block;font-size:9px;font-weight:500;letter-spacing:.42em;padding-left:.42em;color:var(--dim);text-align:center;line-height:var(--row-h,26px);white-space:nowrap}
.brand .name{justify-items:center!important;justify-self:start}
.brand .name #paper,.brand .name .sub{position:relative;left:calc(var(--lf-ls,9.5px) / -2)}
.brand .name .sub{padding-left:.6em}
.pf-t{cursor:text}
.pf-t:hover{color:var(--ink)}
.pf-rename{width:100%;background:none;border:0;border-bottom:1px solid var(--dim);color:var(--ink);font:500 9px/1.4 Manrope,sans-serif;letter-spacing:.26em;text-transform:uppercase;padding:2px 0;outline:none}
@media (min-width:761px){
    .rail{top:calc(var(--pad) + env(safe-area-inset-top,0px) + 232px);transform:none;max-height:calc(100vh - var(--pad) - 232px - var(--stage-b,220px) - 150px)}
    .col.music{left:var(--pad)!important;transform:none!important;top:auto!important;bottom:calc(var(--stage-b,220px) + 8px);justify-items:start!important;max-width:360px}
    .col.music>.h{justify-self:start!important;flex-wrap:wrap}
    .mus-more{justify-items:start!important}
    .col.music .row{justify-content:flex-start!important;flex-wrap:wrap!important;gap:6px 18px!important}
    .col.music .sl{width:170px!important}
}

/* ---------- 29. the little menu under DEPTH: @NAME | PROFILE, then SHARE · PROJECT; MODEL under RENDERED ---------- */
.lf-menu{pointer-events:auto;display:grid;gap:9px;justify-items:start;margin-top:14px;padding:2px 0 2px 12px;border-left:1px solid var(--hair)}
.lf-menu[hidden]{display:none}
.lf-row{display:flex;align-items:center;gap:12px}
.lf-menu button{font-size:9px;letter-spacing:.28em;color:var(--dim);padding:0;cursor:pointer;transition:color .3s}
.lf-menu button:hover{color:var(--ink)}
#profileBtn{color:var(--ink);margin:0}
#profileBtn .at{color:var(--faint)}
.lf-bar{display:block;width:1px;height:11px;background:var(--dim);opacity:.6}
#shareBtn{font-size:8.5px}
.titlebar{display:grid;justify-items:center;gap:6px}
.titlebar #modelBtn{pointer-events:auto;margin:0}
@media (min-width:761px){.rail{top:calc(var(--pad) + env(safe-area-inset-top,0px) + 168px);max-height:calc(100vh - var(--pad) - 168px - var(--stage-b,220px) - 150px)}}
.gt-sent{font-size:8.5px;letter-spacing:.26em;line-height:1.7;color:var(--ink);max-width:420px}
.gt-sent[hidden]{display:none}
.pf-open{display:flex;gap:18px;align-items:center}
.pf-open input{flex:1;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--ink);font:500 11px/1.4 Manrope,"Noto Serif TC",sans-serif;letter-spacing:.16em;padding:8px 0;outline:none}
.pf-open input:focus{border-color:var(--dim)}
.pf-open input::placeholder{color:var(--faint);letter-spacing:.24em}
.pf-open button{font-size:9px;letter-spacing:.3em;color:var(--dim);cursor:pointer}
.pf-open button:hover{color:var(--ink)}
.pf-keys[hidden],.pf-save[hidden]{display:none}
.pf-t.ro{cursor:default}
@media (max-width:760px){.lf-menu{display:none}}

/* ---------- 30. the menu up top beside LIVEFLOW: | @NAME | PROFILE | PROJECTS | SHARE; PROJECTS window; MODEL centred;
   MUSIC higher; BY PEACE — CREDITS at the bottom, in the middle ---------- */
.titlebar #modelBtn{justify-self:center}
.lf-menu{position:fixed;left:calc(var(--pad) + 172px);top:var(--row-top);height:var(--row-h);margin:0;padding:0 0 0 18px;display:flex;align-items:center;gap:12px;border-left:1px solid var(--hair);pointer-events:auto;z-index:3}
.lf-menu[hidden]{display:none}
.lf-menu .lf-bar{width:1px;height:9px;background:var(--hair);opacity:1}
.lf-menu button{font-size:8.5px;letter-spacing:.28em}
#shareBtn{font-size:8.5px}
.pj-top{display:flex;align-items:center;gap:22px}
.pj-top button{font-size:9px;letter-spacing:.3em;cursor:pointer}
.pj-saved{font-size:8.5px;letter-spacing:.24em;color:var(--dim);font-family:Manrope,"Noto Serif TC",sans-serif}
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;max-height:62vh;overflow:auto;scrollbar-width:thin;padding-right:4px}
.pj-card{display:grid;gap:7px;align-content:start}
.pj-img{display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border:1px solid var(--hair);background:var(--ground);overflow:hidden;cursor:pointer;transition:border-color .3s,transform .3s}
.pj-img img{width:100%;height:100%;object-fit:cover;display:block}
.pj-ju{font:300 56px/1 "Noto Serif TC",serif;color:var(--faint)}
.pj-card:hover .pj-img{border-color:var(--dim);transform:translateY(-2px)}
.pj-name{font-weight:500;font-size:9.5px;letter-spacing:.3em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-meta{font-size:7.5px;letter-spacing:.2em;color:var(--faint);font-family:Manrope,"Noto Serif TC",sans-serif}
.pj-do{display:flex;align-items:center;gap:9px}
.pj-do i{width:1px;height:8px;background:var(--hair)}
.pj-do button{font-size:7.5px;letter-spacing:.26em;color:var(--dim);padding:0;cursor:pointer}
.pj-do button:hover{color:var(--ink)}
@media (min-width:761px){
    .col.music{bottom:calc(var(--stage-b,220px) + 96px)}
    .rail{max-height:calc(100vh - var(--pad) - 168px - var(--stage-b,220px) - 240px)}
    .lowleft{left:50%!important;transform:translateX(-50%);bottom:2px!important;height:auto!important}
    .lowleft .byline{font-size:7.5px}
}
@media (min-width:761px){.rail{top:calc(var(--pad) + env(safe-area-inset-top,0px) + 124px);max-height:calc(100vh - var(--pad) - 124px - var(--stage-b,220px) - 240px)}}

/* ---------- 31. 聚 DEPTH is the model switch; RENDERED under the picture; ☯ the paper, bottom right beside the randomizer ---------- */
.brand .name #modelBtn{display:grid;justify-items:center;gap:0;margin:0;padding:0;border:0;color:var(--ink);cursor:pointer;pointer-events:auto;position:relative;left:calc(var(--lf-ls,9.5px) / -2);transition:opacity .3s}
.brand .name #modelBtn .ju{font:300 30px/1 var(--cjk,"Noto Serif TC"),serif;margin:6px 0 8px;opacity:.9;transition:text-shadow .3s,opacity .3s}
.brand .name #modelBtn .sub{position:static;left:auto;font-size:8.5px;font-weight:500;letter-spacing:.6em;padding-left:.6em;color:var(--dim);transition:color .3s}
.brand .name #modelBtn:hover .ju{opacity:1;text-shadow:0 0 10px var(--dim)}
.brand .name #modelBtn:hover .sub{color:var(--ink)}
.titlebar{top:auto!important;bottom:calc(var(--stage-b,220px) + 4px)}
.titlebar #renderedPts{font-size:8.5px;color:var(--faint)}
.md-mark{display:grid;justify-items:center;position:absolute;left:50%;transform:translateX(-50%)}
.md-box .cr-head{position:relative}
.md-mark .ju{font:300 26px/1 "Noto Serif TC",serif;color:var(--ink)}
.md-mark .sub{margin-top:6px;font-size:8px;letter-spacing:.6em;padding-left:.6em;color:var(--dim)}
#paper{position:fixed;right:var(--pad);bottom:calc(var(--stage-b,220px) - 25px);z-index:3;width:22px!important;height:22px!important;display:block!important;font-size:0;opacity:.9;color:var(--ink);vertical-align:0;cursor:pointer;pointer-events:auto}
#paper svg{width:100%;height:100%;display:block;overflow:visible}
#paper .ring{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
#paper .yang{fill:currentColor}
#paper .lightdot{fill:currentColor}
#paper .darkdot{fill:var(--ground)}
#paper:hover{opacity:1}
#randBtn{right:calc(var(--pad) + 44px)!important}
.rb-bar{position:fixed;right:calc(var(--pad) + 33px);bottom:calc(var(--stage-b,220px) - 22px);width:1px;height:16px;background:var(--hair);z-index:3}
@media (max-width:760px){
    #paper{bottom:auto;top:calc(var(--pad) + env(safe-area-inset-top,0px));right:calc(var(--pad) + 126px)}
    #randBtn{right:calc(var(--pad) + 42px)!important}
    .rb-bar{display:none}
    .brand .name #modelBtn .ju{font-size:20px;margin:4px 0 0}
}
.brand .name #modelBtn{justify-self:center}

/* ---------- 32. 聚 DEPTH top centre; @NAME under LIVEFLOW; menu PROJECTS | SHARE; even column rules; LINE centred;
   ☯ drawn like the die; a free line under the credits ---------- */
#modelBtn.modelsw{position:fixed;left:50%;top:calc(var(--row-top) + 2px);transform:translateX(-50%);z-index:3;display:grid;justify-items:center;gap:0;margin:0;padding:0;border:0;color:var(--ink);cursor:pointer;pointer-events:auto;font-size:inherit;letter-spacing:0}
#modelBtn.modelsw .ju{font:300 30px/1 "Noto Serif TC",serif;opacity:.9;transition:text-shadow .3s,opacity .3s}
#modelBtn.modelsw .sub{margin-top:8px;font-size:8.5px;font-weight:500;letter-spacing:.6em;padding-left:.6em;color:var(--dim);transition:color .3s}
#modelBtn.modelsw:hover .ju{opacity:1;text-shadow:0 0 10px var(--dim)}
#modelBtn.modelsw:hover .sub{color:var(--ink)}
.brand #profileBtn{pointer-events:auto;justify-self:start;margin-top:30px;font-size:10px;font-weight:500;letter-spacing:.32em;color:var(--ink);padding:0;cursor:pointer;transition:opacity .3s}
.brand #profileBtn[hidden]{display:none}
.brand #profileBtn .at{color:var(--faint);margin-right:1px}
.brand #profileBtn:hover{text-shadow:0 0 10px var(--dim)}
.pf-toproj{justify-self:start;font-size:9px;letter-spacing:.3em;color:var(--ink);cursor:pointer;padding:0 0 3px;border-bottom:1px solid var(--dim)}
.pf-toproj[hidden],#pfHead[hidden],#pfGrid[hidden]{display:none}
@media (min-width:761px){
    .foot{align-items:stretch!important;bottom:calc(34px + env(safe-area-inset-bottom,0px))}
    .lowleft{bottom:12px!important}
    .two.three{grid-template-columns:auto auto 1fr}
    .two.three>.stack:last-child{justify-self:center;align-self:center}
    .rail{top:calc(var(--pad) + env(safe-area-inset-top,0px) + 116px)}
}
#paper{color:var(--dim)!important;opacity:1!important}
#paper:hover{color:var(--ink)!important}
#paper .ring{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
#paper .yang{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
#paper .lightdot{fill:currentColor}
#paper .darkdot{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
#paper:hover svg{transform:rotate(-8deg);transition:transform .3s}
@media (max-width:760px){#modelBtn.modelsw{top:calc(var(--pad) + 2px)}#modelBtn.modelsw .ju{font-size:20px}#modelBtn.modelsw .sub{display:none}.brand #profileBtn{margin-top:8px;font-size:8.5px}}

/* ---------- 33. the menu closed on the right too; die | ☯ the same size, the rule in the middle; RENDERED lower;
   USER · @NAME (WELCOME · @NAME on the way in) ---------- */
.lf-menu{padding-right:18px!important;border-right:1px solid var(--hair)}
#paper{bottom:calc(var(--stage-b,220px) - 26px)!important}
.rb-bar{bottom:calc(var(--stage-b,220px) - 23px)}
@media (min-width:761px){.titlebar{bottom:calc(var(--stage-b,220px) - 8px)!important}}
.brand #profileBtn{display:inline-flex;align-items:baseline;gap:0}
.brand #profileBtn .pf-k{font-size:8px;letter-spacing:.34em;color:var(--faint);transition:color .6s}
.brand #profileBtn .pf-dot{font-style:normal;margin:0 10px 0 4px;color:var(--faint)}
.brand #profileBtn.hello .pf-k{color:var(--ink);animation:lfHello 4.2s ease}
@keyframes lfHello{0%{opacity:0}12%{opacity:1}85%{opacity:1}100%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.brand #profileBtn.hello .pf-k{animation:none}}

/* ---------- 34. USER · @NAME in the top menu with its little drop menu; the greeting under 聚 DEPTH; ☯ in the die's box ---------- */
.lf-menu{gap:0!important}
#profileBtn{display:inline-flex;align-items:baseline;gap:0;font-size:9px;font-weight:500;letter-spacing:.3em;color:var(--ink);padding:0;cursor:pointer;margin:0}
#profileBtn .pf-k{font-size:7.5px;letter-spacing:.3em;color:var(--faint)}
#profileBtn .pf-dot{font-style:normal;margin:0 7px 0 1px;color:var(--faint)}
#profileBtn .at{color:var(--faint);margin-right:1px}
#profileBtn .car{margin-left:10px;font-size:7px;letter-spacing:0;color:var(--faint);transition:transform .3s}
.lf-menu.open #profileBtn .car{transform:rotate(180deg)}
#profileBtn:hover{text-shadow:0 0 10px var(--dim)}
.lf-drop{position:absolute;left:-1px;top:calc(100% + 10px);display:grid;gap:12px;justify-items:start;min-width:100%;padding:14px 18px 16px;border:1px solid var(--hair);background:var(--ground);box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:20}
.lf-drop[hidden]{display:none}
.lf-drop button{font-size:8.5px;letter-spacing:.3em;color:var(--dim);padding:0;cursor:pointer}
.lf-drop button:hover{color:var(--ink)}
.lf-hr{display:block;width:100%;height:1px;background:var(--hair)}
.hello{position:fixed;left:50%;top:calc(var(--row-top) + 76px);transform:translate(-50%,-4px);z-index:62;display:flex;align-items:baseline;font-size:9px;letter-spacing:.42em;color:var(--ink);opacity:0;pointer-events:none;white-space:nowrap;text-shadow:0 0 8px var(--ground)}
.hello .w{color:var(--dim);font-size:8px}
.hello i{font-style:normal;margin:0 9px 0 2px;color:var(--faint)}
.hello .n{font-weight:500}
.hello.on{animation:lfHelloC 3.6s ease forwards}
@keyframes lfHelloC{0%{opacity:0;transform:translate(-50%,-4px)}14%{opacity:1;transform:translate(-50%,0)}80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,2px)}}
@media (prefers-reduced-motion:reduce){.hello.on{animation:none;opacity:1}}
#paper .box{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
#paper .ring,#paper .yang{stroke-width:1.1}
#paper .lightdot{fill:currentColor}
#paper .darkdot{fill:none;stroke:currentColor;stroke-width:.9}
#profileBtn .pf-dot,.hello i{letter-spacing:0!important}
#profileBtn .pf-dot{margin:0 8px 0 0!important}
.hello i{margin:0 11px 0 0!important}
#profileBtn{align-self:center;line-height:1}
.brand .lf-menu #profileBtn{margin:0!important;font-size:9px;letter-spacing:.3em}
#profileBtn .pf-dot{margin:0 8px 0 3px!important}
.hello i{margin:0 11px 0 4px!important}

/* ---------- 35. MY PROJECTS centred in the profile; the PROJECTS window centred ---------- */
.pf-toproj{justify-self:center!important;font-size:10px;letter-spacing:.4em;padding:10px 26px 9px 30px!important;border:1px solid var(--dim)!important;border-bottom:1px solid var(--dim)!important;margin:6px 0 4px;transition:border-color .3s,color .3s}
.pf-toproj:hover{border-color:var(--ink)!important}
#projWin .pj-top{justify-content:center;flex-direction:column;gap:10px}
#projWin .pj-saved:empty{display:none}
#projWin .pj-grid{grid-template-columns:repeat(auto-fit,190px);justify-content:center}
#projWin .pj-grid .pf-empty{grid-column:1/-1;justify-self:center;text-align:center;width:min(440px,100%)}
#projWin .md-foot{text-align:center}
#projWin .cr-box>*{min-width:0}

/* ---------- 36. the gate is up from the very first paint; USER · spacing; RENDERED level with die | ☯; side alignment ---------- */
body.gated .ui{transition:none}
#profileBtn .pf-dot{margin:0 6px 0 4px!important}
.hello i{margin:0 8px 0 4px!important}
@media (min-width:761px){
    .titlebar{bottom:calc(var(--stage-b,220px) - 27px)!important;height:var(--row-h,26px)}
    .titlebar #renderedPts{line-height:var(--row-h,26px)}
    .hint{bottom:calc(var(--stage-b,220px) + 6px)!important}
    .rail{transform:none!important}
}
.gate.wait .gt-pane{visibility:hidden}
.rb-bar{right:calc(var(--pad) + 32.5px)!important}
@media (min-width:761px){.titlebar{bottom:calc(var(--stage-b,220px) - 28px)!important}}

/* ---------- 37. nothing on the page is selectable, except what is meant to be copied or typed ---------- */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,.gt-key,.sh-key,.sh-link,.pf-link,.cr-text,.cr-line,.cr-full,.cr-copy{-webkit-user-select:text;user-select:text}

/* ---------- 38. a project's link, shown by SHARE on its card ---------- */
.pj-link{display:grid;gap:10px;justify-items:center;padding:16px 18px;border:1px solid var(--hair);width:min(640px,100%);justify-self:center}
.pj-link[hidden]{display:none}
.pj-link .pf-link{width:100%;text-align:center}
.pj-link-do{display:flex;gap:22px;align-items:center}
.pj-link-do button{font-size:9px;letter-spacing:.3em;color:var(--dim);cursor:pointer}
.pj-link-do button:hover{color:var(--ink)}
#projWin .pj-grid{padding-top:4px}
/* the card's name, date and actions centred under its render */
#projWin .pj-card{justify-items:center;text-align:center}
#projWin .pj-name,#projWin .pj-meta{justify-self:center;max-width:100%}
#projWin .pj-name{padding-left:.3em}
#projWin .pj-do{justify-content:center}

/* ---------- 39. PHONE (≤760 px): a layout of its own ----------
   top left   LIVEFLOW / USER · @NAME / BY PEACE — CREDITS
   top right  REC · RANDOMIZER · ☯ · FULL SCREEN, one row of 36 px icons
   centre     聚 DEPTH (the model switch) under the top row, the greeting under it
   bottom     the picture rail, then NEXT / LIGHT / PLAY and SETTINGS (unchanged) */
@media (max-width:760px){
    .brand{top:calc(var(--pad) + env(safe-area-inset-top,0px));gap:6px}
    .brand .name #homeBtn{line-height:22px;font-size:13px;letter-spacing:.5em}
    .lf-menu{display:flex!important;position:static!important;height:auto!important;padding:0!important;border:0!important;margin:2px 0 0!important}
    .lf-menu[hidden]{display:none!important}
    .brand .lf-menu #profileBtn{font-size:8.5px!important;letter-spacing:.26em}
    #profileBtn .pf-k{font-size:7px}
    .lowleft{position:fixed!important;left:var(--pad)!important;right:auto!important;transform:none!important;top:calc(var(--pad) + env(safe-area-inset-top,0px) + 50px)!important;bottom:auto!important;height:auto!important}
    .lowleft .byline{font-size:7.5px;letter-spacing:.26em}
    #fsBtn{width:20px;height:20px}
    .corner{top:calc(var(--pad) + env(safe-area-inset-top,0px))!important;right:var(--pad)!important}
    #recBtn,#randBtn,#paper{position:fixed!important;top:calc(var(--pad) + env(safe-area-inset-top,0px) - 1px)!important;bottom:auto!important;transform:none!important;width:22px!important;height:22px!important;padding:0!important}
    #paper{right:calc(var(--pad) + 38px)!important}
    #randBtn{right:calc(var(--pad) + 76px)!important}
    #recBtn{right:calc(var(--pad) + 114px)!important;display:block!important}
    #recBtn svg{width:22px;height:22px}
    #recBtn .lbl{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:8px;white-space:nowrap}
    .rb-bar{display:none!important}
    #modelBtn.modelsw{top:calc(var(--pad) + env(safe-area-inset-top,0px) + 34px)!important}
    #modelBtn.modelsw .ju{font-size:22px}
    #modelBtn.modelsw .sub{display:block!important;margin-top:5px;font-size:7px;letter-spacing:.5em;padding-left:.5em}
    .hello{top:calc(var(--pad) + env(safe-area-inset-top,0px) + 86px);font-size:8px;letter-spacing:.3em}
    .titlebar{display:none!important}
    .hint{bottom:calc(var(--mbar-h,120px) + 96px)!important;top:auto!important}
    .md-mark{position:static;transform:none}
    .md-box .cr-head{flex-wrap:wrap;gap:10px}
    .pf-hero{grid-template-columns:auto 1fr;gap:16px}
    .pf-ju{font-size:40px}
    .pf-name{font-size:17px}
    .pf-keys{grid-auto-flow:row!important;grid-template-columns:1fr 1fr;justify-items:start!important;gap:12px 18px!important}
    .pf-open{flex-wrap:wrap}
    #projWin .pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:58vh}
    #projWin .pj-do{flex-wrap:wrap;gap:6px 8px}
    .pj-link .pf-link{font-size:11px}
    .credits{padding:10px}
    .cr-box{padding:22px 18px 18px!important}
}
@media (max-width:370px){
    .brand .name #homeBtn{font-size:12px;letter-spacing:.42em}
    #recBtn{right:calc(var(--pad) + 108px)!important}
}
@media (max-width:760px){
    /* the sheet carries its own ground; the extra ::after layer over the canvas made some browsers paint the stage white */
    body.sheet::after{display:none!important}
    body.sheet .foot{background:var(--ground);border-top:1px solid var(--hair)}
}

/* ---------- 40. KEYS window (?) ---------- */
.ky-box{width:min(820px,100%)}
.ky-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 30px}
.ky-grid section{display:grid;gap:9px;align-content:start}
.ky-grid p{margin:0;font-size:8.5px;letter-spacing:.26em;color:var(--dim);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ky-grid kbd{font:500 8px/1 Manrope,sans-serif;letter-spacing:.12em;color:var(--ink);border:1px solid var(--hair);padding:4px 6px 3px;min-width:18px;text-align:center}
@media (max-width:760px){.ky-grid{grid-template-columns:1fr 1fr}}
.gt-name,.gt-sub,.gt-title .gt-by{white-space:nowrap}
#keysBtn{pointer-events:auto;font-size:inherit;letter-spacing:.3em;color:var(--dim);padding:0;cursor:pointer}#keysBtn:hover{color:var(--ink)}
@media (max-width:760px){#keysBtn,#keysBtn+.dash{display:none}.byline .dash:has(+#keysBtn){display:none}}
/* ---------- 40. (V49) CREDITS and KEYS ? read as one footer line: both take size, spacing and line from the byline ---------- */
.byline #creditsBtn,.byline #keysBtn{font:inherit;letter-spacing:inherit;line-height:1;padding:0;margin:0;color:var(--dim);vertical-align:baseline}
.byline #creditsBtn:hover,.byline #keysBtn:hover{color:var(--ink)}
.byline{line-height:1}

/* ---------- 41. (V50) OVERLAY: only the cloud; see-through when opened with ?overlay (OBS) ---------- */
#overlayBtn{pointer-events:auto;font:inherit;letter-spacing:inherit;line-height:1;padding:0;margin:0;color:var(--dim);cursor:pointer}
#overlayBtn:hover{color:var(--ink)}
@media (max-width:760px){#overlayBtn,.byline .dash:has(+#overlayBtn){display:none}}
body.overlay>:not(#c):not(#toast):not(script){opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important}
body.overlay #c{cursor:none}
body.overlay::after,body.overlay::before{display:none!important}
html.see,html.see body{background:transparent!important}
html.see #toast{display:none!important}
/* ---------- 42. (V50) PROMPT · PICTURE window and the AI button under Aa ---------- */
.rail .add-row{display:flex;gap:6px;margin-top:14px}
.rail .add-row .add.word{margin-top:0}
.rail .add.gen{font-family:var(--latin);font-size:9px;letter-spacing:.2em;text-indent:.2em}
#genIn{width:100%;box-sizing:border-box;resize:none;background:none;border:1px solid var(--hair);color:var(--ink);font:300 15px/1.5 var(--latin);letter-spacing:.06em;padding:12px 14px;outline:none;transition:border-color .3s}
#genIn:focus{border-color:var(--dim)}
#genIn::placeholder{color:var(--faint);letter-spacing:.2em}
.gn-styles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.gn-styles button{padding:8px 12px 7px;border:1px solid var(--hair);color:var(--dim);font-size:8px;letter-spacing:.28em;cursor:pointer;transition:border-color .3s,color .3s}
.gn-styles button:hover{border-color:var(--dim)}
.gn-styles button.on{border-color:var(--ink);color:var(--ink)}
#gnMeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gnGo{color:var(--dim);letter-spacing:.3em;font-size:9px;cursor:pointer;white-space:nowrap}
#gnGo:hover,#gnClose:hover{color:var(--ink)}
#gnClose{color:var(--dim);letter-spacing:.3em;font-size:9px;cursor:pointer}
.genwin.busy #genIn,.genwin.busy .gn-styles{opacity:.45;pointer-events:none}
.genwin.busy #gnGo{color:var(--ink);animation:gnPulse 1.2s ease-in-out infinite}
@keyframes gnPulse{50%{opacity:.4}}

/* ---------- 43. (V51) CREDITS · N beside USER · @NAME ---------- */
#creditsTag{display:inline-flex;align-items:baseline;gap:0;padding:0 0 0 18px;margin:0 0 0 6px;border-left:1px solid var(--hair);font-size:9px;font-weight:500;letter-spacing:.3em;color:var(--ink);cursor:pointer;line-height:1}
#creditsTag[hidden]{display:none}
#creditsTag .pf-k{font-size:7.5px;letter-spacing:.3em;color:var(--faint);transition:color .3s}
#creditsTag .pf-dot{font-style:normal;margin:0 10px 0 4px;color:var(--faint)}
#creditsTag:hover .pf-k{color:var(--ink)}
#creditsTag.low #creditsNum{color:#e0675a}
/* ---------- 44. (V52) the AI credits status: AI CREDITS · 4 / 5 ▬▬▬▭▭ RESET 07:12:44 (phone: its own line under BY PEACE) ---------- */
#creditsTag .cr-of{margin-left:5px;font-size:7.5px;color:var(--faint);letter-spacing:.2em}
#creditsTag .cr-bar{position:relative;display:inline-block;align-self:center;width:46px;height:2px;margin:0 12px 0 10px;background:var(--hair);overflow:hidden}
#creditsTag .cr-bar b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width .6s ease}
#creditsTag.low .cr-bar b{background:#e0675a}
#creditsTag .cr-reset{font-size:7.5px;letter-spacing:.24em;color:var(--dim);font-variant-numeric:tabular-nums;font-weight:300}
#creditsTag .cr-rk{color:var(--faint)}
@media (max-width:760px){
    #creditsTag{position:fixed!important;left:var(--pad)!important;top:calc(var(--pad) + env(safe-area-inset-top,0px) + 68px)!important;margin:0!important;padding:0!important;border:0!important;font-size:8.5px!important;z-index:3}
    #creditsTag .pf-k,#creditsTag .cr-reset{font-size:7px}
    #creditsTag .cr-word,#creditsTag .cr-bar,#creditsTag .cr-rk{display:none}
    #creditsTag .cr-reset{margin-left:12px}
}
/* ---------- 45. (V53) KEYS and OVERLAY as icons beside the die and ☯ (right, divided by hairlines); the AI button draws a picture ---------- */
.side-ico{position:fixed;bottom:var(--row-low);height:var(--row-h);width:22px;padding:2px 0;display:flex;align-items:center;z-index:3;color:var(--dim);pointer-events:auto;cursor:pointer;transition:color .3s}
.side-ico:hover{color:var(--ink)}
.side-ico svg{width:22px;height:22px;display:block;overflow:visible}
.side-ico .frame{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
.side-ico .frame.thin{stroke-width:1;stroke-dasharray:2 1.6}
.side-ico .k{fill:currentColor}
#keysBtn{right:calc(var(--pad) + 88px)}
#overlayBtn{right:calc(var(--pad) + 132px)}
.rb-bar.b2{right:calc(var(--pad) + 76.5px)!important}
.rb-bar.b3{right:calc(var(--pad) + 120.5px)!important}
@media (max-width:760px){#keysBtn,#overlayBtn,.rb-bar.b2,.rb-bar.b3{display:none!important}}
.rail .add.gen svg{width:18px;height:18px;display:block}
.rail .add.gen svg rect,.rail .add.gen svg path{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rail .add.gen svg circle{fill:currentColor}
/* ---------- 46. (V55) bottom right, left to right: RANDOMIZER │ PAPER ☯ │ OBS OVERLAY │ KEYS (phone unchanged) ---------- */
@media (min-width:761px){
    #randBtn{right:calc(var(--pad) + 132px)!important}
    #paper{right:calc(var(--pad) + 88px)!important}
    #overlayBtn{right:calc(var(--pad) + 44px)}
    #keysBtn{right:var(--pad)}
}
/* ---------- 47. (V55) KEYS: click a key to bind another ---------- */
.ky-bind{padding:0;margin:0;cursor:pointer;background:none}
.ky-bind kbd{transition:border-color .25s,color .25s}
.ky-bind:hover kbd{border-color:var(--ink)}
.ky-bind.moved kbd{border-color:var(--dim);color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.ky-bind.wait kbd{border-color:var(--ink);animation:gnPulse 1s ease-in-out infinite}
.ky-fixed kbd{opacity:.6}
.ky-foot{margin-top:18px}
#kyNote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kyReset{color:var(--dim);letter-spacing:.3em;font-size:9px;cursor:pointer;white-space:nowrap}
#kyReset:hover{color:var(--ink)}
/* ---------- 48. (V56) top right, beside full screen: ALL TODAY 37 / 150 · ● 4090 (phone: a line under AI ·); the engine choice in PROMPT · PICTURE ---------- */
.lf-status{position:fixed;top:var(--row-top);height:var(--row-h);right:calc(var(--pad) + 44px);z-index:3;display:flex;align-items:center;gap:16px;padding-right:20px;border-right:1px solid var(--hair);pointer-events:none;text-shadow:0 0 6px var(--ground)}
.lf-status[hidden]{display:none}
.lf-status .cr-pool{font-size:7.5px;letter-spacing:.24em;color:var(--dim);font-variant-numeric:tabular-nums;font-weight:300}
.lf-status .cr-rk{color:var(--faint)}
.lf-status .cr-gpu{font-size:7.5px;letter-spacing:.24em;color:#7fd6a0;font-weight:500}
.lf-status .cr-gpu[hidden]{display:none}
@media (max-width:760px){
    .lf-status{top:calc(var(--pad) + env(safe-area-inset-top,0px) + 84px);left:var(--pad);right:auto;height:auto;padding:0;border:0;gap:12px}
    .lf-status .cr-pool,.lf-status .cr-gpu{font-size:7px}
}
.gn-engines{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gn-engines button{display:grid;gap:5px;justify-items:center;padding:11px 6px 9px;border:1px solid var(--hair);color:var(--dim);cursor:pointer;transition:border-color .3s,color .3s}
.gn-engines button b{font-size:9px;letter-spacing:.3em;font-weight:500}
.gn-engines button small{font-size:7px;letter-spacing:.24em;color:var(--faint)}
.gn-engines button:hover:not(:disabled){border-color:var(--dim)}
.gn-engines button.on{border-color:var(--ink);color:var(--ink)}
.gn-engines #gnGpu.on b{color:#7fd6a0}
.gn-engines button:disabled{opacity:.4;cursor:default}
/* ---------- 49. (V57) ● 4090 PEACE GPU after RESET in the status bar (desktop only) ---------- */
#creditsTag .cr-gpu{margin-left:14px;padding-left:14px;border-left:1px solid var(--hair);font-size:7.5px;letter-spacing:.22em;color:#7fd6a0;font-weight:500;white-space:nowrap}
#creditsTag .cr-gpu[hidden]{display:none}
@media (max-width:760px){#creditsTag .cr-gpu{display:none!important}}
@media (min-width:761px){
    #creditsTag.gpu-on{margin-left:0;padding-left:12px}
    #creditsTag.gpu-on .cr-word,#creditsTag.gpu-on .cr-rk{display:none}
    #creditsTag.gpu-on .cr-bar{width:28px;margin:0 8px 0 7px}
    #creditsTag.gpu-on .cr-reset{letter-spacing:.16em}
    #creditsTag.gpu-on .cr-gpu{margin-left:12px;padding-left:12px;letter-spacing:.16em}
}
@media (min-width:761px) and (max-width:1400px){#creditsTag.gpu-on .cr-bar{display:none}#creditsTag.gpu-on .cr-reset{margin-left:10px}}
/* ---------- 50. (V58) swapped: ALL TODAY after RESET in the bar; ● 4090 PEACE GPU top right (desktop only) ---------- */
#creditsTag .cr-pool.cr-in{margin-left:12px;padding-left:12px;border-left:1px solid var(--hair);font-size:7.5px;letter-spacing:.16em;color:var(--dim);font-variant-numeric:tabular-nums;font-weight:300;white-space:nowrap}
#creditsTag .cr-pool.cr-in .cr-rk{display:inline!important;color:var(--faint)}
.lf-status .cr-gpu{letter-spacing:.22em}
@media (max-width:760px){
    .lf-status{display:none!important}
    #creditsTag{flex-wrap:wrap;row-gap:7px;max-width:170px}
    #creditsTag .cr-pool.cr-in{flex-basis:100%;margin:0;padding:0;border:0;font-size:7px;letter-spacing:.24em}
}
@media (max-width:760px){#creditsTag{justify-content:flex-start;text-align:left;max-width:150px}}
/* ---------- 51. (V59) PROMPT · PICTURE: IMAGINE as a big card like 4090 / CLOUD, centred; the line under it ---------- */
.gn-box .wd-row{flex-direction:column-reverse;align-items:stretch;gap:12px}
#gnGo{width:100%;padding:17px 10px 16px;border:1px solid var(--hair);color:var(--ink);font-size:11px;font-weight:500;letter-spacing:.42em;text-indent:.42em;text-align:center;transition:border-color .3s,background .3s}
#gnGo:hover{border-color:var(--ink);background:rgba(255,255,255,.04);color:var(--ink)}
.genwin.busy #gnGo{border-color:var(--ink)}
#gnMeta{text-align:center}
/* ---------- 52. (V60) GPU panel (admins only) ---------- */
.gp-box{width:min(560px,100%)}
.gp-state{display:flex;align-items:center;gap:14px}
.gp-big{font-size:20px;font-weight:500;letter-spacing:.5em;color:var(--ink);margin-bottom:6px}
.gp-dot{width:8px;height:8px;border-radius:50%;background:#e0675a;box-shadow:0 0 8px rgba(224,103,90,.6);flex:none}
.gp-dot.ready{background:#7fd6a0;box-shadow:0 0 8px rgba(127,214,160,.7)}
.gp-dot.wait{background:#e6c46a;box-shadow:0 0 8px rgba(230,196,106,.6);animation:gnPulse 1s ease-in-out infinite}
.gp-btns #gpStart b{color:#7fd6a0} .gp-btns #gpStop b{color:#e0675a}
.gp-pin{background:none;border:1px solid var(--hair);color:var(--ink);font:500 11px/1 var(--latin);letter-spacing:.4em;padding:11px 14px;text-align:center;outline:none}
.gp-pin:focus{border-color:var(--dim)}
.gp-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;padding:12px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);font-size:8.5px;letter-spacing:.26em}
.gp-facts dt{color:var(--faint)} .gp-facts dd{margin:0;text-align:right;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-log{height:170px;overflow:auto;font:400 10px/1.6 Consolas,ui-monospace,monospace;color:var(--dim);white-space:pre-wrap;word-break:break-word;letter-spacing:0;text-transform:none}
/* ---------- 53. (V61) between @NAME and AI: the full-height line, like the menu's own edges ---------- */
@media (min-width:761px){
    .lf-menu{align-items:stretch}
    .lf-menu > #profileBtn,.lf-menu > #creditsTag{align-self:stretch;align-items:center}
    #creditsTag{border-left:1px solid var(--hair)!important;margin-left:6px!important;padding-left:16px!important}
}
/* ---------- 54. (V62) a real gap after @NAME; PANEL ↗ beside ● 4090 PEACE GPU (admins) ---------- */
@media (min-width:761px){.lf-menu > #profileBtn{padding-right:14px}#creditsTag{margin-left:0!important}}
.lf-status .cr-gpu.off{color:var(--faint)}
.lf-status .cr-vr{width:1px;height:14px;background:var(--hair)}
.lf-status .cr-panel{pointer-events:auto;font-size:7.5px;font-weight:500;letter-spacing:.3em;color:var(--dim);text-decoration:none;transition:color .3s}
.lf-status .cr-panel:hover{color:var(--ink)}
.lf-status [hidden]{display:none!important}
/* ---------- 55. (V69) PROMPT · PICTURE: a reference picture (image to image on the 4090) ---------- */
.gn-ref{display:flex;align-items:center;gap:14px;min-height:46px;padding:8px 12px;border:1px dashed var(--hair);transition:border-color .3s,background .3s}
.gn-ref.over{border-color:var(--ink);background:rgba(255,255,255,.04)}
.gn-refadd{font-size:8.5px;font-weight:500;letter-spacing:.3em;color:var(--dim);cursor:pointer;white-space:nowrap;transition:color .3s}
.gn-refadd:hover{color:var(--ink)}
.gn-refon{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.gn-refon[hidden]{display:none}
.gn-refon img{width:40px;height:40px;object-fit:cover;border:1px solid var(--hair)}
.gn-str{display:flex;align-items:center;gap:8px;flex:1;font-size:7.5px;letter-spacing:.26em;color:var(--faint)}
.gn-str input{flex:1;min-width:60px;accent-color:var(--ink)}
#gnRefX{font-size:14px;color:var(--dim);cursor:pointer;padding:0 4px}
#gnRefX:hover{color:var(--ink)}
.genwin.busy .gn-ref{opacity:.45;pointer-events:none}
/* ---------- 56. (V70) the bar after @NAME: the same size, weight and line as USER · @NAME; easier to read ---------- */
@media (min-width:761px){
    .lf-menu{align-items:center!important}
    .lf-menu > #profileBtn,.lf-menu > #creditsTag{align-self:center!important;align-items:baseline!important;line-height:1!important}
    #creditsTag{position:relative;border-left:0!important;padding-left:18px!important;margin-left:0!important;font-size:9px!important;font-weight:500;letter-spacing:.3em}
    #creditsTag::before{content:"";position:absolute;left:0;top:-8px;bottom:-8px;width:1px;background:var(--hair)}
    #creditsTag .pf-k{font-size:7.5px!important;letter-spacing:.3em;color:var(--faint)}
    #creditsTag .pf-dot{margin:0 10px 0 4px}
    #creditsNum{font-size:9px;color:var(--ink)}
    #creditsTag .cr-of{font-size:9px!important;letter-spacing:.2em!important;color:var(--dim)!important;margin-left:6px!important}
    #creditsTag .cr-bar{align-self:center;margin:0 12px 0 12px!important}
    #creditsTag .cr-reset{font-size:9px!important;letter-spacing:.2em!important;color:var(--ink)!important;font-weight:500!important}
    #creditsTag .cr-pool.cr-in{font-size:9px!important;letter-spacing:.2em!important;color:var(--ink)!important;font-weight:500!important;margin-left:14px!important;padding-left:14px!important;align-self:auto}
    #creditsTag .cr-pool.cr-in .cr-rk{font-size:7.5px;letter-spacing:.3em;color:var(--faint)!important;margin-right:4px}
}
@media (min-width:761px){
    #creditsTag .cr-of,#creditsTag .cr-reset,#creditsTag .cr-pool.cr-in{letter-spacing:.12em!important}
    #creditsTag .cr-bar{width:24px!important;margin:0 10px!important}
    #creditsTag .cr-pool.cr-in{margin-left:12px!important;padding-left:12px!important}
    #creditsTag .cr-pool.cr-in .cr-rk{letter-spacing:.24em}
}
@media (min-width:761px) and (max-width:1500px){#creditsTag .cr-bar{display:none!important}#creditsTag .cr-reset{margin-left:12px!important}}
@media (min-width:761px) and (max-width:1360px){#creditsTag .cr-pool.cr-in .cr-rk{display:none!important}#creditsTag .cr-pool.cr-in{margin-left:10px!important;padding-left:10px!important}}