body.hscgt {
    --gt-ink: #19352a;
    --gt-muted: #4e6559;
    --gt-paper: #f6faf6;
    --gt-line: #d8e5db;
    --gt-brand-green: #226447;
    --gt-brand-green-hover: #194e36;
    --gt-brand-leaf: #d7efdc;
    --gt-brand-mist: #ebf7ee;
    --gt-brand-orange: #99410d;
    --gt-brand-peach: #ffeddb;
    --gt-brand-orange-edge: #edc6a5;
    --gt-input-edge: #758c7d;
    --gt-accent: #11645a;
    --gt-soft: #ddf3ec;
    --gt-edge: #9fdbce;
    margin: 0;
    background: var(--gt-paper);
    color: var(--gt-ink);
    font: 16px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.hscgt *, .hscgt *::before, .hscgt *::after { box-sizing: border-box; }
.hscgt [hidden] { display: none !important; }
.hscgt a { color: var(--gt-brand-green); }
.hscgt a:focus-visible, .hscgt button:focus-visible, .hscgt input:focus-visible {
    outline: 3px solid var(--gt-brand-green);
    outline-offset: 3px;
}
.hscgt h1, .hscgt h2, .hscgt h3 { color: inherit; letter-spacing: -.035em; line-height: 1.16; }
.hscgt :where(h1, h2, h3, p) { margin: 0; }
.hscgt main { flex: 1; }
.hscgt .gt-wrap { width: min(1120px, 100% - 64px); margin-inline: auto; }
.hscgt .gt-skip {
    position: fixed; z-index: 100000; top: .75rem; left: .75rem;
    padding: .5rem 1rem; background: white; transform: translateY(-200%);
}
.hscgt .gt-skip:focus { transform: none; }
.hscgt .gt-top { background: #fff; border-bottom: 1px solid var(--gt-line); }
.hscgt .gt-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 74px; }
.hscgt .gt-brand {
    display: inline-flex; align-items: center; gap: 11px; color: var(--gt-ink);
    font-size: 18px; font-weight: 750; line-height: 1.13; text-decoration: none;
}
.hscgt .gt-brand img { display: block; border-radius: 13px; }
.hscgt .gt-brand small { display: block; margin-bottom: 2px; color: var(--gt-muted); font-size: 11px; letter-spacing: .04em; }
.hscgt .gt-nav-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.hscgt .gt-nav-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 6px 13px;
    border: 1px solid var(--gt-line); border-radius: 10px; background: #fff;
    color: var(--gt-ink); text-decoration: none; cursor: pointer; line-height: 1.2;
    font-family: inherit; font-weight: 650; font-size: 14px;
}
.hscgt .gt-nav-link:hover { background: var(--gt-soft); }
.hscgt .gt-hero { background: linear-gradient(112deg, var(--gt-brand-leaf), var(--gt-brand-mist) 61%, var(--gt-brand-peach)); color: var(--gt-ink); overflow: hidden; }
.hscgt .gt-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 62px 66px; }
.hscgt .gt-kicker { color: var(--gt-brand-orange); font-size: 14px; font-weight: 700; margin-bottom: 13px; }
.hscgt .gt-hero h1 { font-size: clamp(2.75rem, 6.7vw, 5rem); line-height: .98; letter-spacing: -.067em; font-weight: 800; }
.hscgt .gt-hero p:last-child { margin-top: 20px; color: var(--gt-muted); max-width: 39ch; font-size: 17px; }
.hscgt .gt-emblem {
    position: relative; flex: 0 1 296px; aspect-ratio: 1.3; min-width: 130px;
    background: radial-gradient(ellipse at center, #aacfad 0%, transparent 73%);
}
.hscgt .gt-emblem span {
    position: absolute; left: 50%; top: 50%; width: 68%; aspect-ratio: 2.25;
    border-radius: 1000px; border: 1px solid #5f9874; transform: translate(-50%, -50%) rotate(-33deg);
}
.hscgt .gt-emblem span:first-child { margin: -27px 0 0 -15px; border-color: #759b83; }
.hscgt .gt-emblem span:last-child { margin: 27px 0 0 15px; background: linear-gradient(90deg, #ed9b5e 50%, #72b58a 50%); }
.hscgt .gt-library { padding-block: 42px 64px; }
.hscgt .gt-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.hscgt .gt-section-heading h2 { font-size: clamp(1.55rem, 4.5vw, 2.15rem); }
.hscgt .gt-count { color: var(--gt-muted); font-size: 14px; white-space: nowrap; }
.hscgt .gt-controls { margin-bottom: 22px; }
.hscgt .gt-search { display: block; max-width: 540px; color: var(--gt-ink); font-size: 14px; font-weight: 650; }
.hscgt .gt-search input {
    display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 11px 14px;
    border: 1px solid var(--gt-input-edge); border-radius: 12px; background: #fff; color: var(--gt-ink); font: inherit; font-size: 16px;
}
.hscgt .gt-search input::placeholder { color: var(--gt-muted); font-weight: 400; }
.hscgt .gt-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.hscgt { --gt-card-color: #34645d; --gt-card-ink: #fff; }
.hscgt .gt-tone-teal { --gt-accent: #11645a; --gt-soft: #ddf3ec; --gt-edge: #9fdbce; --gt-card-color: #34645d; }
.hscgt .gt-tone-rose { --gt-accent: #8c3556; --gt-soft: #fae7ef; --gt-edge: #efb5cb; --gt-card-color: #c76690; --gt-card-ink: #1d1220; }
.hscgt .gt-tone-blue { --gt-accent: #245b92; --gt-soft: #e6f0fe; --gt-edge: #b3cdee; --gt-card-color: #69a7cc; --gt-card-ink: #12273c; }
.hscgt .gt-tone-amber { --gt-accent: #775019; --gt-soft: #fbefd6; --gt-edge: #e9cd93; --gt-card-color: #e5b353; --gt-card-ink: #35230e; }
.hscgt .gt-tone-violet { --gt-accent: #61459d; --gt-soft: #efe9fc; --gt-edge: #cdbdec; --gt-card-color: #7956a7; }
.hscgt .gt-tone-green { --gt-accent: #416022; --gt-soft: #ebf3dc; --gt-edge: #c6daa8; --gt-card-color: #86b295; --gt-card-ink: #152d23; }
.hscgt .gt-tone-coral { --gt-accent: #853f31; --gt-soft: #fbe9e2; --gt-edge: #edb8a6; --gt-card-color: #dc8a71; --gt-card-ink: #361a16; }
.hscgt .gt-tone-navy { --gt-accent: #334e66; --gt-soft: #e4edf6; --gt-edge: #b8cbdf; --gt-card-color: #375570; }
.hscgt .gt-tone-mint { --gt-accent: #236952; --gt-soft: #e3f8ee; --gt-edge: #a7ddcb; --gt-card-color: #92d7bd; --gt-card-ink: #153f32; }
.hscgt .gt-tone-lime { --gt-accent: #516619; --gt-soft: #f2f7df; --gt-edge: #cddca0; --gt-card-color: #bad267; --gt-card-ink: #2f3918; }
.hscgt .gt-tone-orange { --gt-accent: #8d4410; --gt-soft: #fff0e2; --gt-edge: #f5c39b; --gt-card-color: #f39850; --gt-card-ink: #3e210c; }
.hscgt .gt-tone-burgundy { --gt-accent: #822a40; --gt-soft: #fae7ed; --gt-edge: #eac0cc; --gt-card-color: #8d354e; }
.hscgt .gt-tone-indigo { --gt-accent: #3c448e; --gt-soft: #eceefe; --gt-edge: #c4c9f1; --gt-card-color: #4b56a3; }
.hscgt .gt-tone-lavender { --gt-accent: #684683; --gt-soft: #f5eefb; --gt-edge: #ddc8ec; --gt-card-color: #c7ace7; --gt-card-ink: #38264b; }
.hscgt .gt-tone-brown { --gt-accent: #70482d; --gt-soft: #f7ece3; --gt-edge: #dec3af; --gt-card-color: #80553b; }
.hscgt .gt-tone-slate { --gt-accent: #43535d; --gt-soft: #eaf0f3; --gt-edge: #c7d3db; --gt-card-color: #a6b6c1; --gt-card-ink: #233640; }
.hscgt .gt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.hscgt .gt-card {
    display: flex; flex-direction: column; height: 100%; min-height: 164px; padding: 20px;
    border: 1px solid var(--gt-edge); border-top: 5px solid var(--gt-card-color);
    border-radius: 13px; color: var(--gt-ink); background: #fff;
    overflow-wrap: anywhere; text-decoration: none;
}
.hscgt .gt-card:hover { box-shadow: 0 6px 18px #102e3614; border-color: var(--gt-accent); }
.hscgt .gt-tag {
    background: var(--gt-soft); color: var(--gt-accent); border: 1px solid var(--gt-edge);
    border-radius: 99px; font-size: 12px; line-height: 1.35; font-weight: 700; padding: 4px 8px;
}
.hscgt .gt-card .gt-tags { margin-bottom: 10px; }
.hscgt .gt-card p { margin-top: 5px; color: var(--gt-muted); font-size: 14px; }
.hscgt .gt-brands { font-weight: 680; }
.hscgt .gt-card-more { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 13px; color: var(--gt-accent); font-size: 14px; font-weight: 700; }
.hscgt .gt-empty { border: 1px dashed #b5c6cf; border-radius: 14px; padding: 24px; background: white; color: var(--gt-muted); }
.hscgt .gt-empty a { display: inline-block; margin-top: 7px; font-weight: 650; }
.hscgt .gt-detail { max-width: 880px; padding-block: 27px 60px; overflow-wrap: anywhere; }
.hscgt .gt-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 10px; font-weight: 650; }
.hscgt .gt-detail-head { padding: clamp(22px, 4.5vw, 40px); background: var(--gt-soft); border: 1px solid var(--gt-edge); border-radius: 19px; }
.hscgt .gt-detail-head h1 { font-size: clamp(2rem, 7vw, 3.85rem); }
.hscgt .gt-detail-head .gt-tags { margin-bottom: 11px; }
.hscgt .gt-detail-head p { margin-top: 8px; }
.hscgt .gt-sections { display: grid; gap: 16px; margin-top: 16px; }
.hscgt .gt-panel { padding: clamp(20px, 4vw, 30px); border: 1px solid var(--gt-line); border-radius: 16px; background: #fff; }
.hscgt .gt-panel h2 { font-size: 23px; margin-bottom: 15px; }
.hscgt .gt-field h3 { color: var(--gt-accent); font-size: 16px; letter-spacing: -.01em; margin-bottom: 5px; }
.hscgt .gt-field + .gt-field { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gt-line); }
.hscgt .gt-prose > * + *, .hscgt .gt-sources p + p { margin-top: .75rem; }
.hscgt .gt-prose img { max-width: 100%; height: auto; }
.hscgt .gt-prose figure { margin-inline: 0; max-width: 100%; overflow-x: auto; }
.hscgt .gt-footer { border-top: 1px solid var(--gt-line); color: var(--gt-muted); background: #fff; font-size: 13px; }
.hscgt .gt-footer .gt-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding-block: 18px; }
@media (max-width: 860px) {
    .hscgt .gt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 550px) {
    .hscgt .gt-wrap { width: calc(100% - 32px); }
    .hscgt .gt-nav { min-height: 64px; }
    .hscgt .gt-hero-inner { padding-block: 39px 44px; }
    .hscgt .gt-emblem { display: none; }
    .hscgt .gt-library { padding-block: 30px 44px; }
    .hscgt .gt-grid { grid-template-columns: 1fr; gap: 12px; }
}
.hscgt .gt-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); align-items: end; gap: 14px; }
.hscgt .gt-search { max-width: none; }
.hscgt .gt-category-filter { display: block; font-size: 14px; font-weight: 650; }
.hscgt .gt-category-filter select {
    display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 11px;
    border: 1px solid var(--gt-input-edge); border-radius: 12px; background: #fff; color: var(--gt-ink); font: inherit; font-size: 16px;
}
.hscgt .gt-chapter-nav { margin-block: 25px 35px; }
.hscgt .gt-chapter-nav .gt-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; padding: 0 12px 12px 0;
}
.hscgt .gt-chapter-card {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    gap: 14px; min-height: 144px; height: 100%; padding: 15px 17px;
    background: var(--gt-card-color); color: var(--gt-card-ink); border-radius: 12px;
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--gt-card-color) 53%, transparent),
                12px 12px 0 color-mix(in srgb, var(--gt-card-color) 25%, transparent);
    text-decoration: none; overflow-wrap: anywhere;
}
.hscgt .gt-chapter-card:hover { filter: brightness(1.07); }
.hscgt .gt-drug-categories .gt-chapter-card[aria-current] { outline: 3px solid var(--gt-accent); outline-offset: -5px; }
.hscgt .gt-chapter-card strong { font-size: 19px; line-height: 1.22; }
.hscgt .gt-chapter-count {
    display: inline-grid; place-items: center; min-width: 30px; min-height: 30px;
    padding: 2px 5px; background: #fff; color: #223440; font-size: 13px;
    font-weight: 750; border-radius: 6px;
}
@media (max-width: 860px) {
    .hscgt .gt-chapter-nav .gt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hscgt .gt-chapter { margin-top: 23px; scroll-margin-top: 45px; }
.hscgt .gt-chapter > h3 { margin-bottom: 12px; font-size: 21px; }
.hscgt .gt-card h4 { margin: 0; font-size: 23px; letter-spacing: -.035em; line-height: 1.16; }
.hscgt .gt-fold { padding: 0; }
.hscgt .gt-fold summary {
    cursor: pointer; padding: 18px clamp(20px, 4vw, 30px);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none;
}
.hscgt .gt-fold summary::-webkit-details-marker { display: none; }
.hscgt .gt-fold summary::after { content: '+'; color: var(--gt-accent); font-size: 25px; line-height: 1; }
.hscgt .gt-fold[open] summary::after { content: '−'; }
.hscgt .gt-fold h2 { margin: 0; font-size: clamp(18px, 4vw, 23px); }
.hscgt .gt-fold-body { padding: 0 clamp(20px, 4vw, 30px) 22px; }
.hscgt :is(select, summary):focus-visible { outline: 3px solid var(--gt-brand-green); outline-offset: 3px; }
@media (max-width: 550px) {
    .hscgt .gt-controls { grid-template-columns: 1fr; }
    .hscgt .gt-chapter-nav .gt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .hscgt .gt-chapter-card { min-height: 110px; padding: 12px; }
    .hscgt .gt-chapter-card strong { font-size: 17px; }
}
.hscgt .gt-access-required { display: none; padding-block: 2rem; }
.hscgt.gt-reader-locked main { display: none; }
.hscgt.gt-reader-locked .gt-access-required { display: block; }


.hscgt .gt-drug-with-photo {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(84px, 21vw, 148px);
    gap: clamp(12px, 3vw, 28px); align-items: center;
}
.hscgt .gt-drug-heading { min-width: 0; }
.hscgt .gt-ampoule-photo {
    display: grid; place-items: center; aspect-ratio: 3 / 4; margin: 0; padding: 8px;
    border: 1px solid var(--gt-line); border-radius: 13px; background: #fff; overflow: hidden;
}
.hscgt .gt-ampoule-photo img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; }
@media (max-width: 550px) {
    .hscgt .gt-drug-with-photo { padding: 16px; align-items: start; }
    .hscgt .gt-drug-with-photo h1 { font-size: clamp(1.45rem, 6vw, 2.1rem); }
}

.hscgt [data-ampoule-surface] { -webkit-touch-callout: none; user-select: none; }
.hscgt [data-ampoule-surface] img { pointer-events: none; -webkit-user-drag: none; }
.hscgt .gt-ampoule-photo { position: relative; }
.hscgt [data-ampoule-open] {
    position: absolute; inset: 0; display: flex; justify-content: end; align-items: end;
    padding: 6px; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in;
}
.hscgt [data-ampoule-open] span {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    color: #102e36; background: #e7f3ef; font-size: 20px; line-height: 1;
}
.hscgt .gt-ampoule-dialog {
    padding: 0; border: 1px solid var(--gt-line); border-radius: 16px; background: #fff;
    color: var(--gt-ink); width: min(700px, calc(100% - 24px)); max-height: 92dvh; overflow: hidden;
}
.hscgt .gt-ampoule-dialog::backdrop { background: #10242bd9; }
.hscgt .gt-ampoule-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px;
    border-bottom: 1px solid var(--gt-line);
}
.hscgt .gt-ampoule-toolbar h2 { margin: 0 auto 0 0; font-size: 17px; }
.hscgt .gt-ampoule-toolbar form { margin: 0; }
.hscgt .gt-ampoule-stage { height: min(70vh, 660px); height: min(70dvh, 660px); overflow: auto; background: #fff; }
.hscgt .gt-ampoule-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hscgt .gt-ampoule-enlarged img { width: 160%; height: 160%; max-width: none; }
