.tt-section,
.ng {
--tt-ink: #f6ecd9;
--tt-muted: rgba(240, 228, 205, 0.62);
--tt-line: rgba(214, 171, 92, 0.25);
--tt-panel: rgba(26, 20, 13, 0.9);
--tt-gold: #e0b355;
--tt-gold-deep: #a97a20;
--tt-ember: #ff8a3c;
--tt-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
}
.tt-section *,
.tt-section *::before,
.tt-section *::after,
.ng *,
.ng *::before,
.ng *::after {
box-sizing: border-box;
} .tt-section span,
.ng span {
align-items: normal;
}
.tt-section .trial-btn-spinner[hidden],
.tt-section .trial-btn-label[hidden] {
display: none !important;
} .tt-section {
margin: 48px 0;
padding: 56px 0 60px;
color: var(--tt-ink);
background:
radial-gradient(700px 360px at 80% 0%, rgba(224, 179, 85, 0.12), transparent 70%),
#0a0805;
}
.tt-wrap {
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
}
.tt-head {
margin-bottom: 22px;
text-align: center;
}
.tt-tag {
display: inline-block !important;
padding: 3px 12px;
color: var(--tt-gold);
border: 1px solid var(--tt-line);
border-radius: 999px;
font-size: 13px;
letter-spacing: 0.06em;
}
.tt-h2 {
margin: 12px 0 6px !important;
padding: 0 !important;
color: var(--tt-ink) !important;
font-size: clamp(24px, 3.2vw, 34px) !important;
font-weight: 900;
letter-spacing: 0.02em;
}
.tt-h2::before,
.tt-h2::after {
content: none !important;
}
.tt-sub {
margin: 0;
color: var(--tt-muted);
font-size: 15px;
}
.tt-card {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
grid-template-areas:
"brief scene"
"form  scene";
gap: 18px 26px;
padding: 22px;
background: var(--tt-panel);
border: 1px solid var(--tt-line);
border-radius: 18px;
box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
.tt-brief { grid-area: brief; }
.tt-scene { grid-area: scene; }
.tt-form  { grid-area: form; align-self: end; }
.tt-kicker {
margin: 0 0 8px;
color: var(--tt-gold);
font-family: var(--tt-mono);
font-size: 12px;
letter-spacing: 0.14em;
}
.tt-story {
margin: 0 0 10px;
color: var(--tt-ink);
font-size: 16px;
line-height: 1.75;
}
.tt-task {
margin: 0;
color: var(--tt-muted);
font-size: 14px;
}
.tt-task strong {
color: var(--tt-gold);
} .tt-scene {
--x: 69%;
--y: 46%;
position: relative;
overflow: hidden;
border-radius: 12px;
background: #0d1117;
cursor: none;
touch-action: none;
user-select: none;
outline: none;
}
.tt-scene:focus-visible {
box-shadow: 0 0 0 3px rgba(224, 179, 85, 0.6);
}
.tt-scene img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
object-fit: cover;
pointer-events: none;
}
.tt-dark {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle clamp(56px, 11vw, 96px) at var(--x) var(--y),
rgba(255, 214, 140, 0.08) 0%,
rgba(255, 214, 140, 0.04) 55%,
rgba(4, 4, 6, 0.9) 80%,
rgba(4, 4, 6, 0.97) 100%);
}
.tt-tip {
position: absolute;
left: 50%;
bottom: 12px;
margin: 0;
padding: 6px 12px;
transform: translateX(-50%);
color: var(--tt-ink);
background: rgba(10, 8, 5, 0.8);
border: 1px solid var(--tt-line);
border-radius: 999px;
font-size: 12.5px;
white-space: nowrap;
pointer-events: none;
}
.tt-label {
display: block;
margin: 0 0 8px;
color: var(--tt-ink);
font-size: 15px;
font-weight: 700;
}
.tt-row {
display: flex;
gap: 8px;
}
.tt-section .tt-input {
flex: 1 1 auto;
min-width: 0;
height: 48px;
margin: 0;
padding: 0 14px;
color: var(--tt-ink);
background: rgba(8, 6, 4, 0.75);
border: 1px solid var(--tt-line);
border-radius: 12px;
font-family: var(--tt-mono);
font-size: 18px;
letter-spacing: 0.3em;
box-shadow: none;
}
.tt-section .tt-input:focus {
outline: none;
border-color: var(--tt-gold);
}
.tt-section .tt-btn {
flex: 0 0 auto;
min-width: 88px;
height: 48px;
padding: 0 22px;
color: #23170a;
background: linear-gradient(135deg, #f3d489, var(--tt-gold) 55%, var(--tt-gold-deep));
border: 0;
border-radius: 12px;
font-size: 16px;
font-weight: 800;
white-space: nowrap;
cursor: pointer;
}
.tt-section .tt-btn:disabled {
opacity: 0.7;
cursor: wait;
}
.tt-section .trial-play-feedback {
min-height: 20px;
margin-top: 8px;
font-size: 13.5px;
}
.tt-section .trial-play-feedback.is-fail { color: var(--tt-ember); }
.tt-section .trial-play-feedback.is-ok   { color: #8fe0a4; }
.tt-hint-btn {
padding: 0;
color: var(--tt-muted);
background: none;
border: 0;
font-size: 13px;
text-decoration: underline;
cursor: pointer;
}
.tt-hint {
margin: 6px 0 0;
padding: 10px 12px;
color: var(--tt-ink);
background: rgba(224, 179, 85, 0.1);
border-radius: 10px;
font-size: 13.5px;
}
@media (max-width: 800px) {
.tt-section {
margin: 32px 0;
padding: 40px 0 44px;
}
.tt-wrap {
padding: 0 16px;
}
.tt-card {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"brief"
"scene"
"form";
padding: 16px;
}
.tt-scene {
cursor: auto;
}
} .ng {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1300;
width: 268px;
overflow: hidden;
color: var(--tt-ink);
background: rgba(20, 15, 9, 0.95);
border: 1px solid rgba(224, 179, 85, 0.35);
border-radius: 14px;
box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
font-size: 14px;
line-height: 1.5;
}
.ng.is-hit {
animation: ng-hit 0.9s ease-out;
}
@keyframes ng-hit {
0% { box-shadow: 0 0 0 0 rgba(224, 179, 85, 0.6); }
70% { box-shadow: 0 0 0 14px rgba(224, 179, 85, 0); }
100% { box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.9); }
}
.ng__toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 11px 14px;
color: var(--tt-ink);
background: none;
border: 0;
border-bottom: 1px solid rgba(224, 179, 85, 0.18);
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.ng__toggle b {
margin-left: auto;
color: var(--tt-gold);
font-family: var(--tt-mono);
font-size: 13px;
}
.ng__toggle i {
color: var(--tt-muted);
font-style: normal;
transition: transform 0.2s;
}
.ng.is-collapsed .ng__toggle {
border-bottom-color: transparent;
}
.ng.is-collapsed .ng__toggle i {
transform: rotate(180deg);
}
.ng.is-collapsed .ng__body {
display: none;
}
.ng__steps {
margin: 0;
padding: 8px 8px 4px;
list-style: none;
counter-reset: ng-step;
}
.ng__steps li {
margin: 0;
counter-increment: ng-step;
}
.ng__steps button {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 8px;
color: var(--tt-muted);
background: none;
border: 0;
border-radius: 9px;
font-size: 13.5px;
text-align: left;
cursor: pointer;
}
.ng__steps button:hover {
color: var(--tt-ink);
background: rgba(224, 179, 85, 0.1);
}
.ng__mark {
flex: 0 0 20px;
display: flex !important;
align-items: center !important;
justify-content: center;
height: 20px;
color: var(--tt-gold);
border: 1px solid rgba(224, 179, 85, 0.4);
border-radius: 50%;
font-family: var(--tt-mono);
font-size: 11px;
}
.ng__mark::before {
content: counter(ng-step);
}
.ng__steps .is-now button {
color: var(--tt-ink);
font-weight: 700;
}
.ng__steps .is-now .ng__mark {
background: rgba(224, 179, 85, 0.16);
border-color: var(--tt-gold);
}
.ng__steps .is-done button {
color: rgba(240, 228, 205, 0.42);
text-decoration: line-through;
}
.ng__steps .is-done .ng__mark {
color: #23170a;
background: var(--tt-gold);
border-color: var(--tt-gold);
}
.ng__steps .is-done .ng__mark::before {
content: "✓";
}
.ng__reward {
margin: 0;
padding: 10px 14px 12px;
color: var(--tt-muted);
border-top: 1px solid rgba(224, 179, 85, 0.18);
font-size: 12.5px;
}
.ng__reward a {
color: var(--tt-gold) !important;
font-weight: 700;
text-decoration: underline !important;
}
@media (max-width: 640px) {
.ng {
right: 12px;
left: 12px;
bottom: 84px; width: auto;
}
} @media (min-width: 641px) {
.ng {
bottom: 96px;
}
}.tt-section,
.ng {
--tt-ink: #f6ecd9;
--tt-muted: rgba(240, 228, 205, 0.62);
--tt-line: rgba(214, 171, 92, 0.25);
--tt-panel: rgba(26, 20, 13, 0.9);
--tt-gold: #e0b355;
--tt-gold-deep: #a97a20;
--tt-ember: #ff8a3c;
--tt-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
}
.tt-section *,
.tt-section *::before,
.tt-section *::after,
.ng *,
.ng *::before,
.ng *::after {
box-sizing: border-box;
} .tt-section span,
.ng span {
align-items: normal;
}
.tt-section .trial-btn-spinner[hidden],
.tt-section .trial-btn-label[hidden] {
display: none !important;
} .tt-section {
margin: 48px 0;
padding: 56px 0 60px;
color: var(--tt-ink);
background:
radial-gradient(700px 360px at 80% 0%, rgba(224, 179, 85, 0.12), transparent 70%),
#0a0805;
}
.tt-wrap {
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
}
.tt-head {
margin-bottom: 22px;
text-align: center;
}
.tt-tag {
display: inline-block !important;
padding: 3px 12px;
color: var(--tt-gold);
border: 1px solid var(--tt-line);
border-radius: 999px;
font-size: 13px;
letter-spacing: 0.06em;
}
.tt-h2 {
margin: 12px 0 6px !important;
padding: 0 !important;
color: var(--tt-ink) !important;
font-size: clamp(24px, 3.2vw, 34px) !important;
font-weight: 900;
letter-spacing: 0.02em;
}
.tt-h2::before,
.tt-h2::after {
content: none !important;
}
.tt-sub {
margin: 0;
color: var(--tt-muted);
font-size: 15px;
}
.tt-card {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
grid-template-areas:
"brief scene"
"form  scene";
gap: 18px 26px;
padding: 22px;
background: var(--tt-panel);
border: 1px solid var(--tt-line);
border-radius: 18px;
box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
.tt-brief { grid-area: brief; }
.tt-scene { grid-area: scene; }
.tt-form  { grid-area: form; align-self: end; }
.tt-kicker {
margin: 0 0 8px;
color: var(--tt-gold);
font-family: var(--tt-mono);
font-size: 12px;
letter-spacing: 0.14em;
}
.tt-story {
margin: 0 0 10px;
color: var(--tt-ink);
font-size: 16px;
line-height: 1.75;
}
.tt-task {
margin: 0;
color: var(--tt-muted);
font-size: 14px;
}
.tt-task strong {
color: var(--tt-gold);
} .tt-scene {
--x: 69%;
--y: 46%;
position: relative;
overflow: hidden;
border-radius: 12px;
background: #0d1117;
cursor: none;
touch-action: none;
user-select: none;
outline: none;
}
.tt-scene:focus-visible {
box-shadow: 0 0 0 3px rgba(224, 179, 85, 0.6);
}
.tt-scene img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
object-fit: cover;
pointer-events: none;
}
.tt-dark {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle clamp(56px, 11vw, 96px) at var(--x) var(--y),
rgba(255, 214, 140, 0.08) 0%,
rgba(255, 214, 140, 0.04) 55%,
rgba(4, 4, 6, 0.9) 80%,
rgba(4, 4, 6, 0.97) 100%);
}
.tt-tip {
position: absolute;
left: 50%;
bottom: 12px;
margin: 0;
padding: 6px 12px;
transform: translateX(-50%);
color: var(--tt-ink);
background: rgba(10, 8, 5, 0.8);
border: 1px solid var(--tt-line);
border-radius: 999px;
font-size: 12.5px;
white-space: nowrap;
pointer-events: none;
}
.tt-label {
display: block;
margin: 0 0 8px;
color: var(--tt-ink);
font-size: 15px;
font-weight: 700;
}
.tt-row {
display: flex;
gap: 8px;
}
.tt-section .tt-input {
flex: 1 1 auto;
min-width: 0;
height: 48px;
margin: 0;
padding: 0 14px;
color: var(--tt-ink);
background: rgba(8, 6, 4, 0.75);
border: 1px solid var(--tt-line);
border-radius: 12px;
font-family: var(--tt-mono);
font-size: 18px;
letter-spacing: 0.3em;
box-shadow: none;
}
.tt-section .tt-input:focus {
outline: none;
border-color: var(--tt-gold);
}
.tt-section .tt-btn {
flex: 0 0 auto;
min-width: 88px;
height: 48px;
padding: 0 22px;
color: #23170a;
background: linear-gradient(135deg, #f3d489, var(--tt-gold) 55%, var(--tt-gold-deep));
border: 0;
border-radius: 12px;
font-size: 16px;
font-weight: 800;
white-space: nowrap;
cursor: pointer;
}
.tt-section .tt-btn:disabled {
opacity: 0.7;
cursor: wait;
}
.tt-section .trial-play-feedback {
min-height: 20px;
margin-top: 8px;
font-size: 13.5px;
}
.tt-section .trial-play-feedback.is-fail { color: var(--tt-ember); }
.tt-section .trial-play-feedback.is-ok   { color: #8fe0a4; }
.tt-hint-btn {
padding: 0;
color: var(--tt-muted);
background: none;
border: 0;
font-size: 13px;
text-decoration: underline;
cursor: pointer;
}
.tt-hint {
margin: 6px 0 0;
padding: 10px 12px;
color: var(--tt-ink);
background: rgba(224, 179, 85, 0.1);
border-radius: 10px;
font-size: 13.5px;
}
@media (max-width: 800px) {
.tt-section {
margin: 32px 0;
padding: 40px 0 44px;
}
.tt-wrap {
padding: 0 16px;
}
.tt-card {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"brief"
"scene"
"form";
padding: 16px;
}
.tt-scene {
cursor: auto;
}
} .ng {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1300;
width: 268px;
overflow: hidden;
color: var(--tt-ink);
background: rgba(20, 15, 9, 0.95);
border: 1px solid rgba(224, 179, 85, 0.35);
border-radius: 14px;
box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
font-size: 14px;
line-height: 1.5;
}
.ng.is-hit {
animation: ng-hit 0.9s ease-out;
}
@keyframes ng-hit {
0% { box-shadow: 0 0 0 0 rgba(224, 179, 85, 0.6); }
70% { box-shadow: 0 0 0 14px rgba(224, 179, 85, 0); }
100% { box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.9); }
}
.ng__toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 11px 14px;
color: var(--tt-ink);
background: none;
border: 0;
border-bottom: 1px solid rgba(224, 179, 85, 0.18);
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.ng__toggle b {
margin-left: auto;
color: var(--tt-gold);
font-family: var(--tt-mono);
font-size: 13px;
}
.ng__toggle i {
color: var(--tt-muted);
font-style: normal;
transition: transform 0.2s;
}
.ng.is-collapsed .ng__toggle {
border-bottom-color: transparent;
}
.ng.is-collapsed .ng__toggle i {
transform: rotate(180deg);
}
.ng.is-collapsed .ng__body {
display: none;
}
.ng__steps {
margin: 0;
padding: 8px 8px 4px;
list-style: none;
counter-reset: ng-step;
}
.ng__steps li {
margin: 0;
counter-increment: ng-step;
}
.ng__steps button {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 8px;
color: var(--tt-muted);
background: none;
border: 0;
border-radius: 9px;
font-size: 13.5px;
text-align: left;
cursor: pointer;
}
.ng__steps button:hover {
color: var(--tt-ink);
background: rgba(224, 179, 85, 0.1);
}
.ng__mark {
flex: 0 0 20px;
display: flex !important;
align-items: center !important;
justify-content: center;
height: 20px;
color: var(--tt-gold);
border: 1px solid rgba(224, 179, 85, 0.4);
border-radius: 50%;
font-family: var(--tt-mono);
font-size: 11px;
}
.ng__mark::before {
content: counter(ng-step);
}
.ng__steps .is-now button {
color: var(--tt-ink);
font-weight: 700;
}
.ng__steps .is-now .ng__mark {
background: rgba(224, 179, 85, 0.16);
border-color: var(--tt-gold);
}
.ng__steps .is-done button {
color: rgba(240, 228, 205, 0.42);
text-decoration: line-through;
}
.ng__steps .is-done .ng__mark {
color: #23170a;
background: var(--tt-gold);
border-color: var(--tt-gold);
}
.ng__steps .is-done .ng__mark::before {
content: "✓";
}
.ng__reward {
margin: 0;
padding: 10px 14px 12px;
color: var(--tt-muted);
border-top: 1px solid rgba(224, 179, 85, 0.18);
font-size: 12.5px;
}
.ng__reward a {
color: var(--tt-gold) !important;
font-weight: 700;
text-decoration: underline !important;
}
@media (max-width: 640px) {
.ng {
right: 12px;
left: 12px;
bottom: 84px; width: auto;
}
} @media (min-width: 641px) {
.ng {
bottom: 96px;
}
}