/* W3.3/W5.1/W6.3 help page. Ported from Claude Design canvas 8d06322c (docs/design-system/source/claude-design-export/nikuniku Help.dc.html); values only from docs/design-system/tokens/studio.json. */
#help{width:min(34rem,100% - 40px);margin-inline:auto;padding-block:96px;display:flex;flex-direction:column;gap:56px;text-align:start}
#help .intro{display:flex;flex-direction:column;gap:12px}
#help p{margin:0;text-wrap:pretty}
#help h1{margin:0;font-size:32px;line-height:1.25;font-weight:600;letter-spacing:-0.01em}
:lang(zh-Hant) #help h1,:lang(zh-Hans) #help h1,:lang(ja) #help h1,:lang(ko) #help h1{letter-spacing:0}
#help h2{margin:0;font-size:16px;line-height:1.7;font-weight:600}
#help h3{margin:8px 0 0;font-size:14px;line-height:1.7;font-weight:600}
#help section{display:flex;flex-direction:column;gap:16px}
#help [hidden]{display:none}
#help .offers{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#help .offers li{min-height:44px;padding:12px 16px;border:1px solid #c6b9a9;display:flex;flex-direction:column;justify-content:center;font-size:16px;line-height:1.5}
#help .ways{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:4px}
#help .ways li{text-wrap:pretty}
#help .action{align-self:flex-start;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:#b62c45;color:#f5ecdd;font-size:16px;font-weight:600;text-decoration:none}
#help .faq{border-top:1px solid #c6b9a9}
#help details{border-bottom:1px solid #c6b9a9}
#help summary{min-height:44px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:16px;line-height:1.5;cursor:pointer;list-style:none}
#help summary::-webkit-details-marker{display:none}
#help summary::after{content:"+";flex:none;width:24px;text-align:center;font-weight:600}
#help details[open] summary::after{content:"−"}
#help details p{padding:0 0 16px}
#help form{display:flex;flex-direction:column;gap:16px}
#help label{display:flex;flex-direction:column;gap:6px;font-weight:600}
#help .select{position:relative;display:block}
#help .select::after{content:"";position:absolute;inset-inline-end:16px;top:50%;width:8px;height:8px;border-inline-end:2px solid #171717;border-bottom:2px solid #171717;transform:translateY(-70%) rotate(45deg);pointer-events:none}
#help select{width:100%;height:44px;padding:0 12px;padding-inline-end:44px;border:1px solid #171717;border-radius:0;background:#f5ecdd;color:#171717;font:inherit;font-size:16px;font-weight:400;appearance:none;-webkit-appearance:none}
#help input{height:44px;padding:0 12px;border:1px solid #171717;border-radius:0;background:#f5ecdd;color:#171717;font:inherit;font-size:16px;font-weight:400;text-align:start}
#help textarea{min-height:132px;padding:10px 12px;border:1px solid #171717;border-radius:0;background:#f5ecdd;color:#171717;font:inherit;font-size:16px;font-weight:400;line-height:1.7;resize:vertical}
#help button[type=submit]{align-self:flex-start;min-height:44px;padding:0 20px;background:#b62c45;color:#f5ecdd;border:0;border-radius:0;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
#help button:disabled{cursor:not-allowed;opacity:.6}
#help :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #b62c45;outline-offset:2px}
#help .status{padding:12px 16px;border-inline-start:4px solid #c6b9a9;font-size:16px;line-height:1.7}
#help .status.ok{border-inline-start-color:#171717}
#help .status.warn{border-inline-start-color:#b62c45}
#help .status:empty{display:none}
#help .links{padding-top:24px;border-top:1px solid #c6b9a9;display:flex;flex-wrap:wrap;column-gap:24px}
#help .links a{display:flex;align-items:center;min-height:44px}
@media (max-width:700px){#help{padding-block:40px 64px;gap:48px}}
@media (max-width:419px){#help .offers{grid-template-columns:minmax(0,1fr)}}