:root{--ink:#182125;--muted:#5a6870;--paper:#f7f4ec;--panel:#fffdf8;--line:#d9d2c3;--teal:#157a77;--sea:#bfe4de;--coral:#d95d39;--amber:#edb34f;--green:#2f8f5b;--shadow:0 20px 50px rgba(24,33,37,.18)}*{box-sizing:border-box}html{min-height:100%}body{min-height:100vh;margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(135deg,rgba(21,122,119,.18),rgba(217,93,57,.08) 42%,rgba(237,179,79,.14)) , repeating-linear-gradient(90deg,rgba(24,33,37,.045) 0,rgba(24,33,37,.045) 1px,transparent 1px,transparent 42px) , repeating-linear-gradient(0deg,rgba(24,33,37,.035) 0,rgba(24,33,37,.035) 1px,transparent 1px,transparent 42px) , var(--paper)}body::before{position:fixed;inset:0;z-index:-1;pointer-events:none;content:"";background:linear-gradient(110deg,transparent 0 12%,rgba(255,255,255,.44) 12% 13%,transparent 13% 100%) , linear-gradient(72deg,transparent 0 55%,rgba(21,122,119,.15) 55% 56%,transparent 56% 100%) , linear-gradient(155deg,transparent 0 74%,rgba(217,93,57,.12) 74% 75%,transparent 75% 100%)}.icyzip-shell{width:min(1120px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:28px 0 24px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}.brand-mark{display:grid;width:42px;height:42px;place-items:center;color:#fffdf8;font-weight:800;background:linear-gradient(140deg,var(--teal),#244f5f 54%,var(--coral));border:1px solid rgba(24,33,37,.16);border-radius:10px;box-shadow:0 12px 28px rgba(21,122,119,.24)}.brand-name{font-size:1.2rem;font-weight:800}.state-pill{display:inline-flex;align-items:center;gap:10px;min-width:132px;justify-content:center;padding:10px 14px;color:var(--muted);background:rgba(255,253,248,.72);border:1px solid rgba(24,33,37,.12);border-radius:999px;box-shadow:0 10px 30px rgba(24,33,37,.08)}.state-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(237,179,79,.16)}body[data-ws-state="ready"] .state-dot,body[data-ws-state="connected"] .state-dot{background:var(--green);box-shadow:0 0 0 4px rgba(47,143,91,.16)}body[data-ws-state="error"] .state-dot{background:var(--coral);box-shadow:0 0 0 4px rgba(217,93,57,.16)}.workspace{display:block;margin-top:36px}.pair-panel{background:rgba(255,253,248,.88);border:1px solid rgba(24,33,37,.12);border-radius:8px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}.pair-panel{position:relative;display:grid;grid-template-columns:minmax(230px,.75fr) minmax(300px,1fr);grid-template-areas:"copy exchange" "rail exchange" "messages exchange";gap:24px;overflow:hidden;min-height:560px;padding:28px}.pair-copy{position:relative;z-index:1;grid-area:copy}.pair-panel::after{position:absolute;right:-70px;bottom:-80px;width:240px;height:240px;content:"";background:repeating-linear-gradient(45deg,rgba(21,122,119,.18) 0 8px,transparent 8px 18px) , linear-gradient(135deg,rgba(237,179,79,.3),rgba(217,93,57,.22));border:1px solid rgba(24,33,37,.06);border-radius:50%;opacity:.55}.section-kicker{margin-bottom:10px;color:var(--coral);font-size:.82rem;font-weight:800}h1{margin:0 0 20px;font-size:3.1rem;line-height:1}.flow-visual{position:relative;z-index:1;margin:0 0 18px;overflow:hidden;background:linear-gradient(135deg,rgba(191,228,222,.78),rgba(255,253,248,.82) 52%,rgba(237,179,79,.24));border:1px solid rgba(24,33,37,.12);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}.flow-visual svg{display:block;width:100%;height:auto}.phone-device rect:first-child{fill:url(#phoneGradient);stroke:rgba(24,33,37,.28);stroke-width:2}.phone-device rect:nth-child(2) {fill:#fffdf8}.phone-device circle{fill:rgba(255,253,248,.9)}.phone-note rect,.desktop-note rect{fill:rgba(21,122,119,.56)}.desktop-device rect:first-child{fill:#182125}.desktop-device rect:nth-child(2) {fill:url(#screenGradient)}.desktop-device path{fill:none;stroke:#182125;stroke-linecap:round;stroke-width:10}.flow-line{fill:none;stroke-linecap:round;stroke-width:4;stroke-dasharray:10 12}.flow-line-a{stroke:rgba(21,122,119,.52);animation:flowDash 2.6s linear infinite}.flow-line-b{stroke:rgba(217,93,57,.52);animation:flowDash 2.6s linear infinite reverse}.flow-chip{transform-box:fill-box;transform-origin:center}.flow-chip rect{fill:#fffdf8;stroke:rgba(24,33,37,.14);stroke-width:1;filter:drop-shadow(0 8px 14px rgba(24,33,37,.18))}.flow-chip path{stroke:var(--teal);stroke-linecap:round;stroke-width:3}.chip-a{animation:chipMoveA 4.8s ease-in-out infinite}.chip-b{animation:chipMoveB 4.8s ease-in-out infinite}.chip-c{animation:chipMoveC 4.8s ease-in-out infinite}@keyframes flowDash {
    to {
        stroke-dashoffset: -44;
    }
}@keyframes chipMoveA {
    0%,
    100% {
        transform: translate(160px, 54px);
        opacity: 0;
    }
    12%,
    84% {
        opacity: 1;
    }
    48% {
        transform: translate(250px, 24px);
    }
    70% {
        transform: translate(334px, 54px);
    }
}@keyframes chipMoveB {
    0%,
    100% {
        transform: translate(330px, 96px);
        opacity: 0;
    }
    16%,
    86% {
        opacity: 1;
    }
    50% {
        transform: translate(242px, 126px);
    }
    72% {
        transform: translate(160px, 96px);
    }
}@keyframes chipMoveC {
    0%,
    22%,
    100% {
        transform: translate(174px, 74px);
        opacity: 0;
    }
    34%,
    82% {
        opacity: 1;
    }
    58% {
        transform: translate(254px, 54px);
    }
    82% {
        transform: translate(318px, 74px);
    }
}@media (prefers-reduced-motion:reduce){.flow-line,.flow-chip{animation:none}.chip-a{transform:translate(240px,50px);opacity:1}.chip-b{transform:translate(250px,100px);opacity:1}.chip-c{transform:translate(285px,76px);opacity:1}}.qr-frame{position:relative;z-index:1;grid-area:exchange;display:grid;min-height:500px;place-items:center;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,253,248,.66)) , var(--sea);border:1px solid rgba(24,33,37,.12);border-radius:8px}.qr-frame>*{grid-area: 1 / 1}.qr-target{display:grid;min-width:256px;min-height:256px;place-items:center;color:var(--teal);font-size:1.35rem;font-weight:800;text-align:center}body[data-ws-state="connected"] .qr-target{display:none}.qr-target canvas,.qr-target img{display:block;width:256px;height:256px;background:#fff;border:12px solid #fff;border-radius:6px;box-shadow:0 18px 32px rgba(24,33,37,.16)}.transfer-rail{position:relative;z-index:1;grid-area:rail;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:26px}.transfer-rail span{display:block;height:9px;background:var(--line);border-radius:999px}.transfer-rail span:nth-child(1) {background:var(--teal)}.transfer-rail span:nth-child(2) {background:var(--sea)}.transfer-rail span:nth-child(3) {background:var(--amber)}.transfer-rail span:nth-child(4) {background:var(--coral)}.transfer-rail span:nth-child(5) {background:var(--green)}.messages{position:relative;z-index:1;grid-area:messages;min-height:34px;margin-top:22px;color:var(--muted)}.text-panel{position:relative;z-index:1;display:flex;width:100%;height:100%;min-height:0;flex-direction:column;opacity:0;pointer-events:none;visibility:hidden}body[data-ws-state="connected"] .text-panel{opacity:1;pointer-events:auto;visibility:visible}.text-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.text-label{display:block;font-size:1.05rem;font-weight:800}.text-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.text-action{min-height:34px;padding:7px 11px;color:var(--ink);font:inherit;font-size:.82rem;font-weight:800;line-height:1;background:linear-gradient(180deg,rgba(255,253,248,.98),rgba(247,244,236,.88));border:1px solid rgba(24,33,37,.18);border-radius:7px;cursor:pointer;box-shadow:0 8px 18px rgba(24,33,37,.08)}.text-action:hover,.text-action:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(21,122,119,.14)}.text-action:active{transform:translateY(1px)}#textArea{width:100%;min-height:390px;flex:1;resize:vertical;padding:24px;color:var(--ink);font:1.05rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;background:linear-gradient(180deg,rgba(255,253,248,.92),rgba(247,244,236,.88));border:1px solid rgba(24,33,37,.18);border-radius:8px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}#textArea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(21,122,119,.16) , inset 0 1px 0 rgba(255,255,255,.85)}.legal-links{display:inline-flex;gap:14px;justify-content:center;margin-top:18px;padding:10px 14px;background:rgba(255,253,248,.78);border:1px solid rgba(24,33,37,.12);border-radius:999px;backdrop-filter:blur(10px)}.legal-links a{color:var(--ink);font-size:.92rem;font-weight:700;text-decoration:none}.legal-links a:hover,.legal-links a:focus{color:var(--coral)}@media (max-width:700px){.icyzip-shell{width:min(100% - 20px,560px);padding-top:16px;padding-bottom:18px}.topbar{align-items:flex-start}.workspace{margin-top:20px}.pair-panel{grid-template-columns:1fr;grid-template-areas:"copy" "exchange" "rail" "messages";gap:16px;min-height:auto;padding:20px}h1{font-size:2.4rem}.flow-visual{margin-bottom:14px}.qr-frame{min-height:330px;padding:14px}.qr-target{min-width:216px;min-height:216px}.qr-target canvas,.qr-target img{width:216px;height:216px}.text-panel-head{align-items:flex-start;flex-direction:column}.text-actions{width:100%;justify-content:flex-start}.text-action{flex:1 1 calc(50% - 8px)}#textArea{min-height:300px;padding:18px}.legal-links{display:flex;justify-content:center}}