@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');:root{--ink:#193338;--deep:#10292e;--gold:#c49a50;--paper:#fbf8f0;--cream:#f0e8d9;--muted:#617176}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 Inter,Arial,sans-serif}h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;line-height:1.12;margin:0 0 15px}h1{font-size:clamp(64px,9vw,126px);letter-spacing:-2px}h1 span{color:#dfb768}h2{font-size:clamp(42px,5vw,65px)}h3{font-size:31px}p{margin:0 0 16px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.top{position:sticky;z-index:10;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#10292ef5;color:#fff;padding:14px max(24px,calc((100vw - 1220px)/2));border-bottom:1px solid #ffffff24}.brand{font-weight:800;letter-spacing:2px;font-size:13px;white-space:nowrap}.brand em{font-style:normal;color:#dbb875}.seal{font-size:25px;color:var(--gold);vertical-align:middle}.top nav{display:flex;gap:20px;font-size:12px}.top nav a:hover{color:#e2bd77}.primary-btn,.outline-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:4px;font-weight:700;font-size:12px;border:1px solid var(--gold);background:transparent;color:inherit;transition:.2s}.primary-btn{background:var(--gold);color:#132b2e}.primary-btn:hover,.outline-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.hero{min-height:630px;background:var(--deep);color:#f8f1e5;display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden}.hero-inner{padding:95px 40px 70px max(40px,calc((100vw - 1220px)/2));position:relative;z-index:1}.eyebrow{color:var(--gold);font-weight:800;font-size:11px;letter-spacing:2.3px;text-transform:uppercase}.tagline{font:italic 26px Georgia,serif;color:#d9c39c;margin:5px 0 25px}.hero-inner>p:not(.tagline){max-width:570px;color:#cbd7d3}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 45px}.stats{display:flex;gap:35px;flex-wrap:wrap;border-top:1px solid #ffffff35;padding-top:20px}.stats div{display:flex;flex-direction:column}.stats strong{font:600 37px Georgia;color:#e5c58a}.stats span{font-size:11px;color:#c0cac6}.hero-art{position:relative;background:linear-gradient(180deg,#284c4d 0%,#be9559 62%,#183d45 63%,#0d2b36 100%);min-height:500px;overflow:hidden}.sun{position:absolute;width:240px;height:240px;border-radius:50%;background:#f6d59c;top:24%;left:28%;box-shadow:0 0 100px #f4cc7e66}.ship{position:absolute;font-size:250px;bottom:12%;left:15%;filter:brightness(.2) sepia(.5);transform:scaleX(-1)}.wave{position:absolute;height:90px;width:130%;left:-10%;background:#143c46b0;border-radius:50%;bottom:-35px}.wave2{bottom:-65px;background:#0c2935}.art-label{position:absolute;bottom:20px;right:30px;font-size:10px;letter-spacing:3px;color:#e9d8b8}.section{max-width:1220px;margin:auto;padding:85px 32px;scroll-margin-top:80px}.section-heading{margin-bottom:30px;max-width:790px}.section-heading p{color:var(--muted)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{padding:30px;background:#fff;border:1px solid #e5dfd2;border-radius:8px;box-shadow:0 5px 22px #1b343009}.panel p{color:#526468}.feature{border-left:3px solid var(--gold);padding-left:16px;margin:20px 0}.feature p{margin:5px 0}.muted{color:var(--muted)}.small{font-size:12px}.note{background:#efe7d7;border-left:3px solid var(--gold);padding:18px 22px;margin-top:24px;border-radius:3px;font-size:13px}.dark-section{max-width:none;background:var(--deep);color:#fff}.dark-section>.section-heading,.dark-section>.flowchart{max-width:1156px;margin-left:auto;margin-right:auto}.dark-section .section-heading p{color:#b7c6c5}.flowchart{display:flex;flex-direction:column;align-items:center}.flow-node{width:min(100%,460px);text-align:center;padding:18px;border:1px solid #60706a;border-radius:8px;background:#1b3b40;display:flex;flex-direction:column;gap:4px}.flow-node small,.branch-node small,.end-grid small{color:#e5bd76;font-size:10px;letter-spacing:2px;font-weight:800}.flow-node b{font:600 25px Georgia}.flow-node span,.branch-node span{color:#bdcbc8;font-size:12px}.flow-line{height:35px;width:1px;background:#b99b67;position:relative}.flow-line:after{content:'⌄';position:absolute;bottom:-8px;left:-5px;color:#d4ad6a}.decision{border-color:#c49a50;background:#294044}.branch-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;width:min(100%,800px);margin-top:25px}.branch-node{color:white;text-align:left;background:#254c4e;border:1px solid #68817a;border-radius:8px;padding:25px;display:flex;flex-direction:column;gap:8px}.branch-node:hover{border-color:var(--gold);background:#315b59}.branch-node b{font:600 26px Georgia}.end-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(100%,950px)}.end-grid>div{border:1px solid #8c7957;padding:17px;text-align:center;border-radius:7px;display:flex;flex-direction:column;gap:5px}.end-grid b{font:600 19px Georgia}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}.filter{border:1px solid #c9c9be;background:transparent;color:var(--ink);border-radius:30px;padding:9px 16px;font-size:12px;font-weight:700}.filter.active{background:var(--ink);color:white}.toolbar .outline-btn{margin-left:auto}.chapter-list{display:grid;gap:12px}.chapter{border:1px solid #ddd7ca;border-radius:8px;background:#fff;overflow:hidden}.chapter.hidden{display:none}.chapter summary{cursor:pointer;display:flex;align-items:center;gap:18px;padding:20px 24px;list-style:none}.chapter summary::-webkit-details-marker{display:none}.chapter summary:after{content:'+';font-size:25px;margin-left:auto;color:var(--gold)}.chapter[open] summary:after{content:'−'}.chapter-index{font:600 30px Georgia;color:var(--gold);min-width:55px}.chapter-title{font:600 25px Georgia}.chapter-label{font-size:10px;color:#72817f;letter-spacing:1px;text-transform:uppercase}.chapter-body{padding:0 28px 25px 98px}.focus{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.focus div{background:#f4f0e8;padding:13px;border-radius:5px;font-size:13px}.focus b{display:block;color:#9b763e}.chapter-body ul{padding-left:20px}.choice-table{width:100%;border-collapse:collapse;font-size:13px}.choice-table th,.choice-table td{padding:10px;border-bottom:1px solid #e6e2d9;text-align:left;vertical-align:top}.choice-table th{background:#f4f0e8}.light-alt{max-width:none;background:#f1ecdf}.light-alt>.section-heading,.light-alt>.ending-grid,.light-alt>.table-wrap,.light-alt>.muted{max-width:1156px;margin-left:auto;margin-right:auto}.ending-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.ending-card{background:#fff;border-radius:8px;overflow:hidden;border:1px solid #e1d8c7}.ending-art{height:130px;display:grid;place-items:center;font:70px Georgia}.gold{background:#ead7a7;color:#805e2c}.teal{background:#c2d7d3;color:#1b5556}.rust{background:#dfc6b1;color:#945e3b}.ending-content{padding:24px}.ending-content small{color:#a67d42;font-size:10px;font-weight:800;letter-spacing:1px}.ending-content h3{font-size:29px;margin-top:12px}.ending-content p{font-size:13px;color:#5b6868}.ending-content b{font-size:12px}.control{margin:0 0 23px}.control label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:8px}.control input{width:100%;accent-color:#a87d39}.big-number{font:700 100px Georgia;color:var(--gold);line-height:1.1;margin:12px 0}.outcome h3{font-size:38px}.outcome .note{margin-bottom:20px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;background:white}th,td{text-align:left;padding:14px 18px;border-bottom:1px solid #e4e0d6;font-size:13px}th{background:#203b3e;color:#fff}footer{background:#10292e;color:#d8e1dc;padding:35px max(32px,calc((100vw - 1156px)/2));display:flex;justify-content:space-between;gap:20px;font-size:12px;flex-wrap:wrap}footer b{color:#d5b47b;letter-spacing:1px}@media(max-width:950px){.top nav{display:none}.hero{grid-template-columns:1fr}.hero-inner{padding:65px 32px}.hero-art{min-height:260px}.ship{font-size:180px}.two-col,.ending-grid{grid-template-columns:1fr}.section{padding:65px 22px}.chapter-body{padding-left:24px}.end-grid{grid-template-columns:1fr}.stats{gap:20px}}@media(max-width:540px){.top{padding:12px 16px}.top>.outline-btn{font-size:10px;padding:8px}.brand{font-size:10px}.branch-grid,.focus{grid-template-columns:1fr}.chapter summary{padding:16px}.chapter-index{min-width:35px;font-size:23px}.chapter-title{font-size:21px}.hero-inner{padding:45px 22px}.stats{gap:16px}.stats strong{font-size:28px}}@media print{.top,.toolbar,.hero-actions,.control input,#resetSim{display:none!important}.hero{min-height:auto;display:block;color:#132b2e;background:white}.hero-inner{padding:25px}.hero-art{display:none}.hero h1{font-size:50px}.hero h1 span{color:#946a29}.section,.dark-section,.light-alt{padding:20px;max-width:none;background:white;color:#132b2e}.flow-node,.branch-node,.end-grid>div{color:#132b2e;background:white;border-color:#777}.flow-node span,.branch-node span{color:#333}.chapter.hidden{display:block}.chapter-body{display:block!important}.panel,.chapter,.ending-card{break-inside:avoid}footer{display:none}h2{font-size:36px}}
/* Royal Harbor visual identity — based on the supplied illustration */
:root{--ink:#492c2a;--deep:#7f1c32;--gold:#f2b933;--paper:#fff8e9;--cream:#fff0cb;--muted:#75645e;--royal:#9a2138;--ocean:#087fc5;--leaf:#437b27;--outline:#d9a452}
body{background:var(--paper);color:var(--ink)}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif}h1{font-size:clamp(54px,7.7vw,110px);text-shadow:0 3px 0 #4d1427,0 7px 22px #330c2470}h1 span{color:#ffe18b;text-shadow:0 3px 0 #a74e22,0 6px 18px #411120}
.top{background:#79192ff5;border-bottom:3px solid #e7ab37;box-shadow:0 5px 20px #43132630}.brand em,.seal{color:#ffd46a}.top nav a:hover{color:#ffe39a}
.primary-btn,.outline-btn{border-radius:12px;border:2px solid #f0bb50;box-shadow:0 3px 0 #793b24;font-weight:800}.primary-btn{background:linear-gradient(180deg,#ffe18b,#f2ae37);color:#6b2430}.primary-btn:hover,.outline-btn:hover{transform:translateY(-2px)}
.hero{background:linear-gradient(115deg,#6b1730 0%,#a12b43 57%,#df7a3c 100%);grid-template-columns:1fr .92fr;min-height:690px}.hero-inner{padding-top:88px}.hero-inner>p:not(.tagline){color:#fff4dd}.tagline{color:#ffe2a5}.eyebrow{color:#c58b25}.hero .eyebrow{color:#ffe2a1}.stats{border-color:#ffdb9a80}.stats strong{color:#ffe39b}.stats span{color:#fff0d4}
.hero-art{min-height:690px;background:#1187c6;isolation:isolate}.hero-image{position:absolute;inset:0;background-image:url('royal-harbor.webp');background-size:cover;background-position:center 37%;filter:saturate(1.06)}.hero-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#7f1c322b,transparent 28%),linear-gradient(0deg,#4b17388c,transparent 25%)}.art-label{z-index:2;color:#fff7d8;text-shadow:0 2px 6px #321a16;background:#8e2038b8;padding:7px 11px;border:1px solid #ffd47c;border-radius:8px}
.section-heading h2{color:#7f1c32}.section-heading .eyebrow{color:#ad7123}.panel,.chapter,.ending-card{border:2px solid #e5c68c;border-radius:16px;box-shadow:0 8px 0 #d9b66a22,0 12px 28px #6c3e2720}.panel{background:#fffdf6}.panel p{color:#64544b}.feature{border-color:#e9ac30}.feature b{color:#87253a}.note{background:#fff0cd;border-left:5px solid #e7ad36;border-radius:10px}.dark-section{background:linear-gradient(145deg,#7b1d35,#4c1835 60%,#283c63);color:#fff6e3}.dark-section .section-heading h2{color:#fff4d5}.flow-node{background:#9b2943;border:2px solid #f3c56a;border-radius:14px}.flow-node span,.branch-node span{color:#ffeed6}.flow-node small,.branch-node small,.end-grid small{color:#ffe099}.flow-line{background:#f0b944}.flow-line:after{color:#f6cf70}.decision{background:#bd4b37;border-color:#ffdf83}.branch-node{background:#146f9b;border:2px solid #e8c46c;border-radius:14px;box-shadow:0 6px 0 #3d173b}.branch-node:nth-child(2){background:#34773f}.branch-node:hover{background:#9a2943;border-color:#ffe18b}.end-grid>div{background:#86263d;border:2px solid #e7bd61;border-radius:13px}
.filter{border:2px solid #d7aa63;background:#fffaf0;color:#7b2839}.filter.active{background:#91273e;color:#fff5d9}.chapter summary{background:linear-gradient(90deg,#fff9e9,#fffdf8)}.chapter-index{color:#b47c1c}.chapter summary:after{color:#a42640}.chapter-label{color:#9d654a}.focus div,.choice-table th{background:#fff1d5}.focus b{color:#9d2a40}.light-alt{background:#fbeacb}.ending-art{height:165px;background-image:linear-gradient(0deg,#6d1e3b7d,transparent 65%),url('royal-harbor.webp');background-size:cover;background-position:center 22%;color:#fff3bd;text-shadow:0 2px 8px #431e25}.ending-art.teal{background-position:center 52%}.ending-art.rust{background-position:center 78%}.ending-content small{color:#a12a3e}.ending-content h3{color:#842039}.control input{accent-color:#a82643}.big-number{color:#b57a21}.outcome h3{color:#8b243c}th{background:#8d243c;color:#fff4d4}td{background:#fffdf6}footer{background:#681b33;color:#ffefce;border-top:4px solid #dba83b}footer b{color:#ffd573}
@media(max-width:950px){.hero{grid-template-columns:1fr}.hero-art{min-height:470px}.hero-image{background-position:center 33%}.hero-inner{padding:60px 32px}.hero h1{font-size:clamp(54px,10vw,90px)}}
@media(max-width:540px){.hero-art{min-height:440px}.hero-inner{padding:48px 22px}.hero h1{font-size:56px}.art-label{font-size:9px;right:12px}.top{gap:8px}.brand{letter-spacing:.5px}}
@media print{body{background:white}.hero{color:#452b27;background:white}.hero h1{text-shadow:none}.hero h1 span{color:#8d243c;text-shadow:none}.hero-art{display:none}.section-heading h2{color:#452b27}.dark-section{background:white;color:#452b27}.dark-section .section-heading h2{color:#452b27}.flow-node,.branch-node,.end-grid>div{background:white;color:#452b27;box-shadow:none}.flow-node span,.branch-node span{color:#452b27}.ending-art{background:#eee!important;color:#333;text-shadow:none}}

/* ===== Buku tamu / komentar per bagian ===== */
.comment-thread{margin-top:38px;background:#fffdf6;border:2px solid #e5c68c;border-radius:16px;box-shadow:0 8px 0 #d9b66a22,0 12px 28px #6c3e2720;padding:22px 24px;scroll-margin-top:90px}
.comment-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.comment-thread h3{margin:0;font-size:24px;color:#7f1c32}
.comment-badge{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#87253a;background:#fff0cd;border:1px solid #e7ad36;border-radius:999px;padding:4px 12px}
.comment-alert{font-size:13px;font-weight:600;border-radius:10px;padding:10px 14px;margin:0 0 12px}
.comment-alert.ok{background:#e7f5e4;border:1px solid #7fae6d;color:#33531f}
.comment-alert.err{background:#fbe4e4;border:1px solid #d47a7a;color:#7d2020}
.comment-form .form-row{margin-bottom:12px}
.comment-form label{display:block;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9d654a;margin-bottom:6px}
.comment-form input[type=text],.comment-form textarea{width:100%;font:16px/1.6 Inter,Arial,sans-serif;color:#492c2a;background:#fffaf0;border:2px solid #d7aa63;border-radius:10px;padding:11px 13px}
.comment-form input[type=text]:focus,.comment-form textarea:focus{outline:none;border-color:#a82643;box-shadow:0 0 0 3px #a8264326}
.comment-form textarea{min-height:96px;resize:vertical}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:2px}
.form-foot .hint{font-size:11px;color:#75645e}
.comment-form .primary-btn{border:none;padding:12px 24px;font-size:13px}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.comment-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.comment-card{background:#fff8e9;border:1px solid #ecd9a8;border-radius:12px;padding:14px 16px}
.comment-meta{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.comment-avatar{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#91273e;color:#ffe39b;font-weight:800;font-size:15px}
.comment-name{font-size:14px;color:#6b2430}
.comment-time{display:block;font-size:11px;color:#75645e}
.comment-text{margin:0;font-size:14px;color:#4c3a33;overflow-wrap:anywhere}
.comment-empty{margin:16px 0 0;font-size:13px;font-style:italic;color:#75645e}
@media(max-width:820px){.top{flex-wrap:wrap;justify-content:center}.top nav{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:8px 16px;padding-top:8px;border-top:1px solid #ffffff22}}
@media(max-width:540px){.comment-thread{margin-top:28px;padding:18px 14px;border-radius:13px}.comment-thread h3{font-size:20px}.form-foot{flex-direction:column;align-items:stretch}.comment-form .primary-btn{width:100%}.comment-alert{font-size:12px}}
@media print{.comment-thread{display:none}}
.top nav a.active{color:#ffe39a}
.log-filter{margin-bottom:10px}
.log-filter a.filter{display:inline-block;padding:8px 14px;border-radius:10px;font-weight:800;font-size:12px}
.log-count{font-size:13px;color:#64544b;margin:0 0 14px}
.log-count b{color:#7f1c32}
.log-section-chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#8a5a12;background:#fff0cd;border:1px solid #e7ad36;border-radius:999px;padding:2px 10px;margin-bottom:4px}
.log-list .comment-name{display:block}
@media(max-width:540px){.log-filter{display:grid;grid-template-columns:1fr 1fr;gap:8px}.log-filter a.filter{text-align:center;padding:9px 10px;font-size:11px}}