:root{
  color-scheme:light;--ink:#173343;--muted:#536e7b;--blue:#1c698b;--dark:#165573;--line:#d6e2e8;--radius:17px;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;color:var(--ink);background:#f4f8fa;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:linear-gradient(165deg,#eaf5f8 0,#f5f9fb 450px,#f4f8fa 100%);line-height:1.55}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:min(100% - 40px,1080px);margin-inline:auto}
.top{background:#fbfdfe;border-bottom:1px solid var(--line)}
.top-inner{display:flex;justify-content:space-between;align-items:center;height:63px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:17px;font-weight:750;letter-spacing:.025em;text-decoration:none}
.version,.draft-state{font-size:12px;font-weight:700;border-radius:100px;white-space:nowrap;line-height:1.5}
.version{padding:3px 11px;color:var(--blue);border:1px solid #bcdae4}
.intro{padding:38px 0 24px}.kicker,.eyebrow{font-size:11px;font-weight:750;letter-spacing:.12em;color:var(--blue)}
h1,h2,p{margin:0}
h1{font-size:clamp(28px,4.5vw,40px);letter-spacing:.015em;line-height:1.35;margin:3px 0 7px;font-weight:760}
.intro p,.desktop p,.desktop small,#status,.char-count{font-size:14px;color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(225px,.46fr);gap:20px;align-items:start;margin-bottom:45px}
.card{border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:0 6px 22px #153c4d08;min-width:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:16px 24px}
h2{font-size:18px;line-height:1.45}
.card-head h2,.desktop h2{display:flex;align-items:center;gap:9px}
.card-head .ico,.desktop h2 .ico{color:var(--blue)}
.draft-state{padding:3px 10px;background:#edf3f6;color:#4f6976}
.draft-state[data-state="saved"]{background:#e7f5ec;color:#26653e}
.draft-state[data-state="edited"]{background:#fff3dc;color:#835a12}
.editor-body{padding:17px 24px 14px}.field+.field{margin-top:12px}
.field-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
label{font-size:15px;font-weight:700}
input,textarea{width:100%;min-width:0;border:1px solid #b9cdd6;background:#fbfdfe;border-radius:9px;padding:10px 12px;color:var(--ink);font:inherit;font-size:16px;line-height:1.5;display:block}
textarea{resize:vertical;min-height:130px}
input::placeholder,textarea::placeholder{color:#718791}
input:focus,textarea:focus{border-color:var(--blue);background:#fff;outline:3px solid #ceebf4;outline-offset:0}
button:focus-visible,a:focus-visible{outline:3px solid #228cb1;outline-offset:3px}
button{cursor:pointer;font:inherit}
.copy{border:0;display:inline-flex;align-items:center;gap:5px;margin:0 -5px 1px 0;padding:6px 7px;min-height:34px;background:transparent;color:var(--blue);font-size:13px;font-weight:650;border-radius:6px}
.copy .ico{width:15px;height:15px}.copy:hover{background:#eef7fa}
.char-count{text-align:right;font-size:12px;margin-top:5px;font-variant-numeric:tabular-nums}
.actions{display:flex;align-items:stretch;justify-content:flex-end;flex-wrap:wrap;gap:9px;border-top:1px solid var(--line);padding-top:15px;margin-top:14px}
.button,.download{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none;padding:9px 15px}
.primary{background:var(--blue);color:white;border:1px solid var(--blue)}.primary:hover{background:var(--dark)}
.secondary{color:var(--dark);background:#fff;border:1px solid #aec9d5}.secondary:hover{background:#eff7fa}
#status{min-height:1.5em;margin:10px 0 0;font-size:13px}#status[data-state="error"]{color:#9b3221}
aside{display:grid;gap:15px}.destination,.desktop{padding:21px 22px}
.destination{background:linear-gradient(115deg,#fafdfe,#e6f4f6);position:relative;overflow:hidden}
.tile-icon{position:absolute;right:17px;top:17px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #cde6eb;border-radius:10px;background:#fbffff;color:var(--blue)}
.destination h2{margin:7px 40px 2px 0}.board-name{font-size:14px;color:#365b6c}
.domain{margin-top:13px;color:#5d7783;font-size:12px;letter-spacing:.02em}
.desktop p{margin:9px 0 15px}
.download{display:flex;justify-content:center;text-align:center;border:1px solid #c4dae3;color:var(--dark);background:#f5fafc;line-height:1.45}
.download:hover{background:#e8f4f8}.desktop small{display:block;margin-top:9px;font-size:12px}
.noscript{padding:12px;margin-bottom:20px;background:white;border:1px solid var(--line)}
@media(max-width:760px){
  .wrap{width:min(100% - 28px,620px)}.top-inner{height:54px}.brand{font-size:15px}.brand img{width:29px;height:29px}
  .intro{padding:22px 0 16px}.intro p{font-size:13px}.layout{display:block;margin-bottom:24px}
  aside{margin-top:14px}.destination,.desktop{padding:16px 18px}
  .card-head{padding:13px 16px}.editor-body{padding:12px 16px 10px}
  .field+.field{margin-top:9px}.actions{margin-top:11px}.button{flex:1 1 auto;padding:9px 10px}
}
@media(max-width:390px){
  .wrap{width:calc(100% - 20px)}.actions{flex-direction:column}
}