:root{--background:#f7f8f5;--ink:#101820;--muted:#617080;--line:#d8e0df;--line-strong:#aeb8c2;--panel:#fff;--accent:#198944;--accent-dark:#0d6b34;--accent-soft:#eaf8ef;--shadow:0 22px 70px #1018201f}*{box-sizing:border-box}html,body{min-height:100%}body{color:var(--ink);background:radial-gradient(circle at 8% 0%, #19894414, transparent 26rem), linear-gradient(135deg, #f8faf9 0%, var(--background) 100%);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}.page-shell{place-items:center;min-height:100vh;padding:12px;display:grid}.workspace{width:min(1260px,100%);min-height:min(840px,100vh - 24px);box-shadow:var(--shadow);background:#ffffffeb;border:1px solid #10182014;border-radius:8px;align-content:start;gap:clamp(22px,3.1vh,38px);padding:clamp(24px,4vw,54px) clamp(22px,8vw,136px);display:grid}.brand-row{border-bottom:1px solid var(--line);align-items:center;gap:18px;padding-bottom:clamp(14px,2vh,22px);display:flex}.brand-mark{width:48px;height:48px;color:var(--accent);border:2px solid var(--accent);background:#fff;border-radius:8px;flex:none;place-items:center;display:grid}h1,h2,p{margin:0}h1{letter-spacing:0;font-size:clamp(2rem,4vw,2.9rem);line-height:1}.intro{text-align:center;justify-items:center;gap:14px;padding-top:clamp(4px,1.5vh,18px);display:grid}h2{letter-spacing:0;max-width:820px;font-size:clamp(2rem,4vw,3.1rem);line-height:1.08}p{color:var(--muted);font-size:clamp(1rem,2vw,1.28rem);line-height:1.5}.input-panel,.result-panel{gap:12px;display:grid}label{color:var(--ink);font-size:1rem;font-weight:850;line-height:1.2}.url-input-wrap{position:relative}.input-icon{color:#8c99a6;pointer-events:none;position:absolute;top:50%;left:20px;transform:translateY(-50%)}input{width:100%;min-height:66px;color:var(--ink);background:#fff;border:2px solid #cad4db;border-radius:8px;outline:none;padding:0 62px 0 64px;font-size:clamp(1.08rem,2vw,1.42rem);font-weight:760;transition:border-color .18s,box-shadow .18s}input:focus{border-color:var(--accent);box-shadow:0 0 0 5px #19894421}.clear-button{color:#8c99a6;background:0 0;border:2px solid #aeb8c2;border-radius:50%;place-items:center;width:36px;height:36px;display:grid;position:absolute;top:50%;right:15px;transform:translateY(-50%)}.create-button{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-dark));border:0;border-radius:8px;justify-content:center;justify-self:end;align-items:center;gap:10px;min-height:58px;padding:0 26px;font-size:1rem;font-weight:900;transition:transform .18s,opacity .18s;display:inline-flex;box-shadow:0 14px 30px #19894438}.create-button:hover:not(:disabled){transform:translateY(-2px)}.create-button:disabled{cursor:wait;opacity:.74}.spin{animation:.8s linear infinite spin}.result-row{background:linear-gradient(135deg, var(--accent-soft), #fff);border:2px solid var(--line);border-radius:8px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;min-height:76px;padding:12px 20px;display:grid}.result-panel.ready .result-row{border-color:#19894461}.result-icon{color:var(--accent)}output{color:#485869;overflow-wrap:anywhere;min-width:0;font-size:clamp(1.08rem,2.3vw,1.46rem);font-weight:650;line-height:1.25}output.empty{color:#a64b3b}.copy-button{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-dark));border:0;border-radius:8px;justify-content:center;align-items:center;gap:10px;min-height:52px;padding:0 24px;font-size:1rem;font-weight:900;transition:transform .18s,opacity .18s;display:inline-flex;box-shadow:0 12px 26px #19894438}.copy-button:hover:not(:disabled){transform:translateY(-2px)}.copy-button:disabled{cursor:not-allowed;opacity:.55}.notice{color:var(--muted);align-items:flex-start;gap:12px;padding-top:2px;font-size:1rem;font-weight:650;line-height:1.5;display:flex}.notice svg{color:var(--accent);flex:none;margin-top:1px}.notice.success{color:#3d6950}.notice.error{color:#9f3d2f}.notice.error svg{color:#b54130}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:820px){.page-shell{align-items:start;padding:14px}.workspace{min-height:calc(100vh - 28px);padding:24px}.brand-row{gap:14px}.brand-mark{width:42px;height:42px}.intro{text-align:left;justify-items:start}.result-row{grid-template-columns:1fr}.create-button,.copy-button{width:100%}}@media (max-width:440px){.workspace{gap:22px;padding:22px}input{min-height:60px;padding-left:52px}.input-icon{left:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}