@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg:           #06040a;
    --bg-panel:     #0e0a08;
    --bg-card:      #1a1108;
    --bg-input:     #0a0806;
    --border:       #4a2810;
    --border-glow:  #8a4820;
    --accent:       #f06018;
    --accent-bright:#ff7830;
    --accent-amber: #d99020;
    --accent-dim:   #903010;
    --text:         #f0dcc8;
    --text-dim:     #907060;
    --text-muted:   #504030;
    --danger:       #c02010;
    --danger-text:  #ff9080;
}

/* ── Keyframes ───────────────────────────────────────── */

@keyframes rupture-pulse {
    0%,100% {
        text-shadow:
            0 0 6px  #ff7830,
            0 0 20px #f06018,
            0 0 40px rgba(240,96,24,.6),
            0 0 80px rgba(240,96,24,.2);
        color: #ff8840;
    }
    50% {
        text-shadow:
            0 0 4px  #fff,
            0 0 12px #ffaa60,
            0 0 30px #ff6820,
            0 0 60px rgba(255,104,32,.9),
            0 0 120px rgba(240,60,0,.5);
        color: #fff8f0;
    }
}

@keyframes rupture-flicker {
    0%,18%,20%,22%,24%,52%,54%,100% { opacity: 1; }
    19%,23%,53% { opacity: 0.3; }
}

@keyframes toolbar-sweep {
    0%   { transform: translateX(-100%); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(300%); opacity: 0; }
}

@keyframes modal-enter {
    from { opacity: 0; transform: translateY(-30px) scale(0.94); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    filter: blur(0); }
}

@keyframes popup-enter {
    from { opacity: 0; transform: translateX(-16px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0)     scale(1); }
}

@keyframes icon-breathe {
    0%,100% {
        opacity: .2;
        transform: scale(1) rotate(-3deg);
        filter: sepia(1) hue-rotate(330deg) saturate(2);
        text-shadow: none;
    }
    50% {
        opacity: .55;
        transform: scale(1.12) rotate(3deg);
        filter: sepia(1) hue-rotate(320deg) saturate(5) brightness(1.5);
        text-shadow: 0 0 30px #ff6020, 0 0 60px rgba(255,80,0,.5);
    }
}

@keyframes status-flash {
    0%   { color: #fff; text-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent); letter-spacing: 2px; }
    100% { color: var(--text-dim); text-shadow: none; letter-spacing: .5px; }
}

@keyframes btn-ripple {
    from { transform: scale(0);   opacity: .7; }
    to   { transform: scale(4);   opacity: 0; }
}

@keyframes scanlines {
    from { background-position: 0 0; }
    to   { background-position: 0 80px; }
}

@keyframes vignette-pulse {
    0%,100% { opacity: .6; }
    50%     { opacity: .9; }
}

@keyframes hud-blink {
    0%,88%,100% { opacity: 1; }
    92%         { opacity: .2; }
}

@keyframes border-glow-pulse {
    0%,100% { box-shadow: 0 0 8px  rgba(240,96,24,.15), inset 0 0 8px  rgba(240,96,24,.05); }
    50%     { box-shadow: 0 0 20px rgba(240,96,24,.4),  inset 0 0 20px rgba(240,96,24,.1); }
}

/* ── Base ────────────────────────────────────────────── */

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    font-weight: 500;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Toolbar ─────────────────────────────────────────── */

#toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 56px;
    background: linear-gradient(180deg, #1a0e06 0%, #0e0a08 100%);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 12px;
    position: relative;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0,0,0,.8), 0 1px 0 rgba(240,96,24,.15);
}

/* sweeping highlight line */
#toolbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 25%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), #fff8, var(--accent-bright), transparent);
    animation: toolbar-sweep 3.5s ease-in-out infinite;
    pointer-events: none;
}

/* top edge glow */
#toolbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-dim) 30%, var(--accent) 50%, var(--accent-dim) 70%, transparent 100%);
    opacity: .7;
}

.toolbar-left h1 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #ff8840;
    white-space: nowrap;
    animation: rupture-pulse 2.5s ease-in-out infinite, rupture-flicker 9s step-end infinite;
    cursor: default;
    user-select: none;
}

.toolbar-left h1 span {
    color: var(--text-dim);
    font-weight: 400;
    letter-spacing: 1px;
    font-size: .85rem;
    text-transform: none;
    animation: none;
    text-shadow: none;
    opacity: .7;
    margin-left: 4px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

#status-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: .73rem;
    color: var(--text-dim);
    white-space: nowrap;
    letter-spacing: .5px;
    transition: all .4s;
    animation: hud-blink 5s ease-in-out infinite;
}

#status-text.flash {
    animation: status-flash .7s ease-out forwards;
}

/* ── Buttons ─────────────────────────────────────────── */

