body { font-family: sans-serif; line-height: 1.7; background: #eef5e6; color: #222; margin: 0; padding: 16px;}
main { max-width: 860px; margin: 0 auto; background: #fdfffa;border: 1px solid #ddd; padding: 18px 22px; box-sizing: border-box;}
h1 { font-size: 26px; margin: 0 0 14px; border-bottom: 2px solid #888; padding-bottom: 6px;}
h2 { font-size: 20px; margin-top: 28px; border-left: 6px solid #777; padding-left: 8px;}
h3 { font-size: 16px; margin-top: 20px;}
p { margin: 0.6em 0;}
ul,
ol { margin-top: 0.5em;}
li { margin: 0.35em 0;}
.note { background: #ffffe8; border: 1px solid #d6c96a; padding: 10px 12px; margin: 14px 0;}
.warn { background: #fff1f1; border: 1px solid #e0a0a0; padding: 10px 12px; margin: 14px 0;}
.bookmarklet-area { background: #f0f5ff; border: 1px solid #9fb7dd; padding: 14px; margin: 16px 0;}
.bookmarklet-button { display: inline-block; padding: 10px 16px; margin: 8px 0; background: #2f6fb2; color: #fff !important; text-decoration: none; font-weight: bold; border-radius: 5px; border: 1px solid #1f4f82; cursor: grab;}

.bookmarklet-button:hover { background: #255d98;}

.copy-row { margin-top: 10px;}

button { cursor: pointer; padding: 6px 12px; font-size: 14px;}

textarea { width: 100%; min-height: 96px; box-sizing: border-box; font-family: Consolas, monospace; font-size: 13px; padding: 8px;}

.code { font-family: Consolas, monospace; background: #eee; padding: 2px 5px; border-radius: 3px;}

.small { color: #666; font-size: 13px;}

.link-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}

.link-box { border: 1px solid #ddd; background: #fafafa; padding: 10px 12px;}

.result-sample { border-left: 5px solid #d00000; background: #fff5f5; padding: 8px 10px; margin: 10px 0; font-weight: bold;}

footer { margin-top: 28px; padding-top: 10px; color: #666; font-size: 13px;}

@media (max-width: 700px) {
    main { padding: 14px; }
    .link-list { grid-template-columns: 1fr; }
}