.btn {
    position: relative;
    overflow: hidden;
    padding: 7px 16px;
    border-radius: 2px;
    border: 1px solid var(--border-glow);
    cursor: pointer;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: .83rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--bg-card);
    color: var(--text-dim);
    transition: background .2s, border-color .2s, color .2s, box-shadow .25s, transform .08s;
    white-space: nowrap;
    animation: border-glow-pulse 4s ease-in-out infinite;
}

/* ripple */
.btn::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgba(255,120,48,.6);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: none;
}
.btn:active::before { animation: btn-ripple .45s ease-out; }
.btn:active         { transform: scale(.96); }

.btn:hover {
    background: #2a1a0c;
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    box-shadow:
        0 0 16px rgba(240,96,24,.45),
        0 0 32px rgba(240,96,24,.15),
        inset 0 0 16px rgba(240,96,24,.08);
    animation: none;
}

.btn-primary {
    background: linear-gradient(180deg, #f07020, #c04810);
    border-color: var(--accent-bright);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 12px rgba(240,96,24,.4), inset 0 1px 0 rgba(255,180,100,.2);
    animation: none;
}
.btn-primary:hover {
    background: linear-gradient(180deg, #ff8030, #e05818);
    box-shadow: 0 0 24px rgba(255,120,48,.7), 0 0 48px rgba(240,96,24,.3), inset 0 1px 0 rgba(255,200,120,.3);
}

.btn-secondary {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-muted);
    animation: none;
}
.btn-secondary:hover { border-color: var(--border-glow); color: var(--text); box-shadow: none; }

.btn-danger {
    background: #1c0808;
    border-color: #6a1810;
    color: var(--danger-text);
    animation: none;
}
.btn-danger:hover {
    background: #2e0e0a;
    border-color: #cc2810;
    color: #ffb8a8;
    box-shadow: 0 0 16px rgba(200,40,16,.5), inset 0 0 12px rgba(200,40,16,.1);
}
.btn-danger::before { background: rgba(200,40,16,.6); }

.btn.btn-active {
    background: linear-gradient(180deg, #f07020, #c04810);
    border-color: #ffaa60;
    color: #fff;
    text-shadow: 0 0 8px rgba(255,200,100,.8);
    box-shadow:
        0 0 20px rgba(255,120,48,.7),
        0 0 40px rgba(240,96,24,.4),
        inset 0 0 16px rgba(255,150,60,.15);
    animation: rupture-pulse 1.8s ease-in-out infinite;
    letter-spacing: 1.5px;
}

.btn:disabled { opacity: .25; cursor: not-allowed; transform: none; box-shadow: none; animation: none; }

/* ── Map container ───────────────────────────────────── */

#map-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    background: var(--bg);
}

#map-container.panning { cursor: grabbing; }

/* scanlines */
#map-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,.08) 2px,
        rgba(0,0,0,.08) 4px
    );
    background-size: 100% 4px;
    animation: scanlines 10s linear infinite;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: multiply;
}

/* orange vignette around edges */
#map-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,.7) 100%),
        linear-gradient(to bottom, rgba(180,60,0,.12) 0%, transparent 8%, transparent 92%, rgba(180,60,0,.12) 100%),
        linear-gradient(to right,  rgba(180,60,0,.1)  0%, transparent 6%, transparent 94%, rgba(180,60,0,.1)  100%);
    pointer-events: none;
    z-index: 3;
    animation: vignette-pulse 4s ease-in-out infinite;
}

#map-canvas { position: absolute; top: 0; left: 0; display: block; z-index: 1; }

/* ── Empty state ─────────────────────────────────────── */

#empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 18px;
    pointer-events: none;
    z-index: 4;
}

#empty-state.hidden { display: none; }
#empty-state .btn { pointer-events: auto; }

.empty-icon {
    font-size: 4rem;
    line-height: 1;
    display: block;
    animation: icon-breathe 3.5s ease-in-out infinite;
}

#empty-state h2 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-shadow: 0 0 20px rgba(240,96,24,.3);
}

#empty-state p {
    color: var(--text-muted);
    font-size: .9rem;
    max-width: 320px;
    line-height: 1.6;
    font-weight: 400;
}

/* ── Modal ───────────────────────────────────────────── */

.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal.hidden { display: none; }

.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(6px);
}

.modal-box {
    position: relative;
    background: linear-gradient(160deg, #1a1008 0%, #0e0a06 100%);
    border: 1px solid var(--border-glow);
    border-top: 2px solid var(--accent-bright);
    border-radius: 2px;
    padding: 30px;
    width: 390px;
    max-width: 95vw;
    z-index: 1;
    box-shadow:
        0 8px 40px rgba(0,0,0,.8),
        0 0 0 1px rgba(240,96,24,.1),
        0 0 60px rgba(240,96,24,.15);
    animation: modal-enter .25s cubic-bezier(.16,1,.3,1) both;
}

.modal-box::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    opacity: .8;
}

.modal-box h3 {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.96);
    background: linear-gradient(180deg, #e83018 0%, #b61408 50%, #c82010 100%);
    padding: 8px 16px 7px;
    border-radius: 3px;
    margin-bottom: 26px;
    text-shadow:
        0  1px 3px rgba(0,0,0,.6),
        0 -1px 0   rgba(255,200,180,.2);
    box-shadow:
        inset 0  2px 0 rgba(255,220,200,.24),
        inset 0 -2px 0 rgba(0,0,0,.38),
        0 3px 8px rgba(0,0,0,.55);
}

.form-group { margin-bottom: 18px; }

.form-group label {
    display: block;
    width: fit-content;
    font-size: .6rem;
    font-weight: 700;
    color: rgba(255,255,255,.93);
    background: linear-gradient(180deg, #e83018 0%, #b61408 50%, #c82010 100%);
    padding: 3px 10px 2px;
    border-radius: 2px;
    margin-bottom: 9px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-shadow:
        0  1px 2px rgba(0,0,0,.55),
        0 -1px 0   rgba(255,200,180,.18);
    box-shadow:
        inset 0  1px 0 rgba(255,220,200,.22),
        inset 0 -1px 0 rgba(0,0,0,.32),
        0 2px 4px rgba(0,0,0,.4);
}

.form-group input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text);
    font-size: .95rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 500;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(240,96,24,.2), inset 0 0 12px rgba(240,96,24,.06);
}

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

/* ── Label popup ─────────────────────────────────────── */

.label-popup {
    position: fixed;
    background: linear-gradient(160deg, #1c1208, #100c06);
    border: 1px solid var(--border-glow);
    border-left: 3px solid var(--accent-bright);
    border-radius: 2px;
    padding: 12px 34px 12px 16px;
    min-width: 150px;
    max-width: 230px;
    z-index: 50;
    box-shadow:
        0 4px 24px rgba(0,0,0,.7),
        0 0 20px rgba(240,96,24,.15);
    font-size: .94rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
    animation: popup-enter .2s cubic-bezier(.16,1,.3,1) both;
}

.label-popup.hidden { display: none; }

.popup-meta { font-size: .7rem; color: var(--text-dim); margin-top: 5px; font-family: 'Share Tech Mono', monospace; }

.close-popup {
    position: absolute; top: 8px; right: 9px;
    background: none; border: none;
    color: var(--text-dim); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 2px 4px;
    transition: color .15s, text-shadow .15s;
}
.close-popup:hover { color: var(--accent-bright); text-shadow: 0 0 8px var(--accent); }

/* ── Instructions HUD ────────────────────────────────── */

#instructions {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(14,10,6,.94);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 6px 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: .72rem;
    color: var(--text-muted);
    pointer-events: none;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    z-index: 10;
    letter-spacing: .5px;
    box-shadow: 0 0 20px rgba(0,0,0,.6), 0 0 8px rgba(240,96,24,.1);
    transition: all .3s;
}

#instructions::before { content: '[ '; color: var(--accent); font-weight: bold; }
#instructions::after  { content: ' ]'; color: var(--accent); font-weight: bold; }
#instructions strong  { color: var(--accent-bright); text-shadow: 0 0 8px rgba(255,120,48,.5); }

/* ── Dymo label printer scene ────────────────────────── */

/* Flex stage holding printer + modal-box side by side */
.modal-scene {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    max-width: 95vw;
}

/* Hide printer on narrow screens — modal-box fills the stage alone */
@media (max-width: 700px) { .dymo-wrapper { display: none; } }

/* Printer column: bubble above, printer below */
.dymo-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: printer-enter .45s cubic-bezier(.34,1.56,.64,1) .05s both;
}

@keyframes printer-enter {
    from { opacity: 0; transform: translateX(-38px) scale(.87); }
    to   { opacity: 1; transform: none; }
}

/* ── Speech bubble ───────────────────────────────────── */

.dymo-bubble {
    position: relative;
    background: #090e06;
    border: 2px solid #48c030;
    border-radius: 10px;
    padding: 10px 15px;
    font-family: 'Share Tech Mono', monospace;
    font-size: .72rem;
    color: #72e050;
    text-align: center;
    line-height: 1.65;
    white-space: nowrap;
    box-shadow: 0 0 14px rgba(72,192,48,.22), inset 0 0 10px rgba(72,192,48,.04);
    animation: bubble-pop .38s cubic-bezier(.34,1.56,.64,1) .32s both;
}

@keyframes bubble-pop {
    from { opacity: 0; transform: scale(.5) translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Tail — outer border triangle */
.dymo-bubble::after {
    content: '';
    position: absolute;
    bottom: -14px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 14px solid #48c030;
    border-bottom: none;
}

/* Tail — inner fill triangle (creates bordered effect) */
.dymo-bubble::before {
    content: '';
    position: absolute;
    bottom: -9px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #090e06;
    border-bottom: none;
    z-index: 1;
}

/* ── Printer body ────────────────────────────────────── */

.dymo-printer {
    width: 154px;
    background: linear-gradient(168deg, #201408 0%, #130c06 100%);
    border: 2px solid #5a3018;
    border-radius: 6px 6px 4px 4px;
    position: relative;
    box-shadow:
        0 10px 36px rgba(0,0,0,.85),
        0 0 0 1px rgba(240,96,24,.1),
        0 0 28px rgba(240,96,24,.07),
        inset 0 1px 0 rgba(255,160,80,.12);
}

/* Red branding header strip */
.dymo-header {
    height: 27px;
    background: linear-gradient(180deg, #cc2606 0%, #941c04 100%);
    border-radius: 4px 4px 0 0;
    border-bottom: 2px solid #6a1002;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-shadow: inset 0 1px 0 rgba(255,180,160,.2), 0 2px 4px rgba(0,0,0,.4);
}

.dymo-brand {
    font-family: 'Share Tech Mono', monospace;
    font-size: .58rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Green power LED */
.dymo-led {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #6aee40;
    box-shadow: 0 0 8px rgba(100,238,60,.9);
    animation: led-blink 3.5s ease-in-out infinite;
}

@keyframes led-blink {
    0%,88%,100% { opacity: 1; }
    90%          { opacity: .08; }
}

/* LCD screen */
.dymo-lcd {
    margin: 10px 10px 0;
    height: 30px;
    background: #081406;
    border: 1px solid #1e3a10;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: .64rem;
    color: #58d838;
    letter-spacing: 2px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.7), 0 0 8px rgba(60,200,40,.06);
    position: relative;
    overflow: hidden;
}

/* LCD scanlines overlay */
.dymo-lcd::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent 0, transparent 2px,
        rgba(0,0,0,.14) 2px, rgba(0,0,0,.14) 3px
    );
    pointer-events: none;
}

/* Blinking cursor */
.dymo-cursor {
    animation: cursor-blink .9s step-end infinite;
    margin-left: 1px;
}

@keyframes cursor-blink {
    0%,49%   { opacity: 1; }
    50%,100% { opacity: 0; }
}

/* Mini keypad — 2 rows × 3 columns */
.dymo-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 8px 10px 4px;
}

.dymo-key {
    height: 14px;
    background: linear-gradient(180deg, #2e2010, #1c1008);
    border: 1px solid #4c3020;
    border-bottom: 2px solid #080604;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,160,80,.06);
}

/* PRINT button */
.dymo-print-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 10px 12px;
    height: 28px;
    background: linear-gradient(180deg, #de2e0e, #9a1c06);
    border: 1px solid #ff4c28;
    border-bottom: 3px solid #4a0a02;
    border-radius: 3px;
    color: #ffd8c0;
    font-family: 'Share Tech Mono', monospace;
    font-size: .58rem;
    letter-spacing: 2.5px;
    cursor: pointer;
    user-select: none;
    animation: print-glow 2.4s ease-in-out infinite;
    transition: transform .08s, border-bottom-width .08s;
}

.dymo-print-btn:active {
    transform: translateY(2px);
    border-bottom-width: 1px;
}

@keyframes print-glow {
    0%,100% { box-shadow: 0 0 8px  rgba(222,46,14,.35), inset 0 1px 0 rgba(255,200,180,.12); }
    50%     { box-shadow: 0 0 20px rgba(240,60,24,.70), 0 0 40px rgba(222,40,16,.30), inset 0 1px 0 rgba(255,220,200,.2); }
}

/* Tape exit slot on the right side of the printer */
.dymo-tape-exit {
    position: absolute;
    right: -2px;
    bottom: 38px;
    width: 8px;
    height: 16px;
    background: #050302;
    border: 1px solid #3a1e0a;
    border-left: none;
    border-radius: 0 2px 2px 0;
    display: flex;
    align-items: center;
    overflow: visible;
}

/* Tape strip — extends right toward the modal */
.dymo-tape {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 11px;
    width: 0;
    background: linear-gradient(180deg,
        #f6f0cc 0%, #ede5b2 35%, #e4d898 65%, #dace88 100%
    );
    border-right: 2px solid #c8be78;
    box-shadow: 0 1px 4px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.35);
    animation: tape-extend 1s cubic-bezier(.34,1.56,.64,1) .85s both;
}

@keyframes tape-extend {
    from { width: 0;    opacity: 0; }
    to   { width: 68px; opacity: 1; }
}